Sorting a Dropdown Lookup on a Creatio Freedom UI Page

By default, dropdown lookups on a Creatio Freedom UI page sort by alphabetical order. However, it’s possible to change this sort by modifying an attribute for the dropdown lookup that stores the sort config.

To modify this sort, in the page’s model initialization request, you’ll get the current sort config, then modify it to the sort you’d like. The sort config is stored in an attribute that begins with the name of the attribute that the control is bound to, followed by “_List_Sorting”. So, if the attribute that the control is bound to is “PDS_Stage_l08enh0” the sort attribute will be named “PDS_Stage_l08enh0_List_Sorting”. To be clear, this is the name of the attribute the control is bound to, not the name/Id of the control. Also, this method is for dropdown lookups only, not lookups that open the lookup dialog.

In this sample, I have a dropdown for the Opportunity stage. Normally, this will appear sorted alphabetically. I want it to appear in the order of the stages by the stage Number column in ascending order. To make the control sort in this way, I’ll add the following request to the page:

{
	request: "crt.HandleViewModelInitRequest",
	handler: async (request, next) => {
		const sortConfig = await request.$context.PDS_Stage_l08enh0_List_Sorting;
		const firstSort = sortConfig[0];
		firstSort.columnName = "Number";
		firstSort.direction = "asc";
                    
		return next?.handle(request);
	}
}

In the code above, by dropdown lookup is bound to an attribute named “PDS_Stage_l08enh0”, hence getting the sort config from “PDS_Stage_l08enh0_List_Sorting“. There should already be a sort config at index 0 since it’s the default sort by display value in alphabetical ascending order. The end result will be as follows:

 

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.

3 Comments

  1. Hi Ryand

    One question, I add sorting options in accounts to three lookups (Account Type, Annuel Revenue & Number of employees), but just works Annual Revenue. What could be wrong in my code’

    {
    request: “crt.HandleViewModelInitRequest”,

    // 1.- Typo Empresa
    handler: async (request, next) => {
    //await next?.handle(request);
    let sortingConfigList = await request.$context.Type_List_Sorting;
    let firstSortingConfig = sortingConfigList[0];
    firstSortingConfig.columnName = “NdosOrdenarPor”; // New field added to sort
    firstSortingConfig.direction = “asc”; //desc or asc
    return next?.handle(request);
    },

    // 2.- Nro de Empleados
    handler: async (request, next) => {
    //await next?.handle(request);
    let sortingConfigList = await request.$context.EmployeesNumber_List_Sorting;
    let firstSortingConfig = sortingConfigList[0];
    firstSortingConfig.columnName = “Position”;
    firstSortingConfig.direction = “asc”; //desc or asc
    return next?.handle(request);
    },

    // 3.- Annual revenue/Facturacion anual
    handler: async (request, next) => {
    //await next?.handle(request);
    let sortingConfigList = await request.$context.AnnualRevenue_List_Sorting;
    let firstSortingConfig = sortingConfigList[0];
    firstSortingConfig.columnName = “FromBaseCurrency”;
    firstSortingConfig.direction = “asc”; //desc or asc
    return next?.handle(request);
    }

    }

    Reply
    • Hi Julio,

      The syntax is incorrect. You have two options:

      OPTION 1: Add separate request handlers:

      {
          request: "crt.HandleViewModelInitRequest",
          handler: async (request, next) => {
              // init handler #1
              return next?.handle(request);
          }
      },
      {
          request: "crt.HandleViewModelInitRequest",
          handler: async (request, next) => {
              // init handler #2    
              return next?.handle(request);
          }
      },
      {
          request: "crt.HandleViewModelInitRequest",
          handler: async (request, next) => {
              // init handler #3        
              return next?.handle(request);
          }
      }

      OR

      OPTION 2: Add it all to the same init handler (*this is the route I would recommend):

      {
          request: "crt.HandleViewModelInitRequest",
          handler: async (request, next) => {
              // do everything here
      
              // add filter for lookup #1
      
              // add filter for lookup #2
      
              // add filter for lookup #3
              // etc
              return next?.handle(request);
          }
      }

      Ryan

    • Basically, a request handler has two parts:

      1. request: The name of the request to handle
      2. handler: The function body that will handle the request

      You can’t have multiple handler function bodies for the same request, unless you separate them all as separate requests with the two parts listed above.

Submit a Comment

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