InBrowserCsvParser.xml

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
	<models>
<model id="Input" limit="20" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
	<fields>
		<field id="Data" displaytype="TEXT" label="Data"/>
		<field id="ImportStatus" displaytype="PICKLIST" label="Import Status" ogdisplaytype="TEXT" picklistsource="manual" returntype="TEXT" defaultvaluetype="fieldvalue" defaultValue="ready" enclosevalueinquotes="true">
			<picklistentries>
				<entry value="inprogress" label="In Progress"/>
				<entry value="ready" label="Ready"/>
			</picklistentries>
		</field>
		<field id="NewField1" displaytype="TEXT"/>
	</fields>
	<conditions/>
	<actions/>
</model>
<model id="Data" limit="20" query="true" createrowifnonefound="false" datasource="Ui-Only" processonclient="true">
	<fields>
		<field id="first_name" displaytype="TEXT" label="First Name"/>
		<field id="last_name" displaytype="TEXT" label="Last Name"/>
		<field id="birthdate" displaytype="DATETIME" label="Birthdate" ogdisplaytype="TEXT"/>
		<field id="email" displaytype="TEXT" label="Email"/>
		<field id="username" displaytype="TEXT" label="Username"/>
		<field id="id" displaytype="TEXT" label="Id"/>
	</fields>
	<conditions/>
	<actions/>
</model>
</models>
	<components>
<pagetitle model="Input" uniqueid="sk-pUJ-218">
	<maintitle>Upload People from CSV</maintitle>
	<actions>
		<action type="multi" label="Remove all people" uniqueid="sk-pUi-321" secondary="true">
			<actions>
				<action type="cancel">
					<models>
						<model>Data</model>
					</models>
				</action>
			</actions>
		</action>
	</actions>
</pagetitle>
<file editable="true" storeas="uploadfile" displayas="filename" deleteable="true" uniqueid="sk-pUP-226" saveto="field" model="Input" field="Data">
	<uploadsuccessactions>
		<action type="updateRow" fieldmodel="Input" affectedrows="context">
			<updates>
				<update valuesource="fieldvalue" field="ImportStatus" enclosevalueinquotes="true" value="inprogress"/>
			</updates>
		</action>
		<action type="custom" snippet="parseCsvData">
			<onerroractions>
				<action type="blockUI" message="There was an error importing the CSV. Check JavaScript console for error details." timeout="3000"/>
				<action type="updateRow" message="There was an error" timeout="3000" fieldmodel="Input" affectedrows="context">
					<updates>
						<update valuesource="fieldvalue" field="ImportStatus" enclosevalueinquotes="true" value="ready"/>
					</updates>
				</action>
			</onerroractions>
		</action>
		<action type="updateRow" fieldmodel="Input" affectedrows="context">
			<updates>
				<update valuesource="fieldvalue" field="ImportStatus" enclosevalueinquotes="true" value="ready"/>
			</updates>
		</action>
	</uploadsuccessactions>
	<uploadfailureactions/>
</file>
<template multiple="false" uniqueid="ImportInProgress">
	<contents>Import in progress...</contents>
	<renderconditions logictype="and">
		<rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Input" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="ImportStatus" value="inprogress"/>
	</renderconditions>
</template>
<skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="client" searchbox="true" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Data" mode="edit" allowcolumnreordering="true" responsive="true" uniqueid="ImportedData">
	<fields>
		<field id="id" hideable="true" uniqueid="fi-ppv-3762"/>
		<field id="first_name" uniqueid="fi-pUh-295"/>
		<field id="last_name" uniqueid="fi-pUh-296"/>
		<field id="birthdate" uniqueid="fi-pUh-297"/>
		<field id="email" uniqueid="fi-pUh-298"/>
		<field id="username" uniqueid="fi-pUh-299"/>
	</fields>
	<rowactions>
		<action type="edit"/>
		<action type="delete"/>
	</rowactions>
	<massactions usefirstitemasdefault="true">
		<action type="massupdate"/>
		<action type="massdelete"/>
	</massactions>
	<views>
		<view type="standard"/>
	</views>
	<renderconditions logictype="and">
		<rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="true" fieldmodel="Input" sourcetype="fieldvalue" nosourcerowbehavior="deactivate" field="ImportStatus" value="ready"/>
	</renderconditions>
</skootable>
</components>
	<resources>
		<labels/>
		<javascript>
<jsitem location="inlinesnippet" name="parseCsvData" cachelocation="false">var $ = skuid.$;
var inputData = skuid.$M("Input").getFirstRow().Data;
var reject = function(err) {
    console.error(err);
    return Promise.reject(err);
};

if (!inputData) {
    return reject("No CSV data provided.");
}

var result = Papa.parse(inputData);

if (result.errors &amp;&amp; result.errors.length) {
    return reject("Unable to parse CSV File: " + result.errors.join(", "));
}

if (!result.data.length) {
    return reject("No data found in CSV file");
}

var dataModel = skuid.$M("Data");
var rows = result.data;
// Fuzzy-match the field names to data
var columnNames = rows[0];
var fieldNamesByColumnIndex = [];
var modelFieldIdsByLabel = {};
skuid.$.each(dataModel.fields, function(i, field) {
   modelFieldIdsByLabel[field.label.toLowerCase()] = field.id; 
});
var mappedAllColumns = true;
skuid.$.each(columnNames, function(columnIndex, columnName) {
    var useFieldName;
    // Ideal case -- column name matches field name exactly
    if (dataModel.getField(columnName)) {
        useFieldName = columnName;
    } else {
        // Try lower-cased column name label
        var lowerCaseColumnName = columnName.toLowerCase();
        if (modelFieldIdsByLabel[lowerCaseColumnName]) {
            useFieldName = modelFieldIdsByLabel[lowerCaseColumnName];
        }
    }
    if (!useFieldName) {
        useFieldName = -1;
    }
    fieldNamesByColumnIndex.push(useFieldName);
});

// Now parse the data and create rows
$.each(rows, function(i, sourceRow) {

    // Skip first row, which is the column names
    if (i === 0) return true;

    dataModel.createRow({
        doAppend: true,
        additionalConditions: $.map(sourceRow, function(columnValue, columnIndex) {
            var useFieldName = fieldNamesByColumnIndex[columnIndex];
            if (useFieldName !== -1) {
                return {
                    field: useFieldName,
                    value: columnValue,
                };   
            } else {
                return null;
            }
        }),
    });
});
</jsitem>
<jsitem location="external" name="PapaParse" url="//cdnjs.cloudflare.com/ajax/libs/PapaParse/5.0.0/papaparse.min.js" content_type="text/javascript"/>
</javascript>
		<css/>
		<actionsequences uniqueid="sk-pU4-134"/>
	</resources>
	<styles>
		<styleitem type="background" bgtype="none"/>
	</styles>
</skuidpage>