Agile
Meena.micky
L15-IntroductiontoControls.pptxDr Jo Noble & Dr Tariq Alwada’n
Introduction to Controls
Rapid Development Systems
Text Input
Drop Down List
Radio Buttons
Today we will cover
We will develop an application to demonstrate PowerApps controls.
Say you work for a large supermarket who are interested in providing car insurance to customers. Management has asked you to conduct some market research, requesting you to collect information from customers regarding the car they drive and their insurance end date.
We will focus on the car aspect in lecture, and ignore customer information.
Overview of controls
We will create an application that will take in SQL server as a data source. We will then inspect and where necessary update controls to more something more suitable. We will focus on:
Text input
Drop-down
Data model
We will be building an application based on the following data model.
I will provide a SQL script that creates a “Vehicle” schema, and the tables shown.
Adding the data sources
Create a new canvas app. I will be using the mobile layout.
Select you SQL server connection then choose the appropriate tables.
This is where schemas come in handy.
1. Click
2. Click
3. Click
4. Click
Adding the data sources
Select you SQL server connection then choose the appropriate tables.
This is where schemas come in handy.
1. Click
2. Click
Considerations
There are two important points to consider:
The Insert menu in the designer enables us to add controls to screens
We can only use the controls PowerApps provides. We are unable to add our own.
Actions controls
How do we configure a control to respond to a tap or click?
Actions controls
How do we configure a control to respond to a tap or click?
We modify the OnSelect property of the control. The most obvious control for this is Button.
The Action menu provides a simple way to build OnSelect formulas.
Icons
Icons have become an integral part to user interface design. PowerApps provides a multitude of Icons, which like Buttons have an OnSelect property.
Note! OnSelect is available to nearly all controls in PowerApps.
Geometric shapes
Are useful to break up your app. They serve very well as the background for other controls (like the + create icon).
Geometric shapes are inserted from the Icons menu, simply scroll to the bottom.
Scroll Down
Displaying Text with Label
Format labels from the Home menu (note the limited fonts).
Configure label height to fit content through the AutoHeight property.
Set scrollbars for large content through the Overflow property.
Displaying HTML Text
To insert HtmlText select it from the Text dropdown.
Why is HTML text useful?
HTML Text is useful because…
… It allows us to display characters that are not available in plain text.
Primary use cases are superscript characters in chemical symbols, mathematical symbols and musical characters.
Simple data controls
Are controls that bind to a single value. Today we will focus on:
Text input
Drop-down
Let’s get PowerApps to build a form for us, then we will edit accordingly.
The browse screen
Insert a new screen and select the List template.
Set data source
1. Click
2. Click
Set data source
1. Set
2. Set
Add an Edit Form
Select the Form template.
The next slide shows how to connect to a data source.
2. Click
1. Click
3. Click
2. Click
1. Click
3. Click All
4. Click
Browse to edit screen
1. Click
Set the Items property in EditForm
1. Click
Text input control
Is often the default control for most fields. Text input has several useful properties:
Mode to control text entry:
Multiline
SingleLine
Password
MaxLength (which is derived from the database when using SQL).
Format which will accept “Text” or “Number”.
Text input control help
To provide users with additional help we can set two further properties:
Tooltip - A piece of help text that appears when user hovers the mouse ove the control.
Hint Text - Shows hint text in the input if it is empty.
1. Click
Radio control
A radio control permits a user to make a single selection.
Let’s replace the fuel type text input with a radio button. The values we will store are:
P - Petrol
D - Diesel
E - Electric
Unlock control
First, unlock the card with the FuelType card and delete the text input.
This will raise two errors. Don’t worry we will fix them in the next steps.
1. Click
Insert a Radio control
Insert a Radio control into the card and rename it RadioFuelType. Set the Items property to:
Table( {FuelId:"P", FuelDesc:"Petrol"}, {FuelId:"D", FuelDesc:"Diesel"}, {FuelId:"E", FuelDesc:"Electric"} )
See next slide for example.
1. Rename
Set the update
Now configure the card to use the selected radio item to update “FuelType” in the database. Select the parent card control, and then set the Update property to:
RadioFuelType.Selected.FuelId
1. Click
Set the Radio control on open
To complete the example, we need to set the correct radio item when a user opens the record. Set the Default property of the Radio control to If( Parent.Default="P", "Petrol", If( Parent.Default="D", "Diesel", If( Parent.Default="E", "Electric", "Petrol" )))
Lastly, delete the ErrorMessage from the card as the user is now forced to select an option.
Radio control final result
1. Click
Limiting input values with Drop-Down control
Let’s limit the Colour to a set of hard-coded colour values.
Open the Data Properties for the edit form and set the control type to “Allowed Values” for Colour.
Setting Allowed Values
1. Click
2. Click
4. Click
3. Click
Setting hard-coded Lookup Values
Unlock the Colour card. Set the Items property to:
["Black", "Blue", "Green", "Red", "Silver"]
1. Click
Setting Lookup Values from data source
This time we are going to set the Vehicle Model using a drop-down control. The source of our model will be the Vehicle.Model table in SQL.
Set ModelId to “Allowed Values” in the same way as the previous example.
Give the drop-down a sensible name, it will likely be “DataCardValue6”. I will rename it “DropDownModel”. This will make it easier to reference.
Set the Items property to be '[Vehicle].[Model]'.
Set the Default property to be:
LookUp('[Vehicle].[Model]', ModelId = Parent.Default).Name
1. Click
Thank you!
