A basic guide to PowerApps

Published by Barry Francis on the 24 of July 2018.

Content

PowerApp Prerequisites

What is PowerApps
PowerApps Licensing
PowerApp Access
PowerApp updates and Accouncements

PowerApp Setup

PowerApps Insert
PowerApps Properties
PowerApps Ribbon
PowerApps Screens

PowerApp Functionality – Dynamics 365

Assign Lookup Values
Setup Search
Back Button & Reset Form
Filtered Lookups
Clear Button
Lookup GUID fix
Patch
Dynamic text colouring
Configuring Text Labels
Highlighting selected images/logos
Filtering from another gallery
Build comparison lists

Microsoft Flow – PowerApps

Basics
Date Conversions
Date Conversions – EDM.Date Error

PowerApp custom visual for PowerBI

PowerApp Prerequisites

What is PowerApps?

PowerApps is a service that allows users the ability to build custom apps that can connect to multiple data sources and well as write to each through either Microsoft Flow or PowerApps itself. This service removes the dependency on custom software developers and places this ability within each licensed user.

The apps built within PowerApps will be available to both mobile and web devices.

There are two types of design modes associated to PowerApps; namely: Canvas and Model-Driven. For this post, we will be focusing on the Canvas section of PowerApps.

PowerApp Licensing

PowerApps is licensed on a per-user basis. Both Office 365 and Dynamics 365 license holders will already have access to both PowerApps and Flow as it is included within their licenses. While this is the case, PowerApps is also available as a standalone subscription seen on the following website: https://powerapps.microsoft.com/en-us/pricing/

PowerApp Access

