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