FXL Data Grid Setup

Introduction

For clarity and simplicity, the FXL Data Grid v2 will simply be referred to as the FXL Data Grid.

When selecting the Lightning component, select the grid with "v2" appended to the name.

The FXL Data Grid is a versatile record management tool in FieldFX Back Office when using Lightning Experience. You can set up an FXL Data Grid for use with any record type in FieldFX. You can also set up FXL Bulk Editing, FXL Stage Pricing, and the FXL Bundle Maker for use with an FXL Data Grid after you have already added and configured it.

To use the FieldFX Lightning package starting with version 1.225, you must use the FieldFX Managed Package version 1.529 or higher.

To find the version numbers you have installed, see Check Version Number for FieldFX Managed Package and FieldFX Lightning Managed Package.

Prerequisites

To set up the FXL Data Grid, you need to:

Have these user licenses	Have these permissions	Complete these tasks, some if using for the first time, and review these topics before continuing
FieldFX Base Package FieldFX E-Ticketing	System Administrator permissions Add the FXLC sessionPage Visualforce page to user profiles or permission sets.	Complete the Salesforce Lightning AppBuilder training To set up the FXL Data Grid, you must be using Lightning Experience with FieldFX Back Office and have the FieldFX Lightning Managed Package installed.

Have these user licenses

Have these permissions

Complete these tasks,
some if using for the first
time, and review these topics
before continuing

System Administrator permissions
Add the FXLC sessionPage Visualforce page to user profiles or permission sets.

Complete the Salesforce Lightning AppBuilder training
To set up the FXL Data Grid, you must be using Lightning Experience with FieldFX Back Office and have the FieldFX Lightning Managed Package installed.

Without permission to this Visualforce page, users will not be able to view the FXL Data Grid v2.

Set Up FXL Data Grid

This grid only applies to Back Office and does not change what displays in Field FX Mobile.

To see what determines what a user sees in the mobile app, see Configuring FieldFX Mobile Screens.

Access FieldFX Back Office.
Switch to the Lightning Experience.
Access the applicable record page.
Example 1. Use the FXL Data Grid to manage Price Book Item records
Scenario

You want to use the FXL Data Grid to manage price book item records.
1. From your Home page, click Price Books.
2. Click the price book for which you want to use the FXL Data Grid to manage price book items.
Complete the following before moving to the next step:
Drop the FXL Data Grid on the record page.
Configure Grid Details.
Set up Bulk Editing to be used with the FXL Data Grid.
Set up Stage Pricing to be used with the FXL Data Grid.

Add the FXL File Viewer Lightning Component

You can add the FXL File Viewer Lightning Component to a Job or Ticket page.

In FieldFX Back Office, select either a ticket or a job.

The process for adding the FXL File Viewer is the same for both.
Click and select Edit Page.

The Lightning App Builder opens up.
Under Components, use the Search field and search for fxl_file_viewer.
Drag the component to a section on the record page.
You can add one or more optional filters for this component to filter the files shown.
Click Save.
Click Activation...

The Activation: Ticket Record Page window appears. If you have added the component to the Job Record Page, the title of the window is Activation: Job Record Page.
Click Close.
Click the return arrow to exit the Lightning App Builder and return to the Record Page.

The FXL File Viewer appears on the Record Page.

Configure Grid Details

The API names of Salesforce objects and object fields are required to configure any of the FXL Data Grid fields. The most accurate way to enter the API names is to obtain them from the Object Manager or from workbench.

When working with the grid layout for the Delivery and Return Tickets in the latest Rental package, the Print button can’t be changed when configuring the ticket grids.

The FXL Data Grid supports the use of and displays image fields as read-only.

The examples are from Tickets and Quotes because these objects are very commonly used with the Grid. However, the grid is not limited to these objects and can be used with any object.

Disable Options

You can use these four options in the FXL Data Grid in the Disabled Grid Feature field either by themselves or in a comma delimited list:

Option Description

Option	Description
Row Selection	Enter `Row Selection` in the Disabled Grid Feature field. To re-enable, remove Row Selection and tab away from the field. The indicator for the number of rows that were selected is removed, there are no checkboxes for the rows, and Delete button is not shown. With Row Selection and select the Disable multi-select and use single select checkbox, No radio button is displayed.
Deleting Items	Removes delete button Enter `Deleting Items` in the Disabled Grid Feature field. To re-enable, remove `Deleting Items` and tab away from the field.
Filtering Items	Removes filter button Enter `Filtering Items` in the Disabled Grid Feature field. To re-enable, remove `Filtering Items` and tab away from the field.
Sorting Items	Removes the sorting information from the header row. The grid column sorting is disabled. Enter `Sorting Items` in the Disabled Grid Feature field. To re-enable, remove `Sorting Items` and tab away from the field.

