Extensions #

Extensions can be used to make updates to an existing Portal.

An example of a custom extension (customExtension.js) is located in the extensions folder. This example includes swappable components, including Content.Instanced.ExtTable, which changes the rendering of the instanced item ext table in the Content Catalogs Editor.

The following update types are currently available:

• portlet updates
• swappable components
• toggle features
• navigation bar components

Portlet updates #

Existing portlets and pages can be extended with the same builders used to define them.

The portletUpdates section of each extension must follow the format below. The key is the ID of the portlet that will be updated, and the value uses the Builder Function methods to implement the needed changes.

portletUpdates: {
    [PORTLET_ID]: (portlet) =>
       # portlet builder
       Portlet
         .addPage...
         .updatePage(PAGE_ID, pageBuilder...)
  },

The addPage command should be used to add new pages, and the updatePage command should be used to update existing pages.

Swappable components #

Components that are registered as swappable can be replaced with custom versions using the swappableComponents section. Components are identified by ID and should be replaced with Vue.js components.

swappableComponents: {
    "Content.Instanced.ExtRichEditor": {
        template: "<div>Hello, ext!</div>"
    }
}

All swappable components have the same interface:

props : {
  data: Object | null
  defaultComponent: VueComponent | null
  context: Object
}

emits: Array | null

To turn on highlighting in the browser for swappable components, open Development Tools and navigate to Swappable Components.

Feature toggles #

The ability to toggle features on and off can be added to the Development Tools page by defining the featureToggles in an extension.

featureToggles: ['FEATURE1', 'FEATURE2']

For example, use the isVisible method on portlets, pages, and components to toggle visibility based on the toggleFeature flag.

import AccountAddForm from './components/AccountAddForm.vue.js'

const AddAccountPage = page => page
  .isVisible(() => pragma.ui.helpers.featureToggles.featureIsOn('feature1'))
  .addComponent(AccountAddForm)

export default AddAccountPage

To create a feature toggle:

1. Add a custom FEATURE_ID to the featureToggles list in an enabled extension.
2. Use pragma.ui.helpers.featureToggles.featureIsOn(FEATURE_ID) to check if a feature is enabled or not.
3. Open Development Tools and go to the Feature Toggles page to enable or disable the feature.

Navigation bar components #

The top navbar can be extended with custom Vue.js components.

navbarComponents: [
   {
      component: { template: '<div>Hello, {{user}}!</div>', props: ['user'] },
      params: { user: 'World' },
      options: { position: 1 }
   }
]

The params and options arguments for each component entry are optional.