UI Builder - Component Visibility Logic

[Chris Pearson]

Disclaimer: The ideas, thoughts, and opinions in this post reflect my own views and do not necessarily represent the views of my employer, Accenture. 

As we build fully capable and engaging experiences in UI Builder, we will eventually hit a requirement which goes something like this: There will be a button on our portal record page where the end user has an option to Cancel their request. This button should only appear to the user under certain conditions. 

We certainly know how to build a record page on a portal by now and we can add a button to our page which calls the proper Transform Data Broker onClick to execute the server-side logic to cancel the ticket according to the requirements. But how do we ensure that the button only appears under the right conditions? 

Enter Component Visibility. 

After selecting the component in question, we can access the visibility options by clicking the icon which looks like an eye in the upper right section of UIB. 

Here we can bind the component's visibility to a Client State using the 'Hide component' property. If the Client State returns boolean true, the component is hidden, if it returns false, the component is displayed. 

Client States are defined by expanding the Client State tray at the bottom of UIB. It's the icon which looks a little like a driver's license. 

Here we can create a new Client State and chose a type of Boolean and select an initial (default) value of true. This way our button will be hidden by default when the page initially loads. 

Next we need to be able to change the Client State to false at an appropriate time. In our scenario, when the page loads, we are bringing data back from the DB with a data broker. Most likely this will be by using a GraphQL Data Broker in conjunction with a Transform Data Broker. It's in our Transform Data Broker that we can analyze the output of our GraphQL broker and add data to our return object which we then can read from a client script to set our Client State appropriately. 

Once our data broker has successfully fetched data from the DB, we trigger a client script to execute. We do this by calling our Client script from the Data Fetch Succeeded event on the Data Broker. 

In our client script we then read the data from our Transform data broker which tells us whether or not the proper conditions exist to hide/show the button and then set our Client State accordingly. 

function handler({api, event, helpers, imports}) { 
    // Read our data broker values 
    const taskData = api.data.portal_gen_task_details_transform_1.output; 
    
    if (taskData.task_number) { 
        const hideCancel = taskData.hideCancelButton; 
         
        // Set our Client State 
        api.setState('hideCancelRequest', hideCancel); 
    } 
} 

Since the visibility of our button component is bound to our Client State 'hideCancelRequest', as soon as our client script executes and sets the value of the Client State, our button's visibility is immediately updated.