Create custom content instead of components in Power Pages

After yesterday’s post about components today I’m looking at a bit more detail and how we can create custom content on our pages.

Finding the technical bits

To find out how the Power Pages really work, there is a model driven app available. This model driven app can be accessed through the Portal Management option the Power Pages menu .

Style your Power Pages, the easy way Microsoft Office 365 image 74

I’ve created a page in Power Pages

Style your Power Pages, the easy way Microsoft Office 365 image 76

And when I look in the Portal Management app I can find the content that matches my page.

At the moment I’m interested in finding out how that list component works.

Style your Power Pages, the easy way Microsoft Office 365 image 75

You will find that the following line of code is responsible for the list:

{% include 'entity_list' key: 'All Accounts' %}

Ok, So we have a component entity_list and we have a parameter key with the value All Accounts selecting the data for us.

Create custom content

In my case I don’t want to display a list but I would like to use the data in my Table, that includes link a link in a more custom way.

Style your Power Pages, the easy way Microsoft Office 365 image 88

How about something that looks a bit like a clickable tile and the text in the Name field is displayed underneath it in bold.

Creating a new content snippet

Now we are going to create something that will look like a custom component. However you will not be able to add these to a page like you are with component. Anyway, continue reading and you will find out more.

First we are going to create a new snippet in the Portal Management app. Just click the New button in the below screen.

Create custom content with Content Snippets

These code snippets could look something like this:

Style your Power Pages, the easy way Microsoft Office 365 image 91

In the code a record is first read from my Quicklinks table. This table has two fields. Description and Link.

Then after the record is read the app will need to display the details. This can all be done with the following lines of code:

{% assign linkrecord = entities.sp_quicklinks[’41bd6766-2cee-ec11-bb3c-002248000622′] %}

{% if linkrecord %}

  <b> Name: </b> {{ linkrecord.sp_description }} <br>

  <i> The Link: </i> {{ linkrecord.sp_link }}

{% endif %}

From a testing perspective I like to first just display simple text Just to make sure that I have everything set up correctly before I’m making things look pretty. So with the above code we would get somethign like this:

Style your Power Pages, the easy way Microsoft Office 365 image 90

But the real code that I want will look something like this:

Style your Power Pages, the easy way Microsoft Office 365 image 95
{% assign linkrecord = entities.sp_quicklinks['41bd6766-2cee-ec11-bb3c-002248000622'] %}

<div>
    <a href={{linkrecord.sp_link}} target="_blank">   <img alt="{{linkrecord.sp_description }}" src="https://i0.wp.com/sharepains.com/wp-content/uploads/2019/04/sharepains-1.png" style="width: 150px; height: 150px;"> 
    </a>
</div>    
<div>

<b>{{linkrecord.sp_description }}</b>
</div>

Create the web template

Now we will need to create a Web Template. Web templates can have multiple piece of coded. But In this example I will just have one line reading my quicklink that I created earlier:

Style your Power Pages, the easy way Microsoft Office 365 image 87
Style your Power Pages, the easy way Microsoft Office 365 image 86

Once again the code is simple:

{{ snippets["QuickLinks"] }}

Creating the page template

Now all we have to do is creating a page template and we should be ok.

Style your Power Pages, the easy way Microsoft Office 365 image 97
We can now when we create a page select our custom layout can Quick Links
Style your Power Pages, the easy way Microsoft Office 365 image 92

And we we test the solution, it will NOT work. Within the Power Pages editor everything might look fine, but when we look at the preview of the page, we will find that the image load but non of the data will appear.

Setting the permissions on the Quick Links Table.

To set the permissions we will need to create a new table permission in Power Pages. As shown below, select the table and the permissions needed to make the Preview screens be able to read the data.

Style your Power Pages, the easy way Microsoft Office 365 image 94

And when we now reload the app all will be good:

Style your Power Pages, the easy way Microsoft Office 365 image 96

More about Power Pages

Do you want to know about security in Power Pages? Or how to customize your Power Pages further than just adding components?

If you want to learn more about Power Pages then visit Power Pages – The ultimate user guide.

Continue Reading Pieter Veenstra’s Article on their blog

Create custom content instead of components in Power Pages

After yesterday’s post about components today I’m looking at a bit more detail and how we can create custom content on our pages. To find out how the Power Pages really work, there is a model driven app available. This model driven app can be accessed through the Portal Management option the Power Pages menu .

Blog Syndicated with Pieter Veenstra’s Permission

Author: Pieter Veenstra

Share This Post On