Portals in Dynamics 365 | Web Pages 1B

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.

Web Files

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:

File:

If you are more advanced and would like to upload a JavaScript file, be sure to read Colin Vermander’s article.

You have many options concerning Web Files of which you can access via HTML, JavaScript, and CSS.

Custom JavaScript and CSS

Microsoft recommends using JQuery only for HTML Web Resources, not form scripts or ribbon commands inside D365 CE. However JQuery is fully supported in D365 Portals. Yeah!

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.

Remember this?

ROOT NON ROOT (Portal Content Editor)
INFORMATION FORM CONTENT PAGE FORM
  Webpage
  Webpage Language
Localized Content (has item) Localized Content (no item)
  Content (Title, Page Copy, and Summary)
Child Pages
Child Files  
Access Control Rules  
Custom JavaScript Custom JavaScript
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
Creation of Web Pages Custom JavaScript Managing Child Files
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.

Throughout this blog, I have attempted to provide key information to aid in your Portal development and hopefully prevent some common errors and pitfalls. We traveled over the vital importance of the Web Page and that it is two dimensional in nature. Web Pages have parent Web Pages, and we have the authority to create our own URLs. Page Templates make our life easier by freeing up visual layout concerns, and Page Templates can be utilized by several different Web Page types. Web Files are critical in filling out a robust Portal and can support your custom JavaScript and CSS. Finally the Portal Content Editor is your developing friend.

Would your organization benefit from using Portals in Dynamics 365? Connect with us to discuss any time.

Talk to Our CRM Specialists

Find out how your company can use Dynamics CRM to increase visibility, manage relationships, and drive revenue.

Contact Us

Talk to Our CRM Specialists

Contact Us