Row Selection

Enter Row Selection in the Disabled Grid Feature field.

To re-enable, remove Row Selection and tab away from the field.

The indicator for the number of rows that were selected is removed, there are no checkboxes for the rows, and Delete button is not shown.

With Row Selection and select the Disable multi-select and use single select checkbox,

No radio button is displayed.

Deleting Items

Removes delete button

Enter Deleting Items in the Disabled Grid Feature field.

To re-enable, remove Deleting Items and tab away from the field.

Filtering Items

Removes filter button

Enter Filtering Items in the Disabled Grid Feature field.

To re-enable, remove Filtering Items and tab away from the field.

Sorting Items

Removes the sorting information from the header row. The grid column sorting is disabled.

Enter Sorting Items in the Disabled Grid Feature field.

To re-enable, remove Sorting Items and tab away from the field.

Choose Columns for User Custom Views

You must be an organization admin to set the columns a user can see and use for a custom view.

Access FieldFX Back Office.
Switch to the Lightning Experience.
Access the applicable record page.

Design Time Attributes

Design Time Attributes are divided into these subcategories:

Required
Optional but Recommended

Optional
Optional - Performance Related

For more information on these categories, see Configurable Fields in the FXL Data Grid v2 Configurable Fields.

Customize the Grid Heading and Title

You can customize the Grid Heading and Grid Title fields for the FXL Data Grid v2 on any records page where it’s used. If you leave these fields blank,

The Grid Heading defaults to FXL Data Grid
The Grid Title defaults to the item’s object label.

These properties also support using an expression to define its custom label. The correct format is (!$Label.customLabelName).

Create Custom Filters

We added the ability to create custom filters for a grid’s lookup fields.

Custom filters override Salesforce filters for lookup fields.However, you cannot save values.A validation error results.

Custom filters are not supported for bulk edit.

Create a Static Resource file named fx_GridV2_CustomSearch.js

Copy the sample file contents and then customize it for your needs

fx_GridV2_CustomSearch.js

window.fx_GridV2_CustomSearch = {
  uid: {   // [Unique ID of the grid]
    Contact_StartS__c: {   // [Field Api Name]
      FX5__Contact__c: {   // [Field Api Name]
        QueryFilter: "(LastName=NULL OR LastName LIKE 'S%')",   // [Filter]
        QueryFields: "Name,LastName,FirstName",   // [Display fields on lookup object]
        KeywordSearchFields: "LastName",   // [Search fields on lookup object]
        OrderBy: "LastName"   // [Sort field on lookup object]
      }
    },
    // Multiple fields can be specified
  },
  // Multiple grids can be specified
};

Custom filters allow for advanced queries.These queries can provide finely tuned results that are not possible apart from these programmatic custom filters.

Advanced Custom Filter Scenario

The example scenario utilizes several additional fields and objects beyond standard FieldFX installations. Service Locations are not a standard feature of FieldFX.

This example shows the power of custom filters beyond standard Salesforce capabilities.

Scenario

When working with a Ticket, a field worker must select the service location where the work is performed, but should only see a list of service locations that are valid for the matching quote. Service Location appears on multiple grids on the Ticket object’s page layout.

fx_GridV2_CustomSearch.js

window.fx_GridV2_CustomSearch = {
  qiball: { // [Unique ID of the grid]
    Service_Location__c: { // [Field Api Name]
      Service_Location__c: { // [Field Api Name]
        QueryFilter: "Service_Location__c=true AND Status__c!='Inactive' AND (Id IN (Select Service_Location__c from BTSL__c where Bill_To__c = '@@FX5__Quote_Item__c.FX5__Quote__c.FX5__CustomerAccount__c@@' AND Is_Active__c=true))", // [Filter]
        QueryFields: "Name,AMS_ID__c,BillingCity,BillingState", // [Display fields on lookup object]
        KeywordSearchFields: "Name,AMS_ID__c", // [Search fields on lookup object]
        OrderBy: "Name" // [Sort field on lookup object]
      }
    },
    // multiple fields can be specified
  },
  tiball: { // [Unique ID of the grid]
    Service_Location2__c: { // [Field Api Name]
      Service_Location2__c: { // [Field Api Name]
        QueryFilter: "Service_Location__c=true AND Status__c!='Inactive' AND (Id IN (Select Service_Location__c from BTSL__c where Bill_To__c = '@@FX5__Ticket_Item__c.FX5__Ticket__c.FX5__Job__c.FX5__CustomerAccount__c@@' AND Is_Active__c=true)) AND (Id in (Select Account__c from Territory_Assignment__c where Territory__c = '@@FX5__Ticket_Item__c.FX5__Ticket__c.Territory__c@@' and Status__c='A'))", // [Filter]
        QueryFields: "Name,AMS_ID__c,BillingCity,BillingState", // [Display fields on lookup object]
        KeywordSearchFields: "Name,AMS_ID__c", // [Search fields on lookup object]
        OrderBy: "Name" // [Sort field on lookup object]
      }
    },
    // multiple fields can be specified
  },
  // multiple grids can be specified
};

