Preset Ext

General

This extension provides ability to create preseted widgets in the composer. The main idea is to create a number of widget options with preconfigured settings. It could be usefull when you want to free a user from the setup commonly used widget configuration.

Backend part

By default, there is no BE part for this ext. But you can create it. If you don't want to store preset configs on client.

Configuration

Inside BFF project create ext file with ext configuration

const localDevExtHost = `http://localhost:${process.env.PORT}`;
const extHost = process.env.MY_HOST
  ? `${process.env.MY_HOST}:1337`
  : localDevExtHost;

export const presetExt = {
  id: 123,
  name: "@invent/preset-{CUSROMER_SLUG}-companion-ext",
  extHost,
  version: "{VERSION}",
  module: "./Preset{CustomerSlug}Ext",
  scope: "preset_{customer_slug}_ext",
  useSharedExts: false,
  dependencies: [],
  companion: "{EXT_STATIC_FILES_HOST}/remoteEntry.js",
  pathList: [],
  author: "{AUTHOR_NAME}",
};

Example

• Register of letters are important

const localDevExtHost = `http://localhost:${process.env.PORT}`;
const extHost = process.env.MY_HOST
  ? `${process.env.MY_HOST}:1337`
  : localDevExtHost;

export const presetExt = {
  id: 111,
  name: "@invent/preset-invent-companion-ext",
  extHost,
  version: "0.0.1",
  module: "./PresetInventExt",
  scope: "preset_invent_ext",
  useSharedExts: false,
  dependencies: [],
  companion:
    "https://inventwidgetextensions.z19.web.core.windows.net/111/remoteEntry.js", // 111 - stands for gitlab-repo-id
  pathList: [],
  author: "Invent",
};

Init & expose

import { presetExt } from './src/extentions/preset-extention';

....
app.use(
    validateRequestTokenMiddlewareFabric([
        '/images',
        '/templates/assets/fonts',
        '/theme',
        '/theme/my-default-theme',
        '/tenent',
    ])
);
overrideRoutes();
let extentions = [presetExt];
exposeExtensions(extentions);
endpointConfig.forEach((domain) => hydrate(app, domain));

Exposed extensions in this example

[
  {
    "id": 111,
    "author": "Invent",
    "companion": "https://inventwidgetextensions.z19.web.core.windows.net/111/remoteEntry.js",
    "dependencies": [],
    "extHost": "https://fe-be.dev.clic.apptrium.cloud:1337",
    "module": "./PresetInventExt",
    "name": "@invent/preset-invent-companion-ext",
    "pathList": [],
    "scope": "preset_invent_ext",
    "useSharedExts": false,
    "version": "0.0.1"
  }
]

Companion

Ext companion works automaticly inside composer menu and should implement two methods.

• Main class

import { presets } from "./presets";
import type { KnownPresetsT } from "./presets";
export default class PresetInventExt {
  presetsByWidgetName = (widgetTypeName: KnownPresetsT): unknown[] => {
    if (presets.has(widgetTypeName)) {
      return presets.get(widgetTypeName) as unknown[];
    }
    return [];
  };
  knownPresets = (): string[] => {
    return Array.from(presets.keys());
  };
}

• Preset dict

export type KnownPresetsT = "{CUSTOMER_SLUG}_WidgetName";
export const presets = new Map<KnownPresetsT, unknown>([
  ["{CUSTOMER_SLUG}_WidgetName", widgetConfig],
]);

• Example

import { grid } from "./grid";
export type KnownPresetsT = "INVENT_Datagrid";
export const presets = new Map<KnownPresetsT, unknown>([
  ["INVENT_Datagrid", datagrid],
]);

• Widget preset configuration

export const gridAccounts = {
  name: "INVENT_Datagrid",
  _id: "72a1ab32-adce-4492-a726-dd2c341f470d",
  repoId: 999,
  isPreset: true,
  widgetDetails: {
    description: "Datagrid widget preconfigured for accounts",
    title: "Accounts Datagrid",
    type: "Datagrid",
  },
  layout: {
    minW: 16,
    minH: 12,
  },
  type: "INVENT_Datagrid",
  props: {
    fromExternalProps: true,
    avoidLoadData: "",
    selectable: true,
    singleTotalAtBottom: "",
    title: "Accounts List View",
    apiUrl: API_BASE_URL,
    searchSettingsPanelUrl: "accounts/search-settings-panel",
    searchPanelUrl: "accounts/search-panel",
    searchUrl: "accounts/search",
    singleTotalKeys: "totalAccountValue",
    singleTotalTitles: "Total Accounts",
    linkedColumn: "id",
    dashboardRedirectUrl: "/dashboard/account-details?accountId={id}",
    type: "accounts",
    preferenceKey: 100,
    actionBarWidgetId: "777",
    subcomponentWidgetId: "",
    subgridSearchUrl: "",
    subgridSearchSettingsPanelUrl: "",
    subgridQueryProp: "",
  },
};
export const grid = [gridAccounts];

Tweaks

As you can see from the widget preset config section, you can use global variables like API_BASE_URL. You can find more info in env-vars section. This approach could give you the ability to use env based URL in a different deploy.