To begin using PowerApps, simply log into PowerApps (https://web.powerapps.com/home) or log into Office 365 and choose to open PowerApps ().

Once authenticated, you will have access to articles and videos that will assist you in familiarizing yourself with the PowerApps navigation, setup and features.

PowerApp updates and Announcements

Like Power BI, enhancements are being pushed out on a monthly basis. To keep up to date with the changes coming and changes already implemented, reference the following websites:

What’s new in PowerApps

PowerApp’s Announcements

PowerApp Setup

Once you’ve logged in, the home screen will present you with a set of possible app templates.

If you want to create a template based off Dynamics 365, select the phone layout, create a new connection (if there isn’t one already) and choose the dataset that will go along with it.

Select a Dataset 1 and then select the table you wish to use upfront.

PowerApps will then begin building your app based on the above selections.

If you want to create a blank app, select the Blank App phone layout button. Next, choose to connect to a data source.

Create a new connection (if one doesn’t exist already), choose which data source you wish to utilize and select one or more tables that should be included in your app.

If you wish to view or add in additional data sources, click on the View tab, then select the Data Sources button to view the data.

PowerApps Insert

If you wish to insert any control, text box, list view, charts and forms, use the Insert tab.

Let us explore a few of these inserts.

  • Screen – Screens allow for multiple screens to be used. You can decide to use a blank, scrollable, list and form screen.

  • Text – text can be used in a variety of methods, namely, use label to show a single line of text, numbers or currency. Other text inputs are text input whereby users can type into the box or pen input whereby a signature can be captured.

  • Controls – controls are controlled interactions that the app user can interact with. For example, you can input a button, drop down list, date picker etc. Each of these are already set by the PowerApp user and require interaction outside of simply entering text and or numbers.

  • Gallery – allows a list of records to be displayed in a vertical, horizontal and flexible format. When selected, you must connect the list to a data source and then populate the legends with columns retrieved from the data source.

  • Data table – if you wish to display your data as you would in an Excel format, use the data table insert. Once selected, set the data source and the fields that should be displayed.

  • Forms – if you wish to include a form that houses a desired set of fields that are pulled from a data source, use either the edit or display forms. If you include an edit form, app users will be able to enter in details like their first name, last name etc. Display forms will showcase details from each record.

  • Media – To include holders for images, video, audio and microphone files, use this insert. One insert that many are not aware of is the camera insert. This container allows app users the ability to capture camera pictures taken from either a web based or mobile source.

  • Charts – if you want to visualize data through a chart, you can use the column, line or pie charts. While you have access to these charts, the PowerBI tile can also be included through the Control insert tab.
  • Icons – Icons are symbols that can be added to each app screen that can also include functions that, when interacted with, can influence aspects of the app.

PowerApps Properties

The properties panel provides the most common properties of control with each insert. When selecting any insert on the form, the properties panel will be seen on the right of the window.

For example, when you include a label insert onto your form, you can set the background colour, font, text colour, visibility (hidden), tooltip, size and positions.

Under advanced, by default, there are sections that are locked as its properties are set under the Properties tab of the panel. As an PowerApp user, you can decide to unlock this section of the panel and update each property as you see fit.

PowerApps Ribbon

On the top right of the app window, under your user account, there are buttons that fulfill important functions.

The following functions are available:

  • App Checker will run through all functions and provide a set of warning and errors should it find any.
  • Undo and redo will allow you to reverse or redo the changes made.
  • Preview is quite important. Here you can run a preview of the app to test out newly set functions. Keep in mind that if a patch or flow is connected, the preview will initiate them.
  • Sharing your app with other members.
  • Help button will allow you to check on PowerApps documentation, support, community, blogs, guided learning and quick tips.

PowerApp Screens

For each screen and insert within each screen, a screen panel will be available on the left-hand side of the window.

This will allow you to visually navigate between each screen and their inserts.

NOTE

For Lookups (seen later), the DataCardKey will hold the entity data source.

PowerApp Functionality – Dynamics 365

Assign Lookup values

If you want to click on a Search icon, then view a list of records that you can search on, then follow the below path to achieve this.

To begin, select the edit form, then, on the properties panel, select the data, field or layout name. There, select the field you wish to include on the edit form.

Then, insert a search icon onto the field. Now, create a new screen that contains a list to the entity you are looking up to.

Edit the title of the list with the name of the entity and screen name, then set the fields associated to the list.

If you are using a lookup field and it returns the Guid instead of the name, use the “Lookup GUID Fix” section seen later.

Then, in this order, set the following:

1.

On the new screen, select the list arrow and input the following function:

ClearCollect(VARIABLE , ThisItem);Back()

Change the name of the variable and ensure its set to OnSelect.

Example:

ClearCollect(backlogToBeAdded , {BackLogItems :BrowseGallery1.Selected});Back()

OR

ClearCollect(projectToBeAdded , ThisItem);Back()

2.

Navigate back to the original home screen, select the text box within the new card and enter in the following function:

If(IsBlank(First(VARIABLE).new_SCHEMAID),Blank(),First(VARIABLE).new_SCHEMAname)

Set the ID of the record selected as the initial first setting, then the name of record as the second parameter.

Example:

If(IsBlank(First(backlogToBeAdded).BackLogItems.ec_ecbacklogitemid),Blank(),First(backlogToBeAdded).BackLogItems.ec_name)

3.

Select the search icon and add in the following function:

Navigate(NEWSCREENNAME,ScreenTransition.Fade,{NEWVARIABLE : DataCardValue#.Text});Clear(VARIABLEsetonpoint1)

The data card variable number is seen on the screen panel when the field is selected.

Example:

Navigate(BacklogItems,ScreenTransition.Fade,{searchec_name:DataCardValue20 .Text});Clear(backlogToBeAdded)

4.

Select the Data Card that this lookup field resides in and add in the same first logic with the ID as a reference when mapping:

First(NEWVARIABLE).NEWSCREENNAME.new_IDFIELDNAME

Example: First(backlogToBeAdded).BackLogItems.ec_ecbacklogitemid

When you choose to run the preview, when the search icon is selected, you will navigate to the new screen, select a record and have that records name be pulled through to the home screen.

To enable search within a search box (text input insert), select the search box and turn to the properties panel.

If not already unlocked, unlock the text input under the advanced tab.

Under the OnChange action, enter in the following function:

If(IsBlank(TextSearchBox1_1.Text), ENTITYSchema, Filter(ENTITYSchema, TextSearchBox1_1.Text in new_name))

Then, under the OnSelect action, enter in the following function:

Collect(VARIABLE, {Text: TextSearchBox1_1.Text})

The result, when someone starts typing, the list will begin to filter based off the starting text.

Back Button & Reset Form

If you wish to include a back button, that will push the app user back to the home screen, add an icon, then add the following OnSelect function: Back()

You can also include another function alongside the Back function that clears the values already stored in the DataCardValue fields. To do this, find the name of the form that houses these DataCardValues and set it into a ResetForm() function, for example: ResetForm(form3);

Filtered Lookups

If you need to filter a screen list off another lookup value, use the following filter on the list form:

Filter(ENTITY, ß Entities field to be compared/filtered=BrowseGallery1_1.Selected.selected field ID)

Clear Button

To include a clear button on any input field, select the field, then, under the properties panel, choose to set the clear button to true.

Lookup GUID fix

When a lookup field is used, the value that is brought through is the GUID.

If you wish to replace this value with the name of the record instead of the GUID, use the following function on the field to pass through the name:

LookUp(Accounts, accountid=ThisItem._new_customer_value, name)

LookUp(Users, systemuserid=ThisItem._ownerid_value, fullname)

Patch

If you include a button or select icon, you can include a patch function that will either create or update records within the data source the home screen is connected too.

Function: Patch(ENTITY,Defaults(ENTITY),{new_name: DataCardValue3.Text, new_date: DataCardValue16.SelectedDate, new_billable: DataCardValue22.Value, new_timespent:Value(DataCardValue17.Text)})

The data types that you can utilize to push through data are:

Single line of text –       DATACARDVALUE.Text

Date&Time –                   DATACARDVALUE.SelectedDate

Boolean –                         DATACARDVALUE.Value

Decimal –                         Value(DATACARDVALUE.Text)

Dynamic text colouring

If you wish to add in text colouring that is dependent on a certain variable, you can do so by selecting the text label box.

Then, where it includes the ThisItem function, add in the following set of logic to the Color section:

If(ThisItem.Price>1000,Red,Black)

The result is then every price that is above a certain amount is highlighted in the colour you’ve set.

Configuring Text Labels

If the data source you are pulling data from needs to be formatted into a format that matches your countries format, you can do this by selecting the data field, then including the following function into the Text section:

Text(ThisItem.Price,”[$-en-US]$##,###.00″)

This is a good way to format data that is needing to be displayed in a format that the app users will find useful.

Highlighting selected images/logos

If you wish to highlight certain logo’s or images when selected, include the following function to your gallery:

If(ThisItem.IsSelected,ColorFade(HeaderLabel.Fill,75%), White)

To ensure the above function works, if you have a text label that is being used as the App’s header, name it “HeaderLabel” or any other name.

Then, select the gallery that is housing the logos/images and choose to set the TemplateFill to the colours you require:

Note: The HeaderLabel is the text label used at the top of the App screen.

Then, each image selected will be highlighted.

Then, to avoid getting a blank list of records on the gallery with the logos/images, set the following function into the Default section of the gallery:

First(DataSet)

That way the initial record will always be selected first.

If you wish to implement a filter whereby a record selected on one gallery filters the records shown on another gallery, use the following logic:

Filter(Devices, ManufacturerID = ManufacturerGallery.Selected.ManufacturerID)

Select the gallery you wish to have filtered, then set it to filter based on the id selected from the other gallery. Then when the object on the first gallery is selected, the records in the filtered gallery will begin to only show records based off the same unique key.

NOTE: there must be a common reference between the two galleries. In the above case, ManufacturerID was referenced in both sets of data, meaning a filter could be put in place. You could use other common data keys like email, names and codes.

Build comparison lists

To allow app users the ability to compare records based on certain already selected records, follow the following steps:

  1. Checkbox to compare
  2. Create collection for selected records
  3. Adding a second screen
  4. Insert button to compare
  5. Configuring the gallery
  6. Insert button to navigate back

1. Lets begin with the first item and add the checkbox to the gallery whereby users can select certain records.

Select the gallery and then select the Pencil icon that is shown on the gallery. Then, making sure the initial cell is highlighted on the gallery, choose to add in a checkbox control. Drag and drop it to a location that is relevant to where you want the checkbox to show.

Then rename the default text from Option to Compare or any other text.

2. Now to create the collection of selected records.

Select the check box and change the section to be OnCheck and add in the following code: Collect(CompareList,ThisItem)

Select the check box and change the section to be OnUncheck and add in the following code: Remove(CompareList,ThisItem)

Select the check box and change the section to be Default and add in the following code: ThisItem in CompareList

When the check box is selected, it will include the id of the item selected to a list marked: CompareList. If unchecked, it will remove it from the same list.

To test if the above has worked, preview the app and select a few of the check boxes, then head back to the builder screen and choose Collections under the View tab.

There you will see the list of records you’ve selected

3. Time to add the second screen that will contain this list of selected records. Click on the Home tab and choose to add a new blank screen.

Once you have a new screen up, rename it to a name that you can reference later.

4. Then add in a new button that will allow you to navigate to this new screen when selected.

Set the text property to be the following:

“Compare ” & CountRows(CompareList) & ” item(s)”

(That way it shows a count of the number of records you’ve selected to compare dynamically)

Then set it’s display property to only show the button when one or more records have been selected for comparison:

If(CountRows(CompareList) > 0, DisplayMode.Edit, DisplayMode.Disabled)

Then, when the button is selected, it needs to navigate to the newly created comparison screen.

Click on the button, then click on the Action tab and choose the Navigate action. Set the action to navigate to the comparison screen and which ever transition you’d like it to use.

Update the comparison screen with the correct heading and other nice to haves before continuing.

5. Time to configure the gallery so that it displays only the items that were selected for comparison.

Copy the gallery that has the records with the comparison check box and paste it into the new comparison screen.

Rename the gallery to a new name other than the galleryname_1 it defaults.

Then, ensuring the gallery is selected, set it’s Items property to be the CompareList variable set in point 2.

There you will see that the gallery list is filtering based on the items you’ve selected for comparison.

Remove the check boxes from this screen so as not to cause confusion. You can then include additional fields from the data set that allow for more information to be provided to the app user in making their comparisons.

6. Finally, include a back button (described in this section of the post) to go back to the original screen.

Microsoft Flow – PowerApps

Basics

Flow is readily available in PowerApps to push data through to other data points.

Under the Action tab, there is a flow button that will open Microsoft Flow.

Select Create a new flow to create a new flow action. This will open a new window and link PowerApps as the data source input:

Choose to add a new step and then choose one of the actions seen under the new step button.

In my case, I will choose to add an action, then choose to create a new record from the list of actions available within Dynamics 365.

Once an action has been selected, set the instance you wish to output the action, the entity and the fields connected.

For dynamics fields that are being pushed through from PowerApps, simply click in the field and choose to Ask in PowerApps.

Once set, click on the Save button to create the flow and head back to PowerApps. There, select the button or icon you wish to attribute the flow too. Then select actions, Flow and then select the flow, this will attribute the flow to the button or icon.

The PowerAppsButton.Run function will be attributed to the button or icon selected. Each dynamic value must then be mapped depending on the order seen in the syntax within the function.

When setting the mapping for the lookup, use the data card value which was set to the ID of the lookup.

Example

_new_yourfieldid_value_DataCard3.Update

After which, you can preview the button and check to see if the flow runs.

You can also include additional functions in the same line as the run button to switch between screens if needed (for example; switch to another confirmation screen). Include the same function as you did with the Lookup search icon function: Navigate(Confirmation, ScreenTransition.Fade) ;PowerAppsbutton.Run(_ec_backlogitemid_value_DataCard3.Update, DataCardValue19, DataCardValue16, DataCardValue3, DataCardValue21, DataCardValue5, DataCardValue22)

The difference in the above is that you’ve added another function and then separated it by semicolon.

If it fails, head back to Flow (select edit on the flows available) and check the run history. There, each failure and successful run is stored and available to work through.

Date Conversions

Because Dynamics 365 and other data source dates will generally have their own date formats.

To counter this in Flow, you will need to take the following steps:

1.

To begin, before you create the record, add an action and search Input to find the Data Operations Then choose to use the Compose input.

Leave the name as the original Compose.

Ask for the Dynamics value to be supplied by PowerApps.

Then create the next action below.

2.

Create an input for year, month, day, time, date time actions. Supply the below expression for each and rename each input corresponding to its input.

year

first(skip(split(first(split(outputs(‘Compose’),’ ‘)),’.’),2))

month

first(skip(split(outputs(‘Compose’),’.’),1))

day

first(split(outputs(‘Compose’),’.’))

time

first(skip(split(outputs(‘Compose’),’ ‘),1))

date time

concat(outputs(‘year’),’.’,outputs(‘month’),’.’,outputs(‘day’),’ ‘,outputs(‘time’))

3.

Finally, create a new action called Date Time and set the following fields:

Base Time

Output (if this is not displayed, use the see more button to find it)

Format String

Round-trip date/time pattern – 2009-06-15T13:45:30.0000000-07:00 [o]

Source and destination time zone

(UTC) Coordinated Universal Time

Then, when it comes to mapping the above value, you can use its output in your mappings.

Online Reference: https://powerusers.microsoft.com/t5/General-Flow-Discussion/Create-a-new-record-in-Dynamics-365/m-p/119999#M13226

Date Conversions – EDM.Date Error

It can happen that you receive the following date error when attempting to write a date field through:

An error occurred while validating input parameters: Microsoft.OData.ODataException: Cannot convert the literal ‘Sunday, July 29, 2018’ to the expected type

‘Edm.Date’. —> System.FormatException: String ‘Sunday, July 29, 2018’ was not recognized as a valid Edm.Date.

at

Microsoft.OData.PlatformHelper.ConvertStringToDate(String text)

at Microsoft.OData.ODataPayloadValueConverter.ConvertStringValue(String stringValue,

Type targetType)

at Microsoft.OData.ODataPayloadValueConverter.ConvertFromPayloadValue(Object value, IEdmTypeReference edmTypeReference)

— End of inner exception stack trace —

This error is because of the concatenated date format as well as the Date Time setting.

To negate this, follow the steps below:

1.

Ensure the date value is set to UTC and not local in PowerApps:

2.

Then, in Flow, add an action and search Input to find the Data Operations Then choose to use the Compose input.

Leave the name as the original Compose.

Ask for the Dynamics value to be supplied by PowerApps.

Then create the next action below.

3.

Create an input for year, month, day, date time actions. Supply the below expression for each and rename each input corresponding to its input.

year

first(skip(split(first(split(outputs(‘Compose’),”)),’/’),2))

month

first(skip(split(outputs(‘Compose’),’/’),1))

day

first(split(outputs(‘Compose’),’/’))

date time

concat(outputs(‘year’),’-‘,outputs(‘day’),’-‘,outputs(‘month’))

The point in the above is to set the short date format (Setting with ‘-‘ instead of ‘/’). The error actually has nothing to do with the time zone, but the formatting of the date being pushed through.

4.

Finally, map through the output and test to see if the error no longer shows.

PowerApp custom visual for PowerBI

PowerApps can have an app included within PowerBI. To do this, open and download the custom PowerApp visual here. Once downloaded, store it in a location you can reference later.

Log into a PowerBI report and choose to edit it. There, choose to import a custom visual and select the custom PowerApp visual you’ve just downloaded.

Then, drag the visual and customize it within the report as you feel is necessary. Then, to begin setting up PowerApps, drag one of the datasource fields into the visual.

There you can choose an existing App or choose to create a new App or select a field from the list on the right.

This will allow PowerBI user the ability to both filter the visuals associated to that field from the PowerApp list or setup a button that, based on your selections (also filtered from PowerBI’s visuals) can create new records within that datasource.

The limitations and additional information on this interaction are found within the following PowerApps community blog.

As referenced in the above link, there is also a simple to use video (PowerApps custom visual for PowerBI) on the same tutorial.

2018-08-22T07:08:16+00:00