Microsoft Power Pages: Developing a Dynamic Image Carousel using Liquid, FetchXML, HTML and Bootstrap.

INTRODUCTION

Microsoft Power Pages is the rechristened version of what was earlier known & available as "Power Apps Portals" and it has been promoted into a new vertical for business website development(which by the way makes total sense) under Microsoft Power Platform; in order to build enterprise-grade cloud-centric and data-centric websites quickly using Dataverse as a Backbone. I started exploring Power Pages recently and realized that with a bit of a Pro-Code approach, we can create custom or dynamic components on Power Pages. The basic use case I chose is to build a dynamic image carousel to slide through on my web page and through the use of propagation of changes, from the Portal Management - Advanced Configuration of the site/portal.

I must warn my readers that at the time of writing this article, the Power Pages design studio is still in its nascent stage, quite sticky during backend synchronizations, and pro-code developers still largely rely on the Advanced Configuration studio settings to achieve many of their intended results. Alternatively, you can use the Visual Studio Code and Power Platform CLI route to achieve the same results but that is for a later point of discussion.

For someone who is newly starting out, I encourage you to brace yourself to a considerable amount of learning curve. Once you understand what to do where and how things are wired in the backend, then there is not much of stopping you as a Pro-Developer, the possibilities are quite endless.

STEPS TO CREATE YOUR DYNAMIC IMAGE CAROUSEL

Below are the steps needed to create a Dynamic Image Carousel.

• Step 1: Create a Web Template
• Step 2: Create a Page Template
• Step 3: Create a Web Page
• Step 4: Create Table Permissions

Now, let us look into each of the steps in a bit more detail.

Step 1. Create a Web Template called "DynamicCarouselWT"

From the Advanced configuration studio, Create a Web Template and below is the code that goes into your web template.

{% include 'Page Copy' %
{% block main %}


      {% fetchxml DemoCarouselJobs %}
      <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false" count="8" returntotalrecordcount="true">
        <entity name="ppd_jobs">
          <attribute name="ppd_joblocation" />
          <attribute name="ppd_jobrole" />
          <attribute name="ppd_joburl" />
        </entity>
      </fetch>
      {% endfetchxml %}


      <div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; margin: 0px; text-align: center; min-height: auto; padding: 8px;">
          <div class="container">
            <div id="iceapple-job-carousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
              {%for result in DemoCarouselJobs.results.entities%}                
                {% if forloop.first %}   
                  <li data-target="#iceapple-job-carousel" data-slide-to="{{forloop.index | string}}" class="active"></li>
                {% else %}
                  <li data-target="#iceapple-job-carousel" data-slide-to="{{forloop.index | string}}"></li>  
                {% endif %}
              {% endfor %}           
              </ol>     
            
              <!-- Wrapper for slides -->
              <div class="carousel-inner">
              {%for result in DemoCarouselJobs.results.entities%}                
                {% if forloop.first %}   
                    <div class="item active">              
                      <img src="{{result.ppd_joburl | string}}" alt="First Image missing" style="width:1366px;height:768px;">
                      <div>
                        <h2 class="bg-dark text-white">{{result.ppd_jobrole | string}}</h2>
                        <p class="bg-dark text-white">{{result.ppd_joblocation | string}}</p>
                      </div>
                    </div>
                {% else %} 
                    <div class="item">
                      <img src="{{result.ppd_joburl | string}}" alt="Loop Image missing" style="width:1366px;height:768px;">
                      <div>
                        <h2 class="bg-dark text-white">{{result.ppd_jobrole | string}}</h2>
                        <p class="bg-dark text-white">{{result.ppd_joblocation | string}}</p>
                      </div>
                    </div>
                {% endif %}
              {% endfor %}      
              </div>
        
              <!-- Controls -->
              <a class="left carousel-control" href="#iceapple-job-carousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
              </a>
              <a class="right carousel-control" href="#iceapple-job-carousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
              </a>
            </div> 
          </div>
        </div>
{% endblock %}}        

The first part of the code is a FetchXML query to an Entity List called Jobs in my Custom Dataverse Solution. It fetches three attributes such as the Role, Location, and URL value(they point to image URL's from Unsplash ). In reality, the table in the backend looks something like this.

Note: The Job URL field value is what is used to dynamically render the image within the Bootstrap Carousel.

Once the data is successfully retrieved through the Fetch XML Query, we use basic Liquid programming along with iteration tags to dynamically assign the active index value for the Indicators section of the Bootstrap carousel. Similarly, we use some liquid programming iteration tags to generate the inner div tags of the Wrapper for Slides section. The end result will look as seen below.

Step 2: Create a Page Template called "DynamicCarouselPT"

Page Templates are like place holders within Power Pages and they act as containers for Web Templates. It is like imagining an empty house that houses all your furniture. Page Templates are the empty houses and your web templates are the furniture(now let's not argue if it is indoor or outdoor furniture. :-) ).

The next step is to create a Page Template that will consume the Web Template we have created in Step 1. I have stuck to using the Web Site Header and Footer property as true but this is totally your wish. If you feel it should be a blank page, you can uncheck the option. Rest of the options are quite self explanatory. The end result will look as seen below.

Step 3: Create a Web Page

The next step is to create a Web Page that will consume the Page Template that we created in Step 2. Most of the options are self-explanatory. The end result will look as seen below.

Step 4: Create Table Permissions

The next step is to ensure that we assign the relevant table permissions to access the data from the Jobs entity list as seen above. Although the code on this page will execute, the HTML will not render at runtime due to this missing layer of authorization. In my case, I am providing all the privileges to the 3 default web roles(anonymous, administrators and authenticated users) and a custom web role called Human Resources. The end result will look as seen below.

Note: Using liquid programming, you could apply further layers of authorization based on current logged in user but I did not need it for this use case.

TESTING

Now, go to the Power Pages Design studio of your site, Click on Sync button and then Preview the Web Page created in Step 3. This will open your respective page in the browser window. Clicking on Synchronization brings all the changes done from Advanced Studio and vice versa.

In the browser window, you should now be able to see a Dynamic Image Carousel(ya, by the looks of it, you would already know I still need to learn how to create higher clarity GIFs :-)) as seen below.

SUMMARY

In this article, we have seen how to create a dynamic image carousel in Power Pages using FetchXML, Liquid, Bootstrap and HTML. In my next article, I will show you how to create a dynamic web page using Portals Web API instead of FetchXML & Liquid Programming. I intend to continue writing more on Power Pages in the days ahead. So, Please feel free to provide your feedback/comments if this is useful or things that you would like to see. Thanks for reading.!

~Bhargav Reddy Nuthanakalva