topic Re: Help with Modal UI Logic and Selections in Workato Pros Discussion Board

Help with Modal UI Logic and Selections

jarh15 — Wed, 21 May 2025 21:35:52 GMT

Hi all,

I'm trying to build a user experience with modals where a user makes selections in two steps. I need help figuring out the best way to structure this interaction using Workato. Here's what I'm trying to achieve:

Step 1: First Modal – Choose Outcomes

The first modal should present 6 outcome options. The user can select up to 3 of them. It should look like this:

Example selection: User picks Outcome 1, Outcome 4, and Outcome 5.

Step 2: Second Modal

After the first modal, a second modal should open. This one displays the selected outcomes from step 1, and for each of them, a list of associated use cases (max 3 selectable per outcome).

So if the user selected Outcome 1, Outcome 4, Outcome 5

The second modal should look like this image:

Re: Help with Modal UI Logic and Selections

gary1 — Wed, 21 May 2025 21:37:29 GMT

How are you building the modals?

Re: Help with Modal UI Logic and Selections

jarh15 — Wed, 21 May 2025 22:11:07 GMT

@gary1 i am building them via slack workbot

Re: Help with Modal UI Logic and Selections

1dheeraj2 — Thu, 22 May 2025 11:14:23 GMT

Hi @jarh15 ,

To the best of my knowledge, you can achieve this in two ways:

When You Have a Condition to Select a Maximum of 3 (Simpler Approach):
- In this scenario, after getting multiple selections from the first modal, you can call a second modal with 3 multi-select blocks, as shown in the screenshot below.
- Simply create a dynamic menu recipe to get the use cases by passing outcomes as parameters.
- If you select two values in the first modal, only two will be displayed in the second modal.
When the User Can Select More Than 3 Outcomes:
- In this case, you can use a Slackbot custom action and a Python script to generate the payload dynamically.
- You need to create a view_summission trigger to get the selected values in from the second modal create from custom slack api call.
- I have tested this approach, and it works well.

Do let us know if you find better solution to share with the community.

Re: Help with Modal UI Logic and Selections

jarh15 — Thu, 22 May 2025 16:07:57 GMT

@1dheeraj2 Thank you so much for this response! This is helpful but I have one ask -- the user does not usually know the exact name of the use cases so it would be better if the use cases were displayed for them either in a drop down or checkbox instead of them having to type them in. Is this possible?

Re: Help with Modal UI Logic and Selections

1dheeraj2 — Thu, 22 May 2025 16:25:23 GMT

Hi @jarh15 , they can just type "all" and all use case will come in drop down in second modal. You can also go for checkbox and static type of list that comes without typing anything. In that case, you need to write a python script.
In the dynamic menu recipe, use collection sql and put a condition like this

Re: Help with Modal UI Logic and Selections

jarh15 — Thu, 22 May 2025 16:25:27 GMT

Thank you! Do you mind sharing the python solution if you have it?

Re: Help with Modal UI Logic and Selections

1dheeraj2 — Thu, 22 May 2025 16:38:25 GMT

Have a look at this reicpe.

https://app.workato.com/recipes/58548439?st=2ad38a78527481fb87a4ebd780b56f54c08390c8ad1aa7063d2bb19799619327

used a lookup table for outcome and use case relationship.

Please note: You will receive your modal and be able to submit the use case by selecting it. However, to capture the submitted values, you will need to create a separate recipe with a view_submission trigger.

Re: Help with Modal UI Logic and Selections

jarh15 — Thu, 22 May 2025 17:25:35 GMT

This is absolutely amazing! Thank you so much, this is exactly what I need. I'm just having trouble configuring the custom action in Slack. How does it need to be configured? It is asked for a method of the request. Also, for the separate recipe, how does that need to be configured other than the view submission event? Apologies for the ignorance here.

Re: Help with Modal UI Logic and Selections

1dheeraj2 — Thu, 22 May 2025 17:46:35 GMT

You can configure your custom action as shown in the screenshot.

For the view_submission trigger, you will get your selected response in the trigger itself. You will need to use functions to extract the selected use cases and execute the next actions.

Re: Help with Modal UI Logic and Selections

jarh15 — Thu, 22 May 2025 18:21:46 GMT

Thank you so much. I've gotten the modal to pop up but it is blank. I think I'm still having trouble with the view submission recipe. Where do I need to call this recipe in the original recipe?

Re: Help with Modal UI Logic and Selections

1dheeraj2 — Thu, 22 May 2025 20:28:37 GMT

If the modal is popping up as blank, please check the payload generated by the Python script.

The view_submission recipe does not need to be called from anywhere. This recipe will be the sole receiver of any custom view submissions. It will automatically get triggered independently in a separate recipe when you submit the modal in the original recipe. You just have to handle this triggered recipe separately, unlike the default modal where you get the response in the same recipe.

Re: Help with Modal UI Logic and Selections

jarh15 — Thu, 22 May 2025 20:38:01 GMT

Thank you, can I see the sample view_submission trigger recipe?

Re: Help with Modal UI Logic and Selections

jarh15 — Thu, 22 May 2025 21:22:24 GMT

This is working now! Thank you so much, this was a life saver!!

Re: Help with Modal UI Logic and Selections

1dheeraj2 — Fri, 23 May 2025 01:18:57 GMT

good to know its working 🙂