Step-by-Step Guides

You can set up:

Add an Action Button
FXL Bulk Edit
FXL Bulk Edit for Dependent Lookup Fields
FXL Stage Pricing
FXL Bundle Maker

Add an Action Button

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.

Set Up FXL Bulk Edit

The API names of Salesforce objects and object fields are required to configure the FXL Bulk Edit fields for the FXL Data Grid. The most accurate way to enter the API names is to obtain them from the Object Manager.

The object for FXL Bulk Edit must match the object for the FXL Data Grid you have already added and configured. You could also configure custom labels for the FXL Bulk Edit Lightning Component.

Drop FXL Bulk Edit to the record page with the FXL Data Grid already added and configured.
Select FXL Bulk Edit where it is placed on the page to display the configurable fields to the right.
Obtain the API name of the records' object and enter it in sObjectType to bulk edit.
Obtain the API names of any additional objects you want to display in FXL Bulk Edit and enter them separated by commas in Identifying fields to display in results.
You can also do one of the following:
- Obtain the API names of the specific fields you want to limit bulk editing to and enter them separated by commas in Include Only These Fields.
- Obtain the API names of the specific fields you want to exclude from bulk editing and enter them separated by commas in Exclude These Fields.
Click Save.
If this is the first time FXL Bulk Edit has been set up on the page, activate the configuration of the page as the Org default
Click Back.
Verify FXL Bulk Edit is displaying the object you selected.

Back to Step-by-Step Guides listZ

Set Up Dependent Lookup Fields Bulk Edit

For most fields in FXL Data Grid, the default Salesforce Lookup Control functions as expected. The default lookup control does not work for dependent fields. You can use a custom search popup to get a filtered lookup for dependent fields.

Obtain the API names of objects for the dependent fields.
Obtain the API names of the dependent fields you want to filter for bulk editing.
Create or modify an fxl_searchSettings.js Static Resource file to include a bulkEdit function for the desired dependent field filtered lookup.
Verify the Bulk Edit Control is added to the object’s lightning page.
Verify the fields have been added to the grid columns on the lightning page.

Example 1 - Bulk Edit Contacts Should Match the 'First Letter of Contact' Field

Scenario

On Quote Items, we have a verification that the entry in Contact field starts with the character entered in a first_letter_of_contact field.

When doing a bulk edit on the Contact field, only valid entries that match the entry in first_letter_of_contact for the controlling record should display.

For this example, we assume the objects, fields, and verification rule already exist.

To accomplish this lookup with verification for a bulk edit, the following code is added to the fxl_searchSettings.js Static Resource file.

bulkEdit: {
  "FX5__Quote_Item__c": {
    "Contact__c": {
      "QueryFilter": "(LastName=NULL OR LastName LIKE '@@first_letter_of_contact__c@@%')",
      "QueryFields": "Name,LastName,FirstName",
      "KeywordSearchFields": "LastName",
      "OrderBy": "LastName"
    }
  }
}

Example 2 - Bulk Edit Wells for Selected Quote

Scenario

We have an object that tracks well sections.

The Quotes object has a reference field to the well sections object.
We also have a lookup from the Quote Items to the well section object.

When we are looking at Quote Items, we want to be able to bulk edit the well section, but the bulk edit should only allow well sections for the displayed quote.

For this example, we assume that the objects and fields already exist.

To accomplish this, we add the following code to the fxl_searchSettings.js Static Resource file.

bulkEdit: {
  "FX5__Quote_Item__c": {
    "well_section__c": {
      "QueryFilter": "(Quote__c='@@FX5__Quote__c@@')",
      "QueryFields": "Name",
      "KeywordSearchFields": "Name",
      "OrderBy": "Name"
    }
  }
}

Set Up FXL Stage Pricing

