PowerApps Forms – Learn to Build Additional Features

Diamond Platinum Gold Silver

About Will Cooper 

Business Requirements Hosted in SP Online Users at four offices Greensboro, NC Charlotte, NC Rocky Mount, NC Lynchburg, VA Accessible to Service Techs out in the field Business process and data in one location

Lewis Systems SharePoint Hub

Data Model ~3,000 ~6,000 ~20,000 ~30,000 Customers Locations Units Work Orders ~3,000 ~6,000 ~20,000 ~30,000

Old School Carbon Form

Feature 1 Tabbed Form

Let’s see it in action

Declare variable for tracking focused tab using Screen OnVisible event. E.g. Set(varWOTab,”Customer”) Tabs are buttons! Button Settings: Advanced: RadiusTopLeft = 20 + RadiusTopRight = 20 DisplayMode = If(varWOTab="Customer",DisplayMode.Edit,DisplayMode.Disabled) Style the Tab Color, Fill, BorderColor for Edit / Disabled Tab OnSelect action Set(varWOTab,"Customer")

Set each DataCard Visible varWOTab="Customer" Do not apply settings to controls inside DataCard – too granular! Preview the app, change the tab to see each screen DataCards for each tab use the same declaration for Visible e.g. varWOTab="Work" This Approach can let you accommodate for MANY fields (30-40 field form) PowerApps still sees this as a standard form. We are merely controlling VISIBILITY of elements in the form. TEST EARLY TEST OFTEN!

Feature 2 Pattern Match Validation

Let’s see it in action

Block unwanted inputs Disable form save if invalid input Need to build RegEx pattern and test before adding to PowerApps Example tester site: https://regex101.com/ RegEx is tricky, but there are lots of examples on the web Make sure to test all scenarios in your RegEx testing tool first

Ad labels for validation warning Labels turn red immediately if validation not met Example code for form save: If(!(lblVal1.Color=Red) && !(lblVal2.Color=Red) && !(lblVal3.Color=Red) && !(lblVal4.Color=Red) && !(lblVal5.Color=Red),SubmitForm(frmLocationDetail)) Should change appearance of save button to show disabled state also Label Color code example: If(IsMatch(dcvContact1Ph.Text, "^[ ()xX0123456789-]+$") || Len(dcvContact1Ph.Text)=0,RGBA(0,0,0,0),Red)

Another example RegEx pattern requirement: “Letters only” We don’t want users to append phone numbers in this field! Need to also handle if field is blank! Label is transparent if validation pass. If(IsMatch(dcvContact1.Text,"^([^0-9]*)$") || Len(dcvContact1.Text)=0,RGBA(0,0,0,0),Red)

Feature 3 Accordion Sections

Let’s see it in action

Use condition in Visible property. Example formula (Compound condition with tabs) varWOTab="Work" && Value(radUnitsServicedEdit.SelectedText.Value) <> 1 Apply value to DataCards.

Can do this with a toggle button. Declare Boolean variable on screen load to track accordion section e.g. varSectionExpanded (Context Variable (UpdateContext) or Global Variable (Set)) Use the OnSelect action to change varSectionExpanded Overlay the “Plus” and “Minus” button images and set Visible property using varSectionExpanded Declare varSectionExpanded using Screen control OnVisible event. E.g. Plus button Visible property varSectionExpanded=True Minus button Visible property varSectionExpanded=False Use a Timer control for animation. (Search PowerApps Expander Control)

Feature 4 “What’s New” Feature

Let’s see it in action

Easy to set up, but often overlooked by developer. Inform your users when you make updates! Easiest to make a simple SharePoint list for adding content. (Include pictures!) Add a version number to your home page. (This helps you confirm that the user device has the latest version pushed out.)

Feature 5 Rollup Summary Field

Let’s see it in action

