Skip to main content

White Label

Briefly, White labeling is when a product or service removes its brand and logo from the end product and instead uses the branding requested by the purchaser.

How to setup wlabel​

Go to the INVENT.us GitLab Repository.

wlabel​

Please, search in the INVENT.us GitLab repository for the project called wlabel or White Label. White Label is something like a container for our widgets. All you need to do is install it on your computer. To do so, please, clone this project from the GitLab repository. Next, you need to open your IDE and open your project using the Clone Git Repository or terminal. Next, you will need to select the folder, where you will be storing your project and open it in your IDE.

Dependencies connection​

When you open your project in IDE, open the terminal integrated into your Terminal, open the Readme.md file and follow the instruction.

Next, install dependencies by typing npm i or npm install. Next, you need to create the file devmode-vars.json. This file will contain some API, URLs, keys, etc. It depends on the project that you’re working on. To create it you will need to contact INVENT.us managers or developers, who could help you with this.

After we set the devmode-vars.json file we should start the federation by npm run start_federation. Next, the console will offer a list of widgets that you can choose to run. Afterward, open it in your browser as http://localhost:4200 and you will see the home dashboard screen.

How to work with wlabel​

Saving widget settings​

When we get to the composer, the dashboard editing, wlabel is already responsible for this. It already knows the settings of each widget and pulls the desired component from the widget itself. The widget settings are in two places: the widget-config.json file in the widget root and the webpack/webpack.production.js.

In wlabel specifies which component is responsible for the widget itself, which is responsible for the preview.tsx of the widget, and which is responsible for the settings.tsx, and there and there it lies under the key “exposes”. When we select a widget in the composer to change its settings, wlabel calls the settings component. This component takes all the widget settings and a couple of required keys, like widgetId and most importantly onSubmit, in its props. The widget settings are in the BFF database. In the BFF database, you can find all the dashboard settings: starting from theme settings and ending with the settings of each widget and dashboard.

In general, the settings form gets just these props, the same condition is displayed to the user. If you change something there, the onSubmit function that wlabel passed to us along with the props will save those parameters into the database. And for this widget, on this dashboard, the new props will already be relevant.

Working with adaptivity​

With adaptivity you need to work mainly through CSS media statement views:

@media screen and (min-width: ${VIEWPORT_BREAKPOINTS.EXTRA_SMALL}px) {
  ...
}
@media screen and (min-width: ${VIEWPORT_BREAKPOINTS.SMALL}px) {
  ...
}
@media screen and (min-width: ${VIEWPORT_BREAKPOINTS.MEDIUM}px) {
  ...
}

And all variables should be stored in the ./wl-ui-kit/src/styled/global-variables.ts.