Invoking a Multi-Select Lookup Dialog on a Creatio Freedom UI Page

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;
	}
});

There’s still more to figure out for invoking the lookup. Note you can set a filter for the lookup, however, I am still working out if pre-selecting items is possible in the current version (not sure that is possible quite yet).

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.

Want content like this delivered to your inbox? Sign up for our newsletter!
ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

16 Comments

  1. 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?

    Reply
    • 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

  2. 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.

    Reply
    • 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.

  3. 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.

    Reply
    • 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

  4. 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

    Reply
    • 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

  5. 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.

    Reply
  6. 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.

    Reply
    • 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

  7. 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.

    Reply
    • 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

  8. 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 ?

    Reply
    • 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.

Submit a Comment

Your email address will not be published. Required fields are marked *