One feature of Power Pages that doesn’t get a lot of attention is Content Snippets. What is a content snippet? Its really just a piece of text or HTML that you can inject into headers, footers, page copy, or in web templates. You can even include Liquid or JavaScript code in content snippets.
A couple of benefits of using content snippets is that you can set the locale of the snippet, meaning you can have multiple versions of the same snippet, but for each specific language on your website.
The other benefit is that it allows you to centralize and manage your static content for your website.
How does this all work? Let’s walk through an example.
Video version of this post can be found here:
A simple static webpage
In this example we have a simple, static web page with a title, some text, and an image. Very simple and very easy to create in the Power Pages design studio.
However, what if we have multiple languages provisioned on our site?
Web page metadata 101
A quick reminder of how Power Pages stores web page metadata in Microsoft Dataverse.
We have a webpage root record, this holds important info like the web page name, what template it uses, the partial URL and other related metadata.
For each website provisioned language, we will will have a corresponding webpage content record, which are linked to the root webpage record. The content pages will hold the content for each language in the Page Copy field.
When you create a webpage in the design studio, in the back it will create the root and content pages, but it will only save the web page content you created in the design studio to the default language webpage content record. So if your website is setup for English as the default language, with for example French and Norwegian as the other languages, only the English content will be updated.
Translating and updating content
You’ll need to use either the Portal Management app or download using the PAC CLI and copy and update the translated content to the corresponding content pages in the page copy field.
Even though the process isn’t that hard, and doable from someone with maker skills, its not that intuitive or straight forward for perhaps a marketing or admin person to have to figure out how to both update the static content as well as update the translated content.
Even if the person tasked with making these updates knows there way around the design studio, Portals Management app, or even Visual Studio code, there is also whether these updates will be made to a production system directly or to a developer environment, which means the updates will need to be pushed through the ALM pipelines (and that might not always be a bad thing).
However, if its strictly static content that needs to be updated… and if it needs to updated quickly, could using all these tools and an ALM process be overkill?
Content Snippets to the rescue!
To create and use content snippets for static pages does require a little bit using pro-developer tools, but nothing that a good maker couldn’t handle. Once the content snippets are configured and placed into web pages (or web templates) maintaining, translating and updating becomes very easy.
Create snippets
The first step would be to create content snippets for the content that will be displayed on a page. In our example, lets create a content snippet for the page “title” and a content snippet for the page “text”. These snippets can be created directly in the Portals Management app or even now in Visual Studio Code.
Once the code snippets are created, you can create duplicates for other languages of your site. The value field can be the translated content (ideally professionally translated, the online tools don’t always do the best job). The only criteria is the content snippet name needs to be identical as we will use that name when embedded the content snippets on our webpage. So our translation is now done!
Add Liquid snippet tag to webpage
Liquid is the markup language used in Power Pages. If you are going to spend a lot of time building websites using Power Pages, its imperative you get familiar with Liquid objects, tags, and templates.
The easiest way for me to show you how and where to embed the content snippets is using the Power Pages design studio.
Locate the webpage with static content, and open the Visual Studio Code for the Web.
Replace the static content pieces with the Liquid snippets tag;
{% editable snippets 'widget_title' %}
The editable tag means that someone using the design studio will be able to edit the content directly there as well.
When we preview the webpage, the end user won’t notice the difference.
So now that all the code is the same, we can copy that to each of the content web pages. Since we are using content snippets, we don’t need to worry about the translations because that is already handled at the content snippet level.
NOTE:
This is where I prefer using web templates for static content, the code will only need to be there once. Look for an upcoming article about whether to put web page content in web pages or in web templates.
Easy management of content
Now that we have configured our web page to use content snippets, all a content person needs to do is update the correspond content snippets directly, and they will be reflected directly on the corresponding web pages. Since this is essentially data, it may not have to go through an entire ALM process to update a page.
To make it even easier, you could create a simple Power App to manage only website content (model-driven is likely the best choice, but you could go the canvas app route if you prefer.)
Content snippets are also handy for banners or announcements that may be updated frequently or information that needs to be posted quickly. For example; cancellations, road closures or other quick announcements that need to be posted to a website. Having someone (or a system) update a content snippet makes the process easy.
Content snippets can also contain Liquid or JavaScript code, although I prefer to use locale-agnostic web templates, there might be use cases where content snippets make sense.
Summary
Power Pages provides tools to quickly build powerful websites, but sometimes to keep the long term maintenance and upkeep simple, a few proactive configuration steps can go a long way. Using content snippets to store your static content is a great method to easily manage , maintain and update your site.
Cover Photo by Surendran MP on Unsplash
Want to learn more?
Please join me at one of the upcoming pre-day conference workshops to learn more about how to build powerful Power Pages websites. We’ll cover tips and tricks like I explained here in this article plus many more.
Iberian Summit – Build Power Pages in a day workshop
European Power Platform Conference – Power Platform Developer’s workshop SOLD OUT
Nordic Summit – Build Powerful websites using Power Pages workshop
Nick Doelman is a Senior Content Developer at Microsoft, a Microsoft Certified Trainer, a former Most Valuable Professional (2017-2021), one of the cohosts of the Power Platform BOOST podcast, a community presenter and also competes in international Powerlifting competitions, including the upcoming World Bench Press Championships in South Africa. Follow Nick on twitter at @ReadyXRM
ReadyXRM 