cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Future_Vision
Helper IV
Helper IV

Strategy for creating multiple popup help boxes

I'm looking for a good strategy to create multiple popup help boxes. My first thought is something like this but I am wondering if there is a better way

 

Create a popup box with a rectangle, multi-line text box, and a close ivon/button and group those together

  • Assign the group's Visible property a variable such as "ShowPopup"
  • Add "Help" icons to each field in the form(next to label)
  • Set the OnSelect property to:

 

Set(
    ShowPopup,
    true
);​​

 

  • Set the "Close" icon/button in the popup group to:

 

Set(
    ShowPopup,
    false
);​​

 

  • For the multi-line textbox I'm thinking I need to dynamically pull data from a datasource where the help message is based on which field's help button was clicked. <p>Does this sound like a reasonable way to build a "help system"? Is there a better way? If not how best to set up the datasource and reference it?

 

 

 

 

2 ACCEPTED SOLUTIONS

Accepted Solutions
RandyHayes
Super User III
Super User III

@Future_Vision 
Another trick you can use is to switch from a Boolean true/false for your visible to a text string.

Here is what I do often when I need variable popup messages:

 

1) Add a rectangle that covers the entire screen (let's call it rctScreenBlock).  Set the Fill to :  RGBA(0,0,0,.5)

2) Add a label to the screen (let's call it lblPopUp) and set the fill to the background color of your popup that you want (and any border you like).  Set the overflow to Scroll.  Set the text alignment to the center (or what you like). Set the padding to give space at the top (for the X to close icon).  

3) Add an Icon on the screen for the X to close.  Add to top right (normal place) of popup label.  Set the Visible property to : lblPopUp.Visible   Set the OnSelect action to: UpdateContext({lclPopUpMessage:Blank()})

4) Set the Visible property of rctScreenBlock to : lblPopUp.Visible

5) Set the Text property of lblPopUp to : lclPopUpMessage

6) Set the Visible property of lblPopUp to : !IsBlank(lblPopUpMessage)

(all the above should now disappear)

 

NOW, for your help icons:

Set the OnSelect actions to something similar to the following:

UpdateContext({lclPopUpMessage: LookUp(yourHelpList, criteriaForHelpTopic, columnThatContainsHelpTopicText)})

 

And you are done...

 

I hope this is helpful for you.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

View solution in original post

RandyHayes
Super User III
Super User III

@Future_Vision 

I think you might have misunderstood the full screen rectangle.  That is only to block all the other controls on the screen.  It comes directly under (in the order of controls) the label that displays your help information - which you can make any size.

 

The reason to do a screen blocker under your popup is that all of the other controls on your screen are still accessible with the popup on the screen.  So, this trick will cover all of those so that the use does not click on something else on the screen beside the X in this case.

 

Here is a sample:

RandyHayes_1-1609359234623.png

 

One slight change in the above - we store our help text as HTML, so the above white box is actually an HtmlText control...and we also have an information Icon.  Otherwise it is the same.

Notice the screen block rectangle is behind the box.  This keeps the use from clicking on any of the underlying controls while the popup is open.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

View solution in original post

3 REPLIES 3
RandyHayes
Super User III
Super User III

@Future_Vision 
Another trick you can use is to switch from a Boolean true/false for your visible to a text string.

Here is what I do often when I need variable popup messages:

 

1) Add a rectangle that covers the entire screen (let's call it rctScreenBlock).  Set the Fill to :  RGBA(0,0,0,.5)

2) Add a label to the screen (let's call it lblPopUp) and set the fill to the background color of your popup that you want (and any border you like).  Set the overflow to Scroll.  Set the text alignment to the center (or what you like). Set the padding to give space at the top (for the X to close icon).  

3) Add an Icon on the screen for the X to close.  Add to top right (normal place) of popup label.  Set the Visible property to : lblPopUp.Visible   Set the OnSelect action to: UpdateContext({lclPopUpMessage:Blank()})

4) Set the Visible property of rctScreenBlock to : lblPopUp.Visible

5) Set the Text property of lblPopUp to : lclPopUpMessage

6) Set the Visible property of lblPopUp to : !IsBlank(lblPopUpMessage)

(all the above should now disappear)

 

NOW, for your help icons:

Set the OnSelect actions to something similar to the following:

UpdateContext({lclPopUpMessage: LookUp(yourHelpList, criteriaForHelpTopic, columnThatContainsHelpTopicText)})

 

And you are done...

 

I hope this is helpful for you.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

View solution in original post

Future_Vision
Helper IV
Helper IV

Thanks. This does seem like a pretty good solution although I imagined my help boxes not filling the whole screen especially since they don't contain a lot of text. I just ran across components. Would these be an option? I believe I could dynamically control the positioning based on which help button was clicked.

RandyHayes
Super User III
Super User III

@Future_Vision 

I think you might have misunderstood the full screen rectangle.  That is only to block all the other controls on the screen.  It comes directly under (in the order of controls) the label that displays your help information - which you can make any size.

 

The reason to do a screen blocker under your popup is that all of the other controls on your screen are still accessible with the popup on the screen.  So, this trick will cover all of those so that the use does not click on something else on the screen beside the X in this case.

 

Here is a sample:

RandyHayes_1-1609359234623.png

 

One slight change in the above - we store our help text as HTML, so the above white box is actually an HtmlText control...and we also have an information Icon.  Otherwise it is the same.

Notice the screen block rectangle is behind the box.  This keeps the use from clicking on any of the underlying controls while the popup is open.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

View solution in original post

Helpful resources

Announcements
User Groups Public Preview

Join us for our User Group Public Preview!

Power Apps User Groups are coming! Make sure you’re among the first to know when user groups go live for public preview.

Power Apps Community Call

Monthly Power Apps Community Call

Did you miss the call?? Check out the Power Apps Community Call here!

Power Platform ISV STudio

Power Platform ISV Studio

ISV Studio is the go-to Power Platform destination for ISV’s to monitor & manage applications post-AppSource publish.

Top Solution Authors
Top Kudoed Authors
Users online (37,611)