Displaying multiple columns in table on a portal can be very useful to see all the relevant information of a record immediately. This is very user-friendly on larger screens but when moving over to mobile device, these columns get cramped up or you must scroll through them because they cannot be fitted onto the screen.

When we look at an entity list inside Dynamics portals, we can see that all the information of a record is displayed on a horizontal line:

But when we switch over to a mobile screen, the information is displayed in a “vertical” way:

This is more user friendly as people on mobile devices are more used to scrolling vertically instead of horizontally. Another reason to display the information vertically is that the user can still see all the information of a record at a glance. One drawback of this concept is that there will of course be less records displayed in one single screen, without scrolling.

The transformation of the table is present in the dynamics portal framework and can be reused for custom tables as well.

Let’s go ahead and create our own table in dynamics portals that displays some information of contacts using following web template:

{% fetchxml contactsQuery %}
<fetch>
  <entity name="contact" >
    <attribute name="fullname" />
    <attribute name="birthdate" />
    <attribute name="emailaddress1" />
    <attribute name="gendercode" />
    <attribute name="jobtitle" />
  </entity>
</fetch>
{% endfetchxml %}
{% assign contacts = contactsQuery.results.entities %}

<table class="table table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Birthdate</th>
      <th>Email address</th>
      <th>Gender</th>
      <th>Job title</th>
    </tr>
  </thead>
  <tbody>
    {% for contact in contacts %}
    <tr>
      <td>{{contact["fullname"]}}</td>
      <td><time class="date-only" datetime="{{contact['birthdate']|date_to_iso8601}}">{{contact["birthdate"]}}</time></td>
      <td>{{contact["emailaddress1"]}}</td>
      <td>{{contact["gendercode"].label}}</td>
      <td>{{contact["jobtitle"]}}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

This web template will display a normal boostrap table with the data of the contact in our system. On larger screens this table will look good

but when moving over to mobile devices we see that the table cannot fit onto the screen anymore and the user will have scroll horizontally to see the rest of the information.

In our web template we can now add a class to our table called “table-fluid”. This will not change anything to our table on larger screens but on mobile devices the table will transform into a vertical style like the entity list in the beginning of this post.

Now you can go ahead and customize this table by adding links the the contact detail pages, links on the email address, etc. This is a very easy and simple way to create user-friendly tables inside a dynamics portal without any code for styling.