The link has been provided to download the sample application, which demonstrates the dashboard rendering with the list of dashboards available in your Bold BI server and followed by steps to create a new embedding application in the VueJs
with Go
on your own.
NOTE: The best way to get started would be reading the Getting Started section of the documentation. The
Getting Started
guide gives you enough information that you need to know before working on the sample.
Please download the VueJS with Go Application.
Here, the VueJS application act as a client, and the Go application act as a server since you need to set the following properties in the App.vue
file in the VueJS app as follows.
<meta charset="utf-8"/>
<table>
<tbody>
<tr>
<td align="left">siteIdentifier</td>
<td align="left">For Bold BI Enterprise edition, it should be like <code>site/site1</code>. For Bold BI Cloud, it should be an empty string.</td>
</tr>
<tr>
<td align="left">rootUrl</td>
<td align="left">Dashboard Server BI URL (ex: http://localhost:5000/bi, http://demo.boldbi.com/bi)</td>
</tr>
<tr>
<td align="left">authorizationUrl</td>
<td align="left">Url of the GetDetails action in the Go application(http://localhost:8086/getDetails). Learn more about authorize server in this <a href='/embedded-bi/javascript-based/authorize-server/'>link.</a></td>
</tr>
<tr>
<td align="left">environment</td>
<td align="left">Your Bold BI application environment. (If Cloud, you should use <code>cloud</code>, if Enterprise, you should use <code>on-premise</code>)</td>
</tr>
<tr>
<td align="left">DashboardId</td>
<td align="left">Set the item id of the dashboard to embed from the BI server.</td>
</tr>
</tbody>
</table>
main.go
of the Go application, you need to set the UserEmail and EmbedSecret properties.<meta charset="utf-8"/>
<table>
<tbody>
<tr>
<td align="left">UserEmail</td>
<td align="left">UserEmail of the Admin in your Bold BI, which would be used to get the dashboard details from the BI server</td>
</tr>
<tr>
<td align="left">EmbedSecret</td>
<td align="left">You could get your EmbedSecret key from the Embed tab by enabling the Enable embed authentication in the <a href='https://help.boldbi.com/embedded-bi/site-administration/embed-settings/'> Administration page</a></td>
</tr>
</tbody>
</table>
Then, run your Go application and as well as the VueJS App.
The dashboard can be rendered in design mode or created with the following changes in the App.Vue
method.
let dashboard = BoldBI.create({
serverUrl: rootUrl + siteIdentifier,
dashboardId: dashboardId,//Provide item id to render it in design mode,to create dashboard remove this property
embedContainerId: "dashboard",
embedType: BoldBI.EmbedType.Component,
environment: environment == "onpremise" ? BoldBI.Environment.Enterprise : BoldBI.Environment.Cloud,
mode:BoldBI.Mode.Design,
width: "100%",
height: window.innerHeight + "px",
expirationTime: 100000,
authorizationServer: {
url: authorizationUrl
},
dynamicConnection: {
isEnabled: false,
identity: "",
},
autoRefreshSettings: {
enabled: true,
hourlySchedule: {
hours: 0,
minutes: 1,
seconds: 0
}
}
});
dashboard.loadDesigner();
console.log(dashboard);
serverUrl | Dashboard Server BI URL (ex: http://localhost:5000/bi/site/site1, http://dashboard.syncfusion.com/bi/site/site1) |
dashboardId | Provide the dashboard id of the dashboard you want to embed in view or edit mode. Ignore this property to create new dashboard. |
embedContainerId | Container Id in which dashboard renders.It should not contain hypen. |
mode | In which mode you want to render dashboard. It can either be 'View' or 'Design' mode. |
expirationTime | Set the duration for the token to be alive. |
authorizationServer | Url of the 'GetEmbedDetails' action in the go application. |
dashboard
provided in the App.vue
, you will authorize the server by calling the GetEmbedDetails function using the AuthorizeURL(http://localhost:8086/getDetails)
with the provided EmbedProperties
values.SignatureURL
has been generated with the provided EmbedSecret key
and embed details which can be validated in the Bold BI Server API and returns the token. Based on the returned token, the dashboard will start to render.App.vue
, change the dashboard Id of the respective dashboard based on your requirement.vue create my-app
. Here my-app
is the folder name of the Vue application.cd my-app.
EmbedBIWrapper.js
file and import it in the App.vue
as follows.In the App.vue
file, create a DOM element with the id dashboard
including the mandatory cdn files and properties to render the dashboard.
mounted: function() {
var scripts = [
"https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js",
"https://cdn.boldbi.com/embedded-sdk/v5.3.53/boldbi-embed.js"
];
scripts.forEach(script => {
let tag = document.createElement("script");
tag.setAttribute("src", script);
tag.setAttribute("type", "text/javascript");
tag.setAttribute("defer", "defer");
tag.async = true;
document.head.appendChild(tag);
});
let rootUrl = "http://localhost:64503/bi";
let siteIdentifier = "/site/site1";
let dashboardId = "2426b843-bf97-4392-96b1-ef12c007b66f";
let environment = "enterprise";
let authorizationUrl = "http://localhost:8086/getDetails";
let dashboard = BoldBI.create({
serverUrl: rootUrl + siteIdentifier,
dashboardId: dashboardId,
embedContainerId: "dashboard",
embedType: BoldBI.EmbedType.Component,
environment: environment == "onpremise" ? BoldBI.Environment.Enterprise : BoldBI.Environment.Cloud,
width: "100%",
height: window.innerHeight + "px",
expirationTime: 100000,
authorizationServer: {
url: authorizationUrl
},
dynamicConnection: {
isEnabled: false,
identity: "",
},
autoRefreshSettings: {
enabled: true,
hourlySchedule: {
hours: 0,
minutes: 1,
seconds: 0
}
}
});
dashboard.loadDashboard();
console.log(dashboard);
}
Install the Go
with the link. Install the visual studio code extension as follows.
Create a folder in the desired location and open it in the visual studio code. Create a file main.go
and launch.json
, include the following code.
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "debug",
"program": "${workspaceRoot}",
"env": {"FLASH_PORT": 8086},
"args": [],
"showLog": true
}
]
}
In the main.go
file, include the following code to contact the BOLD BI server.
package main
import (
"crypto/hmac"
"crypto/sha256"
"encoding/base64"
"encoding/json"
"io/ioutil"
"log"
"net/http"
"strings"
)
//Set EmbedSecret key from Bold BI Server. Please refer this link(https://help.syncfusion.com/bold-bi/on-premise/site-settings/embed-settings)
var embedSecret = "enter embed secret here"
//Enter your BoldBI Server credentials.
var userMail = "enter user email here"
func main() {
http.HandleFunc("/getDetails", getEmbedDetails)
log.Fatal(http.ListenAndServe(":8086", nil))
}
func getEmbedDetails(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Context-Type", "application/x-www-form-urlencoded")
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Set("Access-Control-Allow-Methods", "POST")
w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
body, err := ioutil.ReadAll(r.Body)
if err != nil {
log.Fatalln(err)
}
if len(body) > 0 {
if queryString, err := unmarshal(string(body)); err != nil {
log.Println("error converting", err)
} else {
serverAPIUrl := queryString.(map[string]interface{})["dashboardServerApiUrl"].(string)
embedQueryString := queryString.(map[string]interface{})["embedQuerString"].(string)
embedQueryString += "&embed_user_email=" + userMail
signatureString, err := getSignatureUrl(embedQueryString)
if err != nil {
log.Println(err)
}
embedDetails := "/embed/authorize?" + embedQueryString + "&embed_signature=" + signatureString
query := serverAPIUrl + embedDetails
log.Println(query)
result, err := http.Get(query)
if err != nil {
log.Println(err)
}
log.Println(result)
response, err := ioutil.ReadAll(result.Body)
if err != nil {
log.Fatalln(err)
}
w.Write(response)
}
//w.Write(result.Body)
}
}
func getSignatureUrl(queryData string) (string, error) {
encoding := ([]byte(embedSecret))
messageBytes := ([]byte(queryData))
hmacsha1 := hmac.New(sha256.New, encoding)
hmacsha1.Write(messageBytes)
sha := base64.StdEncoding.EncodeToString(hmacsha1.Sum(nil))
return sha, nil
}
func unmarshal(data string) (interface{}, error) {
var iface interface{}
decoder := json.NewDecoder(strings.NewReader(data))
decoder.UseNumber()
if err := decoder.Decode(&iface); err != nil {
return nil, err
}
return iface, nil
}
Initialize the variables embedSecret
and userMail
for authorization purpose.
Initialize the API /getDetails
to get the particular dashboard details from the server.
This API uses the method getSignatureUrl()
to generate the algorithm. In the getEmbedDetails(
) API, the embedQuerString
, userEmail
, and the value from the GetSignatureUrl()
method are appended as query parameters in the URL to get details of a particular dashboard.
Then, run the Go application. And the VueJs by npm run serve
to render the dashboard.