Salesforce Lightning has been out since a little before Dreamforce of 2015, but we haven’t seen many companies actually use the new Lightning Experience. After doing a bit of research and surveying of our customers and prospects we figured out that many companies still have decent sized road blocks that stand in their way for adopting Salesforce Lightning. For now, we are going to focus in on just things that apply to Lightning Experience, which is the UI portion of the platform.
The most common things we have heard is that people love the new look and feel of Lightning Experience, but they can’t configure the UI as much as they would like. What portion they can configure actually requires someone to have built out Lightning Components for them to use. This then forces them to dive into configuration since Lightning Experience is so new that there is hardly anything on the market for the platform yet.
This is where SuPICE comes in! SuPICE is TerraSky’s new platform that allows people, whether or not they are a developer, to create custom Lightning Components to meet their business needs. Everything is done in a drag-and-drop environment and the newly created component is deployed to Salesforce for use within the Lightning AppBuilder. We recently did a webinar where I showed a custom component that I build that improved interactions with To-Do Lists for the mobile and desktop Lightning Experience. We are going to recreate that component in this blog. My inspiration for the basic element of the component came from one of our engineers name Takeshi Kawamoto. I have added several features into it so the component is more complete and ready to use.
If you wish to follow along with this blog tutorial you will need to download SuPICE from the AppExchange. We have an option for you to use Trialforce to have everything setup for you or you can download the Design Studio and the Runtime Engine into your Sandbox for testing. You will need both the SuPICE Design Studio and the SuPICE Runtime Engine to follow this tutorial.
To-Do List Overview
We will be creating a Lightning Component that focuses on improving interactions with the Task object. We will show how this component can be used within the Lightning Experience for desktop, but the component will work the exact same for the mobile experience as well. Here is a brief explanation of the kinds of interactions we will be creating for the Task To-Do List:
- Ability to click a Task record and redirect the user to the actual Task record page.
- Swipe Left functionality to delete a record quickly.
- Swipe Right functionality to change the Task status to Completed.
- Refresh the list after every interaction so we see the most updated information.
- Dynamic Search Bar to quickly find the Tasks we want to work with.
We will break this up into two parts; designing the basic structure of the component and designing the interactions for the component. This will be a fairly lengthy blog, so let’s go ahead and get right into the thick of things.
Create the To-Do List Component Structure
To begin let’s open the SuPICE Design Studio. If you’re using Lightning Experience you will click the App Launcher in the top right, select the SuPICE app, and finally click the Studio item in the tabs list. If you are using Salesforce Classic you will select SuPICE from the App drop down menu in the top right and then select the Studio tab.
Now that the SuPICE Design Studio is open, in the top left, click the “Create a new project” button. Give your project a meaningful name. For the purpose of this blog I will call mine BlogToDoList. Click Continue.
Select a theme and click OK. I will be using the Default theme, but you can use any color you prefer. This will simply change the default color theme of the components. You can always modify the coloring via CSS if you desire. We should now see a blank canvas. Let’s begin by dragging a Header Unit onto the canvas. Click the gear icon on your newly added Header Unit. Let’s change the Label to To-Do List.
Click the Styling tab at the top of the properties window. Change the Background property to #0b4db3, the Color property to #ffffff, the Font-Weight property to Bold, and the Size property to 24px.
Close the property window. Drag a Swipe List Unity onto the canvas. Click the gear icon for the Swipe List Unit. In the properties tab check the box for the property called “End User Filter”. This will allow the user to dynamically search for Tasks in the list. Click the 3rd tab, Data Source, and select Task from the drop down menu. Find the Subject, Status, and Due Date Only in the field list and click the Add Field button for each of them.
Click the Edit button next to the Subject field. This will open the Details window where we can style and configure each field in the Swipe List Unit. Let’s begin with the Subject. Change the Background property to a lighter blue like #2379dd, change the Color property to #ffffff, change the Font-Weight property to Bold, and the Size property to 16px.
Select the Status field in the top left of the Details panel. Add the following text to the Prefix property: “Status: “. Make sure to include a space after the colon. Select the Due Date Only field and add the following text to the Prefix property: “Due Date: “. Close the Details panel. Congratulations! You’ve build the basic structure of the To-Do list. Your list should look like the image below:
If you closed the property window for the Swipe List Unit, open it again by clicking the gear icon. Click the last tab called Interactions. The first interaction we will add is simply clicking a Task record and opening the record in the default Task layout. Click the Add Interactions button. Add the value Click Record for the Title property, select Touch Event for the Trigger property, and choose View Detail(Salesforce Standard) for the Action property. Click the check mark icon to save the interaction.
Let’s move onto creating the action for deleting records. Click the Add Interactions button. Add the value Delete Record for the Title property, select Swipe Left for the Trigger property, and choose Delete Row for the Action property. Save the interaction. This allows us to delete the record, but we now need to refresh the list to remove the record from the list. Click the Add Interactions button. Add the value Refresh After Delete for the Title property, select Swipe Left for the Trigger property, choose Refresh for the Action property, and select the Swipe List from the drop down menu that appears at the bottom.. Save this interaction. The effect of these two interactions is that you will delete a record when swiped left and refresh the list after deletion.
We will now create the interactions necessary to close a Task. Click the Add Interactions button. Add the value Close Task for the Title property, select Swipe Right for the Trigger property, and choose Set Fixed Value as the Action. You will now see 2 new properties called Field and Value. Select Status for the Field and set the Value to Completed. Save the interaction. Click the Add Interactions button again. This time add the value Save Task for the Title, Swipe Right for the Trigger, Save for the Action and set the action to effect the Swipe List. We will now add the final interaction. Set the Title to Refresh After Save, Swipe Right to Trigger, Action to Refresh, and have it effect the Swipe List. This trio of interactions will create the effect of setting the Status to close, updating the Task record with the new status, and then refreshing the list to show the new status.
Using the To-Do List
Now that we have created the interactions for the to do list it is time to get this component into Salesforce. Save your component (top left) and then deploy your component to Salesforce (top right). Click Deploy.
Once the component is deployed it is time to use the component within the Lightning AppBuilder. If you have not done so, you will need to configure your MyDomain for Salesforce in order to see custom Lightning Components. Open the Lightning AppBuilder and you will find your component under the Custom category. You can now use the BlogToDoList component for your mobile or desktop Lightning pages.
Once you add the Lightning Component to your page you will save and activate the page for either mobile or desktop. Once activated you can navigate to your lead record and you will see the following:
Congratulations! You’ve created your very first custom Lightning Component using the SuPICE platform. You can now begin creating custom components that begin to bridge the gap between where the Lightning Experience is and where you need it to be. Thank you for following along with this tutorial and I hope you found it helpful. If you have any questions you’re welcome to contact us as firstname.lastname@example.org.