Need to Customize DropDown Menu

rah dev
Tera Contributor

There is need to customize drop down in UI Builder, when incident selected, there should be form of incident record and if second option selected, there other table should show.

rahdev_1-1713810834836.png

 

1 ACCEPTED SOLUTION

IbrarA
Giga Guru

@rah dev you can implement following steps:

 

create client script and  use this code:

/**

 * @param {params} params

 * @param {api} params.api

 * @param {any} params.event

 * @param {any} params.imports

 */

function handler({

    api,

    event,

    helpers,

    imports

}) {

    var table;

    switch(event.payload.item.id){

         case "incident":

        {   table = "incident";

            break;}

        case "change request":

        {   table = "change_request";

            break;}

       

    }

    api.emit('NAV_ITEM_SELECTED', {

        route: "record",

        fields: {

            table: table,

            sysId: "-1"

        }

    });

}

IbrarA_0-1713899262505.png

 

Create client state:

IbrarA_1-1713899262511.png

 

 

Add your above client script on dropdown events:

IbrarA_2-1713899262517.png

 

ibrar

View solution in original post

6 REPLIES 6

Its_Azar
Tera Guru

Hi there @rah dev 

 

look at the dropdown field in your UI Builder form that needs customization. make sure it's configured to store the necessary options (e.g., incident, other table).

Create UI Policies that trigger based on the selected option in the dropdown menu.

For example, create a UI Policy that activates when "incident" is selected. 

Set up UI Actions that switch the form context based on the selected option.

For instance, create a UI Action that redirects to the incident form when "incident" is selected in the dropdown menu, and another action for the other table.

use client scripts to dynamically alter the form's behavior based on the selected dropdown option.

  • You can use onChange client scripts on the dropdown field to trigger actions such as showing/hiding specific sections of the form or dynamically loading different form layouts.

If this helps kindly accept the response thanks much.

☑️ If this helped, please mark it as Helpful or Accept Solution so others can find the answer too.




Kind Regards,

Mohamed Azarudeen Z

Developer @ KPMG

 Microsoft MVP (AI Services), India

rah dev
Tera Contributor

@Its_Azar wrote:

Hi there @rah dev 

 

look at the dropdown field in your UI Builder form that needs customization. make sure it's configured to store the necessary options (e.g., incident, other table).

Create UI Policies that trigger based on the selected option in the dropdown menu.

For example, create a UI Policy that activates when "incident" is selected. 

Set up UI Actions that switch the form context based on the selected option.

For instance, create a UI Action that redirects to the incident form when "incident" is selected in the dropdown menu, and another action for the other table.

use client scripts to dynamically alter the form's behavior based on the selected dropdown option.

  • You can use onChange client scripts on the dropdown field to trigger actions such as showing/hiding specific sections of the form or dynamically loading different form layouts.

If this helps kindly accept the response thanks much.


@Its_Azar, thanks for the reply but we cannot apply ui policies on UI Builder.

James Chun
Kilo Patron

Hi @rah dev,

 

Are you modifying the above 'drop-down' or creating something similar in a different Workspace?

 

Cheers

Hi @James Chun, actually i am using drop-down menu like in compliance workspace and when we select any option there, so form of the table appears under drop-down. similar functionality i need in the custom workspace