Target

Many projects and products make use of Dashboards for data representation. However, the needs do not stop there, but it is necessary to be able to create and configure them from the project's own user interface.

For this reason, we have created a new interface valid for all environments in which projects can embed this management in their own web.

Open

What does this asset consist of?

The Dashboard bundle is composed of the following elements:

• A Vue project, which includes:

• Native integration with the Platform's Identity Manager.

• Deployment of the distributable as a Platform web application.

• Use of the Platform's Application and Realm components for securization.

• A configuration file in JSON format, so that projects can fully customize it to their needs.

• A pair of internationalization files -in Spanish and English- for use with the asset.

• A guide to use and configuration of the application (what you are reading).

Installation and use of the asset

Installing the asset is not complicated, but there are a number of steps that must be followed in order to configure and register the asset correctly.

Generate the configuration file

This file is the one that will configure the operation of the Dashboard asset. A sample one is included, called "ASSET_DSH_CONFIG.json", which you can edit to suit your needs.

Here you will define properties such as the name of the Realm and Client ID to use, the title of the application, the name of the internationalization file, the properties of the logo, etc.

Open

You can also define the navigation menus (with their corresponding icons) as well as the permissions to the different Realm roles:

This file, once configured to your liking, must be uploaded to the Centralized Configuration of the Platform.

Creating the Realm

In the configuration file, you have indicated everything you will need, so the next step will be to create a Realm on the Platform containing the roles you have defined (Asset_Admin and Asset_User as an example).

Once the roles are created, include the users you want in each role.

In case you are using Keycloak for authentication, then you will have to create in Keycloak itself a client with the same name of the realm you have created.

Creation of the internationalization file

Another element to generate is the internationalization file. For this, you will make use of the two translation files included in JSON format.

If you want to add new translatable words to your application, you will have to include them in these files. Also, if you want to add a new language (Esperanto, for example), you will have to generate a new JSON with the same structure.

Associating the resources

Once you have all the files ready, associate them with each other using a Platform Application. With this you will "pack" all the files you need in a drawer, controlled by the Realm security.

Here you enter the configuration of the asset, as well as all those elements you may need (in the example we have included a test Dashboard, which in turn includes a Gadget that is automatically incorporated).

Web project

Finally, the only thing left to do is to upload the web project to the Platform. Before doing so, you will have to configure a couple of environment files to define the endpoints to which you will point in the project.

To do this, with any IDE, open the Vue project and open these two files: .env.production and .env.development.local, which are located in the root of the project.

Both files are identical, so changes from one can be copied in their entirety to the other file.

Here, indicate the names of the different elements you have:

• The project, which corresponds to the Onesait Platform Application.

• The name of the internationalization file.

• The URL of the Platform environment.

• The name of the configuration file.

• The authorization and authentication type.

The only rule for this environment file is that the names of the elements must match exactly; if something is capitalized, it must be in the Platform.

That done, you can mount the distributable from the Vue project, either with npm:

Or with yarn:

When the assembly is finished, put all the contents of the dist folder in a ZIP file, which will be what you will upload to the Platform web projects.

Once uploaded, you will have your Bundle ready for use:

From the Dashboards bundle, you will be able to create, edit, delete and view Dashboards quickly and easily, just as if you were working from the Platform.

Examples

Adding gadgets to the Dashboard

Inline edition of the Dashboard