Skip to content

Commit 8c43637

Browse files
MadeshGiriMadeshGiri
authored
Merge pull request #6 from boldbi/objectmodel-sample
Feature(493453): Update sample with embedtoken
2 parents 47bb8df + ef5e24d commit 8c43637

44 files changed

Lines changed: 332 additions & 314 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 47 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ This project was created using React with Python. This application aims to demon
44

55
## Dashboard view
66

7-
![Dashboard view](images/dashboard-view.png)
7+
![Dashboard view](images/dashboard.png)
88

99
## Prerequisites
1010

@@ -20,79 +20,55 @@ The samples require the following to run.
2020

2121
#### Supported browsers
2222

23-
* Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari.
23+
* Google Chrome, Microsoft Edge, and Mozilla Firefox.
24+
25+
## Configuration
26+
27+
* Please [get](https://github.com/boldbi/react-with-aspnet-core-sample/tree/master/React-with-ASP.NETCore) the React with ASP.NET Core sample from GitHub.
28+
29+
* Please ensure you have enabled embed authentication on the `embed settings` page. If it is not currently enabled, please refer to the following image or detailed [instructions](https://help.boldbi.com/site-administration/embed-settings/#get-embed-secret-code?utm_source=github&utm_medium=backlinks) to enable it.
30+
![Embed Settings](/images/enable-embedsecretkey.png)
31+
32+
* To download the `embedConfig.json` file, please follow this [link](https://help.boldbi.com/site-administration/embed-settings/#get-embed-configuration-file?utm_source=github&utm_medium=backlinks) for reference. Additionally, you can refer to the following image for visual guidance.
33+
34+
![Embed Settings Download](/images/download-embedsecretkey.png)
35+
![EmbedConfig Properties](/images/embedconfig-file.png)
36+
37+
* Copy the downloaded `embedConfig.json` file and paste it into the designated [location](https://github.com/boldbi/react-with-python/tree/master/python/django-sample-master) within the application. Please ensure you have placed it in the application, as shown in the following image.
38+
39+
![EmbedConfig image](/images/embedconfig-location.png)
2440

2541
## Developer IDE
2642

27-
* Visual studio code(<https://code.visualstudio.com/download>)
28-
29-
### Run a Sample Using Visual Studio Code
30-
31-
1. The React application acts as a client, and the Python application acts as a server. In the `models.py` file of the Python application, you need to set the User Email and Embed Secret properties.
32-
33-
<meta charset="utf-8"/>
34-
<table>
35-
<tbody>
36-
<tr>
37-
<td align="left">UserEmail</td>
38-
<td align="left">UserEmail of the Admin in your Bold BI, which would be used to get the dashboard list.</td>
39-
</tr>
40-
<tr>
41-
<td align="left">User Password</td>
42-
<td align="left">Password of the Admin in Bold BI, which will be used to get the dashboards list.</td>
43-
</tr>
44-
</tbody>
45-
</table>
46-
47-
2. Once you have provided the details, run the application using the command "python manage.py runserver." The application will be running on port number 8000.
48-
49-
3. Then, once you run your Python application, you will see results similar to those of the React application.
50-
51-
![Python Backend API](images/backend-api.png)
52-
53-
4. To run the React application, we need to set the following properties in the DashboardListing.js file:
54-
55-
![DashboardListing](images/dashboard-listing.png)
56-
57-
<meta charset="utf-8"/>
58-
<table>
59-
<tbody>
60-
<tr>
61-
<td align="left">SiteIdentifier</td>
62-
<td align="left">For the Bold BI Enterprise edition, it should be like `site/site1`. For Bold BI Cloud, it should be an empty string.</td>
63-
</tr>
64-
<tr>
65-
<td align="left">RootUrl</td>
66-
<td align="left">Dashboard Server URL (Eg: http://localhost:5000/bi, http://demo.boldbi.com/bi).</td>
67-
</tr>
68-
<tr>
69-
<td align="left">Authorization URL</td>
70-
<td align="left">Provide the API end point(get_embed_details) of python application.</td>
71-
</tr>
72-
<tr>
73-
<td align="left">Environment</td>
74-
<td align="left">Your Bold BI application environment. (If Cloud, you should use `cloud,` if Enterprise, you should use `onpremise`).</td>
75-
</tr>
76-
<tr>
77-
<td align="left">API Host</td>
78-
<td align="left">URL of python application(example: http://localhost:8000/).</td>
79-
</tr>
80-
<tr>
81-
<td align="left">UserEmail</td>
82-
<td align="left">UserEmail of the Admin in your Bold BI, which would be used to get the dashboard list.</td>
83-
</tr>
84-
<tr>
85-
<td align="left">User Password</td>
86-
<td align="left">Password of the Admin in Bold BI, which will be used to get the dashboards list.</td>
87-
</tr>
88-
</tbody>
89-
</table>
90-
91-
5. Once you provide these details, run the command “npm install.” After all the packages are installed, run the command “npm start.”
92-
93-
![Dashboard view](images/dashboard-view.png)
94-
95-
> **NOTE:** If the API host is already in use, modify the port number per your preference in embed.js and update that Dashboard.js file.
43+
* [Visual Studio Code](<https://code.visualstudio.com/download>)
44+
45+
## Run a Sample Using Visual Studio Code
46+
47+
### Python sample via VS Code
48+
49+
1. Open the [Python Django](https://github.com/boldbi/react-with-python/tree/master/python/django-sample-master) folder in Visual Studio Code.
50+
51+
2. Open the terminal in Visual Studio Code and execute the command `python manage.py runserver` to run the application. It will display a URL in the command line interface, typically something like http://localhost:8000. Copy this URL and paste it into your default web browser, as shown in the image below.
52+
53+
![backend image](/images/backend-api.png)
54+
55+
### React sample via VS Code
56+
57+
1. Open the [React](https://github.com/boldbi/react-with-python/tree/master/React) folder in Visual Studio Code.
58+
59+
2. To install all dependent packages, use the following command `npm install`.
60+
61+
> **NOTE:** If you are using Node.js version higher than v16.17, you can update the `package.json` file by adding the following line as a `script` within the `start` command. Make ensure that you replace the existing line with this updated script.
62+
63+
``` bash
64+
"start": "react-scripts --openssl-legacy-provider start"
65+
```
66+
67+
3. To run the application, use the command `npm start` in the terminal. After executing the command, the application will automatically launch in the default browser. You can access it at the specified port number (<http://localhost:3000>). Please refer to the following image.
68+
69+
![dashboard view](/images/dashboard.png)
70+
71+
> **NOTE:** We represent the dashboard embedding by default without the dashboard listing sidebar. To view the dashboard listing, provide userEmail and embedSecret values in the `DashboardListing.js` file and then navigate to the URL (such as http://localhost:3000/dashboardlisting).
9672

9773
## Important notes
9874

‎React/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@boldbi/boldbi-embedded-sdk": "^6.12.12",
6+
"@boldbi/boldbi-embedded-sdk": "^15.1.65",
77
"@testing-library/jest-dom": "^4.2.4",
88
"@testing-library/react": "^9.4.0",
99
"@testing-library/user-event": "^7.2.1",
1010
"axios": ">=1.12.0",
1111
"jquery": "^3.5.1",
1212
"react": "^16.12.0",
1313
"react-dom": "^16.12.0",
14-
"react-scripts": "^3.4.0",
15-
"type-casting-tool": "file:../../../npm 5.3.53/embedded-bi-samples"
14+
"react-router-dom": "^6.30.3",
15+
"react-scripts": "^3.4.0"
1616
},
1717
"scripts": {
1818
"start": "react-scripts start",
@@ -35,4 +35,4 @@
3535
"last 1 safari version"
3636
]
3737
}
38-
}
38+
}

‎React/src/App.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import React from 'react';
2-
// import logo from './logo.svg';
32
import './App.css';
43
import DashboardListing from './DashboardListing/DashboardListing';
4+
import Dashboard from './Dashboard/Dashboard';
5+
import { BrowserRouter, Routes, Route } from 'react-router-dom';
56

67
class App extends React.Component {
78
render() {
89
return (
9-
<div>
10-
<DashboardListing/>
11-
</div>
10+
<BrowserRouter>
11+
<Routes>
12+
<Route path="/" element={<Dashboard />} />
13+
<Route path="/dashboardlisting" element={<DashboardListing />} />
14+
</Routes>
15+
</BrowserRouter>
1216
);
1317
}
1418
}

‎React/src/Dashboard/Dashboard.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react';
2+
import '../index';
3+
import { BoldBI } from '@boldbi/boldbi-embedded-sdk';
4+
5+
//ASP.NET Core application would be run on https://localhost:5001; http://localhost:5000, which needs to be set as `apiHost`
6+
const apiHost = "http://localhost:8000";
7+
8+
//Url of the TokenGeneration action in views.py of the backend application
9+
const tokenGenerationUrl = "/tokenGeneration";
10+
11+
//var BoldBiObj;
12+
class Dashboard extends React.Component {
13+
constructor(props) {
14+
super(props);
15+
this.state = {
16+
toke: undefined,
17+
items: [],
18+
embedConfig: {},
19+
};
20+
this.BoldBiObj = new BoldBI();
21+
};
22+
23+
getEmbedToken() {
24+
return fetch(apiHost + tokenGenerationUrl, { // Backend application URL
25+
method: 'POST',
26+
headers: { 'Content-Type': 'application/json' },
27+
body: JSON.stringify({})
28+
})
29+
.then(response => {
30+
if (!response.ok) throw new Error("Token fetch failed");
31+
return response.text();
32+
});
33+
}
34+
35+
renderDashboard(data) {
36+
this.getEmbedToken()
37+
.then(accessToken => {
38+
const dashboard = BoldBI.create({
39+
serverUrl: data.ServerUrl + "/" + data.SiteIdentifier,
40+
dashboardId: data.DashboardId,
41+
embedContainerId: "dashboard",
42+
embedToken: accessToken
43+
});
44+
45+
dashboard.loadDashboard();
46+
})
47+
.catch(err => {
48+
console.error("Error rendering dashboard:", err);
49+
});
50+
};
51+
52+
render() {
53+
return (
54+
<div id="DashboardListing">
55+
<div id="container">
56+
</div>
57+
<div id="dashboard"></div>
58+
</div>
59+
);
60+
}
61+
62+
async componentDidMount() {
63+
try {
64+
const response = await fetch(apiHost + '/getdetails');
65+
const data = await response.json();
66+
// Transform camelCase keys to PascalCase
67+
const transformedEmbedConfigData = {
68+
DashboardId: data.DashboardId,
69+
EmbedType: data.EmbedType,
70+
Environment: data.Environment,
71+
ServerUrl: data.ServerUrl,
72+
SiteIdentifier: data.SiteIdentifier
73+
};
74+
this.setState({ embedConfig: transformedEmbedConfigData }, () => {
75+
this.renderDashboard(this.state.embedConfig);
76+
});
77+
} catch (error) {
78+
console.log(error);
79+
this.setState({ toke: "error", items: "error" });
80+
}
81+
}
82+
}
83+
export default Dashboard;

‎React/src/DashboardListing/DashboardListing.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)