You can stage pricing can be set up on Tickets and Quotes. The object for FXL Stage Pricing must match the object for the FXL Data Grid you have already added and configured.

Optionally, configure custom labels for the FXL Stage Pricing Lightning Component.

Drop FXL Stage Pricing to the record page with the FXL Data Grid already added and configured.
Click Save.
If this is the first time FXL Stage Pricing has been set up on the page, activate the configuration of the page as the Org default.
Click Back.
Verify FXL Stage Pricing is displaying where you expected.

Back to Step-by-Step Guides list

Set Up FXL Bundle Maker

The FXL Bundle Maker enables dynamic parenting within the FXL Data Grid.

This component works on the following objects:

FX5__Ticket__c

The component defaults are configured for the Ticket object.
FX5__Quote__c
FX5__Invoice__c
FX5__Price_Book__c

The Bundle Maker works by searching for a parent item from items already on the grid (existing items) or adding a new item from the catalog.

Parent items must be Price Book Items with Dynamic Parenting enabled.

Optionally, configure custom labels for the FXL Bundle Maker Lightning Component. This allows for custom labels or internationalization (i18n) and translation.

Screenshot of the FXL Bundle Maker configurations

Drop FXL Bundle Maker to the record page with the FXL Data Grid already added and configured

For Ticket record pages, the component is preconfigured.

For other objects, make the following entries:

Entry Description Recommended Entry Recommended Option

Entry	Description	Recommended Entry	Recommended Option
Search field to find existing bundle	Field to search in the grid for the existing item to use as the parent.	Price Book	`FX5__Catalog_Item_Code__c`
Quote	`FX5__Catalog_Item__c`
Invoice	`FX5__Catalog_Item__c`
Additional field to display in existing bundle search results	Additional field to display for search results when searching the grid for an existing item to use as the bundle’s parent. A second line is added to the search results. You should use a description field.	Price Book	`FX5__Catalog_Description__c`
Quote	`FX5__Description__c`
Invoice	`FX5__Description__c`
Search field to find parent item for new bundle	Field to search in Catalog items for a new item to use as the parent.	Price Book	`Name`
Quote	`FX5__Catalog_Item_Code__c`
Invoice	`FX5__Catalog_Item_Code__c`
Additional field to display in new bundle search results	Additional field to display for search results when searching Catalog Items for a new item to add to the grid to be the bundle’s parent. A second line is added to the search results. You should use a description field.	Price Book	`FX5__Catalog_Description__c`
Quote	`FX5__Description__c`
Invoice	`FX5__Description__c`

Search field to find existing bundle

Field to search in the grid for the existing item to use as the parent.

Price Book

FX5__Catalog_Item_Code__c

Quote

FX5__Catalog_Item__c

Invoice

FX5__Catalog_Item__c

Additional field to display in existing bundle search results

Additional field to display for search results when searching the grid for an existing item to use as the bundle’s parent. A second line is added to the search results.

You should use a description field.

Price Book

FX5__Catalog_Description__c

Quote

FX5__Description__c

Invoice

FX5__Description__c

Search field to find parent item for new bundle

Field to search in Catalog items for a new item to use as the parent.

Price Book

Name

Quote

FX5__Catalog_Item_Code__c

Invoice

FX5__Catalog_Item_Code__c

Additional field to display in new bundle search results

Additional field to display for search results when searching Catalog Items for a new item to add to the grid to be the bundle’s parent. A second line is added to the search results.

You should use a description field.

Price Book

FX5__Catalog_Description__c

Quote

FX5__Description__c

Invoice

FX5__Description__c

Click Save.
If this is the first time the FXL Bundle Maker has been set up on the page, activate the configuration of the page as the Org default.
Click Back.
Verify FXL Bundle Maker is displaying where you expected.

Back to Step-by-Step Guides list

FXL Data Grid Setup

Introduction

Prerequisites

Set Up FXL Data Grid

Add the FXL File Viewer Lightning Component

Configure Grid Details

Disable Options

Choose Columns for User Custom Views

Design Time Attributes

Customize the Grid Heading and Title

Create Custom Filters

Advanced Custom Filter Scenario

Step-by-Step Guides

Add an Action Button

Create in Back Office

Add to Page Layouts

Add the URL to Remote Settings

Add New AppSetting Fields

Set Up FXL Bulk Edit

Set Up Dependent Lookup Fields Bulk Edit

Example 1 - Bulk Edit Contacts Should Match the 'First Letter of Contact' Field

Example 2 - Bulk Edit Wells for Selected Quote

Set Up FXL Stage Pricing

Set Up FXL Bundle Maker

Recommended Reading