Debugging Liquid and FetchXML

Debugging Liquid templates and FetchXML queries is crucial when developing Power Pages portals to ensure that data is being displayed correctly, interactions are functioning as expected, and performance issues are minimized. Liquid is a template language used to display dynamic data in your portal, while FetchXML is a query language used to retrieve data from Dataverse. Both technologies are integral to building rich, data-driven Power Pages sites. Debugging them properly will ensure that your site runs efficiently and provides a seamless user experience.

This guide provides a step-by-step approach to debugging both Liquid and FetchXML in Power Pages.

1. Debugging Liquid in Power Pages

What is Liquid?

Liquid is an open-source templating language that enables the dynamic generation of content in Power Pages. It is used to fetch and display data, iterate over collections, conditionally render content, and more.

Common Liquid Issues

Incorrect data rendering: Data may not appear as expected.
Syntax errors: Mistyped tags, filters, or missing end tags can cause Liquid to fail.
Logic errors: Incorrect conditionals or loops may not return the expected results.
Data format issues: Dates, currencies, and other special data types might be rendered incorrectly.

Steps to Debug Liquid Templates

a. Check the Portal Logs

Power Pages logs can provide insights into issues related to Liquid rendering. You can use the Portal Diagnostic Tools to review errors and failed operations. Look for any Liquid errors related to your template.

Navigate to Portal Management > Settings > Portal Diagnostics.
Enable diagnostic logging and review logs for any Liquid errors, which might indicate syntax or logic issues.

b. Use Debugging Tools

You can debug Liquid templates by adding simple debug statements to check variables and expressions.

Debug Output: Use {{ variable_name | debug }} to output the value of a variable. For example: liquidCopyEdit{{ user.name | debug }} This will help you see what data is being passed to the Liquid template.
Test Conditions: Print the result of conditions to ensure logic is functioning as expected: liquidCopyEdit{% if user.logged_in %} Welcome, {{ user.name }}! {% else %} Please log in. {% endif %}

c. Review the Source Code of the Page

If you have access to the Power Pages admin panel, review the source code of the page you are debugging. Check if Liquid code is being rendered properly. Any errors in Liquid syntax or logic will often show as raw tags or broken output on the page.

Go to Power Pages Portal Management > Web Pages > Edit Web Page.
Review the Content Snippet or Web Template containing the Liquid code.
Make sure the Liquid code is correctly formatted and closed.

d. Simplify Complex Logic

Complex Liquid logic can be difficult to debug. To isolate problems, break down your logic into smaller sections and test each one. This approach helps identify which part of the code is failing.

Example: If you’re looping over a collection of items and displaying them, try displaying just one item first to confirm it works: liquidCopyEdit{% for item in items %} {{ item.name }} {% endfor %}

e. Validate Data Passed to Liquid

Ensure that the data passed to Liquid is correct. For example, if you’re trying to display a record from Dataverse, check if the record is available and properly passed to the template.

Example: liquidCopyEdit{% assign product = entities['product'] %} {{ product.name }}

If product is not correctly assigned or contains no data, it will fail silently. Debug by confirming the data source is correct.

2. Debugging FetchXML in Power Pages

What is FetchXML?

FetchXML is a query language designed for Dataverse (previously called Common Data Service). It is used to retrieve data from entities and can be utilized within Power Pages to display dynamic content based on database queries.

Common FetchXML Issues

Incorrect query results: FetchXML might return unexpected data or no data at all.
Syntax errors: FetchXML queries are sensitive to syntax issues, such as missing elements or improperly closed tags.
Performance issues: Inefficient queries can result in slow page load times or high resource usage.
Access issues: FetchXML queries might fail due to improper access permissions.

Steps to Debug FetchXML Queries

a. Use the Power Pages FetchXML Tester

Power Pages provides a FetchXML Tester within the Portal Management tool to help you test and debug your FetchXML queries.

Go to Power Platform Admin Center > Portal Management > FetchXML Tester.
Input your FetchXML query and run it to test the results.
Review the returned data to ensure it matches your expectations. If the data is incorrect, modify the query and retest.

b. Check the Query’s Structure

Ensure that your FetchXML query follows the correct structure, especially for:

Entity names: Ensure the names match exactly with Dataverse entities.
Field names: Ensure you are selecting the right fields (e.g., fullname vs name).
Filters and Conditions: Verify that your where conditions are correct and match your data model.

Example FetchXML Query:

<fetch>
  <entity name="contact">
    <attribute name="fullname" />
    <attribute name="emailaddress1" />
    <filter>
      <condition attribute="emailaddress1" operator="like" value="%@domain.com" />
    </filter>
  </entity>
</fetch>

This query fetches contact records where the email address ends with @domain.com. Review the conditions to ensure they align with your requirements.

c. Debug FetchXML in the Browser Console

If the query is part of a JavaScript function in your portal, you can use the browser’s developer console to log and debug the FetchXML query:

Open Developer Tools (F12) in your browser.
Go to the Console tab and add console.log() statements in your JavaScript code to print the FetchXML query and its results.

Example:

console.log("Executing FetchXML query:", fetchXmlQuery);

This will output the query and any errors that may occur in the console.

d. Check the FetchXML Response

The response from FetchXML may provide details about the success or failure of the query. Ensure you log the response to see if there are any errors, such as a 404 error indicating that the entity doesn’t exist or a 500 error signaling a server issue.

fetch(fetchXmlEndpoint, {
  method: "POST",
  headers: {
    "Content-Type": "application/xml"
  },
  body: fetchXmlQuery
})
.then(response => response.json())
.then(data => {
  console.log("FetchXML Results:", data);
})
.catch(error => {
  console.error("Error with FetchXML Query:", error);
});

e. Monitor Dataverse Performance

If your FetchXML queries are slow or inefficient, consider optimizing them by:

Limiting results: Use the top attribute to limit the number of records returned.
Reducing joins: Minimize the number of linked entities to improve performance.
Using indexing: Ensure that fields you frequently filter on are indexed in Dataverse.

3. Best Practices for Debugging Liquid and FetchXML

Start with Small Tests: Simplify your queries and Liquid code into smaller sections and test them individually before combining them.
Check Permissions: Ensure that the necessary permissions for accessing Dataverse and other data sources are correctly configured.
Use Logging: For both Liquid and FetchXML, incorporate logging mechanisms to help debug. Log the data and output to help identify issues.
Validate Data: Double-check that the data passed to the portal is complete and in the correct format.
Optimize Queries: If FetchXML queries are slow, optimize them by filtering data more efficiently and reducing unnecessary complexity.
Test in Multiple Browsers: Ensure compatibility across different browsers by testing the behavior and output of Liquid and FetchXML in multiple environments.