Application Schema

A typical ItsyUI application contains a bunch of metadata schemas. It is usually kept under “schemas” folder, and has the following folder structure,

/schema
	/app - All app related grid and form schemas
		/login - Login is a Typed entity for which grid and form schemas are defined
			/form - Form schema for Login UI
			/grid - Grid schema for Login UI
	/pages - All page level schema definitions
	/command.json - All default command definitions

These metadata definitions are then injected into application schema provider, which is a singleton in WidgetsFactory. The appSchemaProvider instance stores all the schemas and accesses as path based UI. Below example shows how to construct schema provider for different data that is available in the e2e template,

import { WidgetsFactory } from "@itsy-ui/core";

// retrieve the DataLoaderFactory singleton
const dataLoader = WidgetsFactory.instance.services["DataLoaderFactory"];
// retrieve the custom state machine provider
const schemaProvider = dataLoader.getLoader("appSchemaProvider");

// Registers all the app schema into the schema provider
schemaProvider.appendSchemaSync("/app/locale/en", require("./locale/en.json"));
schemaProvider.putSchema("/app/command/data", require("./command.json"));
schemaProvider.putSchema("/app/login/form/login/data", require("./app/login/form/login.json"));
schemaProvider.putSchema("/app/login/grid/login/data", require("./app/login/grid/login.json"));
schemaProvider.putSchema("/app/pages/login/data", require("./pages/login.json"));

ItsyUI components use both schema or direct React way to define a component and render. Each ItsyUI component uses a path structure to access the JSON metadata from. As a general rule of thumb, it uses /app as a prefix to setup. Below is a path rule for,

  • Form and grid schemas use,

    • typeId is a typed entity name, for ex: All form and grid schemas for login

      /app/{typeId}/{schemaId}/data
      
  • Page schema is defined as,

    /app/pages/{pageId}/data
    
  • Command schema is defined as,

    /app/command/data
    
  • Application locale is defined as,

    /app/locale/data
    

Note: Each widget has its own schema provider path.

Extend Schema

For new UI as a Page or Form or Grid, new schema’s can be defined as extended schemas under the schema folder. Use the appSchemaProvider to store it.