In this guide, we will share an example form template that allows CSV file import into a Table that will show all the CSV file rows as individual records.
In the first example, the form we will import the CSV file and convert the data into a JSON object. Next, we will use the JSON object to populate the Table field.
In order to create a form on Formyoula, you need to follow the below step.
Step 1 - Go to https://app.formyoula.com/dashboard and click on New Form.
Step 2 - On Form Builder, you need to select and drag/drop the Formyoula HTML element on Form Builder.
Step 3 - You need to use the below HTML snippet in the Formyoula HTML element.
<div class="container">
<h1>CSV Import</h1>
<br>
<input type="file" id="csv-file" name="files"/>
<br>
</div>
Step 4 - Click on the Pencil icon to edit the Formyoula HTML element.
Step 5 - Copy/Paste the HTML code and click on Apply Changes.
Step 6 - We also need to use a Formyoula TextArea element on Form builder to save/show the CSV data in JSON format.
Drag / Drop the Formyoula TextArea Element on Builder and copy the element Id we need this element Id on Custom Javascript.
Step 7 - Now we need to drag/drop the Javascript element on Form Builder.
Step 8 - Now we need to edit the Javascript Element Just like Step 4 and copy/paste the below code and Save the changes Step 5.
var Papa;
// Define and require the necessary library
require(['//cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.2/papaparse.min.js'], function( papa ) {
// Use the specific library object
Papa = papa;
console.log(papa);
});
function handleFileSelect(evt) {
// Get the file
var file = evt.target.files[0];
// Parse data
Papa.parse(file, {
header: true,
encoding: "ISO-8859-1",
complete: function (results) {
// Use the Formyola TextArea component id.
formyoula.form_fields['8ef1-9cb9-67b8'].set('value', JSON.stringify(results))
},
});
}
// On Document ready
$(document).ready(function () {
// CSV file upload
$('#csv-file').change(handleFileSelect);
});Step 9 - Save the Form changes by clicking Save & Close.
Step 10 - Now you can try the Form from Dashboard.
Note - Sample Template JSON and CSV file
On the main example form, we will copy the JSON data into a Formyoula hidden field that will be used to populate the table with records/rows.
Step 1 - In order to create the new form, we need to follow the same Step 1. Then from Form Builder, you need to select the Formyoula Javascript Field, and you need to copy/paste the generated JSON into the Formyoula Hidden field.
Note - Please make sure to wrap the JSON data into a single quote.
Step 2 - Now we need a Salesforce Table Element to show the JSON record.
Step 3 - We need to use a Formyoula Javascript element to show the JSON record on Salesforce Table. You can repeat Step 7 and Step 9 to save the custom Javascript on the element.
Please copy/paste the below code into the Formyoula Javascript element to build the Table based on JSON data.
Note: You also need to update the Hidden Field component Id in customer Javascript for CSV JSON data.
// On Document ready
$(document).ready(function () {
// Get the JSON data from the Formyoula Javascript Element
if( formyoula.form_fields['7f20-3cc7-4ea5'].attributes.attributes.script ) window.csv_data = formyoula.form_fields['7f20-3cc7-4ea5'].attributes.attributes.script;
// Check for the qoutes and remove the qoutes from JSON string.
if ( typeof(window.csv_data) == "string" && window.csv_data.charAt(0) === "'" && window.csv_data.charAt(window.csv_data.length -1) === "'" )
{
// Remove the qoutes and update the CSV data variable.
window.csv_data = csv_data.substr(1,window.csv_data.length -2)
}
var table_data = typeof(window.csv_data) == "string" ? JSON.parse(window.csv_data) : window.csv_data;
// CSV file upload
if ( table_data.data || window.csv_data ) {
// Init column data variable
var column_data = [];
table_data = table_data.data || window.csv_data;
// Filter empty record
table_data = table_data.filter((obj) => Object.keys(obj).includes('Apellidos') || Object.keys(obj).includes('Surnames'));
// Create Button and set record ID
table_data.forEach((record,index)=>{
record['Action'] = '<button type="button" class="btn btn-primary btn-block formyoula-SalesforceTable-row-button" data-api_name="Id" value="'+index+'">View Record</button>';
record['RecordId'] = index;
});
// Set CSV data for next page;
window.csv_data = table_data;
// Set the column configuration
Object.keys(table_data[0]).forEach((col) => {
console.log(col);
column_data.push({ data: col, title: col.replace(/(^|_)./g, s => s.slice(-1).toUpperCase() ) });
});
// Remove the JSON from entry
formyoula.form_fields['7f20-3cc7-4ea5'].attributes.attributes.script = "";
// Render the table with new data
$('#salesforce_table_8163-e38f-ff81').DataTable({
data: table_data,
columns: column_data,
destroy: true,
});
}
//Listen to SFDC Table row button clicks
$( "body" ).on( "click", ".formyoula-SalesforceTable-row-button", function() {
//Set hidden field with the record ID value to trigger a pre-fill from Salesforce
$( '.next' ).trigger('click');
// Get the record based on record id
var selected_record = _.where(window.csv_data,{RecordId: Number($(this).val())})[0];
// Check if record available
if ( selected_record ) {
var column_name = Object.keys(selected_record);
// Set Selected Record
formyoula.form_fields[column_name[0]].set('value',selected_record[column_name[0]]);
formyoula.form_fields[column_name[1]].set('value',selected_record[column_name[1]]);
formyoula.form_fields[column_name[2]].set('value',selected_record[column_name[2]]);
formyoula.form_fields[column_name[3]].set('value',selected_record[column_name[3]]);
formyoula.form_fields[column_name[4]].set('value',selected_record[column_name[4]]);
formyoula.form_fields[column_name[5]].set('value',selected_record[column_name[5]]);
formyoula.form_fields[column_name[6]].set('value',selected_record[column_name[6]]);
formyoula.form_fields[column_name[7]].set('value',selected_record[column_name[7]]);
}
})
});Step 4 - Now save the form using Step - 9.
Step 5 - You need to create a record detail page - In order to do that you need to give a Name to the page like Record Details then you need to click + icon on the left side of the Form Builder section to create the form. After creating the Form you need to Drag/Drop the Formyoula Text element to Form Builder.
These elements have been used to show the single table record. You can Name it based on CSV file Header Name.
Example - Name, Surnames, Fax, District, Contact Role, Mobile, Email, Instagram. Now save the Form you can repeat Step 9.
Step 6 - Now we need to disable the default Salesforce Settings.
We need to open the form template into the JSON format by adding the /JSON/ in the browser URL.
Example - Please replace your form template-id.
https://app.formyoula.com/Json/templates/627d0134b09964001fbc0e76/edit
It will open a JSON Editor and you need to search the SalesforceTable object in the JSON editor. And use/add the "disable_auto_populate_table": true option in attributes object of SalesforceTable Object.
Now you just need to save the changes by clicking Save Form.
Step 7 - Now try the Form you will be able to see the JSON data in the Salesforce Table element.
Step 8 - To view the record click the View Record button it will take you to the record details page.
Note - Sample JSON Template
For any questions, please get in touch with us at [email protected] or the Formyoula in-app chat 🙂