Skip to main content

Widget Publishing Flow

This guide provides a quick reference for publishing widgets to the INVENT platform. For a comprehensive step-by-step tutorial, see Creating a Widget: From Template.

Overview​

The widget publishing process involves:

  1. Creating a subgroup for organizing widgets
  2. Creating a widget repository from the template
  3. Configuring widget settings
  4. Developing the widget
  5. Creating a merge request for deployment

For detailed instructions with screenshots, follow the From Template Tutorial.

Quick Reference​

1. Create Subgroup for Widgets​

Before creating your first widget, create a subgroup to organize all vendor widgets:

  • Format: widgets-vendorName
  • Location: invent/frontend/widgets-vendorName
  • Purpose: Groups all widgets for a specific vendor

Detailed Guide: From Template Step 1

2. Create Widget Repository​

Create a new project from the widgets template:

  • Naming Convention: widgets-vendorName-widgetName
  • Template: Use widgets-template (React)
  • Example: widgets-acme-kpi-tracker

Detailed Guide: From Template Step 2

3. Configure Widget Settings​

widget-config.json​

Configure the following key parameters:

{
  "widgetDetails": {
    "name": "VendorWidgetName",
    "id": "vendor-widget-name",
    "port": 5XXX,
    "widgetType": 1,
    ...
  },
  "settingsSchema": {
    ...
  }
}

Important:

  • port = 5{GitLab Project ID} (e.g., ID 793 → port 5793)
  • widgetType: 0 = platform, 1 = dashboard, 2 = universal
  • id must match repository name pattern

Learn more:

build-vars.js​

Ensure the port in build-vars.js matches widget-config.json:

PORT: process.env.PORT || 5XXX

package.json​

Update package name and federation port:

{
  "name": "@invent/widgets-vendor-widget-name",
  "scripts": {
    "start_federation": "webpack serve --port 5XXX ..."
  }
}

4. Widget Project Structure​

The template provides the following structure:

./src/widget/
├── index.ts           # Widget exports
├── preview.tsx        # Widget preview (88x64 SVG)
├── styled.tsx         # Styled components
├── types.d.ts         # TypeScript types
├── widget.spec.tsx    # Tests
└── widget.tsx         # Main widget component

Learn more: Getting Started → Project Structure

5. Development Workflow​

# Clone repository
git clone <widget-repo-url>
cd <widget-folder>

# Install dependencies
npm install

# Run in standalone mode (fast iteration)
npm run dev

# Run with platform integration
npm run start_federation

Learn more: Development Workflow

6. Create Merge Request for Deployment​

When ready to deploy:

  1. Create a new branch: git checkout -b feat/initial-widget
  2. Commit changes with semantic prefix: feat: or fix:
  3. Push to GitLab
  4. Create merge request
  5. After approval and merge, the widget will be automatically deployed

Detailed Guide: From Template Step 5

Widget Types​

The widgetType parameter determines where and how the widget can be used:

Platform Widgets (Type 0)​

Structural components for platform-level functionality:

  • Navigation elements
  • Login screens
  • System notifications
  • Error handlers

Learn more: Platform Widgets

Dashboard Widgets (Type 1)​

Business application widgets displayed on dashboards:

  • Data visualizations
  • KPI trackers
  • Interactive reports
  • Custom tools

Most common type for widget developers.

Universal Widgets (Type 2)​

Can function as both platform and dashboard widgets (rare).

Learn more: Dashboard Integration → Widget Types

Step-by-Step Tutorials​

Configuration References​

Development Guides​

Tips for First-Time Publishers​

  1. Start with the Template

    • Don't create widgets from scratch
    • Use the provided template with all configurations

  2. Verify Port Configuration

    • Port must match across widget-config.json, build-vars.js, and package.json
    • Port = 5{GitLab Project ID}

  3. Test Locally First

    • Use npm run dev for standalone testing
    • Use npm run start_federation for platform integration testing
    • Connect to portal for final verification

  4. Follow Naming Conventions

    • Subgroup: widgets-vendorName
    • Repository: widgets-vendorName-widgetName
    • Package: @invent/widgets-vendor-widget-name

  5. Contact Internal Developer

    • After first MR is merged, notify your INVENT technical manager
    • They will integrate the widget into the environment
    • Widget will become available in the Dashboard Composer

For detailed step-by-step instructions with screenshots, see: Creating Widget from Template