Can you set up a confirmation modal to toggle

can you set up a confirmation modal to a toggle button? I am building a dispatching app with the route dispatch as a Y/N and many toggles showing that routes are dispatched at different points in the app. My issue is I want to set up an “are you sure” modal whenever they toggle or “dispatch route”. Thanks in advance

Hey there, Ted! :wave:
To create a confirmation modal for a toggle button in your app, you can use a normal icon button and set up a click action that takes the user to a modal page. Here’s how:

  1. Add an icon button element to your app and set the on click attribute to a new page called “confirm.” This will create a button that the user can click on to open the confirmation modal.
  2. Click on the action where you linked the button to a new page(confirm) and set the transition attribute to “modal.” This will cause the page to open in a modal window when the button is clicked.
  3. In the “confirm” page, include a message asking the user to confirm their action (e.g. “Are you sure you want to dispatch this route?”) and two buttons: one that confirms the action and one that cancels it.
  4. Set up an action to update the value of the dispatch route when the user clicks the confirm button. You can also include an action to close the modal when the user clicks either the confirm or cancel button.
  5. To change the icon of the button based on the value of the dispatch route, you can use the visibility action. For example, you can set the visibility of a checked toggle icon to be shown only when the dispatch route is true, and the visibility of an unchecked toggle icon to be shown only when the dispatch route is not true.

I hope this helps! Let me know if you have any questions or need further assistance. :smile:

HI Sahira,

Thanks so much for the reply. All of this makes sense and seems it would solve my issue, but I hit a few snags. For some reason, the option to update the dispatch value is not available for some reason. Do you have any insight on that(see pic below).

Can you also inform me how I can play with the visibility if I am using an icon within an element(i.e. right icon)? I can’t seem to find a way to play with the visibility. Again thanks so much for your help

Can you help me with the relationship between route collection and dispatch collection?

To change the visibility of any element/component/icon on adalo

  1. Select the element with which you want to play the visibility.
  2. Click on the hamburger/3dots icon
  3. Click on change visibility
  4. Click on the visibility dropdown and select the type of visibility.

image

Thanks for your help and reply. I am familiar with the visibility but did not see how to adjust visibility to ONLY the icon in adalo standard App Bar. I believe the solution is to just build a custom app bar, which at the time of my original question was intimidating. Not really anymore, lol. Thanks again!

1 Like