External component with Vue.js integration
Integration with third-party UI libraries is possible thanks to the flexibility of the external component.
The following example uses the Vue.js framework to display information about an asset through the external component.
For a seamless integration, we recommend to develop the script locally, and use the bundle files in the Code tab to load the external component. In this case, Resources are left empty.
Control name: the control should be unique on the page: here we use Custom.Controls.MyCustomControl.
Config: we do not need additional parameters for this example.
Resources: we do not need to add a library for this example as we use the bundle files.
The code illustrates the initialization of a simple Vue.js component. Its instance subscribes to the
entityLoaded event. When the entity loads, the required information maps to our component. On every entity saved, the
entitySaved event triggers to update the information.
In this example, our code was developed locally and we use the following bundle files to load it:
Our external component code requires the following HTML markup:
<div id="app"> </div
After saving the changes, we navigate to an Asset Detail Page. Our external component is displayed:
Can we improve this article ? Provide feedback