PPT Used in the Extending Dynamics Portals Workshop last Wednesday the 6th of March at the CRMUGUK Meeting

1. 06 MARCH, 2019
LONDON
CHAPTER
MEETING

2. EXTENDING DYNAMICS
PORTALS
Presented by: Mario Trueba Cantero

3. Who is this guy?
Mario Trueba
Solutions Architect at Investec Bank PLC
Twitter: @mariotrueba365
LinkedIn: Mario Trueba Cantero

4. 1. This is not a monologue,
interact with everyone.
2. Got a question?
Raise your hand.
3. Have fun!
3 Rules

5. Presentation Layer
Using Combination of Web
Standards and Dynamics Forms.
Business Logic
SDK for Microsoft Dynamics 365.
Plugins Provide Validation and
interface to third parties.
3 examples of Dynamics Portals
Portal Structure
Understand the relationships
between all the Portal
Components
Twitter: @mariotrueba365

6. 1 Portals Structure
Twitter: @mariotrueba365

7. “When a user navigates to a
URL, the content associated
with that URL is displayed.
However, a webpage contains
no information on how that
content is displayed. This
belongs in the Page Template”
“Web Template is a Dynamics 365
for Customer Engagement entity
included with Dynamics 365 for
Customer Engagement portals,
that is used to store template
source content.”
“A website is the core entity
of Dynamics 365 for
Customer Engagement Portal
application. A portal
application selects a single
Website record”
““A web page represents a
particular URL in a portals
website”
Web Site Web Page
Page Template Web Template
Twitter: @mariotrueba365

8. “A web link can link to any URL or it
can link to another webpage within
the same website”
“A web link can link to any
URL or it can link to another
webpage within the same
website”
Web Link Entity Form
Twitter: @mariotrueba365

9. Demo n0 1
Steps:
1. Create Entity Form Called Contact
2. Create a Web Page Called Create Contact
3. Use the Entity Form in that Web Page
4. Add the Page to the main menu
Twitter: @mariotrueba365

10. Contact Entity Form
Twitter: @mariotrueba365

11. Create a Web Page
Twitter: @mariotrueba365

12. Add page to the menu
Twitter: @mariotrueba365

13. 21 2 Presentation Layer
Twitter: @mariotrueba365

14. “A jQuery plugin is simply a new
method that we use to
extend jQuery's prototype object.
By extending the prototype object
you enable all jQuery objects to
inherit any methods that you add.”
Source
jQuery Plugins
Presentation Layer
Twitter: @mariotrueba365

15. Registry
jQuery Plugins
pickadate.js
jQuery date & time input picker.
jQuery Validation Plugin
Validate forms like you've never validated
before
jQuery Steps
Easily create wizard-like interfaces.
Geocoding and Places Autocomplete
Plugin
jQuery plugin that wraps the
Google Maps
API's Geocoding and Places
Autocomplete services
Twitter: @mariotrueba365

16. • Remote Reference
• Upload as Web Files
jQuery Plugins
Twitter: @mariotrueba365

17. Referencing in Liquid Templates
jQuery Plugins
Twitter: @mariotrueba365

18. • “Head/Fonts” “Head/Bottom”
Documented in former ADX
Portal
Still Works
TIP: Remember to disable
header caching to test
Embedding – Content Snippet
jQuery Plugins
Twitter: @mariotrueba365

19. Demo n0 2
Steps:
1. Create Entity Form Called Contact
2. Install Jquery and Jquery Steps as a Web File
3. Find the code for the page at Jquery Steps
4. Create a Web Template to hold the Liquid Template
5. Create a Page Template
6. Create a Page for it
7. Add it to the Menu
Create a better page using Jquery
Plugins
Twitter: @mariotrueba365

20. Adding the Web Files
Twitter: @mariotrueba365

21. Web Template to hold the Jquery
Twitter: @mariotrueba365

22. Page Template
Twitter: @mariotrueba365

23. Web Page
Twitter: @mariotrueba365

24. 21 3 Business Logic
Twitter: @mariotrueba365

25. An iFrame (Inline Frame) is
an HTML document embedded inside
another HTML document on a
website.
Often used to insert content from
another source, such as an
advertisement, into a web page.
iFrame
Business Logic
A developer can change an IFrame's content without requiring the user to reload the
surrounding page. This capacity is enabled through JavaScript
Twitter: @mariotrueba365

26. Web Page
Custom HTML Form
Buttons, JavaScript, Plugins.
Hidden IFrame
Entity Form
Embedding Local
iFrame
Twitter: @mariotrueba365

27. • Web Pages
• Page Template
• Web Template
• Entity Form
Embedding in Practice
iFrame
Twitter: @mariotrueba365

28. • It might be tempting to simply code
the URL in the same way as you might
in a static site, but it's a bad idea.
- a mistyped address
- an out-of-date link
- get 404 errors
• SiteMarkers: link to an internal or
External page. If the sitemarker exists,
a sitemarker object can return a valid
URL.
Use SiteMarkers
iFrame
Twitter: @mariotrueba365

29. Mark Up
width=“0" height=“0" frameborder="no" scrolling="no“
CSS style=
“width:0; height:0; border:0; border:none"
“width: 0; height: 0; border: 0; border: none; position: absolute;“
Placement
Place at the bottom.
Footer Web Template can be used for global iframe.
Hiding
iFrame
Twitter: @mariotrueba365

30. Style
Background Page Template
Twitter: @mariotrueba365

31. Redirect
Entity Form
Twitter: @mariotrueba365

32. Liquid
Entity Form
Twitter: @mariotrueba365

33. Update iFrame from Parent
Communication
Twitter: @mariotrueba365

34. Demo n0 2
Steps:
1. Create Hidden Entity Form for create
2. Create a Hidden Entity Form for Update
3. Create a Hidden Web Template
4. Create a Hidden Page Template
5. Create a Hidden Web Page
6. Use SiteMarker
Use a Hidden Iframe to save the data
back to Dynamics
Twitter: @mariotrueba365

35. Hidden Entity Form Create
Twitter: @mariotrueba365

36. Hidden Edit Entity Form
Twitter: @mariotrueba365

37. Hidden Web Template
Twitter: @mariotrueba365

38. Hidden Page Template
Twitter: @mariotrueba365

39. Hidden Page
Twitter: @mariotrueba365

40. Hidden Page Marker
<iframe id="hiddenForm" width="100%" src="{{ sitemarkers["Hidden Page Marker"].url }}"
style="margin-top: 20em; height: 500px;"></iframe>
Twitter: @mariotrueba365

41. THANK YOU
FOR ATTENDING!