PowerApp Portals presentation and best practices for portal deployments.

3. Speaker

4. Andrew Ly
KPMG Associate Director
Lachlan Wright
KPMG Senior Consultant

5. Objective of this Session
• Give you a run down on PowerApp Portals
• Get you building your first a PowerApp Portal
• Best practices on PowerApp Portal

6. Introduction to
PowerApp Portals• “Just The Basics”

7. What is PowerApp Portals
• Latest Iteration of Microsoft Portals Solution
• Enabled Self Service Scenarios
• Pre-packaged Template Websites
• Fully Integrated with CDS
• Extensible via Code (Javascript, CSS, HTML5, Liquid)

8. History
Create
ADXStudio Portals
for Dynamics CRM
ADXStudio
Founded 1998
ADXStudio Acquired by
Microsoft 2015
ADXStudio Portals
rebranded to Microsoft
Portals
One Time Release of
Portals Source to Github.
Community Edition
Adoxio extend
Community Edition &
Introduce Velocity.
PowerApp Portals in
Preview

9. What PowerApp Portals Is Not

10. From Microsoft Portals to PowerApp
Portals

11. Portal Architecture
• “Just The Basics”

12. Portal Architecture
Azure
Authentication
Internal Users
(via PowerApps License)
Anonymous Access
(Page Views)
External Contacts
(Contacts)
PowerApp Portals
Azure Web App
Azure B2C
Authentication
Azure Application
Insights
Common Data
Service
User Access
Presentation
Technology

13. Authentication
Contact
Authentication
Provider
Azure B2C Azure AD
External
Authentication
Provider

14. Deploy Your First
Portal• “Just The Basics”

15. Provisioning a Portal
Request New
Portal from
PowerApps
Web App
Provisioned
Managed
Solutions
Installed
Website
Records
Created
Website
Available

16. Portal Structure
Your Portal
(e.g. Customer Self
Service)
Content Snippets
Entity Forms
Entity Lists
Web Files
Web Forms
Web Pages
Web Templates
Editable content (html or text)
Data collection forms
Exposes Records
File collection (i.e. CSS, Jscripts, Images) stored
As notes
Are like Entity Forms but with logic
(branching and multi-step navigation)
Configurable web pages
Provides layout information

17. IT Pro Editing Options
• “Just The Basics”

18. Option 1 – New
Portal Editor
New Portal Editor

19. Option 1 – New
Portal Editor
Option 2 – Portal
App (Model)
Direct Editing

20. Option 1 – New
Portal Editor
Option 2 – Portal
App (Model)
Option 3 - Portal
Code Editor
Portal Code Editor

21. Styling Your Portal

24. Framework for Front End Design
Bootstrap v3.3.6 Framework for responsive web design
JavaScript Client side scripting
Liquid Templates Surfacing Dynamic content
{% if user.fullname == ‘John Doe' %}
Hello, John.
{% endif %}
How your users
experiences portal
HTML
CSS

25. Adding CSS
/* Aly - Import your fonts */
@import
url('https://fonts.googleapis.com/css?f
amily=Permanent+Marker’);
Register your Font in Theme.css File

26. .navbar-static-top.navbar-inverse {
background-color: #0b68ae;
border-color: transparent; }
.homelink, a.homelink:hover,
a.homelink:focus {
font-family: 'Permanent Marker',
cursive;
color: #fff;
text-decoration: none; }
Modify theme.css
Modifying CSS

27. Modifying Web Templates
<div class="navbar navbar-inverse navbar-static-
top" role="navigation">
<div class="container">
<div class="navbar-header">
...
</div>
<!-- Secondary Navigation -->
<div class="secondnav">
<div class="container">
{% editable snippets 'Second
Nav' type: 'html' %}
</div>
</div>
Modify “Header” Web Template

28. Modifying Web Templates + CSS
.secondnav {
background-color: #1a355e;
border-top: 1px solid #98a2ae;
padding: 8px;
text-align: right;
}
Add to theme.css

29. Adding HTML to Content Snippet
<img src="/SM_Email.png" height="30px"
alt="Email us">
<img src="/SM_Facebook.png" height="30px"
alt="Find us on Facebook">
<img src="/SM_LinkedIn.png" height="30px"
alt="Find us on LinkedIn">
<img src=“/Twitter.png" height="30px" alt="Find
us on Twitter">
Add to “Second Nav” Content Snippet

30. Adding a Custom Control via Content
Snippet
<div id="chartdiv"></div>
<!-- Resources -->
<script src="/charts.js"></script>
<script>
// Themes begin am4core.useTheme(am4themes_dark);
// Create chart instance
var chart = am4core.create("chartdiv",
am4charts.PieChart);
// Add data chart.data = [
{ "Track": "D365CE/CRMnFunctional",
"Sessions": 8 },
{ "Track": "D365CE/CRMnTechnical",
Add to Javascript Content Snippet”

31. Adding Liquid Code
{% powerbi authentication_type:"AAD"
path:"https://app.powerbi.com/groups/me/reports/9
b9f4d55-999b-999b-bd21-
99999e2e2c8e/ReportSection" %}
Add PowerBI report to Content Snippet

32. PowerBI

33. SharePoint Integration

34. Enabling SharePoint Integration

35. SharePoint added as a List Control on
Form

36. Add Permission to Web Role

37. Top #5 Customisation
Tips
LOGO NAVIGATION
SLIDER
HIGHLIGHT INFORMATION PANE
OFFERING OFFERING OFFERING
INFORMATION PANE
OFFERING OFFERING OFFERING OFFERING
FOOTER
SOCIAL LINKS

38. Portal Best Practices

39. Staging Entities
• Pros
• Auditing
• Write to Multiple Entities
• Keeps Plugins and Workflows
off core entities
• Keeps Web Forms off entities
• Flexible security
• Cons
• Maintenance and Overhead
• Good for write but not for read
Staging Entity
(i.e. Applications
Entity)
Core Entities
(i.e. Contact)
Core Entities
(i.e. Incident)
Plugins and
Workflows

40. Workflows
• Avoid Real Time Workflow and
Plugins
• If Staging, Create the end record
in the closest to final stage as
possible
• You should use child workflows
(reusability)

41. Deployment Strategies
• Bad:
• Recreate all portal records in other
environments
• Ok:
• Configuration Migration tool within
CRM SDK
• Better:
• Portal Records Mover within XRM
Tool Box

42. Tips and Tricks
• Care about performance
• Azure Application Insights
• Avoid ‘computing’ in Dynamics
• System Forms, System Views. Use the
description field!!!
• Don’t break it but if you do: Clear the
cache, restart and reset are available
options

43. You can have multiple portals

44. Portal Checker

45. Tip for refreshing your cache

46. Tip for Dealing with Javascript Libraries

47. Questions?