HTML JavaScript Dashboard Control

• Oct 28, 2019
• 2 minutes to read

Topics in this section describe how to configure the client-side JavaScript Dashboard control and integrate it in a web application.

You can create a web application with the HTML JavaScript dashboard using one of the following approaches:

• Global Namespaces

  When you use this approach, the HTML JavaSCript Dashboard control comes in a pre-assembled dx-dashboard.js bundle. You need to get the scripts and dependencies from the npm package and manually add them to the page.

• Modularity

  Alternatively, you can use Dashboard modules to import only the functionality you require. The HTML JavaScript Dashboard uses the following modules: Dashboard, Dashboard.Data, Dashboard.Designer, and Dashboard.Model. Unlike global namespaces, modules are compact and can be loaded on demand. In this approach, scripts and dependencies are installed automatically from the npm package. Use this approach to create a Web dashboard application for Angular, React, Vue, and other frameworks.

Both approaches are based on the client-server model. You need to create a server (backend) project and a client (frontend) application that includes all necessary styles, scripts and HTML-templates.

Basic Configuration

The topics below show how to configure the HTML JavaScript control as a client (frontend) application and how to create and configure a server (backend) project.

• Client-Side Configuration
  • Client-Side Configuration for Modular Approach (Angular)
  • Client-Side Configuration for Modular Approach (React)
  • Client-Side Configuration for Modular Approach (Vue)
  • Client-Side Configuration for Global Namespaces
• Server-Side Configuration
  • Server-Side Configuration (ASP.NET MVC)
  • Server-Side Configuration (ASP.NET Core)

The topic below shows how to update npm packages required for a Web Dashboard:

• Upgrade to a New Package Version

The topic below shows how to configure corresponding permissions to access resources from a server at a different origin:

• Cross-Origin Resource Sharing

Customization

• Client-Side API Overview

  Shows how to customize the HTML JavaScript dashboard on the client side.

• Designer and Viewer Modes

  Describes how to specify the Web Dashboard’s mode.

• Appearance Customization

  Describes how to change the color scheme used to paint a Web Dashboard.

• Manage Dashboard State

Shows how to save the result of actions a user performs on the client.

• Extend Web Dashboard Functionality

  Shows how to extend the control’s functionality using independent JavaScript modules/classes called extensions.

• Create a Custom Item

  Contains tutorials that teach you how to create a custom dashboard item.