Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

UI Builder text color conditional logic

sbfield
Tera Contributor

In UI Builder,  I am conditionally rendering text based on if it is available.

/**
  * @Param {params} params
  * @Param {api} params.api
  * @Param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
  let apiState = api.item.value.state.displayValue;

  if(apiState){
    apiState;
  }else{
    return 'Data Missing';
  }
	return apiState;
}

 

For example, here if there is no data, it returns the string "Data Missing".

However, I want to change the background color and text color based on this condition.

I have been unable to use the standard DOM elements in Use Script of the component.

This is a simple thing to do in standard JS, how is this done in Service Now UI Builder?

 

When data is missing, 

1 REPLY 1

Dibyaratnam
Tera Sage

In which component you are trying to render this text? Can you share the screenshot of the same showing the config properties of the component