Configure an external component

Configure your external component as described in the following paragraphs.

Configuration tab

Fill out as follows:

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

   
   Warning

   The name should be unique on the 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.

Apply further customization

If needed, you can make further changes to the external component by adding custom JSON to the Configuration field, then clicking Save.

For example, you can use JSON to pass a configuration object to your code if you do not want to hard-code it in the external component itself.

The following custom configuration passes the identifier of a search component:

{
  "searchIdentifier": "Portal.PageComponent.Assets.search"
}

Doing this lets you reuse the external component bundle on different pages by passing a searchIdentifier value into the Configuration field.