web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / How best to handle ope...
Power Apps
Unanswered

How best to handle opening and closing a 'panel' and updating the text?

(0) ShareShare
ReportReport
Posted on by 634

I have a help button that slides in a 'panel' with help text that corresponds to the help button clicked. Here is the code I am using. It seems a little verbose and I was wondering if there might be a better way to do this?

If(
 varShowHelp = true,
 UpdateContext(
 {
 helpPanelContents: LookUp(
 'Help Panels',
 'Help Field' = "startDate",
 'Help Content'
 )
 }
 );
 UpdateContext(
 {
 helpPanelTitle: LookUp(
 'Help Panels',
 'Help Field' = "startDate",
 'Help Title'
 )
 }
 ),
 Set(
 varShowHelp,
 true
 ) & UpdateContext(
 {
 helpPanelContents: LookUp(
 'Help Panels',
 'Help Field' = "startDate",
 'Help Content'
 )
 }
 );
 UpdateContext(
 {
 helpPanelTitle: LookUp(
 'Help Panels',
 'Help Field' = "startDate",
 'Help Title'
 )
 }
 )
);

BONUS: I'd like to hide the help icon and replace it with a close icon when the help for that particular item is visible. I've used variables for this in the past but maybe there is a better way?

Categories:
I have the same question (0)
  • RandyHayes Profile Picture
    76,299 Super User 2024 Season 1 on at

    @Future_Vision 

    What are you planning to use the variable for?  I would instead of using variables, put this formula in whatever "panel" you have.

    Tell me more about the application of what you are doing and I can offer you some better choices.

     

    In general, when I add help systems to an app, I utilize a component for the help display.  On that component, I have a property for the information to be displayed. 

    I will set a variable on the icon/button for the help that has the context of it.

    So, for example, the icon OnSelect might be:  Set(glbHelpContext, "WelcomeScreen")

    Then, the component will have a Visible property of : !IsBlank(glbHelpContext)

    There is a OnClose behavior on the component, and in the formula for that OnClose action in the app, the following: Set(glbHelpContext, Blank())

    The component has a HelpInfo property that is a record.  The record has a schema of : {Title: "Title", HelpInfo: "HelpInfo"}

    In the app, the HelpInfo property is set as follows:  LookUp(helpData, Context=glbHelpContext)  (note: the helpData in this case has a Title and HelpInfo column that correspond to the schema)

     

    Then...well, that's it.  Nothing else to do.

     

    I hope this is helpful for you.

  • Future_Vision Profile Picture
    634 on at

    @RandyHayes 

    I have a form with several fields and what I had done in the past was add a help icon next to the label of each field. A different version of the code I posted was used to pop up a help panel(overlay) with the correct title and content. A close button would close the overlay. I was trying to move to a side panel instead that would become visible if not visible or update if already visible. It also has a close button but ideally it would be great if clicking the help button a second time would close it. Either that or the help icon is swapped out for a close icon and clicking the close icon closes the panel and switches back to a help icon. I see some trickiness here because I would need to switch that close icon back to a help icon if another help icon is clicked. I would only want a close icon for the currently clicked icon. Clicking the close icon on the help panel also reverts the close icon back to a help icon.

  • RandyHayes Profile Picture
    76,299 Super User 2024 Season 1 on at

    @Future_Vision 

    Yes, so what I mentioned about using the glbHelpContext variable would give you what you want.

    Your side panel would be visible if glbHelpContext is not blank.  So, if a person clicks on the help icon, the glbHelpContext variable would then contain a value using the formula I provided:

        Field1:  Set(glbHelpContext, "field1Help")    Field2:  Set(glbHelpContext, "field2Help")   etc.

     

    If the panel is not open, it will open as soon as the variable has a value.  If it is open and the user clicks on another field help, the panel will just update with that help info.

     

    If you provide a close/cancel icon in your side panel, it would just be setting the variable to blank.  Once it is blank, the panel becomes non-visible.

     

    As for the dual icon nature of your help/close scenario, it can be done, but I would need to understand more about the scenario where a user clicks one field help and then another field help...should the first go away or is there some concept of having it combined?

  • Future_Vision Profile Picture
    634 on at

    @RandyHayes 

    Ok. Still getting accustomed to components. My component is going to have an input text property of glbHelpContext. I would set this in the app with the OnSelect property of the help icon. In my sample code the value would be 'startDate' set by the Start Date Help icon.

     

    OnSelect would look like this: Set(glbHelpContext, "startDate")

     

    Because I have a glbHelpContext input property in the component it will now have 'startDate' as a value when the Start Date Help icon is selected.

     

    Now, here is where I get a little confused but I think I understand what needs to happen. A lookup needs to happen against the 'Help Panels' data sourceIt'll be looking in the 'Help Field' column for the value held by glbHelpContext. In this example it will be looking for 'startDate'. The lookup then needs to return the corresponding  'Help Title' and 'Help Content' columns. Sound about right? I'm not completely sure how to do that just yet or perhaps this is the wrong approach.

  • RandyHayes Profile Picture
    76,299 Super User 2024 Season 1 on at

    @Future_Vision 

    You can do it one of a couple ways.  One is to set all the help context items to the component.  The other is to supply just a help context record.

     

    So, option 1 would be to have an Input property (let's call it HelpItem) on the help panel component with the schema definition for your help items.  Something like this:

        {'Help Title': "HelpTitle", 'Help Content': "Content"}

    Then, on the icon in your app, set the OnSelect formula to : 

       Set(glbHelpContext, LookUp('Help Panels', 'Help Title' = "startDate"))

    And on the inserted component, for the HelpItem property, it would be set to : glbHelpContext and the Visible property would be set to !IsBlank(glbHelpContext) 

    I would provide a close icon in the component and then create a Behavioral property (type boolean) on the component called OnClose.  Set the OnSelect action of the Icon in the component to: Parent.OnClose()

    Then, in your app, on the OnClose action, the following formula: Set(glbHelpContext, Blank())

     

    Option 2 would be to supply the entire help dataset to the component.  To do that, you would create an Input property of type Table on the component (let's call it HelpItems).  The schema for that would be:

          Table({'Help Title': "HelpTitle", 'Help Content': "Content"})

    Then, a HelpItem input property of type text.

    In your app on the inserted component, set the HelpItems property to : 'Help Panels'

    Set the HelpItem property to : glbHelpContext

    Then set the OnSelect of the help icon to: Set(glbHelpContext, "startDate")

    You would still have the same formulas for the OnClose and the Visible properties as mentioned in option 1 above.

    The only change you will need to make in your help component is, instead of the labels/html controls in the component deriving their Help Title and Help Content from the properties of the control, you would do a lookup against the HelpItems property table.

    So, for example, on the Content text property (assuming a label control):  LookUp(Parent.HelpItems, 'Help Title' = Parent.HelpItem, 'Help Content')

     

    Either of these should work for you.  I kind of prefer #2 as it minimizes the amount of typing in the OnSelect actions of the icons. 

    As a bonus...if your Help Titles are named after the field names in your form, then your OnSelect on the Icon can be simplified to:  Set(glbHelpContext, Parent.DataField)  The DataField is a text property on the DataCard that defines the name of the field for which it is showing data for.  This tremendously reduces the amount of typing and thinking involved as you can just copy and paste the formula or even just the entire icon control into the datacards and everything will just work fine.

  • Future_Vision Profile Picture
    634 on at

    @RandyHayes 

    Had to wrestle with this a bit until I realized that he table schema had to be Table({'Help Field' : "HelpField" , 'Help Title': "HelpTitle", 'Help Content': "HelpContent"}) since startDate is in the Help Field column and not Help Title.

     

    Then my lookups for the title and content look like this

    LookUp(Help.HelpItems, 'Help Field' = Help.HelpItem, 'Help Title')

    LookUp(Help.HelpItems, 'Help Field' = Help.HelpItem, 'Help Content')

     

    This seemed to wire up all of the data correctly.

     

    Still fiddling with the show/hide functionality. I got the title and content to hide but the panel 'frame' hangs around. I'd ultimately want to hide the whole thing or have it slide in. I have a rough of the app where I was doing something like this for the Help Panel to show and hide it.

     

    X = If(varShowHelp = true,ReviewPanel.X,MainContainer.Width) - MainContainer is the container that spans the whole screen and ReviewPanel is a panel, the same size of the Help Panel, that shows a review of the data being entered into the various parts of the form. I believe this would work for component. 

  • Future_Vision Profile Picture
    634 on at

    @RandyHayes 
    Just re-reading this post and it looks like you tried to answer the bonus question here. I posted a separate quest here that is essentially what I am looking to do.

     

    https://powerusers.microsoft.com/t5/Building-Power-Apps/How-to-manage-showing-hiding-multiple-icons/td-p/1209771 

  • Future_Vision Profile Picture
    634 on at

    @RandyHayes 
    Got this show/hide panel wired up without the OnClose behavior. I implemented the way I had done before. 

     

    If(glbShowHelp = true, CONT_Review.X, CONT_Main.Width)

     

    I'm not sure if this is the best way but this does seem to lend itself to animation better.....I think. at the minimum it works.

     

    My last piece of this puzzle is around those help icons. A more detailed question is here.

     

    https://powerusers.microsoft.com/t5/Building-Power-Apps/How-to-manage-showing-hiding-multiple-icons/m-p/1209771

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Congratulations to the March Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
11manish Profile Picture

11manish 541

#2
WarrenBelz Profile Picture

WarrenBelz 434 Most Valuable Professional

#3
Valantis Profile Picture

Valantis 289

Last 30 days Overall leaderboard