Hopefully you've read "A Modern Autograph Book - Part 1 - Preparation" of this blog series so that you have an idea about what we're setting out to achieve. This is the first element of the development in this solution whereby we're going to create a PowerApp to capture some data which we can use throughout the rest of the process.
To start with, ensure you have a blank PowerApp, based on the phone layout to follow this example exactly.
In Part 2 - PowerApp we'll walk through the various components that I'm going to use within my PowerApp and I'll share some of the lessons which I've learnt as we go. There are a few items which I'll focus on throughout this part, which will broadly cover:
The thing which I have found so far with PowerApps is that if you wish to take a photo, you need to select (click/tap) the photograph control. I'm therefore going to change the "OnSelect"property and perform multiple actions:
When executed, this will store the values in the "MyAutographs" collection and will navigate me to my final page.
In this tutorial, we're only storing a single entry in the collection, therefore with confidence I can state that I am only going to need to retrieve the first entry in the collection. When I'm building my formula, I can therefore use the keyword "First" to tell my control to only retrieve the first row. When I use "First", I need to tell it which data source to use i.e. the name of my collection, and then tell it which field to display. If I had multiple entries, then I could use "ForAll" which would start to iterate through all rows in a Collection.
To start with, ensure you have a blank PowerApp, based on the phone layout to follow this example exactly.
In Part 2 - PowerApp we'll walk through the various components that I'm going to use within my PowerApp and I'll share some of the lessons which I've learnt as we go. There are a few items which I'll focus on throughout this part, which will broadly cover:
- Collections
- Pen Input
- Camera Control
In order to keep the design simple, I'm going to condense my PowerApp to three screens:
- Input (Input)
- Photograph (PhotographScreen)
- Review and Submit (ReviewSubmit)
As with all solution design, it's always worth considering the user experience flow as you move around your app. The issues I normally see when I review other apps is that there are many dead ends and no way to navigate back if you ever need it.
There are some suggestions as to naming conventions for the various PowerApps components starting to appear now, I generally take the same type of convention as when I used to do .NET web forms development. I usually tend to give a prefix to the control as a brief description of what it is, and then its identity.
I have found collections to be one of the most useful things within PowerApps because it effectively allows me to build up a number of rows which I can then store within PowerApps. If you want to review what's in your collection, you can view the last five items without having to use any controls on your canvas, you can simply navigate to File, select Collections from the left hand side and then choose the collection you wish to review. Very handy for initial development when you want to make sure that you're storing the correct values or objects.
There are two key methods of storing data in a collection which are:
Input Screen
My input screen is going to be relatively simple. The aim of this screen is to take down the name of the person who's autograph I'm collecting, and then their autograph.
lblNameOfPerson
This is simply an output of static text using a Label control. To achieve this, change the "Text" property to "Name of Person.txtNameOfPerson
This is the first of our input fields, and is using a Text Input control. By default, there will some prefilled text in the "Default" property. I usually like to remove this so that it's just a blank box.lblAutograph
This is again, a Label ctonrol which has the "Text" property set to "Name of the Person"peninAutograph
This is the control which will allow to take a "wet" signature and store it for future use. The main thing I change here is to turn off the controls which by default appear along the bottom. This is done by changing the "Show controls" toggle button in the properties pane on the right hand side of the screen.icoInputNext
Finally I have an icon from the gallery called "Next" which will allow me to move to the next screen in my PowerApp. This is where will construct our first formula using the formula bar at the top of the canvas area. The functionality which I want is to move from the Input screen, to the Photograph screen. So to do this I'm going to apply a formula to the "OnSelect" property, and enter the following:Navigate(PhotographScreen,ScreenTransition.Fade)Photograph Screen
My photograph screen is going to be the screen where I can take the photo of the person who's autograph I'm collecting. In this guide, it only has this one purpose, and that is to capture a photo and feed everything into a collection.
There are two key methods of storing data in a collection which are:
- Collect - This function will continue to add rows into your collection each time the function is called
- ClearCollect - This function will clear the existing rows from your collection and will then add your new data into it. This is what I'm going to use in this example.
Regardless of which function you use, you can then provide it with the data you wish to store and again can be done in two ways:
Collect(NameOfMyCollection,Item1,Item2,Item3)
This will give me three entries in my collection and PowerApps will apply some default names depending on the type of data you're entering.
Collect(NameOfMyCollection,{Item1Name: Item1, Item2Name: Item2, Item3Name: Item3})
This will give a single entry in my collection but this time with multiple columns. This approach also allows me to control the name of those columns as you'll see when I implement this in my camera control.
camPhotograph
This is the main functional control which I have on this screen, and I'm going to get it to perform two actions. The first is going to take the photograph, but then I'm going to save the photograph, autograph, and name into a collection so that I have the option of either adding more autographs in a single session, or so that I can choose to use them in a different way later.The thing which I have found so far with PowerApps is that if you wish to take a photo, you need to select (click/tap) the photograph control. I'm therefore going to change the "OnSelect"property and perform multiple actions:
- Take the photograph
- Store everything within a collection
- Navigate to my review page
ClearCollect(MyAutographs,{Person: txtNameOfPerson.Text, Photograph: camPhotograph.Photo, Autograph: peninAutograph.Image});
Navigate(ReviewSubmit,ScreenTransition.Fade) When executed, this will store the values in the "MyAutographs" collection and will navigate me to my final page.
tglCameraToggle
I am using a Toggle control to allow the use to switch between cameras if they have multiple e.g. when using this on a mobile phone. This is something quite simple to implement as the camera control has a "Camera" property. This is a boolean value, with 0 being the primary camera and 1 being the secondary. This just needs to correspond to the 0 or 1 values retrieved from the toggle control.
tglCameraToggle.ValueicoPhotographBack / icoPhotographNext
In the same way that I had an icon on my first screen, I now have the same again on this screen with the addition of the ability to navigate back. Again I'm going to apply a formula to the "OnSelect" property, and use the navigate formula to navigate around my screens.
There are a number of ways which I can display data from a collection, and that really depend on your scenario. You could add a Gallery onto your screen and set the data source to be your Collection, or you could add the individual controls directly, and for the purpose of practicing interacting with a collection, this is what we're going to do.Review & Submit Screen
My Review and Submit screen is going to display the detail which I have captured on the previous pages. The main reason for this being here is so that we can explore retrieving and displayed content from a Collection, and then doing something with it.
In this tutorial, we're only storing a single entry in the collection, therefore with confidence I can state that I am only going to need to retrieve the first entry in the collection. When I'm building my formula, I can therefore use the keyword "First" to tell my control to only retrieve the first row. When I use "First", I need to tell it which data source to use i.e. the name of my collection, and then tell it which field to display. If I had multiple entries, then I could use "ForAll" which would start to iterate through all rows in a Collection.
lblName
First(MyAutographs).Person
imgPhotograph
First(MyAutographs).Photograph
imgAutograph
First(MyAutographs).Autograph
Comments
Post a Comment