Moving a button from UI Builder to a drop down in workspace

[Shivani4532]

There is a button called as task, whenever we click on this task button, it opens a modal pop up. This modal pop up has a component repeater which is used for 10 times, this will show different catalog items, when user click on them, it redirects to specific catalog item. This whole functionality is built in UI builder; however, this button now needs be converted to a declarative action which will appear in one of the button dropdowns in workspace in action bar.

Any guidance on this would be really appreciated.

[Matthew_13 · Accepted solution]

Hi My Friend,

You can convert this to a Declarative Action, but the main thing to keep in mind is that Declarative Actions don’t directly host UI components. They trigger something like opening a modal or navigating to a UI Builder page.

Since your current Task button opens a modal built in UI Builder with the repeater showing catalog items the cleanest approach is:

• keep the UI Builder experience as-is the modal or the content behind it

• create a Declarative Action that opens that experience, and

• place that action in the workspace action bar dropdown.

In practice, this usually means:

1. Move or confirm that the modal content exists as a reusable UI Builder page or component.

2. Create a Declarative Action configured to open that page as a modal or route.

3. Add the action to the workspace action bar and set visibility conditions as needed.

4. Keep your existing repeater logic so that when a user clicks a catalog item, it navigates to the correct item.

The main shift here is that the button itself moves from UI Builder into a Declarative Action, while the modal and catalog selection experience continue to live in UI Builder.

@Shivani4532 - If help you answer; Please mark Solution Accepted and Thumbs Up.

[Shivani4532]

Thank you for your reply @Matthew_13 .

I will try to implement this.

However, I have couple of queries while implementing this as declarative action. Should we try to implement this as uxf client action? Which uses action payload? Or do you suggest me to try it as client script or server script?

[Matthew_13]

You’ll want to implement this as a UXF Client Action Declarative Action and use the action payload to pass context / open your UI Builder modal or route to a page.

Only use server-side scripting Script Include behind the action if you need to fetch the catalog list dynamically, validate access, or write data. I wouldn’t build this as a standalone client script—Workspace action bar/dropdowns are designed to be driven by declarative actions.

@Shivani4532 - If help you answer; Please mark Solution Accepted