External component with Vue.js integration

Version: 3.3

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

Warning

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:

RequestResponse
$.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:

RequestResponse
<div id="app">
</div

End result

After saving the changes, we navigate to an Asset Detail Page. Our external component is displayed:

Do you have some feedback for us?

If you have suggestions for improving this article,