Skip to main content

Widget Store API

The Widget Store API provides a SaaS interface for widgets, such as meta-information storage, widget-configs, widget types (private/public), etc. The Widget Store API is a BfF API server that allows this meta-information to be received or sent. Use it to add new widgets in runtime without rebuilding fe-be or wlabel.

How to work with Widget Store API​

The widget store is a bff, which means that we work with it by using queries. The widget store is prescribed in the wlabel, where it is passed through a variable environment. In widget-configs, the request is made when we want to create or edit any widget. More information about the other API endpoints can be found here.

useEffect(() => {
  requestWidgets('public')
}, [])

useEffect(() => {
  if (isTokenValid && isPublicWidgetsLoaded) {
    requestWidgets('private')
  }
}, [isTokenValid, isPublicWidgetsLoaded])

And the requestWidgets is:

function requestWidgets(widgetsType) {
  return fetch(`${WIDGET_API_ROOT}/my/widgets/${widgetsType}`, {
    headers: {
      'x-tenent-id': tenentId, // TenentId for current vendor
      Authorization: `Bearer ${token}`, // token - JWT authentication token
    },
  })
}

There's also a separate maintenance point for using the documentation /my/widgets/docs endpoint from which the list of widgets is filled. This endpoint contains minimal information about the widgets and is represented as a table with the following data: id, name, vendor's name, and widget type (public/private).

Implemented features​

  • fetch widget meta;
  • split widgets to public \ private;
  • traverse all widgets;
  • create a collection of your widgets;
  • add widgets to the store.

Used tech​

  • PostgresDB as main DB;
  • Node.js + express as webserver;
  • Typeorm as ORM.

ENV vars​

  • WIDGET_STORE_API_URL in devmode-vars;
  • GITLAB_KEY for fetching configs from repositories.

Add config to the store​

  • make an HTTP request:
POST /my/widget-configs
x-tenent-id: 23f674e0-fa12-4936-9c99-97a8ee142955 <- use real tenent id
x-config-token: bb3954eb-b8e2-46de-9387-a0670a9d14f9
Content-Type: application/json
{
  "id": 999,
  "name": "Vendor_Widget",
  "port": 5999,
  ...
}

FAQ​

  • I want to test my new widget with another using wlabel. Should I add it to migration?

Yes, but there is a less complicated way. You can add your widget to the initial reducer inside the wlabel. You can add the widget to your local widget store using the HTTP request to /my/widget-config, previously set local widget store address in Wlabel app.