Display Dataverse Table Data In Power Pages by Using liquid Language

Display Dataverse Table Data In Power Pages by Using liquid Language

CSS CODE:

 /* styles.css */

/* Apply basic styles to the outer container */

.col-md-12.columnBlockLayout {

    padding: 16px;

    margin: 60px 0;

    min-height: 200px;

    background-color: #f5f5f5;

    border: 1px solid #ddd;

    border-radius: 5px;

}

/* Style the table */

.table {

    width: 100%;

    border-collapse: collapse;

    background-color: #fff;

}

/* Style the table header */

.table th {

    background-color: #007bff;

    color: #fff;

    text-align: left;

    padding: 10px;

}

/* Style the table rows */

.table td, .table th {

    border: 1px solid #ddd;

    padding: 8px;

}

/* Apply alternate row background color for better readability */

.table tbody tr:nth-child(even) {

    background-color: #f2f2f2;

}

/* Style the button within the table cell */

.table button {

    background-color: #007bff;

    color: #fff;

    border: none;

    padding: 5px 10px;

    border-radius: 3px;

    cursor: pointer;

}

/* Hover effect for the button */

.table button:hover {

    background-color: #0056b3;

}

HTML CODE:

<h1>Contact Us</h1>

{% fetchxml data %}

<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">

    <entity name="cr9cd_newtable">

        <attribute name="cr9cd_newtableid" />

        <attribute name="cr9cd_name" />

        <attribute name="cr9cd_meassge" />

        <attribute name="cr9cd_email" />

        <order attribute="cr9cd_name" descending="false" />

    </entity>

</fetch>

{% endfetchxml %}

<div class="col-md-12 columnBlockLayout" style="padding: 16px; margin: 60px 0px; min-height: 200px;">

    <table class="table">

        <thead>

            <tr>

                <th>Name</th>

                <th>Email</th>

                <th>Message</th>  

                <th>Action</th>

            </tr>

        </thead>

        <tbody>

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

            <tr class="record-row" data-record-id="{{ results.cr1fc_newtable1id }}">

                <td>{{ results.cr9cd_name }}</td>

                <td>{{ results.cr9cd_email }}</td>

                <td>{{ results.cr9cd_meassge }}</td>

                <td><button>DetailsInfo</button></td>

            </tr>

            {% endfor %}

        </tbody>

    </table>

</div>

✨ Thanks for reading! ✨

I hope you found this blog on the Microsoft Power Platform helpful! From Power Apps, Power Automate (Cloud & Desktop), Canvas Apps, Model-driven Apps, Power BI, Power Pages, SharePoint, Dynamics 365 (D365), Azure, and more, I cover a wide range of topics to help you harness these powerful tools. Don’t miss out on future tips, tutorials, and insights—hit that subscribe button to get the latest posts right to your inbox. 💌

💬 I’d love to hear your thoughts! Drop a comment below with your questions, ideas, or feedback—let’s get the conversation started!

🔗 Let’s connect and grow together!
Follow me, Ravindra Jadhav, on your favorite platforms for even more content and updates on Microsoft Power Platform and related technologies:

• 💼 LinkedIn – Let’s network and share ideas!
• 💻 GitHub – Explore my projects and code.
• 🐦 Twitter – Stay updated with quick tips and industry news.
• 📺 YouTube – Watch tutorials and deep dives on Power Platform, Power Apps, Power Automate, and more!

Let’s build something amazing together with Power Platform and Azure! 🚀