Create a Batch Upload button in a portal

Posted by mjmadelo on 19-Aug-2014 22:41

Hi everyone!

I have a portal project wherein I want to perform a batch upload of objects by selecting a CSV file from my local computer. Basically, I would like to have the "Import CSV" feature of Rollbase in the portal (client-side) page I have.

Can you suggest (a) way(s) to do this? I am open to using javascript, jQuery and other necessary plugins.

Thank you!

Posted by Godfrey Sorita on 21-Aug-2014 16:15

Hi,

There is a workaround for this. The first step is to create an object which will hold the CSV files. Then, create a new and view page of this object in your portal.

The new page will act as an import page where the CSV file will be uploaded. Make sure to configure the page to redirect to the view page after the record has been saved. 

On the view page, paste the code below to a script component. This script reads the uploaded CSV file and creates records based on its content. 

<script>
/* GLOBAL VARIABLES */
var curLine = 1;
var content;

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "{!file#url}",
        dataType: "text",
        success: function(data) {
			content = data;
			createRecords();
		}
     });
});

function createRecords() {
    var lines = content.split(/\r\n|\n/);
	if (curLine < lines.length) {
		cols = lines[curLine].split(',');
		fieldMap = [];
		fieldMap['firstName'] = cols[0], fieldMap['lastName'] = cols[1], fieldMap['middleName'] = cols[2];
		rbf_createRecord("customer112", fieldMap, false, repeater);
	}
}

function repeater () {
	curLine++;
	createRecords();
}	
</script>

**Please change the field and object integration names in the script.

Regards,

Godfrey 

All Replies

Posted by Godfrey Sorita on 21-Aug-2014 16:15

Hi,

There is a workaround for this. The first step is to create an object which will hold the CSV files. Then, create a new and view page of this object in your portal.

The new page will act as an import page where the CSV file will be uploaded. Make sure to configure the page to redirect to the view page after the record has been saved. 

On the view page, paste the code below to a script component. This script reads the uploaded CSV file and creates records based on its content. 

<script>
/* GLOBAL VARIABLES */
var curLine = 1;
var content;

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "{!file#url}",
        dataType: "text",
        success: function(data) {
			content = data;
			createRecords();
		}
     });
});

function createRecords() {
    var lines = content.split(/\r\n|\n/);
	if (curLine < lines.length) {
		cols = lines[curLine].split(',');
		fieldMap = [];
		fieldMap['firstName'] = cols[0], fieldMap['lastName'] = cols[1], fieldMap['middleName'] = cols[2];
		rbf_createRecord("customer112", fieldMap, false, repeater);
	}
}

function repeater () {
	curLine++;
	createRecords();
}	
</script>

**Please change the field and object integration names in the script.

Regards,

Godfrey 

Posted by mjmadelo on 26-Aug-2014 08:39

Hi Godfrey!

Thank you for your answer. It gave me a general idea of how to attack this problem.

What I did was generally this. In a generic portal page, I created a modal asking for a csv file upload. The jquery-csv libraray (code.google.com/.../jquery-csv) helped me a lot in doing this. After the successful file read and error-checking functions on formatting, records are created dynamically by doing a little modification on your createRecords() function.

That's it! I modeled my solution based from your suggestion. Thank you!

MJ

This thread is closed