This document discusses options for designing and customizing portals in Dynamics 365. It covers using the classic editor, a new portal editor, editing within Dynamics 365, or a code editor. It provides examples of adding fonts, modifying themes, adding navigation elements, embedding Power BI reports, and including social links. Resources like Bootstrap, Liquid templates, and JavaScript can be used to surface dynamic content and customize the user experience.

3. Business Solutions MVP

4. Functional Consultant

6. Designing for Portals The Portal and the Enterprise

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

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

16. Option 1 – Classic
Editor

17. Option 1 – Classic
Editor
Option 2 – New
Portal Editor

18. Option 1 – Classic
Editor
Option 2 – New
Portal Editor
Option 3 – Within
Dynamics 365

19. Option 1 – Classic
Editor
Option 2 – New
Portal Editor
Option 3 – Within
Dynamics 365
Option 4 – Portal
Code Editor

20. /* Aly - Import your fonts */
@import
url('https://fonts.googleapis.com/css?
family=Permanent+Marker’);
Add to theme.css

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

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

23. .secondnav {
background-color: #1a355e;
border-top: 1px solid #98a2ae;
padding: 8px;
text-align: right;
}
Add to theme.css

24. <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. <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”

28. {% powerbi authentication_type:"AAD"
path:"https://app.powerbi.com/groups/me/reports/
9b9f4d55-999b-999b-bd21-
99999e2e2c8e/ReportSection" %}
Add to Content Snippet”

31. LOGO NAVIGATION
SLIDER
HIGHLIGHT INFORMATION PANE
OFFERING OFFERING OFFERING
INFORMATION PANE
OFFERING OFFERING OFFERING OFFERING
FOOTER
SOCIAL LINKS

33. Designing for Portals The Portal and the Enterprise

37. CDS/Dynamics Instance
Portal
Team Member
Licences
Azure
Application
Insights
Azure
Authentication
Azure Web
Apps

50. https://colinvermander.com/
https://readyxrm.blog/
http://benitezhere.blogspot.com/
http://dysfunctionalconsultant.com
https://365lyf.com