@openyida/schema-render

Schema-driven renderer for OpenYida custom pages.

The package provides a small React 16-compatible runtime for rendering common YiDA custom-page patterns from JSON Schema:

• DataList
• DetailCard
• FormPanel
• StatBoard
• ActionBar

It is designed for two delivery modes:

npm install @openyida/schema-render

const { createSchemaRenderRuntime } = require('@openyida/schema-render');
const { SchemaRender } = createSchemaRenderRuntime(React);

For YiDA custom pages, the runtime can also be loaded from CDN once the g.alicdn.com asset URL is available:

export function didMount() {
  this.utils.loadScript('https://g.alicdn.com/openyida/schema-render/x.y.z/schema-render.min.js').then(() => {
    window.OpenYidaSchemaRender.install(React);
    this.setState({ schemaRenderReady: true });
  });
}

The CDN build exposes:

• window.OpenYidaSchemaRender
• window.SchemaRender after OpenYidaSchemaRender.install(React)

Usage

const schema = {
  type: 'DataList',
  title: 'Customer List',
  dataSource: { appType: 'APP_XXX', formUuid: 'FORM-YYY' },
  filters: [
    { field: 'textField_name', label: 'Name', type: 'text' },
    {
      field: 'selectField_status',
      label: 'Status',
      type: 'select',
      options: [
        { label: 'Open', value: 'Open' },
        { label: 'Closed', value: 'Closed' },
      ],
    },
  ],
  columns: [
    { field: 'textField_name', label: 'Name', width: 180 },
    { field: 'selectField_status', label: 'Status', render: 'tag' },
  ],
  pagination: { pageSize: 20 },
};

const { SchemaRender } = createSchemaRenderRuntime(React);

function Page() {
  return React.createElement(SchemaRender, {
    schema,
    state: {
      rows: [
        { formInstId: 'FINST-1', formData: { textField_name: 'Acme', selectField_status: 'Open' } },
      ],
      total: 1,
      currentPage: 1,
      filters: {},
    },
  });
}

Host Integration

SchemaRender stays UI-only. The host page owns data loading and mutations through a context object. When a method exists on context, the component calls it:

| Method | Trigger | |--------|---------| | getSchemaState(schema) | Read current rows, filters, draft values, metrics, and loading state | | chooseSchemaFilterOption(schema, field, value) | Select filter option | | updateSchemaFilter(schema, field, value) | Type filter value | | handleSchemaSearch(schema) | Click search | | changeSchemaPage(schema, page) | Click previous/next page | | chooseSchemaDraftOption(schema, field, value) | Select form option | | updateSchemaDraft(schema, field, value) | Type form value | | submitSchemaForm(schema) | Submit form panel | | resetSchemaForm(schema) | Reset form panel | | handleSchemaAction(schema, action, record) | Click action button |

Use createSchemaController() if you want a small state helper for custom hosts.

Development

npm test
npm run build

The build writes:

• dist/schema-render.js
• dist/schema-render.cjs
• dist/schema-render.min.js