OnReset Gallery Component

[Julien2]

Hello,

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

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

[Sunil-Narnaware]

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

[Julien2]

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]

@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

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

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

[Julien2]

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

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

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

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]

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

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

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

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)

- In the component I created a behavior property (GalIDSwitch()) and define it to the OnSelect property of the gallery.

- 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]

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

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

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

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

Also set the label or Title2' color property like this 

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

Now set OnSElect Property of Gallery Like This

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

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

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

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