@ventum-digital/iiq-plugin-project-generator/templates/plugin/extensions/widget/sources/frontend/src/widget.ts

A npm tool to set-up the project structure for developing an IIQ Plugin.

/*
 * Copyright (c) 2021 Ventum Consulting GmbH
 */

import 'css/widget.scss'

import { div, h2, p } from "@ventum-digital/ui-components/BaseElements";
import { getUrlFactory, pluginFetchKey } from "@ventum-digital/plugin-fetch";
import { registerWidget } from "@ventum-digital/widget-helper";

(() => {
  const getUrl = getUrlFactory("__pluginName__");

  async function createWidget(scope, element) {

    let url = getUrl("getExampleMessage");

    const exampleMessage = await pluginFetchKey(url, "message");


    const widgetBody = div({
        className: "panel-body __packageName__-widget-body",
        style    : {
          padding: "10px",
        }
      },
      h2({}, "Dynamic Content in the Body"),
      p({
          style: {
            "font-size": "16px",
            padding    : "0 10px",
          }
        },
        exampleMessage
      )
    );

    const widgetFooter = div({
        className: "panel-footer __packageName__-widget-footer",
      },
      `Static Content in the Footer`,
    );


    const widget = div({
        className: "risk-widget",
      },
      widgetBody,
      widgetFooter
    );

    element.append(widget);
  }


  registerWidget("__pluginName__", createWidget);
})();