logo
logo

Configure an external component

Configure your external component as described in the following paragraphs.

Warning

You must be a superuser to perform these actions.

Configuration tab

Warning

If you use Vue.js, 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, as shown in this example. In this case, you should leave Resources empty.

Fill out as follows:

  1. Enter a Control name (namespace + name):

    Warning

    The name should be unique on the portal page.

  2. In Config, add any additional parameters for your external component code.

  3. If necessary, click Add resource, and add a url to a code library:

    Warning

    If you are on a production environment, we recommend using minified library versions to reduce load time. You should add one resource only per page.

    Note

    Resources load as part of the external component.

  4. To confirm your changes, click Save.

Code tab

  1. Add here the code to execute when the external component gets initialized on the page:

    Note

    The code depends on the Resources configured.

  2. To confirm your changes, click Save.

Template tab

  1. Add here the HTML markup to inject into the DOM (document object model) when initializing the external component:

  2. To confirm your changes, click Save.

Messages tab

Use the messages to inject translations into your external component. The translations are available through the messages property of the options parameter in your external component code. Translations load based on the translation keys and active UI cultures.

To add a message:

  1. Click Add message:

  2. Enter the message ID, and click + Add translation:

  3. Enter a Translation identifier, or click Choose existing.

  4. Enter your translation, and click Create.

  5. To confirm your changes, click Save, or Save and close if you want to return to the portal page screen.

Change the display settings

  1. To change the display settings, on your external component, click , and select Settings:

  2. Change the settings, and click Save.

Can we improve this article ? Provide feedback