Building a Flexible Video Tutorial System in a Custom React Portal with Dynamics 365

This article will explore a powerful solution for seamlessly integrating video tutorials into a custom React portal. This approach considers the user's role, their current page, and the device they're using. The beauty of this system lies in its ease of configuration within Microsoft Dynamics 365, eliminating the need for extensive front-end modifications.

Our journey begins with creating a custom entity in Microsoft Dynamics 365. This entity, named "Video Tutorial," is equipped with the following essential fields:

•    Video Title: A user-friendly title for the video tutorial.
•    Order: An attribute to specify the sequence or order of the tutorial.
•    Video URL: The URL pointing to the actual video content.

We establish 1:n relationships with both the "App Page" and "Web Role" entities to enhance flexibility. It means a single Video Tutorial can be associated with multiple pages and roles.

Furthermore, we configure access based on the type of device, ensuring that the system adapts seamlessly to various user environments:

Let's delve into the practical implementation of this system using a concrete example. Suppose we have two entries within the "Video Tutorial" entity. The first is tailored for users with the "FleetManager" web role and is accessible from the "Dashboard" page but only when accessed via a desktop device. In contrast, the second tutorial is meant for users assigned the "Driver" web role. This tutorial can be accessed from the "UserSettings" page and is available on desktop and mobile devices.

The implementation consists of the following key steps:

1.    Client-Side Device Detection: Initially, we determine the type of device in use on the client side and identify the current portal page. This data is then included in an API request payload.

2.    Server-Side Role Determination: On the server side, the web role of the logged-in user is identified.
3.    Conditional Retrieval of Video Tutorials: Armed with the device type, current portal page, and web role, we can retrieve the Video Tutorial entity records that align with these criteria. It ensures that users see only the most pertinent tutorials.
4.    Displaying Video Tutorials: The server's response populates the portal page with the relevant video tutorials. Data fields from the Video Tutorial entity, such as title and URL, are used for this display. Notably, the response is cached to reduce the number of API requests when users return to the page.

As a result of this implementation, users will be presented with video tutorials tailored to their role, the specific page they're on, and the device they're using.

For instance, a FleetManager will have access to the tutorial on the Dashboard page when using a desktop device. However, it won't be visible to a Driver in the same scenario. The Driver can access it on the UserSettings page, even when using a mobile device.

As a result, we've developed a highly flexible system to manage access to video tutorials within a custom React portal. This adaptability is realized by considering various factors such as user roles, device types, and specific portal pages. The distinctive feature of this system is its seamless integration with Microsoft Dynamics 365, making it a versatile solution. This design allows for potential extensions to manage other entities and conditions as required.