Practical UIB Examples: Hide a container/component based on the user's role

[Marc Mouries]

1. Select the component or container that needs to have a dynamic visibility
   
   
2. In the config panel, click the visibility icon
   
   
   
3. Click on the script icon
   
   
   
4. Set the visibility condition
   
   

   /**
     * @param {params} params
     * @param {api} params.api
     * @param {TransformApiHelpers} params.helpers
     */
   function evaluateProperty({api, helpers}) {
     let user_roles = api.context.session.user.roles;
     let visibility_condition 
         = user_roles.includes("THE USER'S ROLE THAT SHOULD NOT SEE THE ELEMENT");
   	return visibility_condition;
   }​

   
   
    

[GMunee]

What if I just want to hide this container for everyone?  

[anshul_jain25]

@Marc Mouries , i have created a component which is visible for case and INC, can we hide component for case so that it is shown only for INC, this i have done on CSM workspace.

Thanks in advance for the response, it will be very helpful.

[Community Alums]

How to show a container/component in UI Builder based on the logged-in user's role 

ex: I have to show only to one particular role.

[Anandhi Benita]

How to hide a container/component in UI builder based on group.

Ex: I have to hide only to one particular group

[Divakar Raj1]

@Community Alums , you can use something like this

function evaluateProperty({api, helpers}) {

  let user_roles = api.context.session.user.roles;

  let visibility_condition 

      = user_roles.includes("role that you want it visible for");

  return !visibility_condition;

}

[Hariskanthini]

Hello,

How can I access user groups using this method?

[Daniel R2]

@Marc Mouries @Divakar Raj1 - Hi thank you for the post. We are setting up agent assist and would also like to hide the tab using script based on record table.

We have multiple Agent Assist variants, and each one should be on a different table, we have tried adding conditions to the tabs to hide it for other tables and make it visible to specific tables however it doesnt seem to be working as expected. We have tried adding the script below to one of the agent assist tabs,  however it isn't working, do you know what script we could use to ensure correct visibility based on conditions?

/**
 * @param {params} params
 * @param {api} params.api
 * @param {TransformApiHelpers} params.helpers
 */
function evaluateProperty({api, helpers}) {
    // Get the current table name
    var currentTable = api.data.record.table;

    // Check if the current table is x_finan_accounts_payable
    if (currentTable === 'x_finan_accounts_payable') {
        // Return condition to show the tab
        return 'true';
    } else {
    }
}

[tiguin2798]

Hello, I came across this thread as I am trying to hide the 'Activity Stream Compose' and 'Activity Stream' components if a user has a certain role and the subcategories on the incident table is one of a few options. I am new to javascript and UI builder so please be patient. I tried the code below (removing personal info) but still my users with the role excluded can see this. Any suggestions?

/**
  *  {params} params
  *  {api} params.api
  *  {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
  var currentTable = incident;
  var validSubcategories = ['test 1', 'test 2', 'test 3', 'test 4', 'test 5', 'test 6'];

  if (currentTable === 'incident') {
    let user_roles = api.context.session.user.roles;
    let visibility_condition 
      = user_roles.includes("CAB_test_role");
      var isValidSubcategory = validSubcategories.indexOf(subcategory) > -1;
	return visibility_condition;
  }
}

[Sachin bagyal]

For Example, If you want to show a Tab component Conditionally in workspace if the user is supervisor or not.
This is the script you can use inside that tab settings for hiding the tab dynamically:

function evaluateProperty({

    api,

    helpers

}) {

    let user_roles = api.context.session.user.roles;

    let visibility_condition = user_roles.includes("x_htms5_submissi_0.supervisor");

    if (visibility_condition) {

        return false;

    } else

        return true;

}

#UIBuilder#HideComponentinWorkspace#servicenowuiComponent