Create custom content instead of components in Power Portals

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 .

Create custom content instead of components in Power Portals Microsoft Office 365 image 74

I’ve created a page in Power Pages

Create custom content instead of components in Power Portals 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.

Create custom content instead of components in Power Portals 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.

Create custom content instead of components in Power Portals 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:

Create custom content instead of components in Power Portals 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:

Create custom content instead of components in Power Portals Microsoft Office 365 image 90

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

Create custom content instead of components in Power Portals 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:

Create custom content instead of components in Power Portals Microsoft Office 365 image 87
Create custom content instead of components in Power Portals 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.

Create custom content instead of components in Power Portals Microsoft Office 365 image 97
We can now when we create a page select our custom layout can Quick Links
Create custom content instead of components in Power Portals 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.

Create custom content instead of components in Power Portals Microsoft Office 365 image 94

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

Create custom content instead of components in Power Portals 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

https://sharepains.com/2022/06/17/create-custom-content-power-portals/

Blog Syndicated with Pieter Veenstra’s Permission

Author: Pieter Veenstra

Share This Post On