Rajeev Pentyala – Technical Blog on Power Platform, Azure and AI

In my Power Pages Home web page, I have a Text control with static text. This means the text is fixed and to change it, I would need to open the designer or VSCode.

What if you want the text to be configurable? For example, if you go live with some text on the Home page and later need to change it, you can use Content Snippets.

What is a Content Snippet:

• Content snippets are small chunks of editable content that can be placed by a developer in a header, footer, web page or a web template, allowing for customizable content to populate any portion of a webpage’s layout easily.
• You can use snippets to show text or HTML. Snippets can be created and edited through the Portal Management app. Allows any static content on your site to be fully content-managed and editable.

Configure Content Snippet:

• Open the Portal Management app.
• Go to Content > Content Snippets.
• To create a new snippet, select New.
• Provide the following details and Save.
  • Name : The name can be used by a developer to place the snippet value into website code.
  • Website : Website that is associated with the snippet.
  • Type : Type of content snippet, Text, or HTML.
  • Value : The content of the snippet. You can enter plain text or HTML markup.

Now that we’ve created a snippet named Home/HeroText, let’s proceed to use it on the Home webpage.

Use ‘Content Snippet’ on Web Page:

We can place a snippet using Liquid: {{ snippets["<<snippet name>>"] }}, {% editable snippets '<<snippet name>>' %}, or {% include 'snippet' snippet_name:'<<snippet name>>' %}.

• Open the Home web page in vscode.
• Replace the static text with following content snippet. Here Home/HeroText is the name of the snippet we created in the above section.

      {% editable snippets 'Home/HeroText' %}  

• Save and Sync.
• Open the Website and you will see the content rendered from the snippet.

This is one of the basic use cases of Content Snippets. I’ll cover more advanced scenarios in upcoming posts.

🙂