Display CRM Records in CRM portal 365 Using Liquid

I came up with a task to show crm entity records in Portal using liquid.

Here how I have done :
1. Get fetch XML records from an Advanced find in CRM & Create Web Template in the portal with below code :

<script src="cdn.datatables.net/.../jquery.dataTables.min.js"></script>
<script src="cdn.datatables.net/.../dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $('#grid').DataTable();
});
</script>
<table class="table table-striped table-bordered" id="grid" cellspacing="0" style="width:90%; margin-left: 107px;">
    <thead>
      <tr>
        <th>Name</th>
        <th>Passport Number</th>
        <th>Address</th>
        <th>Emergency Contact No</th>
        <th>Created On</th>
      </tr>
    </thead>
    <tbody>
      {% if user%}
      {% fetchxml fetch_query %}
          <fetch mapping="logical" returntotalrecordcount="true">
                    <entity name="ags_event">
                        <attribute name="ags_eventid" />
                        <attribute name="ags_name" />
                        <attribute name="createdon" />
                        <attribute name="ags_address" />
                        <attribute name="ags_passportnumber" />
                        <attribute name="ags_emergencycontactno" />
                        <order attribute="ags_name" descending="false" />
                     
                    </entity>
                </fetch>
                {% endfetchxml %}
                {% assign result = fetch_query.results.entities %}
                {% for item in result %}
                <tr>                
                    <td>{{item.ags_name}}</td>
                    <td>{{item.ags_passportnumber}}</td>
                    <td>{{item.ags_address}}</td>
                    <td>{{item.ags_emergencycontactno}}</td>
                    <td>{{item.createdon}}</td>
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                    <td>No Records Found</td>
                </tr>
                {% endif %}
            </tbody>
        </table>

In above fetch query, you can put your query & here I am using the bootstrap grid (Instead of this we can use Jqgrid also ).In later I will write blogs on this.

2. Now, Create Page template by taking this web template. Then Create Web Page with this page template & set the web page under primary navigation Page in Portal side.

Hope it would be helpful to someone !!