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.
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
More About This Author
Array
Modern Workplace26 March 2024Receive the available storage within your SharePoint Online tenant- Modern Workplace20 March 2024Options for Documenting Your Power Apps: Comments, Code, and Controls
- Modern Workplace18 March 20242 ways to duplicate SharePoint Lists to support your Power Apps
- Modern Workplace14 March 2024Update a Hyperlink Column in SharePoint with Power Automate
