This blog is part of an evolving series on Portals in Dynamics 365, go here to view the Introductory blog with chapters.
Web Page Types
As mentioned in Portals in Dynamics 365 | Web Pages 1A, one Web Page can be either an Entity List Web Page, Entity Form Web Page, Web Form Web Page, or a custom Web Page. The first three are their own blogs in the Portals in Dynamics 365 series, so I won’t go into much detail, but I want to show a visual of the differences.
Entity List Web Page
The Entity List Web Page lists records of the same type; it is a reproduction of a Dynamics 365 (D365) view.
Entity Form Web Page
The Entity Form Web Page displays one record; it is a reproduction of a D365 form.
Web Form Web Page
The Web Form is very similar to the Entity Form but can display multiple steps and multiple record types. For example, step one could contain Contact-entity information, and step two could contain Opportunity-entity information.
Custom Web Page
We have the option of creating a Web Page that neither points to an Entity List, Entity Form, nor a Web Form. So what would actually display on the webpage? Whatever you want, really.
Here I created a Web Page that points to the Blank Page Template. Notice it does not point to an Entity List, Entity Form, or a Web Form.
Display of Web Page:
I can log into the Portal with Portal credentials and edit this page:
Refreshed display of Web Page:
These types of Web Pages are great for non-D365 data pages like Contact Us, About Us, External Resources, etc.
Read Microsoft’s explanation of Web Files to have a fuller understanding of this topic, but I want to mention a few things. You can access Web Files from many fronts.
Web Files (Child Files) listed on the Home Web Page inside D365 Customer Engagement:
Web Files (Child Files) listed on the Home Web Page inside Portal Content Editor:
Web Files (Child Files) listed on the Home Web Page inside Portal Content Editor server:
When a Web File is associated to a Web Page, it becomes available for use. On the default Portal homepage, there are several images that are being used; one of them is layer_up.png which aids in the diagonal visual effect on the image:
We can see with the HTML and CSS that it is accessing the image via CSS, and the image is uploaded to the Portal server as indicated in the list of Child Files.
Be careful not to upload the same file all over the website. Once the file is uploaded, it can be accessed from any other web page. If you know the file will be used across many web pages, associate it to the Home Web Page – the root web page.
Let’s say I upload a file which will be used in multiple areas of my D365 Portal. Instead of uploading it multiple times for each Web Page that will use it, I will upload it once to the Home Web Page area.
Text file is a Web File (Child File) of the Home Web Page.
File is uploaded to the Portal server.
By clicking on the properties of the file on the Portal server, I can grab the URL for the file. Next, I can modify an existing Web Page Page Copy and reference the text file.
Refreshed view of Web Page:
Clicking on the link will download the file:
And place it in the Downloads folder:
By default, D365 Portals comes with a JQuery JS file; you can find the reference by viewing the source code down at the bottom of the HTML:
What does this mean for you, the Portal developer? It means you can tap into the power of JQuery to supplement out-of-the-box functionality.
For simplicity’s sake, let’s say you have a custom Web Page and would like to add some dynamic JQuery functionality. You want to display a message to your users but desire it to fade after a short time. Log into D365 Portal with your administrative credentials. Navigate to the desired page and click Edit; navigate to the Language Content tab and add your desired message.
Then navigate to the the Options tab and add the JQuery:
Now when the page loads, your message will display – for this example – for 10 seconds:
Then the message will fade out nicely:
A word of warning for adding custom CSS – much like the use of Web Files: use the philosophy of “Write once – use many times.” Personally, I wouldn’t recommend using the CSS section for an individual Web Page. Only if determined by stakeholders that it is a unique instance would I pursue this route. The better approach is to add to the theme.css CSS file as mentioned in D365 Portal – Other – Part 1 – CSS. For illustration purposes, let’s see how this could work.
I feel the table column headers for out-of-the-box Portal tables are pretty boring. Let’s dress them up a bit.
Right click any one of the column header links and select Inspect. View and understand the HTML elements and CSS involved.
Edit the page in the Portal Content Editor, navigate to Options tab, add the following CSS, and click Save.
Refresh the page and see the results:
Portal Content Editor
My son just finished long division in school. He asked the same question as millions of other children, “why?” The answer is simply that you need to understand long division, how to estimate, how to multiply, subtract, borrow, and determine the remainder. In a few short weeks, he will be allowed to use a calculator in school, and long division will change from a half-a-page per problem to a few seconds on the calculator and a one-line answer. If you only know the calculator side, it wouldn’t do you much good if a problem arises. You wouldn’t have the math ability to determine the nature of the problem and how to fix it.
The same goes for the D365 Portal Web Page: You need to understand how it works and how it’s put together before fully understanding and appreciating the Portal Content Editor.
|ROOT||NON ROOT (Portal Content Editor)|
|INFORMATION FORM||CONTENT PAGE FORM|
|Localized Content (has item)||Localized Content (no item)|
|Content (Title, Page Copy, and Summary)|
|Access Control Rules|
|Custom CSS||Custom CSS|
Previously, I emphasized that the Portal Content Editor displayed the non-root Web Page. This is true, but it also surfaces two elements of the root Web Page.
Logged in as the Portal administrator and clicking New reveals the ability to manage Child Pages and Child Files. With the Portal Content Editor and the knowledge of everything above, you can create and manage many of the components that make up the entirety of a D365 Portal website.
You might be wondering, even still, where to go to accomplish any given task. The table below demonstrates my usage of the three different tools:
|D365 CE||D365 Portal Content Editor||Portal Server|
|Access Control Rules||Managing page header title|
|Managing Page Copy|
|At times – reassignment of Entity List or Entity Form|
The Portal Content Editor is a great tool and can make certain tasks easier and faster. Try developing with all the available tools and see which mix is best for you.
Would your organization benefit from using Portals in Dynamics 365? Connect with us to discuss any time.
Dynamics 365 CE (CRM) How-To eGuide
41 pages of step-by-step instructions for 6 different key tasks in Dynamics 365 Customer Engagement (CRM). Includes interactions with PowerApps and Flow!Get the eGuide