Embedding Bold BI Dashboard in Moodle LMS

Published:

This article provides a step-by-step guide for embedding the Bold BI dashboard into the Moodle Learning Management System (LMS).

Prerequisites

Ensure that you have Moodle LMS installed.
A MySQL database should be created for Moodle.

Steps to Embed Bold BI Dashboard

Download the Moodle Package:
- Begin by downloading the latest Moodle package. Once downloaded, extract the files.
Create a Database in MySQL
- Create a new database for Moodle in your MySQL server.
Start the Server
- Start the server to operate Moodle. It is found in the directory MoodleWindowsInstaller-latest-404.
- If you encounter a port error as like below, modify the port number in the httpd.conf file located in MoodleWindowsInstaller-latest-404/server/apache/conf. Please search for the number 80 in the file and change it to a different port number. If you changed the port number, use this URL http://localhost:port/my/index.php. The term ‘port’ refers to the port number specified in the httpd.conf file.

By default, it runs on localhost port 80. Ensure no other applications are using this port.

Access Moodle
- If the port number is 80, please use http://localhost/my/index.php. If the port number has been changed to a different value, such as 8001, use http://localhost:8001/my/index.php.
Change Database Type
- If you face issues like the ones below, change the database type in the config.php file located in MoodleWindowsInstaller-latest-404/server/moodle and refresh the Moodle page and click Continue.
Complete Installation
- Fill the basic details on the installation page. Ensure HTML format is enabled.
- On the next page, enter the support and no-reply email addresses, then save the changes.
- Please configure the user credentials for this site.
- After completing these steps, you will be able to view the image below.
Download Required Files
- Download the AuthorizeServer and getData files attached in this article and paste it in the MoodleWindowsInstaller-latest-404\server\moodle\my directory.
- Download the embedConfig file from the Bold BI application and paste it in the MoodleWindowsInstaller-latest-404\server\moodle\my directory.
Add a Block in Moodle
- In the Moodle LMS page, click the edit option in the top right corner.
- Switch to edit mode and select “Add a block” -> “Text”.
- Enter a name for the block and select the “Tools” option -> “Source Code”.
- Copy the code from the HTML file attached in the current knowledge base and paste it into the Source Code block. Save the changes.

Please note that if the port number has been modified, kindly specify the URL as shown below in the Front-end HTML file and paste that code in the Source code tab.

View the Integrated Application
- The Bold BI application is now integrated into the Moodle LMS.

How the sample works:

In the front-end application, we will create a “div” element with the “id” attribute to utilize it as an embed container.
Embed container is nothing but a div element onto which the dashboard is embedded.
In the header, we have included the Embed SDK file as a CDN.
We initiate a request to the backend application to obtain details about the Bold BI application, such as the Bold BI URL, environment type, and dashboard ID. After acquiring these details and the dashboard ID, we call the ‘renderDashboard()’ method, which is responsible for rendering the dashboard in the Moodle site.
We utilize the ‘authorizationServer.url,’ an API within the back-end application, to provide the dashboard details for embedding.
The authorization server API in the backend application communicates with the Bold BI application. It securely retrieves details using the HMACSHA256 algorithm. This method ensures secure embedding. After retrieving the details, we pass them to the Embed SDK for rendering.