Adding list component

Adding related list component

• Hidden fields - see below (available from version 6.0)
• Order By - by default list is ordered by column that was added first. If you need to change that use 'Order By' picklist to choose another column
• Default Page Size - if default 25 records per page is not enough choose new value in Default Page Size select.
• Conditions - see below
• Max Height - limit height of the component providing value in px.
• Show on Edit Page - list is displayed in form Edit mode
• Show on View Page - list is displayed in form View mode
• Ignore Permissions -  loads all available records to the list including those that are not available due to user permissions
• Show Checkboxes - displays checkbox next to each list item. Available for List component only
• Disable Spinner - force list to do not show standard spinners while data loading (available from version 6.0)
• Inline Edit - allows user to perform inline edit on a list component

This feature allows to specify a list of fields which will not be visible in the List or Related list, but will be available to use in form actions, events, etc.

• Select the list on the canvas
• Click "Settings" icon next to "Hidden fields" field to show a popup with fields list (4)
• Add necessary fields here and click "Apply"

User can define list/related list filters using Conditions feature.

Adding filters for list:

• Click the list component on the canvas
• Click "Settings" button (5) on Conditions

3. Provide parameters for filtering

Using above condition will limit records in the list to active accounts with description not empty.

One has an ability to create new records from List/Related List component and review and edit existing records as well. User can change default behavior of View, Edit, Delete and New buttons from list actions settings. 

For a List / Related List, its New / Edit / View / Delete options can be overridden. When selecting a list, click the "Settings" icon (6) for any of the options.

Here's the example of overriding the Edit option. After checking "Override" checkbox (7), click "Add" button (8)  to add event(s).

"Event Settings" popup will be shown. Configure event type (9), add handler (10), and select (11) form action of navigate type (12, see below)  if you want to navigate user to any other layout than the standard SF layout which is the default behavior.

Action Parameters settings

Set up action parameters (9). You can pass row values to the action using "Row" context object (13). After selecting "Row" context object, choose list column value to be passed to action. Row Id is always available for selection, even if it was not added as the list column.

In the example above Id of the account is passed to the form as the context object id.

"Navigate" action settings:

Data Provider allows to populate lists with custom data collected in apex class.

Create an Apex class which implements WR_BPM.FormBuilderService.FormBuilderApiInterface Interface.

Class should have 2 public methods: loadListData, loadLookupData.

See example attached:

Click the list in the form (19).  Select source type "Apex" the class which you created in Dataprovider input > provide conditions if needed

For the lists with Data Provider user can pass parameters to the apex class:

Note: Object, columns specified for the list will be replaced with object, columns defined in the Data Provider class.

Note: List paging is implemented via 'hasNext' list property. If it is set to true 'Show More' link will be displayed under the list, otherwise it will be hidden. See WR_DataProviderExamples.cls attached above.  

Attached is a form which can be placed to your organization along with the class attached above to see examples of using Data Provider.

FormService data provider

Built-in FormService data provider allows to feed JSON data to the list. Using FormService Data Provider user can build list without interaction with database or using Apex code, and manipulate data that is not stored anywhere.

 Click list (22) and select "FormService" in Data Provider input. Configure "Parameters".

Pass JSON object to Parameters. The properties required are:

"records" (25) - array representing list rows;

"columns" (26) - array representing list columns;

"actions" (27) - object used to turn on specified list actions. When added those actions can be overridden from List Actions settings.

Here's how list looks like:

Below is example form that can be uploaded to your organization:

Starting with 3.1, user can use "Inline edit" feature for lists and related lists.

Select a list (28) to open its "Settings".  Check "Inline Edit" checkbox (29).

The list is now editable. Hover the mouse over the cell you need to edit. Click and type new value (30) and click OK button (31).

Click "Save" or "Cancel" buttons to save changes or to revert them back to initial values

List component events

List component validation rules

List/Related List component has following conditional style options:

• hide
• show

Form components conditional styling

"Fields" configuration allows to specify which File Fields will be shown when uploading or changing a file:

• Open File Fields config popup
• Add necessary fields to a list
• Select which field should be shown (32)
• Specify default value for each field
• Set if each field will be visible to user
• Set necessary fields required (available from version 6.0)
• Set necessary fields disabled
• Change fields order with arrows, if needed
• Apply changes

Clicking "New" button on the "File" related list opens file component:

User can customize file component via fields parameter setup (33):

"fields" parameter should store JSON representing list of fields to be used on a component.

Each field should have "fieldName" property storing field API name. Other parameters are optional:

"fieldLabel"- label to be displayed next to the field

"fieldValue" - value of the field

"visible" - hides field if set to "false"

"disabled" - disables editing if set to "true". 

Below is example setup of "fields" parameter:

[{"fieldName":"Description","fieldLabel":"File Description","fieldValue":"File description","disabled":"true"},{"fieldName":"Title","fieldLabel":"File Name","fieldValue":"Please enter File name"}]

Above setup results in following:

There are following Source Objects are available:

• sObject - standard or custom Salesforce Object, as it is shown in "Adding columns to the list" section above.
• Apex - custom code that provides some data. See "List Data Provider" section above.
• JSON - user must provide a config for list in JSON format, like this:

{
  "orderBy":"column1",
  "records":[
    {"column1":"value1", "column2":"value2"},
    {"column1":"value3", "column2":"value4"}
  ],
  "columns":[
    {"name":"column1", "label":"Column 1", "sortable":true},
    {"name":"column2", "label":"Column 2", "sortable":false}
  ],
  "actions":{}
}

• Available from version 6.0 AWS S3 - proper service integration source object. To  set it:
  • Select Config (34, it must be created before, see below)
  • Specify AWS S3 account Bucket name (35) where files and folders are
  • Optionally specify Path to particular Folder (36) in the Bucket
  • Configure Filter (37) to limit List with entries matching it
  • Select type (38) of entries to show (files, folders, all)

To work with AWS S3 account user must create correct and full configuration for AWS S3 list:

• Open administration page
• Go to Custom Code -> Custom Settings (39)
• Click "Work Relay Config List setting (40) to go to proper Custom Setting Definition page (41)
• Click "Manage" button (42) to open list of it's values (43)
• Click "New" button (44) to create new config or "Edit" link at necessary entry (45) to edit current config.
• Enter the following data (46):
  • Name (mandatory) to be referenced in system
  • Option1 - first AWS S3 key
  • Option2 - second AWS S3 key
  • Option3 - location provided by Amazon service
  • Value - the AWS S3 Config string as is, it must be set to make system know that it is special config for AWS S3 integration in forms
  • Other options should be empty