Strategy for creating multiple popup help boxes

[Future_Vision]

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?
  
  

[RandyHayes · Accepted solution]

@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.

[Future_Vision]

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 · Accepted solution]

@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:

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.