Creatio 8.1 introduces two new features when it comes to lookups and lists. First, is the addition of a Lookup dialog (instead of the drop-down type lookup that has been the only option for lookups previously for Freedom UI). Second, is the ability to multi-select from lists, which includes the list on the new Lookup dialog. With that said, this article only works for version 8.1 and higher.
NOTE: This technique only works in Creatio 8.1 or higher
We’re going to look at how to programmatically invoke the new Lookup dialog and also how to allow for multiple items to be selected. For this article, we’ll allow multiple account types to be selected and then we’ll place the result in a text field on the page. The end result will be as follows:
To invoke the lookup dialog, we’ll execute a crt.OpenLookupPageRequest. We can pass parameters to this request, such as the entity to lookup and also whether we want the user to be able to select multiple items. For some reason, rather than await the results, we’ll include a callback function that will get invoked when the lookup dialog closes. We’ll be passed an array of the selected items in this function. This article will flatten this out to a string of comma-separated items and place in a text field. Let’s look at the code:
request.$context.executeRequest({
type: "crt.OpenLookupPageRequest",
$context: request.$context,
entitySchemaName: "AccountType",
//filtersConfig: add any filters here
features: {
select: {
multiple: true,
selectAll: false,
resultType: 'lookupValues'
},
create: {
enabled: false
}
},
afterClosed: function(selectedItems) {
// flatten out to a comma-delimited string and place in field
const textValues = Object.values(selectedItems).map(item => item.displayValue).join(', ');
request.$context.StringAttribute_2pp5ptx = textValues;
}
});
Note you can also set a filter for the lookup and also pre-select items in the list – more on this in a future article.
Other Lookup Request Properties
A few other available properties that can be included in the request:
- filersConfig: Add additional filters for the lookup
- caption: Provide a different caption for the lookup dialog
- schemaName: Provide an alternative lookup page to use for the requst
- itemsAttributeName: Instead of providing an entitySchemaName proeprty, you can provide the name of an existing datasource on the page. This also allows the data source to be filtered when it requests it’s data for the lookup dialog.
In the near future I will be wrapping this all up as a reusable component for a Freedom UI replacement for my marketplace add-on Multi-Select Text Field.
hi Ryan, excuse my Creatio noobie question, can you explain the difference / benefits between your existing Multi-Select text field and this new Lookup method please?
i.e. which is better for reporting?
Hello Vincent,
Creatio currently has two different page types. The page types that have existed since the beginning of Creatio are now referred to as “Classic” pages. The newer type of page is referred to as “Freedom UI” pages. The two types are both using very different tech behind everything.
My existing Multi-Select text field control works only with classic pages – and will continue to work with classic pages only. This article outlines how to accomplish something similar on the newer Freedom UI page type. I will be creating a version of the Multi-Select text field for Freedom UI pages in the future.
Hopefully that helps.
Ryan
Hi Ryan, thank you for your reply and explanation.
Do your solutions enable reporting for each multiple value selected?
Coming from experience with other CRM’s I’m very surprised Creation hasn’t included multiselect dropdowns/lookups within the core product.
As far as reporting, that is up to the report and how you want to view the data. The data is saved in the database as a comma-delimited string, so the data is there and available – depending on the report needs would determine if the comma-delimited string is useful or not.
Hi Ryan, do you have any guides or info on how to apply the filters mentioned under filtersConfig at the bottom of this article? I can’t see any academy articles on how this should be configured, and it would be quite useful to be able to apply some filters to the lookup being shown.
Hi Harvey,
I have started digging into that. I expect to have an article written up on it soon. Still working out a few details.
Ryan
Hi Ryan,
Can I have a full snippet code on the handlers? I am unsure how did this one worked. As of my understanding this one is an input text and not a lookup/combobox element.
Thank you
This article does use the values returned from the lookup to form a string and place the value in a text input control. However, the point is that you can use the results however is needed. In the article linked blow the results of the lookup are used to insert values into a table: https://customerfx.com/article/adding-to-a-list-from-a-lookup-on-a-freedom-ui-page/
Hi Ryan,
The thing is, I wanted it to work the same with what’s on the video on this article above. But my problem is that I am unsure how did the function was being called from an input element
Ah, I see.
That isn’t just a text input, but also a button. I added a button just next to the text input. The click of that button is what invokes the code in the article.
To get the button placed like that, you could either move it with CSS or use a flex container with multiple columns. Then stretch the input across multiple columns and leave the last one for the button.
Hello Ryan,
Could you please share the CSS you used for this ?
Thank you.
Hello Sarthak,
I no longer have the CSS I used for this sample. However, it was pretty simple. Basically, I added a button that was an icon only. Then I used CSS to set its position to absolute and used top/left/etc as necessary to position over the right side of the text control.
Ryan
Hello Ryan,
I need to implement a multi-select field on a Freedom UI Page, but in version 8.0.10.
Do you have any suggestion to get this issue done?
Thank you.
Hello Igor,
The lookup dialog for Freedom UI doesn’t exist in 8.0.10. You’d have to come up with some other approach.
Ryan
Hi Ryan, with this new Lookup Dialog, is there a method you’re aware of for overriding the template to configure grid/list settings such as visible columns, default sort, etc on a per entity basis?
That is, for example, whenever a Lookup Dialog is launched for a list of, say, Contacts, I’d like to have been able to setup the list to display more than just Name (and in a perfect world, to de-link Name or replace it with First/Surname columns so that users aren’t accidentally swept away to the Contact record).
Apologies, this is gently related to the original post, but just as gently off-topic! Any ideas or even confirmation that it can’t be done would be super helpful.
You can customize the layout for all users in the lookup (on a per-entity basis). Open the lookup for something like Account, add or remove columns to get the desired layout, then use the list menu button (three dots on the right side) to set that layout for all users. See https://share.customerfx.com/OAuNZBpD
Ryan
Hi Ryan,
It seems that if no selection is done, afterClosed method is not launched. Do you know if there another method to trap this case ?
I believe you can add the property (not tested)
returnEmptyValue: true
to the request for the afterClosed to be called if no records are selected.
Hi Ryan,
Please tell me where to enter this code to implement this multi-selection.
The code in this article executes from a button on the page. You can see how to wire up a custom handler for a button in this article (the code in this article would go in the button request handler)
https://customerfx.com/article/adding-a-button-to-execute-custom-code-on-a-creatio-freedom-ui-page/
Hi Ryan,
How you place button over account type field?
For the sample in the article I placed a button on the page and then moved it over the field using CSS.
You can see an article on how to add CSS here (it’s the same for Freedom UI pages) https://customerfx.com/article/adding-custom-css-style-sheets-in-bpmonline/
Ryan
Hi Ryan,
How can I configure sorting for the list shown in the Multiselect lookup page?
I don’t believe you can at this point. At least, none of the exposed properties seem to include support for this. Additionally, the sort is stored in the dialog’s list config. You could save the default layout for the list for all users (and bind the associated SysProfileData record to the package, if needed).
Hello Ryan,
Is it possible to display pre-selected values when we open the multi-select lookup page ?
Thank you.
Yes, you can see how to do that in the comments of this community post:
https://community.creatio.com/questions/filter-crtopenlookuppagerequest
Ryan
Hi Ryan,
any update on Multi-Select Text Field add on in creatio marketplace , I have a use case where i need to create an object that will add multiple account under a opportunity in a list
Still not yet available, no timeframe for it yet. You can replicate that functionality using this article as a starting point: https://customerfx.com/article/adding-to-a-list-from-a-lookup-on-a-freedom-ui-page/
Hi Ryan,
I’m encountering an issue with the “selectAll: true” option in my dialog box. When I enable this setting, the “Select All” button becomes unresponsive, and it does not select any fields as expected.
Could you please let me know if there are any additional configurations or settings required to enable the “Select All” functionality correctly?
Below is the relevant code snippet from my handler:
“`js
{
request: “Crt.CustomButton1”,
handler: async (request, next) => {
try {
// Step 1: Open the lookup page immediately when the button is clicked
await request.$context.executeRequest({
type: “crt.OpenLookupPageRequest”,
$context: request.$context,
entitySchemaName: “AccountIndustry”,
caption: “Select Industry Types”,
features: {
select: {
multiple: true,
selectAll: false,
resultType: “lookupValues”
},
create: {
enabled: false
}
},
afterClosed: async function (selectedItems) {
if (!selectedItems) {
console.log(“No selection made”);
return;
}
if (selectedItems && selectedItems.length > 0) {
console.log(“Selected Items:”, selectedItems);
// Step 2: Store selected industry types in the context for later use
request.$context.selectedEventTypes = selectedItems;
// Step 3: Flatten the selected items into a string
const textValues = selectedItems
.map(item => item.displayValue)
.join(“, “);
request.$context.AccountDS_UsrIndustryText_s5hzpn4 = textValues;
console.log(“Industry types saved in context:”, textValues);
} else {
console.log(“No items were selected.”);
}
}
});
} catch (error) {
console.error(“Error opening lookup page:”, error);
}
}
},
“`
Also, I believe when you’re using selectAll you don’t get back an array of selected Id values. Instead you get back the active filter in place when the select all was used and it’s up to you to use the filter to retrieve the records.
You’ll likely need to switch to using “crt.OpenSelectionWindowRequest” instead of “crt.OpenLookupWindowRequest” (which was deprecated and replaced with crt.OpenSelectionWindowRequest)
See https://academy.creatio.com/docs/8.x/dev/development-on-creatio-platform/8.1/platform-customization/freedom-ui/selection-window/examples/implement-selection-window
Hello Mr. Ryan,
I hope you doing well,
I did what suggested in here and it worked fine with me,
the only issue I have now is when click the three dots there is the delete option I want to remove this option
Technically uod have to override the base lookup page to remove those options, however, you could do it with CSS and not override that. I believe those might be removed in 8.3 (along with the hyperlink on records)
Hi Ryan,
I found a solution which which is a multi select lookup compoment without adding the piece of code. Can you share your thoughts please why we still need to invoke from code.
https://academy.creatio.com/docs/8.x/no-code-customization/customization-tools/ui-and-business-logic-customization/element-setup-examples/components/set-up-multiselect-lookup-component
Hi Ahmed,
We have a post on the Multiselect component as well here: https://customerfx.com/article/using-the-new-multiselect-control-in-creatio-8-2-1-and-higher/
When this article was written that did not exist. However, they are both for different purposes. The Multiselect component (available as of 8.2.1) is basically a different visual for a 1:many table for the record. Instead of showing as a list, it shows the associated records as pills in the multiselect. This article is mainly meant to show how do this via code to construct a string of values (which are stored in a text column)
Ryan
Hi Ryan,
Thank you for this post (and the others as well) — I use them a lot!
I’m having a hard time adding a filter to a lookup window. I have a list of IDs and want to filter the lookup using a ComparisonType.In condition
(for example: Contact Id IN [list of IDs]).
Could you please provide a simple example I can copy?
Thank you,
Chani
Tried this for a Lookup in v8.3.2, unfortunately I am getting only the Id in the selectedItems, no displayValue.
sdk.HandlerChainService.instance.process({
type: “crt.OpenSelectionWindowRequest”,
scopes: […request.scopes],
$context: request.$context,
entitySchemaName: “UsrCustomType”,
caption: “Select 1 or more Type”,
features: {
select: {
multiple: true,
selectAll: true,
resultType: ‘lookupValues’
},
create: {
enabled: false
}
},
afterClosed: function(selectedItems) {
debugger;
const selectedValue = Object.values(selectedItems).map(item => item.displayValue).join(‘, ‘);
request.$context.PDS_UsrText_r1di8zc = selectedValue;
}
});
return next?.handle(request);
}
Is there a new way of doing this?
I got it fix. I should be using “type: “crt.OpenLookupPageRequest””. It returns displayValue and Id.
For crt.OpenSelectionWindowRequest it does return only the ID values in the selectedItems. As you’ve found crt.OpenLookupPageRequest does return the displayValue as well, however just to note, crt.OpenLookupPageRequest is deprecated (although I don’t expect it will every get removed and will continue to be valid to use).
For crt.OpenSelectionWindowRequest, it’s possible there’s some option for the “resultType” that could include the displayValue, however, I’ve never looked into what options are there.
Ryan