UI Builder component visibility based on Incident field

[Kevin70]

Hi, 

I am configuring the Incident Overview Page of Service Operations Workspace according to the following instructions: 

I want to edit the visibility of a component based on a field value of the incident such as state (component displays if the incident has x state). I wanted to know if this is possible with component visibility function in UI Builder. Thanks!

[JagjeetSingh · Accepted solution]

Hi,

It is possible. There are couple of things you need to do.

1. Duplicate the overview variant as it is stated in documentation.

2. Now, you need the incident sysId first to query the state. This is mapped in page properties. You can use this to query the incident state via data sources.

3. Create a state parameter to specify the fields to query. Here we want to query state.

4. Click on data sources icon and Add a data source of type- "Look Up Record". Map the properties as below.

5. As the data source  is triggered immediately. The output would be available to you on page load in below format.

{
  "_row_data": {
    "displayValue": "INC0010007",
    "uniqueValue": "b2c7e2f52faca1101dc093acf699b682"
  },
  "number": {
    "value": "INC0010007",
    "displayValue": "INC0010007"
  },
  "state": {
    "value": "1",
    "displayValue": "New"
  }
}

You can access this output via: api.data.look_up_record_1.result.state.value in scripts.

This can be used in your component's hidden property like below.

6. Click on the component you want to hide. Add below script to the property.

/**
  * @Param {params} params
  * @Param {api} params.api
  * @Param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
  if(api.data.look_up_record_1.result.state.value == 1) //If state=1
	return true; //Hide the component
  else
  return false; //Do not hide the component
}

Also, if you want to execute this only for incident table then add another condition in IF statement to check the table also.

/**
  * @Param {params} params
  * @Param {api} params.api
  * @Param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
  if(api.data.look_up_record_1.result.state.value == 1 && api.context.props.table == "incident")
	return true; //Hide the component
  else
  return false; //Do not hide the component
}

[tiguin2798]

Hey @JagjeetSingh I am trying to achieve something similar, but based off Incident subcategory. I wonder if I'm not finding the correct page properties for the incident table and sysID. When I pull the page configuration for the properties on the "body" component for Service Operations Workspace record page it shows "Required parameters" but not the data format you're pulling.

Additionally, it keeps clearing out my return fields when I add the data resource I'm assuming should be "@subcategory.fields". 

I'm trying to do this for the activity compose and activity stream components in Service Operations Workspace. Below is my code in the 'hide component' field. Any suggestions on how to get this working?

/**
  * @Param {params} params
  * @Param {api} params.api
  * @Param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
  if(api.data.look_up_record_1.result.subcategory.value == ir_legal_support && api.context.props.table == "incident")
    if (!gs.hasRole("test_ir_infosec, test_CAB_all_standard_read")) { 
	    return true; //Hide the component
      else
      return false; //Do not hide the component
    }
}