Add Content Snippets to Web Forms in Microsoft Power Pages

Adding Content Snippets in Microsoft Power Pages is a great way to allow clients to control their own Portal content. By tapping into the Page Copy of Web Pages, or liquid code of Web Templates, you can add client-controlled areas of the Portal website. The client can modify it at any time without the need for a developer.

Table of Contents

Note: Portals in Dynamics 365 Sales are now officially called “Power Pages.” They were previously called “Power Apps Portals”, but are often still referred to as “Dynamics 365 Portals.”

Web Forms and Entity Forms

Currently, there is no out-of-the-box (OOB) method to add client-controlled content to a Web Form or Entity Form.

What is the difference? Web Forms and Entity Forms are components that are associated to a Web Page and therefore do not have the Page Copy element and do not utilize liquid code. Undoubtedly, there will be times when the client wants to add text to some of the steps, but right now, they cannot do that outside of the Instructions column on the Form Definition tab on the Web Form Step form.

It has been my experience that clients do not like the location of the instructions in addition to clients wanting to add other text in other areas of a step. In my case, the client wanted to have the entire step just text, no columns of data at all. To do this, it would have to be inserted via JavaScript (developer needed) which makes it challenging for upkeep (it is removed from the client).

Below, I will provide a set of instructions that will open the Web Form Step, or Entity Form, to allow Content Snippets to be used so that a client can manage that content after development. Granted there is some up-front development needed, but once in place, the client can change the content as needed.

Example of the “About Footer” Content Snippet

Screenshot of the "About Footer" Content Snippet.

The Page Copy of the Localized Content of a Web Page may insert the Content Snippet with the below liquid tag:

Screenshot of the Page Copy of the Content Snippet liquid tag

You may do the same with the “Footer Web Template” and the below liquid tag:

Screenshot of a content snippet liquid tag for "Footer Web Template".

Summary of Steps

  1. Create the desired Content Snippet
  2. Create a Web Template
  3. Create and modify the Web Form Step

Needed Skills

You will need the following skills to implement this:

  • Portal liquid code
  • JavaScript/jQuery

Create a Content Snippet

Navigate to the Portal Management app and create the desired Content Snippet like pictured below.

Screenshot of an example Content Snippet.

Note: I set the “Type” column to Text; I discovered that setting it to HTML caused errors in the retrieval and display of the value.

AJAX Web Template

To retrieve the Content Snippet data, we need to create a Web Template that will query the data and build a JSON object (in our case a string value) that can be used in our JavaScript.

The Web Template I created for this purpose is pictured below:

Screenshot of Template and Source used to create the Web Template. Screenshot of an example source for an AJAX web template.

This query will take in a parameter – name – and find all Content Snippet records that match. It will then build a string return value that can be used in the calling function.

Note: Ensure you have Entity Permissions set up for the Content Snippet table and assign the appropriate Web Role.

Screenshot of web Entity Permissions.

Web Form Step JavaScript

Navigate to the desired Web Form and Web Form Step and then click on the Form Options tab.

Copy and paste the below code into the Custom JavaScript column and modify accordingly.

$(document).ready(function () {
  console.log("Begin Important Notice...");
  
  var url = "../../ajax-content-snippet?name= - Renewal - DPC - Edit - Important Notice"; 
  $.ajax({
    url: url,
    format: "json",
    success: function (data) {
      console.dirxml("data: " + data);
      $("div[data-name='tab_important_notice']").append(data);
    }
  });
});

var url = “../../ajax-content-snippet?name= – Renewal – DPC – Edit – Important Notice”; 

My AJAX Web Template is associated to a Page Template which is associated to a Web Page which has a parent page of Home. This means the URL above must be the base URL of the portal website. The Web Form I am using will always be two web file directories away from Home, so I need to add “../../” before the URL of the AJAX Web Page.

The URL would ultimately look something like this:

  • https://portal-url-here.powerappsportals.com/ajax-content-snippet/?name= – Renewal – DPC – Edit – Important Notice

The Web Template/ AJAX does its thing and returns, in this case, just a string value as identified by line 22 above; it is not a JSON object.

$(“div[data-name=’tab_important_notice’]”). append(data);

The Portal Web Form utilizes a CE form and displays the selected tabs of that on the Portal. Because we want to insert the Content Snippet into a Web Form Step, which does not support Page Copy, we must use jQuery to find the desired div element and insert the queried text. We want to display the dynamic text right after the tab heading.

You can find the div id of the tab / Web Form Step by opening the form editor and viewing the properties for that tab.

Screenshot of the form editor and properties for that tab.

You will also see the HTML that is rendered for that Web Form Step:

Screenshot of HTML from the tab properties.

The code above grabs the returned Content Snippet value and inserts it into the identified div element, using the jQuery append method. Below is part of the result:

Screenshot of Important Notice using the jQuery append method.

Conclusion

In this blog, we discovered how to create client-controlled areas within a Web Form Step and Entity Form (steps above can be duplicated for Entity Forms) to allow the client to manage the content without the need for a developer.

Once the Web Template, which queries the Content Snippet data, is set up, it is quick to implement the Web Form Steps that will tap into it. You may need to search for the correct HTML element in which to place the Content Snippet, but that is a minor effort.

Overall, this process provides a powerful and dynamic method to create client-controlled areas inside a Web Form Step and Entity Form.

If you would like to learn more about the functionality within Microsoft Power Pages (formerly known as Dynamics 365 Portals):

If you need or want any help, contact us at Encore and we will be happy to assist you.

Are You Receiving Our Newsletters?

Subscribe to receive our monthly newsletters with the latest updates all in one place! Get important product information, event recaps, blog articles, and more.

Subscribe

Monthly Newsletter Straight to Your Inbox

Subscribe