connect every Gallery Item to a different screen

[BakingBread]

hey there,

i want to link from a Gallery to another screen. I have a list with 15 ID´s each entry has an Image which i will use as a Button to link to another Screen. Now i wanted write under "OnSelect" "Navigate(Screenname)" this works but each Button navigates to the same screen. Is it possible to use a different navigation for each button?

Thanks in advance.

[LaurensM]

Hi @BakingBread,

If your list is a collection of IDs you could add an additional column to store the Screen name ( in the App.OnStart - don't forget to run the OnStart afterwards):

Collect(
    colIDs,
    {
        ID: 1,
        Screen: Screen1 //Change to an actual screen name
    },
    {
        ID: 2,
        Screen: Screen2 //Change to an actual screen name
    }
)

Navigating would be: Navigate(ThisItem.Screen)

Should the gallery be linked to a datasource and cannot be changed to a collection because it also has other columns that are needed. You could still create the collection above and use the following Navigate function to dynamically change the screen according to the selection (make sure the IDs match with your datasource record IDs):

Navigate(
    LookUp(colIDs, ThisItem.ID = ID).Screen
)

If this solves your question, would you be so kind as to accept it as a solution.

Thanks!

[BakingBread]

Hi Laurens,

it seems to be the right thing but my PowerApps skills are to weak. Maybe you can help me with this:

I´ve made a new Test app and filled the On Start. But how to start the Onstart afterwards?

I also tried the other way, with no result at all

Whers my bug? (my powerapps is running in the german version so i have to use a ; instead of ,)

[LaurensM · Accepted solution]

Hi @BakingBread,

No worries, let's take a look at the changes needed together. When you want to create a table that lives in your Power App, you use Collect (or ClearCollect). The function expects 2 parameters: (1) a table/collection name and a record/table of records. 

The German syntax is indeed slightly different to the US version, so I will use your syntax instead. I adjusted my code to your example so feel free to copy-paste it into the App.OnStart.

ClearCollect(
    colIDs; //This is the collection name (remove 1;2;3 from your example - it only expects 1 text input / name)
    {
        ID: 1;
        Screen: Screen2 
    };
    {
        ID: 2;
        Screen: Screen3
    };
    {
        ID: 3;
        Screen: Screen4
    }
)

To run the OnStart in the editor, select the 3 dots next to App and click run onstart:

Note: when you 'play' the live version of the app (or reopen the editor), the OnStart will run when the application is opened. Only in the editor will it require a 'manual' action first (when you edit it).

ColIDs will be the Items property of your gallery and use the following Navigate function: Navigate(ThisItem.Screen)

I hope this helps! 😊

[BakingBread]

It helpt so far. But now there is one last problem. I think the OnStart worked out well:

 but the navigation does not work. It says that the name "Screen" is not valid. Is this another US thing which is diffrent in the german edition?

[LaurensM]

Hi @BakingBread,

I tested it again and on my end it worked. Could you try the following:

• Remove Gallery1 from the OnStart ClearCollect and call it colIDs (see my code)
  • The collection name should be a new name and should not refer to an existing control. Best practice is col + Name (colIDs, colNames, colWeights...)
    
    
• Change the items property of Gallery1 to colIDs
  
  
• After making the changes run OnStart again

This should do the trick 😊

[BakingBread]

It worked out. Thank you very much!

[BakingBread]

Maybe one last question: is it also possible to use different collentions? For example i had 2 or 3 sharepoint lists and each of them is the data source for a different gallery. How this would work writing the OnStart? Or otherwise is it possible to pick up single IDs for an Gallery, so that i can put all the Data in one Sharepoint list.

[LaurensM]

Hi @BakingBread,

My apologies for the delay.

You could avoid the collection completely, by writing some additional logic on the Image OnSelect (and linking your gallery back to your datasource/list):

Switch(
    ThisItem.ID,
    1,
    Navigate(Screen2),
    2,
    Navigate(Screen3),
    3,
    Navigate(Screen4)
)

Each gallery can have different logic if needed - no need for 3 collections. 🙂

However, is there a particular reason why each individual item needs a separate screen? If you have 3 different lists, you are generating a lot of screens within the application - which I would advise against. If you want to display or edit data, you can make the fields dynamically display data based on the gallery selection. This would only require 1 'edit' or 'view' screen that can be reused for several items.

I hope this helps!

[BakingBread]

Hey @LaurensM ,

the idea was to use the Gallery as a Navigation to each topic. I want to create an App that can be used to learn stuff about our Production. I wanted to use a Picture of each production Line and then navigate to a screen where you can choose (from another Gallery) a part of the production line (in my example an oven, the dosage or an freezing tower) and go to a Screen where this part is explained using Images and Videomaterial. 

Is it also possible to make an Gallery where a only use specific Part out of sharepoint list?