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 .

I’ve created a page in Power Pages

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.

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.

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.

These code snippets could look something like this:

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:

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

{% 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:

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.

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.

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

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.