Skip to content

Custom UI Routes

Custom UI Routes provide a solution to build your custom ui components that can be used as a custom field for stack9 entity.

The UI components can be reused as a Custom Field for forms or can be used to create a Custom Page.

Minimum setup

Custom UI components must be in clients projects in /stack9/ui-components folder. The name of the javascript file in this folder must match the component name in typeOptions (see below json config for custom component).

Components will be inside the folder stack9/ui-components/components.

Example

  • stack9/ui-components/components/Counter.js
  • stack9/ui-components/components/Counter.css

Custom Field

Usage

// e.g: stack9/entities/custom/entity.json
{
  "key": "test",
  "label": "Counter",
  "type": "CustomUIComponent",
  "typeOptions": {
    "component": "Counter"
  },
  "validateRules": {
    "required": false
  }
}

You must have the following package.json

  • stack9/ui-components/package.json
{
  "name": "minimal-react-webpack-babel-setup",
  "version": "1.0.0",
  "description": "",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

Custom Page

Usage

// e.g: stack9/ui-components/components/pages/shipment-dashboard.js
import React, { useCallback } from "react";

const ShipmentDashboard = ({
  fetch,
  dialogManagerContext: { openDialog },
  Router: { Link },
}) => {
  return (
    <div>
      <h1>Your awesome dashboard</h1>
    </div>
  );
};

export default ShipmentDashboard;

// e.g: stack9/app.json
{
  "apps": [
    {
      "menu": [
        {
          "key": "shipment-dashboard",
          "label": "Shipment Dashboard",
          "page": "shipment-dashboard"
        }
      ]
    }
  ]
}