Custom CSV DataLoader Lightning Component (Part 1 — CSV Input)
My name is Luis Fernando, I’m 21, working as a Salesforce Developer at IBM.
Today I will show you how I’m creating my custom DataLoader for CSV files Lightning Component.
This project is just for testing and learning purposes. We already have some tools for importing data into Salesforce (one of the bests being Dataloader.io in my opinion).
But it’s still funny and interesting to create Lightning Components as an exercise :)
Project Introduction
So our Lightning Component should be able to accept a CSV file, preview it’s content dynamically on a table, let the user choose the object he wants to import data in, have a mapping section to map the imported data columns to the chosen object fields and create the records for that object.
The way I chose to handle the CSV data is not the only way, nor the right one. It was just easier for me to do it this way. If you have any suggestions about a better method to do so, feel free to post on this article’s comment section!
I will divide the development of this Component in 3 parts:
- 1 — CSV File Input (this part)
- 2 — Object Selection and Column Mapping
- 3 — Importing Records
Starting the Project
First of all, I had a moment to think about what I should do with the CSV after the file was uploaded in the component.
I ended up building some classes for a “CSV Object”, so I could easily store data on different fields.
All the files created for Part 1:
- CSVObject (APEX Class for the CSVObject)
- CSVHeader (APEX Class for the headers on our CSV file)
- CSVCreator.cls (APEX Class to instantiate the CSVObject with the CSV file coming from the Component)
- CSVDataLoader.cmp (The Lightning Component)
- CSVDataLoaderController.js (The JS Controller)
- CSVDataLoaderHelper.js (The JS Helper)
The CSV Object
This APEX Class will be used to store the imported CSV data.
There are 3 variables here:
- A List of headers (I used another class to store some more data about the column)
- A List of Lists for the lines (List of lines, each line being a List of String for each column)
- Line Count
The CSV Header
This APEX Class will be used to store important information about the individual columns.
In the future, we can use this Object to store the data type of the column, that can be helpful for future mapping and Records creation.
The CSV Creator
This class is used to get the CSV String coming from the uploaded CSV file on the Lightning Component and instantiating the CSVObject with the CSVHeaders, the data lines and the line count.
The method used to return the CSV Object instantiated is the getCSVObject, which takes one input parameter (the CSV String).
I had to follow some steps to get what I wanted:
1 — Separate the lines in different Strings and put them inside a List of Strings
2 — Get the first line and split it on all commas, to get the headers. Iterate through this new List of Strings, instantiate the CSVHeaders and put that in the headers list.
3 — Get the rest of the lines and split them on all the commas too, but now we can have some fields that have a comma inside the value, so we need to “merge” those fields together and create a List of Strings (lines).
4 — Use the headers and the lines Lists to instantiate the CSVObject and return it.
The Component
Now we got to the Component. For now, we just want to have an option to upload the CSV file and show the data on a Table after the upload is done.
I created a card for the Component with an input field, a table and a button to clean the values.
The JS Controller
On the JS Controller for this Component, we need to handle the CSV Upload, CSV Creation and Data Cleaning.
When the file is uploaded, it is converted to a String using FileReader() and it’s saved on the attribute csvString.
When the attribute value changes, the handleGetCSV function is called, which calls another function on the helper, to create the CSV Object.
And when the user clicks on the Clean Data button, our clenData function just set both those attributes to null.
The JS Helper
We use the Helper on this Component to call our CSVCreator APEX Class with our CSV String.
As you can see, we get the CSV String from our Controller, set it as a parameter, call the APEX getCSVObject method and save the response to the csvObject attribute on our Lightning Component.
Testing and Results
To test our Lightning Component, I created an app on Sales Cloud and put the Lightning Component on it.
When we upload a CSV file, our table is created.
So here it is, our dynamic table created from the uploaded CSV!
Next Steps
Now that we have our Lightning Component handling the CSV upload, we need to think about the Object Selection and Field Mapping to import our records.
We’ll do that on Part 2 of this tutorial, so stay tuned! Thanks for reading :)
