1. PowerApps Forms – Learn to Build Additional Features

2. Diamond
Platinum
Gold
Silver

3. About Will Cooper 

4. 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

5. Lewis Systems SharePoint Hub

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

7. Old School Carbon Form

8. Feature 1 Tabbed Form

9. Let’s see it in action

10. 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")

11. 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!

12. Feature 2 Pattern Match Validation

13. Let’s see it in action

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

15. 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, "^[ ()xX ]+$") || Len(dcvContact1Ph.Text)=0,RGBA(0,0,0,0),Red)

16. 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)

17. Feature 3 Accordion Sections

18. Let’s see it in action

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

20. 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)

21. Feature 4 “What’s New” Feature

22. Let’s see it in action

23. 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.)

24. Feature 5 Rollup Summary Field

25. Let’s see it in action

26. "<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 />")

27. 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

28. Feature 6 Help & Support

29. Let’s see it in action

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

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

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

34. Feature 7 Map Links

35. Let’s see it in action

36. Useful for phone users on the way to service call
Example:
[URL PREFIX][ADDRESS LINE], [CITY], [STATE] [ZIP]
Replace spaces with “+”

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

38. Feature 8 Call Links

39. Let’s see it in action

40. 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

42. Feature 9 Lookup Record Links

43. Let’s see it in action

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

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

46. Feature 10 “Email PDF” Feature

47. Let’s see it in action

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

49. 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

50. 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

51. 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

52. Getting Started with PowerApps IWMentor - Laura Rogers

53. Questions and Discussion

55. #SPSCLT19 Speaker Survey Session 4