Successfully reported this slideshow.
Your SlideShare is downloading. ×

Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright


Check these out next

1 of 48 Ad

More Related Content

Slideshows for you (20)

Similar to Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright (20)


Recently uploaded (20)

Summit Australia 2019 - PowerApp Portals - Andrew Ly & Lachlan Wright

  1. 1. Speaker
  2. 2. Andrew Ly KPMG Associate Director Lachlan Wright KPMG Senior Consultant
  3. 3. 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
  4. 4. Introduction to PowerApp Portals• “Just The Basics”
  5. 5. 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)
  6. 6. 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
  7. 7. What PowerApp Portals Is Not
  8. 8. From Microsoft Portals to PowerApp Portals
  9. 9. Portal Architecture • “Just The Basics”
  10. 10. 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
  11. 11. Authentication Contact Authentication Provider Azure B2C Azure AD External Authentication Provider
  12. 12. Deploy Your First Portal• “Just The Basics”
  13. 13. Provisioning a Portal Request New Portal from PowerApps Web App Provisioned Managed Solutions Installed Website Records Created Website Available
  14. 14. 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
  15. 15. IT Pro Editing Options • “Just The Basics”
  16. 16. Option 1 – New Portal Editor New Portal Editor
  17. 17. Option 1 – New Portal Editor Option 2 – Portal App (Model) Direct Editing
  18. 18. Option 1 – New Portal Editor Option 2 – Portal App (Model) Option 3 - Portal Code Editor Portal Code Editor
  19. 19. Styling Your Portal
  20. 20. 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
  21. 21. Adding CSS /* Aly - Import your fonts */ @import url(' amily=Permanent+Marker’); Register your Font in Theme.css File
  22. 22. .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
  23. 23. 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
  24. 24. Modifying Web Templates + CSS .secondnav { background-color: #1a355e; border-top: 1px solid #98a2ae; padding: 8px; text-align: right; } Add to theme.css
  25. 25. 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
  26. 26. 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 = [ { "Track": "D365CE/CRMnFunctional", "Sessions": 8 }, { "Track": "D365CE/CRMnTechnical", Add to Javascript Content Snippet”
  27. 27. Adding Liquid Code {% powerbi authentication_type:"AAD" path:" b9f4d55-999b-999b-bd21- 99999e2e2c8e/ReportSection" %} Add PowerBI report to Content Snippet
  28. 28. PowerBI
  29. 29. SharePoint Integration
  30. 30. Enabling SharePoint Integration
  31. 31. SharePoint added as a List Control on Form
  32. 32. Add Permission to Web Role
  34. 34. Portal Best Practices
  35. 35. 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
  36. 36. 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)
  37. 37. 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
  38. 38. 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
  39. 39. You can have multiple portals
  40. 40. Portal Checker
  41. 41. Tip for refreshing your cache
  42. 42. Tip for Dealing with Javascript Libraries
  43. 43. Questions?