Plugin demo app

Overview

The plugin demo allows developers to test the functionality of their plugin and provides them with an interface to interact with the plugin. The main purpose of the plugin is to provide a way for developers to test their plugin in a controlled environment before deploying it to the platform. The plugin is meant to only run or your local machine.

Getting started

In order to run the plugin demo app, you will need to do the following:

1. In the root of the plugins demo, add the following ssl directory and add the following files:
   • ng.secure.investec.com.crt
   • ng.secure.investec.com.key

This is required to run the plugin demo app on a secure connection and have access to the sso cookie when making requests.

2. Run the following command to run the plugin app on your local machine:

nx serve plugins-demo

This will spin up the plugin demo on https://ng.secure.investec.com:8080

3. Open the browser and navigate to https://loginstg.secure.investec.com and login to create a valid session.
4. Open the dev mode , by adding /dev-mode to the url, this will allow you to interact with the plugin demo app.
5. Put the plugin demo url https://ng.secure.investec.com:8080 in the url address bar of and press enter.

Coding with the demo app

The plugin demo app provides a way for developers to interact with the plugin and test the functionality of the plugin.

Updating existing plugin

You can work on an existing plugin and test the functionality of the plugin by running the plugin demo app and interacting with the plugin functionality. Import the functions you want to test directly into your plugin page. Link the output of the function to the renderResult() function to render the output on the screen.

Mock data

The plugin demo app provides a way to mock data and test the plugin functionality with the mock data. add your mock data to the mock-data.ts file to include the new mock data.

Adding new plugin

You can add a new plugin to the plugin demo app by following the steps below:

1. Create a new directory in the plugins-demo/src/app/plugins directory and add the following files:

• my-plugin.ts

2. Add the following code to the my-plugin.ts file:

export class MyPluginElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <div class="container">
        <h1>My Plugin</h1>
        <div class="row mt-3">
          <div class="col-md-6 ">
            <button class="btn btn-primary mb-3" id="myFunction">my Function</button>
          </div>
          <div class="col-md-6">
            <p>Function result</p>
            <pre id="myPluginOutput"></pre>
          </div>
        </div>
      `;

    document.getElementById('myFunction')!.addEventListener('click', () => {
      renderResult('my Function')
    })

    function renderResult(input:any){
      document.getElementById('myPluginOutput')!.innerHTML = JSON.stringify(input, null, 2);
    }
  }
}

customElements.define('io-my-plugin', MyPluginElement);

3. You must now link your plugin page to the plugin demo app by adding the following code to the plugins-demo/src/app/app.element.ts file:

      { id:'11', path: '/my-plugin', title: 'myPlugin', import: () => import('./plugins/my-plugin/my-plugin'),module: 'MyPluginElement' },

to the routes array.

const routes = [
  // { id:'1', path: '/Adobe-analytics', title: 'Adobe Analytics', tsPath: 'Content for Adobe Analytics.' },
  { id:'2', path: '/Experience-manager', title: 'Experience Manager', import: () => import('./plugins/experience-manager/experience-manager'),module: 'ExperienceManagerElement' },
  { id:'3', path: '/Feature-flags-builder', title: 'Feature Flags Builder', import: () => import('./plugins/feature-flags-builder/feature-flags-builder'),module: 'FeatureFlagsBuilderElement' },
  { id:'4', path: '/Left-nav-builder', title: 'Left Nav Builder', import: () => import('./plugins/left-nav-builder/left-nav-builder'),module: 'LeftNavBuilderElement'  },
  { id:'5', path: '/Menu-builder', title: 'Menu Builder', import: () => import('./plugins/menu-builder/menu-builder'),module: 'MenuBuilderElement' },
  { id:'6', path: '/Portfolio-builder', title: 'Portfolio Builder', import: () => import('./plugins/portfolio-builder/portfolio-builder'),module: 'PortfolioBuilderElement' },
  { id:'7', path: '/Toggles-builder', title: 'Toggles Builder', import: () => import('./plugins/toggles-builder/toggles-builder'),module: 'TogglesBuilderElement' },
  { id:'8', path: '/Personalisation', title: 'Personalisation', import: () => import('./plugins/personalisation/personalisation'),module: 'PersonalisationElement' },
  { id:'9', path: '/Feature-library', title: 'Feature Library', import: () => import('./plugins/feature-library/feature-library'),module: 'FeatureLibraryElement' },
  { id:'10', path: '/Livechat', title: 'Livechat', import: () => import('./plugins/livechat/livechat'),module: 'LivechatElement' },
];

Remember to change the "my-plugin" to the name of your plugin.

INFO

The plugin demo app uses bootstrap 5, so you can use bootstrap classes to style your plugin. You can also modify the page to your liking and add any additional functionality you require.