cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Julien2
Post Prodigy
Post Prodigy

OnReset Gallery Component

Hello,

 

In a canvas app, I built a menu component by using the gallery control as below:

MicrosoftTeams-image.png

The problem that I am facing:

 

When I click through different tabs using the component where each tab will navigate me to different screens and I press the back button from the screen where I am navigated to, the Menu Component gallery does not reset to the first tab.

 

Example: The second tab based on the above screenshot I provided is "My leave balance" If I click on it it will take me to its screen and when I get back to the home screen the gallery does not reset automatically to "My Leave request".

 

The aim is every time I am navigated to the Home Screen I would like to reset my gallery component back to the first tab.

Could you please provide a solution on how to achieve that?

Any help is highly appreciated.

 

Best regards,
Julien

 

 

9 REPLIES 9
Sunil-Narnaware
Solution Supplier
Solution Supplier

@Julien2 how do you go back to Home Screen? does any of the nav bar item represent Home Screen?

Julien2
Post Prodigy
Post Prodigy

Hi @Sunil-Narnaware ,
Thank you for your prompt response.

how do you go back to Home Screen?
It is a back button that has the Back() formula on the different screens of the tabs.

does any of the nav bar items represent Home Screen? No, only on each screen they might have either the Back button or the Home button where both of them will take them to the Home screen.

How can we handle the onReset functionality when I am navigated to the "Home screen"? Could you please provide a simple example?

Thank you!

Sunil-Narnaware
Solution Supplier
Solution Supplier

@Julien2 :

This is how my Component' Table look like
Table(
{
menuName: "Screen 1",
menuID: 1,
menuScreen: App.ActiveScreen
},
{
menuName: "Screen 2",
menuID: 2,
menuScreen: App.ActiveScreen
},
{
menuName: "Screen 3",
menuID: 3,
menuScreen: App.ActiveScreen
}
)

You will change the table for each screen' component' table property.. and I guess you are doing it..


I also have custom property called, DefaultID

SunilNarnaware_0-1656532708041.png
For each screen, the defaultID will be separate say for screen 1 it would be 1, screen 2 it would be 2, screen 3 it would be 3.. now you set the color of the text by checking defaultid with menuid



SunilNarnaware_1-1656532887613.png

 

So basically you need additional parameter to know on which screen you are.. because for each screen the component would be different and there is no link between all the components.. 

 

 

 

Hello @Sunil-Narnaware ,
Thank you for providing the above example.

I followed the same steps you mentioned and implemented the below:

  • DefaultGallery.pngmENUid.pngScreenShot.png
    Created an Input property "MenuID"
    Added a condition on the templateFill as below:
    If(Leave_Request_LeftNavBar.MenuID = ThisItem.ID,/*ColorValue("#FFFFFF")*/Green, /*ColorValue("#F1F4F8")*/Red)

I am struggling on:

1. What do I have to pass for the MenuID (number input property) in the main screen as a parameter in order to reset the MenuID number back to 1 when I am navigated back to the "Home Screen"?

2. How do we automatically auto-select the first row of the gallery to display the hidden information on my screen because I have a dependency on it where they will show if it was selected?

Below is a GIF that shows when I click "Log out" and then I get back to the home screen the information is not showing unless I click back again:

MenuCom.gif

I have hardcoded the MenuID number to 1 that's why it is always highlighted.

Please let me know your input regarding the above.

Awaiting your response.

Best regards,

Julien

Sunil-Narnaware
Solution Supplier
Solution Supplier

@Julien2 : Can you share your Menu Item Table that you created? how does it look?

Also is there a filter criteria on your home screen wherein you show your requests? how does that look like?

Sunil-Narnaware
Solution Supplier
Solution Supplier

@Julien2 .. so basically your menuID should be part of your Menu Items Table.. I mentioned about DefaultID.. which you set as 1 on your home screen.. 2 on your next screen.. 3 on your further next screen.. so on so forth..

 

 

Sunil-Narnaware
Solution Supplier
Solution Supplier

@Julien2 You can check Reza' awesome guide PowerApps Left Navigation Component - YouTube .. it will solve your problem.. and about filtering on home screen.. need to check what is the Items property of Gallery

Julien2
Post Prodigy
Post Prodigy

Hi @Sunil-Narnaware ,

Please find below the Menu ID that I have used:

