Pass a Value From Buttons to Next Screen

Isn’t it useful when you can pick up a value from a control, and move along to other screens with that value to continue your journey nicely? It is. So today’s post is about grabbing a value from a button, and moving on to our next screen.

Scenario

In our scenario, we’re going to be reporting issues for assets (screens, computers, etc).
So we open our company app, and we go through the process of describing the problem. Along the way, we make some selections (using buttons), and those values should be sent to the support IT team to resolve.
 

SharePoint Issue Tracker

We could be creating a brand new list from scratch, manually. BUT why not use an already made template provided by Microsoft?! We’ll save some time, and that would give us a good baseline to adjust if needed.
 

The nice thing about this template is that, it already has column formatting and different views we might be interested in 👍🏻
 

Power Apps

Main screen

In the app, we’re going to connect our Issue Tracker list so we can submit the data to SharePoint.

Your welcome screen could give useful information about the app and what to expect. We’ll skip that and go straight to the nitty gritty of things!

Let’s insert a few buttons onto the screen:

• Monitor
• Standing Desk
• Chair
• Cable
• Keyboard
• Mouse
   

For each of those buttons, we’re going to set a variable that we can pass on to the next screen.

In the OnSelect property of our first button (Monitor), enter the formula:

1

Set(varBtn, btn_Monitor.Text)

Now if you play the app, click on the Monitor button, and go back in Studio mode, then the value of varBtn will be Monitor.

But we also want to navigate to the next step of the process when clicking on that button! So add the Navigate function just after the Set() formula:

1

Set(varBtn, btn_Monitor.Text); Navigate(Screen2);

Repeat the same formula for each button, by changing the name of your control only. For example:
Set(varBtn, btn_StandingDesk.Text); Navigate(Screen2);, Set(varBtn, btn_Chair.Text); Navigate(Screen2);, etc… This value will be the one we’ll use on the next screen.
 

“Next” screen

On our Screen2, we could make sure that the value passed on is the correct one. Let’s add a visual indication just before the buttons.

Next, we would add a control to give a description, and a button to Submit (amongst other information we need of course!).

✅ Finally, let’s checkout the results when clicking on Submit!

Thanks for reading 🙂