Gayathiri Mohan

Feb 235 min read

Delete records from Flexcard Datatable

Updated: Mar 4

A datatable element in Flexcard is used to fetch the data from a data source and display it in a tabular structure.

Flexcard can fire and listen to two types of events: Custom and Pubsub events.

Custom Events are used to communicate between a child and its parent - either between a child Flexcard and a parent Flexcard or between an element and the Flexcard where it is present.

Pubsub Events are used to communicate between two separate components - either between two different Flexcards present on the same Lightning page (sibling Flexcards) or between a Flexcard and an Omniscript.

In this article, let us see how to delete records from the Datatable element of a Flexcard.

It involves the below steps,

Fire a custom event when the ‘Delete (/Trash)’ icon is clicked from a datatable row.
Add an event listener to listen to that custom event.
Create an action from the event listener to invoke an Integration Procedure by passing the ‘Record Id’ to delete that record from the database.

Now we will implement the above steps with an example.

Create a new Flexcard, and from the ‘Setup’ tab, add a data source to fetch the records to be displayed in the datatable.

In the example, a data source of type DataRaptor is added, and an Extract Dataraptor ‘POCExtractContactsForDataTable’ is added.

In the Input Map section, add a new ‘Key-Value’ pair. Key holds the variable to be passed to the data source. Value holds the value of the variable.

Here, Key : AccountId and Value : {recordId}.

Click ‘Save & Fetch’ in the datasource.

When the Flexcard is added to a lightning record page, the record Id of the record will be automatically stored in the global context variable {recordId} and passed via AccountId to the data source.The dataraptor POCExtractContactsForDataTable retrieves the details of all the Contacts linked to an Account (based on the AccountId passed).

Disable the Repeat Records checkbox.

Now add a datatable element to the Flexcard.

The datatable automatically shows data from the added data source.

Optionally, in the Datatable Properties section, click Column to modify the behavior of the datatable columns based on the need.

In this example,

The Field Label attribute of the column PrimaryContact is updated to Is Primary Contact?. This displays the new column label in the datatable UI.
The Is Visible attribute of the column ContactId is set to False. This hides the column in the datatable UI.

‘Attributes’ section:

Now in the Attributes section of the Datatable Properties, we have to set the below attributes related to the Delete operation,

Row Delete
Fire Event On Delete Confirm
Show Confirm Modal Before Row Delete
Row Delete Dependent Column

Enable the Row Delete checkbox to include a delete (/trash) icon in the datatable rows. This allows the user to delete the row from the Flexcard datatable.
Optionally, set a column name that returns a boolean (true/false) value in the Row Delete Dependent Column attribute to enable or disable the delete icon in datatable rows.

In the example, we have set the column PrimaryContact (with boolean values) as the Row Delete Dependent Column. So the delete icon in the first row is disabled (true value), thereby preventing the user from deleting the record.

NOTE:

When the Row Delete checkbox is checked and the user clicks the ‘delete’ icon, the record will just be deleted in the Flexcard datatable and not in the database.
To delete records from the database, one of these two attributes (but not both) - ‘Fire Event On Delete Confirm’, ‘Show Confirm Modal Before Row Delete’ must be enabled. These attributes fire a delete custom event.

We will see how to delete records from the database with these attributes later.

Now click the Add New button in the Event Listener section from the ‘Setup’ tab.

In the Listener Properties modal, enter the following details.

Event Type : Custom Event
Event Name : delete

NOTE:

We should not add any custom event name instead of ‘delete’ in the Event Name field.

The datatable attribute fires a custom event with the name ‘delete’, so in order to listen to that event and perform the required action, the value entered in the field should be the same.

‘Actions’ section:

Block Interactions While Waiting : if true, prevents the user from interacting with the Flexcard by showing a loader in the UI until the action gets executed.

Action Type : Data
Data Source Type : Integration Procedures

Now enter the name of the Integration Procedure that needs to be invoked.

Here, Name : POC_IPDeleteAction.

The Integration Procedure ‘POC_IPDeleteAction’ has a ‘Delete Action’ -

DeleteContact to delete a ‘Contact’ record based on the ‘%ContactId%’ value.

Now in the ‘Input Map’ section of the Action, populate the data to be passed to the Integration Procedure in a ‘key-value’ pair.

In this example,

Key : ContactId

Value : {action.result.ContactId}

where ‘ContactId’ is the variable that is sent to the datasource.

and ‘{action.result.ContactId}’ holds the Record Id of the datatable row in which the delete icon was clicked.

NOTE:

The data entered in the Value field should be in the format - {action.result.RecordIdColumnName}

where ‘RecordIdColumnName’ denotes the column name of the datatable that has the Record Id value.

In our example, ContactId is the column containing the record Id of the contacts.

Ignore Response - checked, since we don’t need a response from the Integration Procedure.

Output:

The Flexcard datatable element provides two options to delete records from the database.

Using the Fire Event On Delete Confirm attribute
Using the Show Confirm Modal Before Row Delete attribute

1. Deletion using the ‘Fire Event On Delete Confirm’ attribute:

On enabling the ‘Fire Event On Delete Confirm’ attribute, a delete custom event will be fired when the user deletes a row using the delete icon.

This approach is useful when the user wants to delete a record from the database immediately upon clicking the ‘delete’ icon in the datatable row.

In the below example, the Fire Event On Delete Confirm attribute in the datatable is enabled.

Now, when we click the delete icon in the second row, the delete custom event will be fired from the datatable element in the Flexcard.The event listener in the Flexcard will listen to that event and invoke the Integration Procedure by passing the ContactId in that row.

So the contact Test Contact B will be deleted from the Flexcard datatable and the database immediately.

2. Deletion using the ‘Show Confirm Modal Before Row Delete’ attribute:

On enabling the ‘Show Confirm Modal Before Row Delete’ attribute, a confirmation modal (with Delete and Cancel buttons) will be shown to the user when the delete icon is clicked from the datatable row.

When the user clicks Delete in the modal, a delete custom event will be fired, and the record will be deleted from the datatable and database.

If the user clicks Cancel in the modal, the modal window closes, and the row will not be deleted in the Flexcard datatable.

Since this approach gets the user’s consent before deleting a record, it prevents a record from being deleted when the delete icon is clicked inadvertently.

In this example, the Show Confirm Modal Before Row Delete attribute in the datatable is enabled.