PowerApps Tracking App Tutorial pt.2

This is the second part of the tutorial helping you use low code PowerApps and SharePoint to make an awesome tracking application.

Part 1 - https://www.garudax.id/pulse/powerapps-tracking-app-tutorial-richard-burdes

In this tutorial I'll show you how to use buttons to:

• Create a Pop Up to make it easier to create a new item to track

A pop up approach keeps the user on the same screen reducing any navigation fatigue they may get when having to click around an application to get simple tasks done, but there will be times when you'll need to take a user to another screen simply because of the amount of fields that might need to be edited or just to remain consistent with other design ideals you may be using in other apps.

Pop Ups For Forms

Using a Pop up is a useful design principal for single screen applications for showing help text or form controls - the key is to to keep them simple and not over loaded with information or form controls - you want your users to pop up, get what they need and move on.

Pop ups in PowerApps are hand crafted (although if my MVP 'handler' is reading this, it may become a regular feature down the track!)

Pop ups at their most basic level are PowerApps controls such as a label or form that sit in front of all the other controls but have a visibility setting of false. To make them work we simply toggle the visibility of those controls from false to true. The easiest way to make this toggle work is with a button and a context variable.

The pop up we will build will be based on the 'Add New' button and will look like this

When creating a Pop Up – you’ll want to build all the elements of it first before applying the show hide formulas - the screen will look busy for a little while but it will be worth it.

As mentioned already you will always want your pop up to be in the first layer/order of all your controls on the screen – else it will pop up behind other controls on your screen. I tend to create what I need, then group it all and select Bring To Front to ensure it will operate as expected.

We are using the following elements for this pop up:

• A background – use a rectangle with a solid color to ensure the pop up is easily visible in front of the rest of the app
• A colored rectangle to sit in front of the background and act as a header
• A label sitting in the colored rectangle like a header
• A toggle to cancel the Pop Up – your classic ‘X’ icon in the upper right of your background
• A Form – to capture details to submit
• A Submit button – to send the data, then hide the pop up and refresh your data source.

Steps to Add the Pop Up

Click on the Add New button and change it's OnSelect property to the following

UpdateContext({con_NewForm : true})

This will set a context variable called 'con_NewForm' to true - you can call a context variable anything you like, but its good practice to name your controls according to some form of convention.

Add a white rectangle to your screen and size as needed, then add a second, color it as needed then align it at the top of your white rectangle.

Add an icon and color it as needed, then position it in the upper right of your colored rectangle. Change the onSelect property of the icon to the following

UpdateContext({con_NewForm : false})

This will close/hide the pop up if we decide we don't want to see it on the screen anymore

Add a Form to your screen - select the data source to be BDPipeline - or whatever you have called your list.

Toggle the Form Mode to be a New Form - this can be annoying sometimes, as the default is always Edit - but we want this to be a blank new form. You can find this setting on the right hand properties pane.

Adjust your layout as needed - I've gone with a simple 2 column set up and only presented the main form controls I want people to use.

When adding your form make a note of its name - mine is frm_NewItem yours may be Form1 - we'll need this reference later on!

Now add a button

Set the button's onSelect property to the following

SubmitForm(frm_NewItem); // create a new record in SharePoint
UpdateContext({con_NewForm:false}); // hide the pop up form
ClearCollect(myPipeline, BDPipeline); // update the data shown in the app
ResetForm(frm_NewItem) // reset the form for easy reuse

There are 4 actions we are taking and I've added mark up next to each step to indicate the action.

Finally align your pop up to look the way you want it to and then select all of the controls that make up the pop up and group them using the PowerApps group control.

Then set the visibility of the group you just created to the following (and shown below too)

con_NewForm

The pop up will then be bound to the context variable of con_NewForm - so it will immediately disappear! but click the 'Add New' button and it should appear.

Now test out the 'X' icon and the action to create a new item.

Summary

In this tutorial, you've learnt how to add a simple pop up control to your app to submit a form, you can now begin to make additional design and validation changes to the pop up to make it work for you!

I hope this tutorial has been straight forward to follow along to - note I am working on a recording of this app as well - which I hope will help heaps.

As usual - I'd love your feedback on this app and the steps above. If you have questions - please ask!

In part 3 we will cover updating the gallery items inline via a patch statement instead of a SubmitForm to show how this alternative method of passing data to your source can work.

Keep on PowerApping!