Recently was asked by a client to develop a lightning app for the Opportunity object in Salesforce.

The requirement was to modify the list of Tasks associated with the Opportunity (Account) allowing for CRUD operations related to the Task list in the lightning app itself. To meet the functional requirements I needed to implement dynamic add/delete/edit of Tasks (delete/edit existing Tasks, add new Tasks).

I have seen a few blogs/articles around that show either edit/delete existing records or add new records, but nothing on bringing both those scenarios together. I have assumed that you already have basic knowledge about lightning framework e.g. components, events, attributes, lightning design system etc.

OK enough of talking here, let’s have a quick look at the screenshot of my lightning app. The explanation will follow after that.

We have got a parent lightning component which shows data from the Opportunity itself. We also have got a child lightning component that shows each Task and the associated fields.

Every field is an input field so that it can be edited. The Assignee/WHO field is shown as a list of all the users, whom the Task can be assigned to. The add and save button for the Tasks are in the parent component, while the delete button is in the child component (for each Task). So, the mark up in the parent component looks something like below:

The parent component has an attribute in the form <aura:attribute name=”tasks” type=”Task[]”/> to store all the Tasks. Pay particular attention to the attributes that the child component (SequencerAppTask) receives, which are the Task itself and the index of the Task in the current collection. indexVar of aura:iteration keeps track of the index of each item inside the iteration. I have also created a custom component event deleteTaskItem, that looks like below:

In the child component, the custom event is registered in the form  <aura:registerEvent name=”deleteTaskItem” type=”c:deleteTaskItem”/>. In the parent component, I have defined handler for the custom event in the form <aura:handler name=”deleteTaskItem” event=”c:deleteTaskItem” action=”{!c.deleteTaskEvent}” />. Now I will explain how the dynamic Delete/Update/Add work.

Delete actually involves 2 scenarios here:

1) When there is an existing Task and needs to get deleted from the UI as well as from Salesforce.

2) When it’s a new Task (just added on the UI, but not yet in Salesforce) and needs to get deleted just from the UI.

When the delete button is clicked in the child component, it calls the deleteTask method of its controller. The deleteTask method gets hold of the Task (using component.get(“v.task”)) and the custom event (using component.getEvent(“deleteTaskItem”)). After that the custom event gets fired as follows:

So, it basically fires the custom event with the Task and the row index, which then gets handled by the handler defined in the parent component.

The handler in the parent component calls deleteTaskEvent method of its controller which in turn calls the deleteTask method (accepting the Task and the row Id as parameters) of its helper. The crux lies in the helper deleteTask method which first removes the Task from the UI, and then from Salesforce if it is an existing Task by calling a method of its Apex controller. For the later part, it simply checks whether the passed in task has got an Id (which implies It is an existing Salesforce Task) and then calls the Apex controller method to delete it. The code snippet to remove the task from the UI is given below:

That’s it for the Delete Task!

When the Add Task button is clicked, it calls the addTask method in the controller of the parent component. The Apex controller method returns an empty Task (new Task()) which then gets added to the parent component task collection. The code snippet within the setCallback method (on getState() of SUCCESS) is shown below:

The Save Task method is also very simple which saves all the Tasks (i.e. updates existing Tasks and inserts new Tasks). I have kept update and insert separate, even on the Apex controller side as we are introducing additional functionality at a later date. The lightning controller sends them in JSON format to the Apex controller which then deserializes the JSON and updates/inserts Tasks.  The code snippet to build the list of update and insert tasks is given below:

The updateTasks and insertTasks are then sent to the Apex controller method in JSON format.

That’s all for now. Happy developing lightning apps on Salesforce platform!

-Anindya

Leave a Reply

Your email address will not be published. Required fields are marked *