Hide Button using Component Visibility - PWS(Workspace)

[ujjwalababa]

Hi Everyone,

I am trying to hide/show add button based on workspace based on the following logic
- State == 3 → hide button for everyone
- Other states→ show button only for Admins and Privacy Analysts, hide for others (GRC Audit users)

What I've set up so far,

1. Default state:hideButton = true (hidden by default)
2. Component Visibility binding: !@state.hideButton
3. Client State Parameter condition,
((@data.hide_add_button_when_pa_retired_1.output.state == 3) || (@data.hide_add_button_when_pa_retired_1.output.answer == true))
Here answer returns a check if user is an audit user which I am getting from data broker server script 

Problems I'm facing,

1. Flicker on loading the button is visible for 2-3 seconds on page load before getting hidden, even though default state is set to true
2. Admin exception not working, Admins should be able to see the button in states other than 3, but the button stays hidden for everyone

What I think the issue is,

The client state condition only sets hideButton = true when the condition is met but never resets it to `false` for admins in other states. So, the admin exception can't be handled through the condition alone.

I tried writing a custom client script in the event handler of Data fetch succeeded of the data query like below, but not sure if this is the right place or approach,
function handler({api, event, helpers, imports}) {
const taskState = api.data.hide_add_button_when_pa_retired_1.output.state;
const taskAnswer = api.data.hide_add_button_when_pa_retired_1.output.answer;
const userType = api.context.session.user.roles;

const isAdmin = userType.includes('admin');
const isStateThree = (taskState == 3 || taskAnswer == true);

if (isStateThree) {
api.setState('hideButton', true);
} else {
api.setState('hideButton', !isAdmin);
}
}
How can I fix the initial flicker, so the button doesn't flash visible on load?  Any better way to handle this scenario? Also, I am not able to attach this client script to data source so that it will be triggered from that particular data source. Please guide me.

Any help is greatly appreciated!
Thanks,

Ujjwala

[mugi-san]

Hello, @ujjwalababa .

It might sound like a conservative approach, but how about creating as many page variants as needed and configuring each one for its intended audience so they can be served conditionally?

Based purely on my personal experience, Workspaces can occasionally run into issues influenced by local device caching, hardware specs, or terminal types. Therefore, controlling visibility at the variant level might be a safer way to set this up.

regards,