Historical tracking with timelines

Historical tracking with timelines allows users to view a visual and chronological history of changes, activities, or records within a portal built on Power Pages (formerly Power Apps Portals). It is especially useful in scenarios like case management, service tickets, project updates, or audit logs where tracking progress or actions over time enhances transparency and usability.

This guide walks you through building a timeline-based tracking feature using Power Pages and Dataverse, optionally integrating with external JavaScript libraries (like Vis.js or TimelineJS) for enhanced visuals.

Step 1: Identify the Entities and Data to Track

Start by deciding which entity or table you want to track. Common examples:

Case Management: Track case updates.
Projects: Track task completion or milestones.
Service Requests: Log status changes or messages.

Example:

You’re tracking Support Cases with a timeline of:

Status changes
Comments or notes
Assignments to team members

Step 2: Structure Your Dataverse Tables

Create or use existing tables:

Primary Table: e.g., Support Case
Timeline Events Table: e.g., Case Updates
- Fields:
  - Title (Text)
  - Description (Multiline Text)
  - DateTime (Date and Time)
  - Related Case (Lookup to Support Case)
  - Event Type (Choice: Comment, Status Change, Assignment, etc.)
  - Modified By (User)

Make sure the table has relationships properly configured to the primary record.

Step 3: Capture Data Automatically via Workflows or Plugins

To maintain accurate historical tracking, automate creation of timeline events:

Use Power Automate flows to trigger when:
- A field on the case is updated (e.g., status changes).
- A note or comment is added.
Each time, create a new row in the Case Updates table with the event details.

Example Flow:

Trigger: When Status field of a Support Case changes
Action: Create a Case Update with event type = “Status Change” and capture timestamp.

Step 4: Create a Portal Web Page to Display the Timeline

Set up a page in Power Pages to show timeline events for a selected case.

Create a Web Page (e.g., /case-timeline)
Add a Web Template that accepts a query string like ?id=<case_id>
Use Liquid to fetch related timeline events from Dataverse:

{% assign caseId = request.params['id'] %}
{% assign updates = entities.caseupdate | where: "relatedcase.id", caseId %}

<ul>
  {% for update in updates %}
    <li>
      <strong>{{ update.datetime | date: "%b %d, %Y %H:%M" }}</strong>: 
      {{ update.title }} - {{ update.eventtype }}
      <br>{{ update.description }}
    </li>
  {% endfor %}
</ul>

This basic display can be enhanced with styling or external libraries.

Step 5: Enhance Visualization with JavaScript Libraries (Optional)

For a graphical timeline:

Option: Use Vis.js Timeline

Include Vis.js in your web template:

<script src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet">

Add a div for the timeline:

<div id="timeline"></div>

Render the data using a <script> block:

<script>
  var items = new vis.DataSet([
    {% for update in updates %}
    {
      id: {{ forloop.index }},
      content: "{{ update.title }}",
      start: "{{ update.datetime }}",
      title: "{{ update.description | escape }}",
    },
    {% endfor %}
  ]);

  var options = {
    width: '100%',
    height: '400px',
    stack: false,
    showMajorLabels: true,
    zoomMin: 1000 * 60 * 60 * 24,
  };

  var timeline = new vis.Timeline(document.getElementById('timeline'), items, options);
</script>

This creates a scrollable, interactive timeline of events for a selected record.

Step 6: Secure and Optimize

Security Roles: Ensure users can only view timelines for cases they have access to (Dataverse permissions).
Cache data if needed, especially for long timelines.
Paginate or lazy-load events if there are hundreds of updates.

Step 7: Optional – Allow Timeline Input from Portal Users

Add a form where users can:

Add comments or notes
Submit status updates

Use Entity Forms or Custom Web Forms to collect and save timeline events into the Case Updates table, ensuring user-generated updates are tracked alongside automated ones.

Use Case Examples

Customer Service Portals: Customers view a full history of their support case.
HR Portals: Show job application status changes.
Project Management Portals: Timeline of task updates, milestones, and team comments.
Compliance Audits: Display full history of record changes over time.

Best Practices

Keep timeline events concise but informative.
Use event types and icons for visual clarity.
Implement data retention policies to archive old entries if needed.
Test on mobile devices for responsive layout.