"<strong>"&dcvUS1Edit&"</strong><br />"& If(Not(IsBlank(dcvUH1Edit.Text)),"("&dcvUH1Edit&") ")&dcvWorkDesc1Edit&"<br />"& If(Value(radUnitsServicedEdit.SelectedText.Value) > 1, "<strong>"&dcvUS2Edit&"</strong><br />"& If(Not(IsBlank(dcvUH2Edit.Text)),"("&dcvUH2Edit&") ")&dcvWorkDesc2Edit&"<br />")& If(Value(radUnitsServicedEdit.SelectedText.Value) > 2, "<strong>"&dcvUS3Edit&"</strong><br />"& If(Not(IsBlank(dcvUH3Edit.Text)),"("&dcvUH3Edit&") ")&dcvWorkDesc3Edit&"<br />")& If(Value(radUnitsServicedEdit.SelectedText.Value) > 3, "<strong>"&dcvUS4Edit&"</strong><br />"& If(Not(IsBlank(dcvUH4Edit.Text)),"("&dcvUH4Edit&") ")&dcvWorkDesc4Edit&"<br />")

Aggregation of data is important for PDF output! Formatted summary field is used for document provided to customer PDF is generated using 3rd Party SharePoint software add-in

Feature 6 Help & Support

Let’s see it in action

Enter Help Content using SharePoint List Use Rich Text Editor field Include Screen Shots! Make content large for small screens

Create a service request list in SharePoint Use email alerts when ticket comes in or status changes

Track status and make updates in SharePoint Notify user when ticket is complete.

Feature 7 Map Links

Let’s see it in action

Useful for phone users on the way to service call Example: https://www.google.com/maps/place/230+Staffordshire+Rd,+Winston-Salem,+NC+27104 [URL PREFIX][ADDRESS LINE], [CITY], [STATE] [ZIP] Replace spaces with “+”

Launch("https://www. google Launch("https://www.google.com/maps/place/" & Substitute(galCustomerDetailLocations.Selected.PhysicalAddress," ","+") & "," & Substitute(galCustomerDetailLocations.Selected.City," ","+") & "," & galCustomerDetailLocations.Selected.State & "+" & galCustomerDetailLocations.Selected.Zip)

Feature 8 Call Links

Let’s see it in action

Useful for phone users on the way to service call Launch("tel:"&galCustomerDetailLocations.Selected.Phone) Show button only if there IS a valid number with Visible property Len(galCustomerDetailLocations.Selected.Phone)>6

Feature 9 Lookup Record Links

Let’s see it in action

ViewForm(frmUnits10KEdit); Navigate(scrUnits10KEdit,None,{ var10KUnitID: Value(varUID1) })

Use this functionality when referencing Lookup list selections Useful in situations where there is many to one relationship between records

Feature 10 “Email PDF” Feature

Let’s see it in action

Update SharePoint list to trigger PDF workflow Email to “Modified By” user

Considerations for Mobile UI Part 1 K.I.S.S. Don’t cram Large buttons and text Easy nav Key functions only (less is more) User experience Screen orientation / aspect ratio Tablets != phones Test on devices Speed

Considerations for Mobile UI Part 2 One-trick pony Search functions early Learn and use collections Learn about search and filter delegation Consistent navigation and experience Baked in Help Guide Baked in Support

Forms Customization Comparison SharePoint PowerApps 3rd Party SharePoint Add-ins No 3rd party add-ins CSS, HTML, Javascript No CSS / HTML / Javascript Validation included Validation NOT included Desktop browser All devices Difficult to control look and feel Complete control over look and feel Build speed is FAST Build speed is SLOW SharePoint DOES NOT rely on PowerApps PowerApps DOES rely on SharePoint Many customization methods – well established New platform, pieces are missing, work arounds Lots of screen real estate Very little screen real estate Lots of built in web parts and configuration options Limited pre-built components – make it yourself

Getting Started with PowerApps IWMentor - Laura Rogers

Questions and Discussion

#SPSCLT19 Speaker Survey Session 4