In this article I’ll be showing you how to set up the new multiselect control that was released in Creatio version 8.2.1. The sample for this article will allow you to select multiple type values for a contact. The Multiselect control is basically a different visual control for a 1:many list or detail. Each selected value creates a row in this 1:many list for the current record.
There are only 2 simple steps to use this new component:
- Creating an object to store the data in
- Add the multiselect control to the page and plug in the correct lookup/object
Once you finish the end results will look like this:
STEP 1: Creating your object
For the first step we’ll need to create our object and it will need 2 lookup columns. This is where it will store the selected values for the record. For the two columns, we’ll need one for the object the multiselect is looking up, in the sample for this article “Contact type”, and the other is how we’ll connect the multiselect to the current page, in the sample for this article “Contact”.
STEP 2: Adding the multiselect control to the page
Next, go and add the multiselect to the page. The component icon is shown below. Drag it to where you want it on the page.
On the multiselect lookup settings, for “Select lookup” select the lookup you want the user to select from. When the user adds a “type” to my list, I want them to select from the “Contact type” lookup. For the “Multiselect value storage” you will select the new object you created in step 1. Note, it will only show choices to select that are objects containing a lookup matching the lookup selected for “Select lookup” and also contains a lookup matching the page’s data source.
Now set the “Apply filter by page data” to connect the multiselect to the page the same way you would connect a list to the page.
Once you’re finished with this the multiselect should be done and the user will be able to select multiple values from the lookup.
Thank you Tate, this is very helpful. May I also ask, are we able to display “multi select field” on the page view? And how to apply search function to the field
Many thanks.
Hello Cho,
Can you explain what you mean by “on the page view”? Also, as far as “search function” I assume you mean filtering it? Nothing is documented on that yet, but it might be possible that it could be fitlerable using the method described here https://customerfx.com/article/dynamically-filtering-a-lookup-on-a-creatio-freedom-ui-page/ (although might need some digging to determine the attribute name for it’s internal lookup datasource)
Ryan
Hi Guys,
thanks for article. Do you know is it possible to make the multilookup required field on the page?
I don’t believe you can ootb or using business rules. Technically, it’s not part of the object, but a related 1:many object. You’d likely need to do it some way via code – I’ve not dug into that yet to see which attributes are needed to get the selected items in the multiselect, so can’t really provide much guidance.
Hi Ryan ,
How can I get the values of this multi select.
Thanks.
Th selected records get saved to the 1:many object on save, you could read them from there. If you need them before the save, I assume they get added to an attribute on the page. You’ll have to wire up a change request to see which attributes changed when items are added, hopefully there is one.
Hi Ryan,
Is it possible to load a default value to the multiselect lookup? For example if I have added a multiselect lookup in the contact page, the type of the multiselect lookup is account. I want that when loading the create contact minipage it shows the account multiselect lookup with a default account in it.
Thank you!
I am not sure, I’ve not seen anything for that yet. Since it’s bound to a 1:many you could add a record in the 1:many object, but that would require first saving the record. I assume this capability does exist, I’ve just not looked for it yet. There’s likely an attribute that stores the selected items you could add an entry to.
Hello, and it’s possible to sort the list of elements to choose?
Hi Ryan,
What is the handler that gets triggered when you click on the multi-select lookup drop down field?
Do you have any idea on this?
Thank you
There will be a change event and the values stored in an attribute. Best way to find out the name of the attribute is to wire up a change request handler and output request.attributeName to the console, then go make a change to see what the attribute is named. See https://customerfx.com/article/responding-to-an-event-when-a-field-is-changed-on-a-creatio-freedom-ui-page/
Also, how to read the values from this multi-select field?
See previous comment on getting attribute on change of the values. Re: https://customerfx.com/article/responding-to-an-event-when-a-field-is-changed-on-a-creatio-freedom-ui-page/
See previous comment on getting attribute on change of the values.
So the expectation is to filter a multi-value lookup field using another multi-value lookup. How can we do this?
I believe you *might* be able to filter the list via code as long as you’re on 10X (I believe this didn’t work for the Multiselect in previous versions). The multiselect’s data source is named [MultiSelectName]_List_Items_DS. See here for applying a filter at runtime: https://customerfx.com/article/dynamically-filtering-a-lookup-on-a-creatio-freedom-ui-page/
Note, the specifics for the multiselect filtering is something you’ll need to figure out. Also, adding filter conditions to lookups at runtime based on other field values doesn’t always work since it doesn’t trigger the request to load data and re-apply the filter each time.
This is figured out. Let me put the code here, so this may be helpful or Ryan correct if anything can be optimized here.
So the scenario is, we have a multi-select lookup field called “Activity sub-sector” that should be filtered by a multi-select lookup field called “Activity Sector.”
{
request: “crt.LoadDataRequest”,
handler: async (request, next) => {
if (request.dataSourceName !== “MultiSelect_SubsectorOfActivity_List_Items_DS”) {
return await next?.handle(request);
}
// Get the filter generated by the Sector multi-select
const sectorFilter = await request.$context.MultiSelect_SectorOfActivity_List_Items_Filter;
console.log(“Sector Filter:”, sectorFilter);
// Get the SkipSelectedItemsFilter
const skipSelectedItemsFilter = sectorFilter?.filters?.get(“SkipSelectedItemsFilter”);
console.log(“Skip Selected Items Filter:”, skipSelectedItemsFilter);
if (!skipSelectedItemsFilter) {
return await next?.handle(request);
}
// Get the selected Sector IDs
const sectorIds = skipSelectedItemsFilter.rightExpressions.map(expression => expression?.parameter?.value).filter(Boolean);
console.log(“SELECTED SECTOR IDs:”, sectorIds);
if (sectorIds.length === 0) {
return await next?.handle(request);
}
// Create an OR filter group
const filter = new sdk.FilterGroup();
filter.logicalOperation = sdk.LogicalOperatorType.Or;
// Add one Equal filter for each selected Sector
for (const sectorId of sectorIds) {
await filter.addSchemaColumnFilterWithParameter(
sdk.ComparisonType.Equal,
“MAISectorOfActivity”,
sectorId
);
}
const newFilter = Object.assign({}, filter);
newFilter.items = filter.items;
request.parameters = request.parameters || [];
request.parameters.push({
type: “filter”,
value: newFilter
});
return await next?.handle(request);
}
},
And this perfectly worked!