Action Flow Table Interactivity (9 min)
Completion requirements
01 Getting Started
In this lesson, we look at table interactivity in action flows for power tables. We will focus on a few specific actions, such as allowing inline editing, expanding columns on the table, refreshing the table, and selecting rows. These actions can be triggered from any on-click action, condition, or page-level action.
We have created the following project:
There is a text field for the Account Name and a drop-down list for the SLA. The button will create an account and push it to Salesforce. There is a power table and an Allow Edit button. We give more information about the power table configuration later on. The Allow Edit button is described below.
We have created the following project:
There is a text field for the Account Name and a drop-down list for the SLA. The button will create an account and push it to Salesforce. There is a power table and an Allow Edit button. We give more information about the power table configuration later on. The Allow Edit button is described below.
02 Allow Inline Edit
We configured the Allow Inline Edit on-click action on the button. This will allow users to edit fields in the table.
1. Click the Allow Edit button’s On Click Action icon.
2. Click the +icon next to the Start node.
3. Under Element Interactivity, click the Table Interactivity option and click the Next button.
4. Use the drop-down list to select Allow Inline Edit. This will allow users to edit fields on the table.
5. Use the drop-down list to select the type. In this example, we selected All table.
6. Use the drop-down list to select the element/s. We selected the Power Table/SLA option.
7. Click the Next button.
8. Add a tag if necessary and click the Insert button.
9. Click the Apply button.
10. Save and preview the project.
When hovering over the contents in the SLA column, there is no Edit icon, and the fields cannot be edited. If you click the Allow Edit button, an Edit icon can be seen in the column.
Clicking the Edit icon opens a drop-down list, and you can select another SLA.
You can also do the following:
1. Click the Allow Edit button’s On Click Action icon.
2. Click the +icon next to the Start node.
3. Under Element Interactivity, click the Table Interactivity option and click the Next button.
4. Use the drop-down list to select Allow Inline Edit. This will allow users to edit fields on the table.
5. Use the drop-down list to select the type. In this example, we selected All table.
6. Use the drop-down list to select the element/s. We selected the Power Table/SLA option.
7. Click the Next button.
8. Add a tag if necessary and click the Insert button.
9. Click the Apply button.
10. Save and preview the project.
When hovering over the contents in the SLA column, there is no Edit icon, and the fields cannot be edited. If you click the Allow Edit button, an Edit icon can be seen in the column.
Clicking the Edit icon opens a drop-down list, and you can select another SLA.
You can also do the following:
- Disallow Inline Edit
- Show Column
- Hide Column
03 Expand Columns
You can expand a column.
1. Select the power table and click the Gear icon to open the Settings screen.
2. Click the Edit Mapping button.
The following parameters have been configured:
The On Click Action table interactivity was configured as follows:
3. Save and preview the project.
4. Click the icon next to an account name. These icons are standard when the subcomponent is configured. The opportunities on the account are shown in the expanded column.
You can also do the following:
The Allow Clear Column and Disallow Clear Column are used with Allow Bulk Updated and Disallow Bulk Updates. Allow Bulk Updates only work if you have selected Allow Inline Editing.
Note: The Actions listed may only be available for specific configs added to your power table.
1. Select the power table and click the Gear icon to open the Settings screen.
2. Click the Edit Mapping button.
The following parameters have been configured:
- The Salesforce source is Account.
- The condition is as follows: SLA is not empty.
- There is a subcomponent to show opportunities under the Account Name column. The subcomponent was added by clicking the Kebab icon and selecting the Configure component option.
- An icon with an on-click action was configured.
The On Click Action table interactivity was configured as follows:
- Expand Column action on the Power Table/Account Name column’s Current Row.
3. Save and preview the project.
4. Click the icon next to an account name. These icons are standard when the subcomponent is configured. The opportunities on the account are shown in the expanded column.
You can also do the following:
- Collapse Column
- Allow Clear Column
- Disallow Clear Column
The Allow Clear Column and Disallow Clear Column are used with Allow Bulk Updated and Disallow Bulk Updates. Allow Bulk Updates only work if you have selected Allow Inline Editing.
Note: The Actions listed may only be available for specific configs added to your power table.
04 Refresh Table
If you add an account and want the power table to update with this new account automatically, this is the option to use.
1. Click the On Click Action icon on the Create Account button.
2. Add a Salesforce Create Account action.
3. Click the + icon next to the After Finish action on the Salesforce Action node and click the Table Interactivity option under Element Interactivity.
4. Click the Next button.
5. Use the drop-down option to select the Refresh Table action.
6. Use the drop-down option to select the Power Table element.
7. Click the Next button.
8. Add a tag if necessary and click the Insert button.
9. Click the Apply button.
10. Save and preview the project.
11. Create a new contact and click the Create Account button.
12. Search for the Account Name. The account was created, and the power table was updated automatically.
1. Click the On Click Action icon on the Create Account button.
2. Add a Salesforce Create Account action.
3. Click the + icon next to the After Finish action on the Salesforce Action node and click the Table Interactivity option under Element Interactivity.
4. Click the Next button.
5. Use the drop-down option to select the Refresh Table action.
6. Use the drop-down option to select the Power Table element.
7. Click the Next button.
8. Add a tag if necessary and click the Insert button.
9. Click the Apply button.
10. Save and preview the project.
11. Create a new contact and click the Create Account button.
12. Search for the Account Name. The account was created, and the power table was updated automatically.
05 Select Row
You can select a row with a condition.
1. Select the power table and click the Gear icon to open the Settings screen.
2. Click Interactivity and make sure that the Allow Selection checkbox is checked.
3. Click the Conditions option.
4. Click the + icon next to the Then on the Conditions node and click the Table Interactivity under Element Interactivity.
5. Use the drop-down option to select the Select Row action.
6. Use the drop-down option to select the Power Table element.
7. Click the Next button.
8. Add a tag if necessary and click the Insert button.
9. Click the Apply button.
10. Double-click the Condition node and configure the rule:
12. Add a tag if necessary and click the Save button.
13. Save and preview the project.
The SLAs that are Gold have been selected automatically:
You can also do the following:
1. Select the power table and click the Gear icon to open the Settings screen.
2. Click Interactivity and make sure that the Allow Selection checkbox is checked.
3. Click the Conditions option.
4. Click the + icon next to the Then on the Conditions node and click the Table Interactivity under Element Interactivity.
5. Use the drop-down option to select the Select Row action.
6. Use the drop-down option to select the Power Table element.
7. Click the Next button.
8. Add a tag if necessary and click the Insert button.
9. Click the Apply button.
10. Double-click the Condition node and configure the rule:
- Power Table/SLA equals Value Gold
12. Add a tag if necessary and click the Save button.
13. Save and preview the project.
The SLAs that are Gold have been selected automatically:
You can also do the following:
- Select All
- Clear Row Selection
- Reset Table Selection
- Set Background Color
- Set Color
- Show Row
- Hide Row