Unanswered

Make three popups for 3 buttons on one screen

(0) Share

Report

Posted on by starnewc060708

Hi all! I have three buttons that I want to open three different galleries within 1 screen. What's the easiest/hassle free way to do this? So "Details" "Comments" and "Attachments" are the buttons and each one will have its own pop-up screen without navigating to a new screen. Thanks!

Categories:

Building Power Apps

20231108_143504.jpg

I have the same question (0)

All responses (10)

Answers (1)

vivekravi 241 on at

Like (0)

Report

You can try the new tab list option in the modern controls and set only the required fields when each tab is selected

Was this reply helpful? Yes No
M_Ali_SZ365 1,110 on at

Like (0)

Report
Hi @starnewc060708
For each pop-up, place a group or a container on the screen that includes the gallery and any other controls you want to display. Make sure they are all initially hidden by setting their Visible property to false.
Assign each button an OnSelect action that updates a context variable to show the related pop-up. For example:
For the "Details" button, you could use:
UpdateContext({showDetailsPopUp: true})

For the "Comments" button, you could use:
UpdateContext({showCommentsPopUp: true})

For the "Attachments" button, you could use:
UpdateContext({showAttachmentsPopUp: true})
Set the Visible property of each pop-up container to the corresponding variable:
Details pop-up Visible property to showDetailsPopUp
Comments pop-up Visible property to showCommentsPopUp
Attachments pop-up Visible property to showAttachmentsPopUp
To close the pop-up, you can have a "close" icon or button inside each pop-up with an OnSelect action that sets the context variable to false, like:
UpdateContext({showDetailsPopUp: false})
Do this for each pop-up with their respective variables.
Here's how it should look in your app's formulas:
For the "Details" button OnSelect property:
UpdateContext({showDetailsPopUp: true, showCommentsPopUp: false, showAttachmentsPopUp: false})
For the "Comments" button OnSelect property:
UpdateContext({showDetailsPopUp: false, showCommentsPopUp: true, showAttachmentsPopUp: false})
For the "Attachments" button OnSelect property:
UpdateContext({showDetailsPopUp: false, showCommentsPopUp: false, showAttachmentsPopUp: true})
For the close button/icon inside each pop-up OnSelect property:
UpdateContext({showDetailsPopUp: false}) // for Details pop-up UpdateContext({showCommentsPopUp: false}) // for Comments pop-up UpdateContext({showAttachmentsPopUp: false}) // for Attachments pop-up

By using these context variables, you can control the visibility of each pop-up independently, allowing you to have multiple pop-up galleries within a single screen without the need to navigate to different screens.
Please accept this solution if it resolves the issue. ✅
Best regards,
Muhammad Ali

Was this reply helpful? Yes No
starnewc060708 35 on at

Like (0)

Report

Thanks for this, however, I don't want to press a button to close the popup. I want to transition each one as I click on the menu items. So one popup would close when another button is pressed. So if the Comments popup was visible and I clicked on the Details button, I would want details to display and make the comments one go away or hide.

Was this reply helpful? Yes No
PowerNovice on at

Like (0)

Report

Then you just want to do what he said, but put the logic for setting the boolean values within the onclick property of menu items

Was this reply helpful? Yes No
starnewc060708 35 on at

Like (0)

Report

Sorry, I'm new to this. What would that look like?

Was this reply helpful? Yes No
PowerNovice on at

Like (0)

Report

What does your current layout look like? In the tree view. Are you using a gallery for your menu or are you using something else?

Was this reply helpful? Yes No
starnewc060708 35 on at

Like (0)

Report

Galleries, but the Comments tab would open both a form and gallery in the same popup.

Was this reply helpful? Yes No
Verified answer

M_Ali_SZ365 1,110 on at

Like (1)

Report
Hi @starnewc060708
Create a context variable to keep track of the active pop-up. Let's call it activePopUp.
Set up your buttons to update the activePopUp variable when clicked. For example:
For the "Details" button:
UpdateContext({activePopUp: "Details"})
For the "Comments" button:
UpdateContext({activePopUp: "Comments"})
For the "Attachments" button:
UpdateContext({activePopUp: "Attachments"})
Set the Visible property of each pop-up container based on the value of activePopUp. You can use the If function to conditionally show the appropriate pop-up:
For the "Details" pop-up container:
Visible: activePopUp = "Details"
For the "Comments" pop-up container:
Visible: activePopUp = "Comments"
For the "Attachments" pop-up container:
Visible: activePopUp = "Attachments"
With this setup, when a button is clicked, it updates the activePopUp variable, and the corresponding pop-up will be shown while the others are hidden automatically. This achieves the transition effect your client is looking for, as one pop-up will close when another is opened by selecting the menu items.
Remember to replace the Visible properties of your pop-up containers with the appropriate condition based on the activePopUp variable.
This way, you won't need a separate close button for each pop-up, and they will transition smoothly as desired.
Please accept this solution if it resolves the issue. ✅
Best regards,
Muhammad Ali

Was this reply helpful? Yes No
starnewc060708 35 on at

Like (0)

Report

Perfect! Thanks so much!

Was this reply helpful? Yes No
M_Ali_SZ365 1,110 on at

Like (0)

Report

@starnewc060708
Welcome

Was this reply helpful? Yes No