In the previous parts, we built Fluent Video Hub, a modern SharePoint Framework web part using Fluent UI.
It dynamically loads and plays .mp4 videos from SharePoint libraries, and in Part 3, it began saving view and rating events into a custom SharePoint list called VideoAnalytics.


Fluent Video Hub — Part 4: Building a Power BI Dashboard for Video Analytics

Overview

In the previous parts, we built Fluent Video Hub, a modern SharePoint Framework web part using Fluent UI.
It dynamically loads and plays .mp4 videos from SharePoint libraries, and in Part 3, it began saving view and rating events into a custom SharePoint list called VideoAnalytics.

This final part explains how to create a Power BI dashboard based on that data and embed it directly into SharePoint, providing real-time insights about user engagement, most-viewed videos, and average ratings.


1. Objective

The goal is to connect Power BI to the VideoAnalytics list created earlier and build visualizations that answer key questions:

MetricPurpose
Total Views per VideoIdentify which training sessions are most popular.
Average Rating per VideoMeasure quality and satisfaction.
Views over TimeTrack engagement trends weekly or monthly.
Active UsersDetect participation levels across the organization.

2. Data Source: The SharePoint List

Your list should contain the following columns:

ColumnTypeExample
TitleSingle line of textAgile Basics
VideoUrlHyperlinkhttps://tenant.sharepoint.com/
UserEmailSingle line of textjohn.doe@contoso.com
RatingNumber4
ViewDateDate and Time2025-10-08T15:42:00Z

Each record corresponds to a user event created by the Fluent Video Hub web part.


3. Connect Power BI to SharePoint

Step 1 — Open Power BI Desktop

  1. Launch Power BI Desktop.
  2. Choose Get Data → More → Online Services → SharePoint Online List.

Step 2 — Enter the Site URL

Use the root site URL, for example:

https://tenant.sharepoint.com/sites/TrainingPortal

Do not include /Lists/VideoAnalytics — Power BI will load all lists.

Step 3 — Select the List

From the navigator, select VideoAnalytics and click Load.

Power BI imports the list with all columns and metadata.


4. Transform and Clean the Data

In the Power Query Editor:

  1. Keep only the relevant columns:
    Title, VideoUrl, UserEmail, Rating, ViewDate.
  2. Convert data types:
    • RatingDecimal Number
    • ViewDateDate/Time
  3. Create calculated columns:
    • ViewMonth = Date.MonthName([ViewDate])
    • ViewYear = Date.Year([ViewDate])
  4. Rename columns for readability if needed.

Apply changes and close Power Query.


5. Create Core DAX Measures

Open the Modeling tab and create the following measures:

Total Views = COUNTROWS(VideoAnalytics)

Average Rating = AVERAGE(VideoAnalytics[Rating])

Distinct Users = DISTINCTCOUNT(VideoAnalytics[UserEmail])

Views Per Video = 
CALCULATE(
    COUNTROWS(VideoAnalytics),
    ALLEXCEPT(VideoAnalytics, VideoAnalytics[Title])
)

Average Rating Per Video =
CALCULATE(
    AVERAGE(VideoAnalytics[Rating]),
    ALLEXCEPT(VideoAnalytics, VideoAnalytics[Title])
)


6. Build the Visual Dashboard

Arrange visuals in Power BI:

VisualField MappingDescription
Bar ChartAxis = Title, Values = Total ViewsDisplays most-watched videos.
Column ChartAxis = Title, Values = Average Rating Per VideoCompares quality ratings.
Line ChartAxis = ViewDate, Values = Total ViewsShows engagement trend over time.
CardField = Distinct UsersDisplays number of unique participants.
TableColumns = Title, UserEmail, Rating, ViewDateDetailed user-level events.

Adjust color themes to match Fluent Video Hub’s palette — white background with yellow (#FFD700) accents.


7. Publish to Power BI Service

  1. Save the report and click Publish.
  2. Choose your workspace (e.g., TrainingAnalytics).
  3. After publishing, open the report online and confirm visuals appear correctly.

8. Embed the Dashboard in SharePoint

Option 1 — Modern Page Web Part

  1. In SharePoint, edit a modern page.
  2. Add the Power BI web part.
  3. Paste the report URL from Power BI Service.
  4. Set “Fit to page” or “Actual size” depending on layout.

Option 2 — Embed Securely with IFrame

Copy the embed link from Power BI (File → Embed → Website or portal) and paste it into an <iframe> inside a custom web part or page section.


9. Result

You now have an integrated analytics experience:

  • Users watch and rate videos in the Fluent Video Hub.
  • Each interaction is logged in SharePoint.
  • Power BI automatically refreshes to visualize live data.
  • Managers can measure performance, satisfaction, and participation.

10. Automation and Refresh

Power BI refreshes SharePoint list data on a schedule.
In Power BI Service:

  1. Navigate to Datasets → Schedule Refresh.
  2. Enable Keep data up to date and set a frequency (daily or hourly).

Optionally, use Power Automate to trigger a dataset refresh after new ratings are added.


11. Security Considerations

  • SharePoint permissions control who can read analytics data.
  • Power BI users must have access to the same list or dataset.
  • Avoid storing personally sensitive data beyond names or emails.

12. Conclusion

By combining Fluent UI, SPFx, SharePoint REST APIs, and Power BI, we created a complete end-to-end solution:

  1. A dynamic player with carousel and ratings.
  2. Analytics captured directly in SharePoint.
  3. A Power BI dashboard that visualizes engagement in real time.

This architecture requires no external servers, scales within Microsoft 365, and provides full transparency over training content performance.

Edvaldo Guimrães Filho Avatar

Published by