Morten Sæther

← Blog

Episode 7: Lists and Basic Views

16 February 2026

Displaying Data Effectively with the Lists Component

Introduction

Data is only valuable when users can find and understand it quickly. The lists component is your primary tool for displaying tabular data from Dataverse in Power Pages. This episode teaches you how to configure list views that are both informative and user-friendly, implement filtering and sorting that improves the user experience, and customize displays to match your site’s design and user needs.

Key Concepts

Learning Objectives

By the end of this episode, you will be able to:

Why Effective Data Display Matters

External portal users have different expectations than internal users. They want to quickly find information relevant to their specific needs without being overwhelmed by data that doesn’t concern them. A well-configured list can be the difference between a user successfully completing their task or abandoning your portal in frustration.

Step-by-Step Guide

1. Adding a List Component to Your Page

  1. Navigate to Page Editor:

    • Open your page in the design studio
    • Click + Add component
    • Select List from the data components

  2. Configure Basic List Settings:

    • Table: Choose the Dataverse table to display (e.g., Cases, Accounts, Products)
    • View: Select which view to use (or create a custom view)
    • Page size: Number of records to show per page (recommend 10-25 for external users)

  3. Set Up Table Permissions:

    • Ensure proper table permissions are configured (from Episode 5)
    • Test with different user roles to verify security

2. Configuring Views for Portal Users

Creating a Portal-Specific View:

  1. Go to Power Apps (make.powerapps.microsoft.com)
  2. Navigate to your table
  3. Create a new view specifically for portal display
  4. Include only columns relevant to external users
  5. Set appropriate sorting and filtering defaults

Essential View Considerations:

3. Implementing User-Friendly Filtering

Built-in Filter Options:

<!-- Example: Basic list with search -->
{% entitylist entity_logical_name: 'incident', view: 'portal_cases', search_enabled: true, search_placeholder: 'Search your cases...' %}

Custom Filter Configuration:

Advanced Filtering Techniques:

<!-- Example: Filtered list showing only user's own records -->
{% assign user_cases = entities.incident | where: 'customerid', user.contactid | where: 'statecode', 0 %}
{% for case in user_cases %}
  <div class="case-item">
    <h4>{{ case.title }}</h4>
    <p>Status: {{ case.statuscode.label }}</p>
    <p>Created: {{ case.createdon | date: "MMM dd, yyyy" }}</p>
  </div>
{% endfor %}

4. Customizing List Display

Column Formatting:

Action Buttons:

Visual Enhancements:

/* Example: Custom styling for portal lists */
.portal-list {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.portal-list .list-header {
    background-color: #f8f9fa;
    font-weight: 600;
    padding: 12px;
}

.portal-list .list-row:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}

.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.875rem;
}

.status-active { background-color: #d4edda; color: #155724; }
.status-pending { background-color: #fff3cd; color: #856404; }
.status-closed { background-color: #f8d7da; color: #721c24; }

Practical Example: Customer Support Case List

Let’s create a comprehensive case list for TechStart Solutions customers:

View Configuration:

Column Display Name Width Format
ticketnumber Case Number 120px Link to details
title Subject 300px Truncated at 50 chars
statuscode Status 100px Status badge
prioritycode Priority 80px Color-coded
createdon Created 120px Relative date
modifiedon Last Updated 120px Relative date

Filter Options:

Actions Available:

5. Performance Optimization

For Large Datasets:

Mobile Optimization:

Advanced List Features

Export Functionality

<!-- Example: Export button for list data -->
{% if user.roles contains 'Customer' %}
  <a href="{{ sitemap.download_cases.url }}?filter=user" class="btn btn-outline-primary">
    <i class="fas fa-download"></i> Export My Cases
  </a>
{% endif %}

Bulk Actions

For scenarios where users need to act on multiple records:

Real-Time Updates

// Example: Auto-refresh list data
setInterval(function() {
    if (document.hasFocus()) {
        location.reload();
    }
}, 300000); // Refresh every 5 minutes when page has focus

Troubleshooting Common Issues

Problem: List shows no data even though records exist Solution: Check table permissions, view filters, and user security roles

Problem: List loads slowly with large datasets Solution: Implement pagination, optimize view indexes, reduce column count

Problem: Columns don’t display properly on mobile Solution: Review responsive settings, hide non-essential columns on mobile

Problem: Users can’t find specific records Solution: Improve search functionality, add more filter options

Problem: Export functionality not working Solution: Verify user permissions for export actions and file access

Best Practices for Portal Lists

  1. User-Centric Design: Show only data relevant to the specific user
  2. Performance First: Optimize for speed, especially on mobile connections
  3. Clear Information Hierarchy: Most important information should be immediately visible
  4. Consistent Formatting: Use consistent date formats, status indicators, and styling
  5. Accessible Design: Ensure lists work with screen readers and keyboard navigation
  6. Error Handling: Provide helpful messages when no data is available
  7. Mobile Responsive: Test on actual mobile devices, not just browser resizing

Summary

Well-designed lists make data accessible and actionable for external users. Focus on showing the most important information first, provide good filtering and search options, and ensure your lists perform well even with large datasets. Remember that external users have different needs and expectations than internal users—design your lists accordingly.

In the next episode, you’ll learn how to collect data from users through well-designed forms that balance ease of use with data quality and security requirements.