Basic Tutorial: Hello Exchange Plugin web view

We will go over how to develop a web view for the hello-exchange plugin. After developing this web view, we will see a new page that displays some of the exchange information.

Step 1: Initialize the hello-exchange plugin web view.

Run the following commands to initialize the plugin web view:

cd web/
npm run add-plugin --plugin=hello-exchange --type=page

Step 2: Install the initial plugin.

Run the following commands to build the initial plugin with a default view and install the plugin.

cd ..
npm run build --plugin=hello-exchange

Step 3: disable CORS error on the browser.

The web view JSON file and bundles are served on the localhost port 8080. In order to allow the kit to access them in plugin development mode, we need to disable the CORS issue on the browser. This can be achieved by using a browser extension.

Step 4: Plugin interactive development mode

To start using plugin interactive development mode, we need to run the commands of steps 5 and 6 simultaneously.

Step 5: Create, watch and serve web view bundles and the JSON file.

Run the following command on the plugin starter kit web directory:

npm start --plugin=hello-exchange

Step 6: Start Hollaex kit plugin development mode.

Run the following command on the Hollaex kit web directory:

npm run dev:plugin --plugin=hello-exchange

In order to see the plugin's changes, we need to refresh the page after every change.

Step 7: Update the view.json file.

{
  "meta": {
    "is_page": true,
    "path": "/hello-exchange",
    "hide_from_appbar": true,
    "hide_from_sidebar": false,
    "hide_from_menulist": false,
    "string": {
      "id": "title",
      "is_global": false
    },
    "icon": {
      "id": "SIDEBAR_HELP",
      "is_global": true
    }
  }
}

Step 8: Update the strings.json file.

{
  "en": {
    "title": "Hello exchange",
    "hello": "Hello {0}"
  }
}

Step 9: Update Form.js component

touch src/plugins/hello-exchange/views/view/Form.js

Form.js

import React, { useEffect, useState } from 'react';
import { IconTitle, PanelInformationRow } from 'hollaex-web-lib';
import { withKit } from 'components/KitContext';
import Title from 'components/Title';
import axios from 'axios';

const Form = ({
  strings: STRINGS,
  icons: ICONS,
  generateId,
  plugin_url: PLUGIN_URL
}) => {

  const [info, setInfo] = useState();

  useEffect(() => {
    axios.get(`${PLUGIN_URL}/plugins/hello-exchange/info`).then(({ data: { exchange_info = {} }}) => {
      setInfo(exchange_info);
    })
  }, [])

    return (
      <div className="presentation_container apply_rtl verification_container">
        <IconTitle
          stringId={generateId('title')}
          text={STRINGS[generateId('title')]}
          textType="title"
          iconPath={ICONS['SIDEBAR_HELP']}
        />
        <form className="d-flex flex-column w-100 verification_content-form-wrapper">
          <div className="verification-form-panel mt-3 mb-5">
            <div className="my-4 py-4">
              <Title />
              <div className="py-4">
                {info && Object.entries(info).map(([key, value]) => (
                  <PanelInformationRow
                    label={key}
                    information={String(value)}
                    className="title-font"
                    disable
                  />
                ))}
              </div>
            </div>
          </div>
        </form>
      </div>
    )
}

const mapContextToProps = ({ strings, activeLanguage, icons, generateId, plugin_url }) => ({
  strings,
  activeLanguage,
  icons,
  generateId,
  plugin_url
});

export default withKit(mapContextToProps)(Form);

See the SmartTarget component for more details about the common props passed using the kit context.

Step 10: Install the plugin.

Uninstall the initial plugin. Then run the following commands to build the plugin again. Then install the plugin json file on the kit.

cd ..
npm run build --plugin=hello-exchange