Creating Dynamic Cards in Power Pages Using Liquid and FetchXML

In this blog post, we will walk through the steps to create dynamic cards in Power Pages using Liquid and FetchXML. We will also generate FetchXML using the Dataverse REST Builder.

Prerequisites

• Access to a Power Apps environment with necessary permissions.
• Basic understanding of Power Pages, Liquid, and FetchXML.

Step 1: Generate FetchXML using Dataverse REST Builder

1. Open the Dataverse REST Builder.
   
   
   
   
   
2. Select the entity you want to fetch data from.
   
   
   
   
   
3. Define the fields and filters as per your requirements.
   
   
   
   
   
   
4. Click on FetchXML. This will generate the FetchXML code that we will use later in our web template.
   
   
   
   
   
   

Step 2: Create a Web Template in Power Pages Management Model Driven App

1. Navigate to the Power Pages Management Model Driven App.
   
   
   
   
   
2. Click on Web Templates.
   
   
   
   
   
   
3. Click on New to create a new web template.
   
   
   
   
   
   
4. Provide a name for the web template.
   
   
   
   
   
   
5. In the Source field, write your HTML code first (Containers, Columns etc.) paste the FetchXML code generated in Step 1.
   Wrap the FetchXML code with Liquid tags to create a dynamic content.

{% fetchxml myFetch %}

  <!-- Paste your FetchXML here -->

{% endfetchxml %}

Step 3: Create a Page Template

1. Write your HTML Code and Liquid loop that will contain the Cards.
   
   
   
   
   
   
2. Add the repetitive bootstrap card HTML Code
   
   
   
   
   Reference the Iteration Properties where needed by referencing Liquid tag
   
   
   My code:
   
   

   <div class="row">

      {% for results in myFetch.results.entities %}

          <div class="col-sm-6">

             <div class="card" style="padding: 20px;border: 1px solid gainsboro; margin-top: 30px; background-color:#efefef; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;">

               <div class="card-body">

                 <h5 class="card-title">{{ results.name }}</h5>

                 <p class="card-text">{{ results.cs_subject }}</p>

                 <a href="/View-Application/?id={{ results.cs_applicationid }}" class="btn btn-primary">View Application</a>

               </div>

             </div>

          </div>

      {% endfor %}

   </div>

   
   
3. Save the Record.

Step 5: Create a Page Template

1. In the Power Pages Management Model Driven App, click on Page Templates.
   
   
   
   
   
   
2. Click on New to create a new page template.
   
   
   
   
   
   
3. Provide a name for the page template. And select the type as "Web Template" 
   
   
   
   
   
   
4. In the Web Template lookup field, select the web template created in Step 2.
   
   
   
   
   
   

Step 5: Use the Page Template in Your Desired Webpage

1. Navigate to the webpage where you want to display the dynamic cards.
   
   
   
   
   
   
2. In the Page Template lookup field, select the page template created in Step 3.
   
   
   
   
   
   
3. Save the changes. Go to Power Pages and Sync your website and preview the changes
   
   
   

Output:

Congratulations! You have successfully created dynamic cards in Power Pages using Liquid and FetchXML. The cards will display data fetched from the FetchXML query, and the data will be dynamically updated based on the FetchXML code in the web template. Happy Power Apping!