Skip to main content
Version: 8.3

Set up Multiselect lookup component

Level: beginner

Use Multiselect lookup component to display multiple values from a single object column. This is useful for implementing many-to-many relationships where you need to select and visually manage multiple values.

Example

Set up the Multiselect lookup component that displays contact persons for accounts that have more than one contact person.

Before you set up the component, create a "Multiple contacts in account" junction object in the relevant app. The object must inherit from BaseEntity and contain two lookup columns. One column must contain the lookup from which the users can select data, for example, "Contact," and the other column must connect the multiselect entries to the current record, for example, "Account." Learn more about objects in the developer documentation: Configuration elements of the Object type.

Fig. 1 Set up a Multiselect lookup component
Fig. 1 Set up a Multiselect lookup component
  1. Drag a Multiselect lookup component to the canvas and open the component setup area.
  2. Select the lookup whose values the users will be able to select in the Select lookup parameter. For example, Contact. After you select a lookup, Creatio will display other connection parameters.
  3. Specify the junction object you created earlier in the Multiselect value storage parameter. For example, "Multiple contacts in account."
  4. View the column whose values to display in the Column to display parameter. The parameter is populated automatically and non-editable.
  5. Specify the column that contains the title of the tile in the Primary display field parameter. For this example, leave the automatically populated value.
  6. Click next to the Apply filter by page data parameter Apply filter by page data parameter and connect the page data source to the junction object. For this example, select the "Account" data source, select "Id" in the Account dropdown list, and select Account in the Multiple contacts in account dropdown list.
  7. Select how to select the lookup values in the Lookup view parameter. For this example, leave the value as "Dropdown list."
  8. Select the Read-only checkbox to make the field read-only. For this example, leave the checkbox clear.
  9. Click the or button in the Visibility group to make the component visible or invisible by default on the page, respectively. For this example, leave the component visible.
  10. Click Setup conditions in the Visibility group to set up element business rules. For this example, do not add business rules. Learn more about setting up business rules in a separate article: Set up business rules.
  11. Specify the position of the title relative to the field in the Title position parameter. For this example, select "Auto."
  12. Enter Title on page parameter if the title on the page must differ from the title in Creatio. For this example, enter "Contact persons." You can click the button to the right to localize the title to other languages you are going to use in the app. Learn more about localizing Freedom UI elements in a separate article: Localize a Freedom UI element.
  13. Enter the hint on how to fill out the field in the Placeholder parameter. Creatio displays hints in fields before a user starts entering a value. For this example, leave the parameter empty. If you fill out the parameter, you can localize it similarly to the Title on page parameter. We do not recommend using long placeholder text as it can be difficult to read, which might create accessibility issues.
  14. Enter the tooltip that contains an additional hint in the Tooltip parameter. After you fill out the parameter, Creatio displays the icon next to the field. Hold the pointer over the icon to view the tooltip. For this example, leave the parameter empty. If you fill out the parameter, you can localize it similarly to the Title on page parameter.
  15. Clear the Enable adding new values checkbox to prevent the user from adding new lookup values from the field.
  16. View the unique field code in the page schema in the Element code parameter. Creatio uses this code in page schemas. You can change it if needed. This helps software developers to customize the app easier, especially if you have multiple similar fields on the page. For this example, leave the code as is.

As a result, Creatio will add the Multiselect lookup component that displays contact persons to the page.


See also

Overview of Freedom UI Designer and its elements

Set up the app UI

Set up business rules

Localize a Freedom UI element

Tech Hour: UI/ UX Building pages in Freedom UI Designer

Tech Hour: UI/ UX Best practices in Creatio