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.
Configuration tab
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.
Code tab
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:
$.getScript("https://sldemosites.blob.core.windows.net/vue/dist/js/chunk-vendors.468a5298.js");
$.getScript("https://sldemosites.blob.core.windows.net/vue/dist/js/app.75ac5d70.js");
Template tab
Our external component code requires the following HTML markup:
<div id="app">
</div
End result
After saving the changes, we navigate to an Asset Detail Page. Our external component is displayed: