Category / Section
How to improve the Initial Dashboard Load Efficiency in Embedded Single Page Applications
Published:
Optimizing Initial Dashboard Load Efficiency in Embedded Applications
Improving the initial load efficiency of dashboards in embedded applications is crucial for providing a seamless user experience. This article outlines the steps to enhance the loading times for dashboards, both in on-premise and cloud environments, by including necessary JavaScript and CSS files within the embedding application.
On-Premise Dashboard Load Efficiency
To increase the efficiency of embedded dashboard loading in an on-premise setup, follow these steps:
-
Open the embedded application and navigate to the view page. Assuming the use of ASP.NET Core as the embedding application, locate the
Index.cshtmlview page. -
Include the following code snippet in the view page, replacing
http://localhost:53623/biwith your actual Bold BI server URL without a site identifier:
@{
var rootUrl = "http://localhost:53623/bi";
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var rootUrl = "@rootUrl";
</script>
<link rel="stylesheet" href="@rootUrl/webdesignerservice/themes/ej1.web.all.min.css">
<link rel="stylesheet" href="@rootUrl/cdn/css/designer/light/boldbi.theme.definition.min.css" >
<link rel="stylesheet" href="@rootUrl/cdn/css/font-server.min.css" >
<link rel="stylesheet" href="@rootUrl/webdesignerservice/themes/ej1.web.all.min.css" >
<link rel="stylesheet" href="@rootUrl/webdesignerservice/themes/ej2.partone.web.all.min.css" >
<link rel="stylesheet" href="@rootUrl/webdesignerservice/themes/ej2.parttwo.web.all.min.css" >
<link rel="stylesheet" href="@rootUrl/webdesignerservice/themes/ej.designerwidgets.all.min.css" >
<link rel="stylesheet" href="@rootUrl/webdesignerservice/themes/ej.dashboarddesigner.min.css" >
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
<script type="text/javascript" src= "@rootUrl/cdn/scripts/designer/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src= "@rootUrl/cdn/scripts/designer/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src= "@rootUrl/cdn/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src= "@rootUrl/cdn/scripts/designer/jsrender.min.js"></script>
<script type="text/javascript" src= "@rootUrl/cdn/scripts/designer/ej1.web.all.min.js"></script>
<script type="text/javascript" src= "@rootUrl/cdn/scripts/designer/ej2.web.all.min.js"></script>
<script type="text/javascript" src= "@rootUrl/designer/cultures/boldbi.cultures.min.js"></script>
<script type="text/javascript" src= "@rootUrl/designer/localization/designerlocalization.js"></script>
<script type="text/javascript" src= "@rootUrl/cdn/scripts/designer/ej.dashboarddesigner.min.js"></script>
</head>
<body>
<!-- Rest of your HTML content -->
</body>
</html>
- By preloading the JavaScript and CSS files, the dashboard can render more efficiently as these resources are downloaded initially.
Cloud Dashboard Load Efficiency
For cloud-hosted dashboards, the process differs slightly:
- Obtain the dashboard CDN URL through a Public REST API call. Use the following API request in a tool like Postman:
Type: GET
REST API URL: https://{yourdomain}/bi/api/system-settings/get-url
- Once you have the response, incorporate the
CdnUrlandDesignerServerUrldetails into the embedded application’s view page. Here’s an example usingIndex.cshtml:
@{
var CdnUrl= "https://cdn.boldbi.com/ds/123456789098765421/cdn";
var DesignerServerUrl = "https://demo-staging-data.boldbi.com";
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var CdnUrl= "@CdnUrl";
var DesignerServerUrl= "@DesignerServerUrl";
</script>
<link rel="stylesheet" href="@CdnUrl/css/designer/ej1.web.all.min.css">
<link rel="stylesheet" href="@CdnUrl/css/designer/light/boldbi.theme.definition.min.css">
<link rel="stylesheet" href="@CdnUrl/css/font-server.min.css">
<link rel="stylesheet" href="@CdnUrl/css/designer/ej1.web.all.min.css">
<link rel="stylesheet" href="@CdnUrl/css/designer/ej2.partone.web.all.min.css">
<link rel="stylesheet" href="@CdnUrl/css/designer/ej2.parttwo.web.all.min.css">
<link rel="stylesheet" href="@CdnUrl/css/designer/ej.designerwidgets.all.min.css">
<link rel="stylesheet" href="@CdnUrl/css/designer/ej.dashboarddesigner.min.css">
<script type="text/javascript" src="https://cdn.boldbi.com/embedded-sdk/latest/boldbi-embed.js"></script>
<script type="text/javascript" src="@CdnUrl/scripts/designer/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="@CdnUrl/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="@CdnUrl/scripts/designer/jsrender.min.js"></script>
<script type="text/javascript" src="@CdnUrl/scripts/designer/ej1.web.all.min.js"></script>
<script type="text/javascript" src="@CdnUrl/scripts/designer/ej2.web.all.min.js"></script>
<script type="text/javascript" src="@CdnUrl/scripts/designer/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="@DesignerServerUrl/localization/designerlocalization.js"></script>
<script type="text/javascript" src="@CdnUrl/scripts/designer/ej.dashboarddesigner.min.js"></script>
<script type="text/javascript" src="@DesignerServerUrl/cultures/boldbi.cultures.min.js?"></script>
</head>
<body>
<!-- Rest of your HTML content -->
</body>
</html>
- Similar to the on-premise setup, including the JavaScript and CSS files in the head of your HTML will allow for more efficient dashboard rendering as these resources are downloaded at the initial load time.
By following these steps, you can significantly improve the initial load efficiency of dashboards in your embedded applications, whether they are hosted on-premise or in the cloud.
Additional References
SM