//colSidebarMenu
Table(
        {
            ID: 1,
            MenuItem: "My Leave Request",
            Screen: Leave_Request_Main_Screen
            
        },
        {
            ID: 2,
            MenuItem: "My Leave Balance",
            Screen: Leave_Request_Main_Screen
        
        },
        {
            ID: 3,
            MenuItem: "Company Holidays",
            Screen: Leave_Request_Main_Screen
            
        },
        {
            ID: 4,
            MenuItem: "About",
            Screen: Leave_Request_Main_Screen
            
        },
        {
            ID: 5,

            MenuItem: "Log out",
            Screen: Login_Screen_1
            
        }
    )


The filter criteria for showing the leave request are not related to the menu component.

Exactly and what I am still struggling with is whenever the MenuID is equal to the last element in the gallery and I am navigated to a different screen I want to reset the gallery back to 1 which means the first row.
ID:1, Title:"My leave request"

I tried the below logic and it worked however do you see it's logical to be done like that?
- I created in the Component an output Variable to take the selected ID from Gallery (GalidSelected: Gallery.Selected.ID)
Screen1.png
- In the component I created a behavior property (GalIDSwitch()) and define it to the OnSelect property of the gallery.
ScreenInput2.png
- OnVisible of Home Screen: I created a variable, UpdateContext({VGalID:1}) to set by default the first selected item
- In the behavior property I give it the selected ID : UpdateContext({VGalID:LeftNavBar_1.GalidSelected})
- In component I created an input property and defined for it the variable (VGalID)

Awaiting your feedback.

Best regards,
Julien

Sunil-Narnaware
Solution Supplier
Solution Supplier

@Julien2 : Honestly, I got confused with your approach.. here is what I did..

 

I created a component with gallery.. which has just label control called Title2 and separator  Separator2

 

Check Below..

SunilNarnaware_0-1656908406775.png

 

I have added two custom properties.. MenuItems and Default ID.. check their type as below..

 

SunilNarnaware_1-1656908468219.png

 

The Now the MenuItems Property for Custom Component is set as follows..

 

SunilNarnaware_2-1656908551384.png

Table(
    {
        menuName: "My Leave Requests",
        menuID: 1,
        menuScreen: App.ActiveScreen
    },
    {
        menuName: "My Leave Balance",
        menuID: 2,
        menuScreen: App.ActiveScreen
    },
    {
        menuName: "Company Holidays",
        menuID: 3,
        menuScreen: App.ActiveScreen
    },
    {
        menuName: "About",
        menuID: 4,
        menuScreen: App.ActiveScreen
    },
    {
        menuName: "Logout",
        menuID: 5,
        menuScreen: App.ActiveScreen
    }
)

The DefaultID of the Component Custom Property is set to 1

 

SunilNarnaware_3-1656908648733.png


Also set the label or Title2' color property like this 

SunilNarnaware_7-1656909108111.png

 

If(ThisItem.menuID = Component1.DefaultID, DarkGreen, LightGreen)

 

Now set OnSElect Property of Gallery Like This

 

SunilNarnaware_8-1656909170923.png

 

 

Now each of my screen has the component being added like this..

 

SunilNarnaware_4-1656908736211.png

 

Now I have set the MenuItems for each component added to screen is set like this..

 

SunilNarnaware_5-1656908824708.png

Table(
    {
        menuName: "My Leave Requests",
        menuID: 1,
        menuScreen: 'My Leave Request'
    },
    {
        menuName: "My Leave Balance",
        menuID: 2,
        menuScreen: 'My Leave Balance'
    },
    {
        menuName: "Company Holidays",
        menuID: 3,
        menuScreen: 'Company Holidays'
    },
    {
        menuName: "About",
        menuID: 4,
        menuScreen: About
    },
    {
        menuName: "Logout",
        menuID: 5,
        menuScreen: 'Log Out'
    }
)

 

The Default ID fo Component1_1 for My Leave Request Screen is set 1

 

SunilNarnaware_6-1656908901442.png

 

Similarly you set the Default ID  to 2 on My Leave Balance Screen' Component1_2' DefaultID Property..

 

For Company Holidays.. Set Default ID to 3 on Company Holidays Screen Component1_3

 

For ABout Screen 4

 

For Logout 5.. like wise..

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

365 EduCon 768x460.png

Microsoft 365 EduCon

Join us for two optional days of workshops and a 3-day conference, you can choose from over 130 sessions in multiple tracks and 25 workshops.

Top Solution Authors
Users online (5,250)