Displaying dynamic content tiles

Dynamic content tiles are a great way to organize and present information in a visually engaging way, allowing users to interact with and explore content easily. In Power Pages, dynamic content tiles can be used to display data or content from various sources (like Dataverse, SharePoint, or external APIs) and present it in a card-like layout.

This step-by-step guide will show you how to create dynamic content tiles in Power Pages using Liquid templates, CSS, and JavaScript.

1. Understanding Dynamic Content Tiles

Dynamic content tiles are typically interactive blocks or cards that represent different categories of content, such as:

Blog posts
Products or services
User profiles
Event listings
Articles or news

Each tile can contain:

A title
An image or icon
A description or snippet of the content
A call-to-action button or link to the full content

These tiles are dynamic because they are populated with content from a data source, and the displayed content changes based on the data available.

2. Planning Your Data Source

Before implementing dynamic content tiles, you need to identify the data source from which the content will be pulled. Some common sources for content include:

Dataverse: The best option for storing and managing data within Power Pages.
SharePoint: You can use SharePoint lists for storing content, especially if your organization already uses SharePoint.
External APIs: If the content resides on an external system, you can pull it using APIs.

Ensure that the content is stored in a structured format, with fields such as:

Title
Description
Image URL or icon
Link or button URL

3. Creating the Liquid Template

In Power Pages, Liquid is used to fetch and display data dynamically. You can query your data source (like Dataverse) to retrieve relevant information and display it in the tiles.

a) Querying Data from Dataverse (or Another Source)

Here’s an example of how you can use Liquid to retrieve data from a Dataverse table and display it in tiles:

{% assign products = entities.product %}

<div class="tile-container">
  {% for product in products %}
    <div class="tile">
      <img src="{{ product.image_url }}" alt="{{ product.name }}" class="tile-image">
      <h3 class="tile-title">{{ product.name }}</h3>
      <p class="tile-description">{{ product.description }}</p>
      <a href="{{ product.link }}" class="tile-link">Learn More</a>
    </div>
  {% endfor %}
</div>

In this example:

products is a variable representing the collection of products fetched from the Dataverse table.
tile-image, tile-title, tile-description, and tile-link are elements displayed within each tile.

Each tile represents one product, and the information is dynamically pulled based on the data available in Dataverse.

b) Handling Empty or Missing Data

You can handle situations where some content may be missing (e.g., missing image URLs or descriptions) by adding conditional checks:

{% if product.image_url %}
  <img src="{{ product.image_url }}" alt="{{ product.name }}" class="tile-image">
{% else %}
  <img src="default-image.jpg" alt="Default Image" class="tile-image">
{% endif %}

This ensures that if the image is missing, a default image will be shown.

4. Styling the Content Tiles with CSS

Once you’ve populated the tiles with dynamic content, you can style them using CSS to create an attractive and responsive layout. Here’s an example:

/* Container for the tiles */
.tile-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 20px;
}

/* Style for individual tiles */
.tile {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

/* Hover effect for tiles */
.tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Image inside the tile */
.tile-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Title of the tile */
.tile-title {
  font-size: 1.2em;
  margin-top: 10px;
  font-weight: bold;
}

/* Description of the tile */
.tile-description {
  font-size: 1em;
  color: #555;
  margin: 10px 0;
}

/* Link or button for each tile */
.tile-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 15px;
}

.tile-link:hover {
  background-color: #45a049;
}

Explanation:

tile-container: The grid layout for the tiles, which adjusts based on the screen size.
tile: The individual card styling for each content tile.
tile:hover: A hover effect to make the tile interactive and engaging.
tile-image: Ensures the image is responsive and properly displayed.
tile-title, tile-description, tile-link: These are the styles for the title, description, and link button.

5. Adding Interactivity with JavaScript (Optional)

To enhance user interaction, you might want to add features like filtering, sorting, or searching content tiles dynamically. You can achieve this with JavaScript.

For example, you could add a button to toggle between grid and list views:

document.getElementById('toggleView').addEventListener('click', function() {
  var container = document.querySelector('.tile-container');
  container.classList.toggle('list-view');
});

And add corresponding CSS for the list view:

cssCopyEdit.list-view {
  display: block;
}

.list-view .tile {
  display: flex;
  margin-bottom: 20px;
}

.list-view .tile img {
  width: 100px;
  margin-right: 15px;
}

This enables users to toggle between a grid and a list layout dynamically.

6. Optimizing for Performance

When working with dynamic content tiles, it’s important to optimize performance, especially if you’re loading large datasets. Consider the following strategies:

Pagination: If your data set is large, use pagination or lazy loading to only display a limited number of tiles initially.
Image Optimization: Ensure that images are optimized for the web to reduce load times.
Caching: Use caching mechanisms to avoid re-fetching data on every page load.