Add Action Button to FXL Data Grid

Action buttons are important in they let users perform key tasks directly from the FXL Data Grid without navigating away. The user’s workflow is streamlined with quick actions like editing, creating related records, launching flows, or triggering automations directly where the data is displayed. Efficiency is improved and click are reduced so data handling is ensured to be consistent across FieldFX Back Office and Mobile.

A sys admin can add the actual button to the FXL Data Grid with the name and icon for the button then link the button to a process.

Unless you know how to structure JSON in the context of FieldFX, contact FieldFX Services for assistance in creating the specifics for the process you want to use the action button for.

To create the action button, see Process Flow and Steps below.

Anatomy of a JSON script

A generic JSON statement that is used follows this format:

[{"label":"Action1","iconCategory":"utility","iconName":"up","action":"action1","variant":"brand"},{"label":"Action2","action":"action2"},{"iconCategory":"utility","iconName":"print", "stayEnabled":"true"}]

Table 1. Description of JSON format
Parameter	Variables	Description
label	Action1	The name of the action
iconCategory	utility	The category for the icon using the icons in the Salesforce Lightning Design System.
iconName	up	The name of the icon.
action	action1	Process Name
variant	brand	The intended purpose of the process.

The above example is by no means an exhaustive primer for JSON and the cord above as shown is for illustration purpose only and should not be used.

Process Flow and Steps

Access the job or ticket.
Click on the FXL Data Grid for that job or ticket.

Lightning App Builder is launched.
Select and then Edit Page.
Lightning App Builder shows up for that page.
Find where the details of the Job or Ticket is and click to highlight the FXL Data Grid.
Along the right side where it says Page > FXL Data Grid v2, scroll down to Action Button settings (JSON string)
Determine the button functionality desired and work with Services on getting the specific JSON code.

For example,
```
[ {"label":"Generate Delivery Ticket","iconCategory":"utility","iconName":"fulfillment_order","action":"generateDeliveryTicket","variant":"outline-brand","callable": "createDeliveryTicket"} ]
```
This JSON code is provided for illustration only and may not work in your org configuration.
Once they have the code created, they can paste it into that field mentioned above.

You can add an action button to the FXL Data Grid in FieldFX Back Office for tickets, quotes, and jobs.

Complete these steps in order to create the action button:

Create the button in FieldFX Back Office
Add the button to the page layout
Add the URL to the Remote Settings
Add the AppSetting Fields

The AppSettings will differ depending on the button’s purpose.

Create in Back Office

Log into FieldFX Back Office.
From Setup, enter object in the Quick Find.
Select Object Manager and then:

For a Job: For a Quote: For a Ticket:

Select the Job object.

Select the Quote object.

Select the Ticket object.
Select Buttons, Links, and Actions from the menu.
Click New Action.

This action must be added to the Job, Quote, and Ticket objects.

For a Job:	For a Quote:	For a Ticket:
Select the Job object.	Select the Quote object.	Select the Ticket object.

At the New Action window, complete the following:

Field Action

Field	Action
Action Type	Select Lightning Web Components.
Lightning Web Component	Select `FX5:<name>`. The `<name>` is the name of the Lightning Component.
Standard Label Type	Leave at `--None--`.
Label	Enter the text you want to use for this button.
Name	When you click on this field, it’s automatically populated by what you entered in the Label field. The spaces are replaced with underscores.
Description (Optional)	You can enter a short description of the button’s description.

Action Type

Select Lightning Web Components.

Lightning Web Component

Select FX5:<name>.

The <name> is the name of the Lightning Component.

Standard Label Type

Leave at --None--.

Label

Enter the text you want to use for this button.

Name

When you click on this field, it’s automatically populated by what you entered in the Label field. The spaces are replaced with underscores.

Description
(Optional)

You can enter a short description of the button’s description.

Click Save.
Continue with Add to Page Layout.

Add to Page Layouts

While still in the Job, Quote, or Ticket object, select Page Layouts.
Select the object:

For a Job: For a Quote: For a Ticket:

Job layout

Quote layout

Ticket layout
Click Mobile & Lightning Actions.
Find the new action that you created.

For a Job:	For a Quote:	For a Ticket:
Job layout	Quote layout	Ticket layout

Drag the new action and drop it into the Salesforce Mobile and Lightning Experience Actions block under Job Detail.

If you don’t see the list of actions but see this message, this section is predefined by Salesforce.

Click the …override the predefined actions… link to expose those actions and add the custom action.

Only three buttons appear on the Job record. You can access the new button by selecting the down arrow and scrolling down the menu to the new button
If you want the new button to appear on the Job Record, drag the button to the first position in the Salesforce Mobile and Lightning Experience Actions block on the Job page layout

To save the changes, click Save.
The layout is saved and the list of page layouts reappears.
Continue with Add the URL to Remote Settings.

Add the URL to Remote Settings

For more information, see Add Remote Site Settings for Lightning Components.

If you have already added the Remote Site URL for another object, you won’t have to add it again. It already exists in your org.

While still in Setup, use the Quick Find box and type remote.
Select Remote Site Settings.
Click New Remote Site.

At the Remote Site Edit, complete the following:

Field Action

Remote Site

Name

Enter the name for the site, such as the name for your new button.

The Remote Site Setting API Name can only contain underscores and alphanumeric characters. The name must:

Begin with a letter
Not include spaces
Not end with an underscore
Not contain 2 consecutive underscores

Remote Site URL

Enter the custom URL.

Disable Protocol
Security checkbox

Select this checkbox to allow s-controls to access this remote site regardless of HTTP or HTTPS session security. Only select this checkbox if you understand the security implications.

Description
(Optional)

You can enter a brief description for the URL.

Active checkbox

Leave selected.

Click Save.
Continue with Add New AppSetting Fields.

Add New AppSetting Fields

With the button defined and on the page layout, you need to set up these AppSettings:

From Setup, enter Custom Metadata in the Quick Find box.
Select Custom Metadata Types.
In the AppSetting row, click Manage Records.
In the AppSettings window, click New.
Specify the AppSettings specific to the button you’ve added.
Click Save & New.