Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Microsoft Portals Deep Dive - Andrew Ly & Lachlan Wright

74 views

Published on

Presented at UG Focus 2018.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Microsoft Portals Deep Dive - Andrew Ly & Lachlan Wright

  1. 1. Business Solutions MVP
  2. 2. Functional Consultant
  3. 3. Designing for Portals The Portal and the Enterprise
  4. 4. 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
  5. 5. Bootstrap v3.3.6 Framework for responsive web design JavaScript Client side code Liquid Templates Surfacing Dynamic content {% if user.fullname == ‘John Doe' %} Hello, John. {% endif %} How your users experiences portal
  6. 6. Option 1 – Classic Editor
  7. 7. Option 1 – Classic Editor Option 2 – New Portal Editor
  8. 8. Option 1 – Classic Editor Option 2 – New Portal Editor Option 3 – Within Dynamics 365
  9. 9. Option 1 – Classic Editor Option 2 – New Portal Editor Option 3 – Within Dynamics 365 Option 4 – Portal Code Editor
  10. 10. /* Aly - Import your fonts */ @import url('https://fonts.googleapis.com/css? family=Permanent+Marker’); Add to theme.css
  11. 11. .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
  12. 12. <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
  13. 13. .secondnav { background-color: #1a355e; border-top: 1px solid #98a2ae; padding: 8px; text-align: right; } Add to theme.css
  14. 14. <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
  15. 15. <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 “Section2 Block1” Content Snippet”
  16. 16. {% powerbi authentication_type:"AAD" path:"https://app.powerbi.com/groups/me/reports/ 9b9f4d55-999b-999b-bd21- 99999e2e2c8e/ReportSection" %} Add to Content Snippet”
  17. 17. LOGO NAVIGATION SLIDER HIGHLIGHT INFORMATION PANE OFFERING OFFERING OFFERING INFORMATION PANE OFFERING OFFERING OFFERING OFFERING FOOTER SOCIAL LINKS
  18. 18. Designing for Portals The Portal and the Enterprise
  19. 19. CDS/Dynamics Instance Portal Team Member Licences Azure Application Insights Azure Authentication Azure Web Apps
  20. 20. https://colinvermander.com/ https://readyxrm.blog/ http://benitezhere.blogspot.com/ http://dysfunctionalconsultant.com https://365lyf.com

×