PowerApps pass values to screen

PowerApps: Pass argument to another screen

Premise

In my previous post, I demonstrated how to fetch bulk items from a SharePoint List to PowerApps. In this post, I’ll demonstrate, how to pass argument/value, from one PowerApps screen to another.

Pass information to a different screen

To pass values to a different screen, we can use the context argument of the Navigate function. It allows us to pass a single or multi-value objects to a different screen. The syntax is as follows,

Navigate(ScreenToNavigate, ScreenTransition.Fade, { Argument1: 04 , Argument2: SomeText })

The third argument, in the above code snippet is the context argument. It is of type object and we can use it to pass any number of values to the other screen.

Let’s check out couple of examples on how to transfer any information to a new screen in PowerApps.

I have this TemplateGalleryList control which is displaying multiple items from a SharePoint List.

PowerApps Gallery
Gallery

On clicking the arrow button next to each item, a new screen will open, displaying all the meta-data of the selected item. To do this, we need to pass some information about the selected item to this new screen. I’ll be using the following 2 ways to accomplish this task,

  • Pass on the ID value of the selected item.
  • Pass the entire selected object.

Pass value to a different screen

Here, I’ll be passing a single, integer value, ID, of the selected item to a new screen. I’ll then use this ID to run a filter query on the data source to fetch all the meta-data of this item. So let’s check out the steps.

  • On the gallery screen, select the arrow button and make sure that the drop-down at the top is set to OnSelect.
    PowerApps Gallery Arrow OnSelect
    Gallery Arrow OnSelect
  • Write the code,
    Navigate(scrnView, ScreenTransition.Fade,{selectedId: TemplateGalleryList1.Selected.ID})
    

    PowerApps Navigate
    Navigate
  • Go to the target screen. In this case, scrnView and select the FormViewer.
    PowerApps FormViewer
    FormViewer
  • Select Item from the top drop-down and write the following code.
    First(Filter('Product Table', ID = selectedId))
    

    Filter the original data source based on the ID passed to it. And then select the first item of the result. This is important because, filter returns an array of results. However, FormViewer accepts a single item only.

    PowerApps Filter FormViewer
    Filter FormViewer
  • That’s it! Just run the app and the latest screen will always display the details of the selected item only.

Pass object to a different screen

In the above example, I demonstrated how to pass a single value to a different screen. However, there’s a drawback in this approach. After passing this value, we again had to run a filter query on the source, to fetch the entire metadata. If the data is not available then, this approach makes sense. However, in this particular case, all the data was already available in the previous screen. So, now I’ll show how to,

pass an entire object of values to a new screen.

This approach will save us the extra filter query. So, let’s check out the steps:

  • On the gallery screen, select the arrow button and make sure that the drop-down at the top is set to OnSelect.
    PowerApps Gallery Arrow OnSelect
    Gallery Arrow OnSelect
  • Write the code,
    Navigate(scrnView, ScreenTransition.Fade,{selectedItem: TemplateGalleryList1.Selected})
    

    PowerApps: Pass an object
    Pass an object
  • Go to the target screen. In this case, scrnView and select the FormViewer.
    PowerApps FormViewer
    FormViewer
  • Select Item from the top drop-down and write the following code,
    selectedItem
    

    PowerApps: Read object value
    Read object value
  • Now, run the app. The latest screen will always display the details of the selected item only.

PowerApps FormViewer
FormViewer

Key Takeaways

  • There’s no limitation on the type of values that we can pass to a screen.
  • We must always pass, only the part of information, required in the new screen.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.