DOCSEARCHbyAlgolia
Submit Docs

XRender Documentation

repository·master·Indexed 27 days ago

https://github.com/alibaba/x-render

A suite of out-of-the-box solutions for enterprise middle-end development, providing tools to render forms, tables, and charts via protocols and visual builders. The suite includes chart-render for Line, Column, and PivotTable components; form-render and form-render-mobile for JsonSchema-based dynamic forms; table-render for data tables with search panels; and data-render for detail pages using the DataView component.

Tokens
100K
Snippets
154
Records
555
Agent score
92%

What's inside XRender

  1. Introduction to FormRender Mobile

    master
    FormRender Mobile is an out-of-the-box form solution designed for mobile devices. It dynamically renders forms using the JsonSchema protocol. It is built upon FormRender 2.0 and Ant Design Mobile. The API is largely consistent with FormRender 2.0, making it easy for developers familiar with that version to transition.

  2. Overview of XFlow

    master
    XFlow is a next-generation, out-of-the-box workflow canvas plugin designed for mid-to-back-office projects. It is built on top of ReactFlow and provides an interactive experience similar to Dify. It offers a unified and efficient solution for workflow orchestration and canvas-based visual programming.

  3. Overview of XRender solutions

    master

    XRender is an out-of-the-box solution for enterprise middle-end applications, specifically focusing on 'Forms, Tables, and Charts'. It consists of several specialized packages:

    • FormRender: Allows you to write forms as easily as writing a single input component.
    • TableRender: Provides protocol-driven and highly flexible search lists/tables.
    • ChartRender: A simple, 'plug-and-play' library for drawing charts.
    • FormGenerator: A visual builder tool for constructing enterprise-level forms.

  4. Overview of XRender 2.0

    master

    XRender 2.0 is an out-of-the-box solution for enterprise-level middle-office applications, focusing on forms, tables, charts, and workflow orchestration. It provides several specialized packages to handle different UI and logic requirements:

    • FormRender: Simplifies form creation, allowing you to write forms as easily as a single input.
    • TableRender: Provides protocol-driven generation and highly flexible search lists.
    • FormGenerator: A visual builder tool for constructing complex enterprise forms.
    • XFlow: A canvas-based solution for workflow orchestration and diagramming.

    Note: For v1 documentation, visit https://xrender.fun.

  5. Key Features of XFlow

    master

    XFlow provides several core capabilities for building workflow canvases:

    • High Performance: Leverages ReactFlow for efficient graphical rendering and interaction.
    • XRender Ecosystem Integration: Integrates with FormRender to quickly generate configuration panels with minimal effort.
    • Customization: Supports custom nodes, custom configuration panels, and custom node components (nodeWidget).
    • Built-in Nodes: Includes ready-to-use nodes such as Condition nodes (for branching), Parallel nodes (for concurrent tasks), and Annotation nodes.
    • Canvas Operations: Supports zooming, undo/redo, automatic layout, full-screen mode, node organization, and keyboard shortcuts.
    • Node Management: Supports copying, deleting, and pasting nodes.
    • Node Status & Logs: Supports displaying node execution status and running logs.

  6. Write paths for `setSchemaByPath` in form-render

    master

    When using form.setSchemaByPath to update the schema of specific form elements, you must use the correct path syntax depending on the structure of your schema. This allows you to target deeply nested elements or elements within arrays.

    Path Syntax Patterns:

    1. Basic Path: Use the direct property name for top-level elements.
      • Example: 'radio'
    2. Nested Path: Use dot notation for nested objects.
      • Example: 'x.radio'
    3. Array Path: Use [] notation to target properties within items of an array.
      • Example: 'x[].radio'
    4. Complex Nested Path: Combine dot notation and array notation for deep structures.
      • Example: 'x.y[].radio'

  7. Configure list components and nested widgets in FormSlimRender

    master

    When using list components with FormSlimRender, you must import both the list component itself and the components intended to be nested within it.

    By default, list components use Collapse as the nested component. To use a different nested component, specify the widget property within the items definition of your schema.

    const schema = {
  type: 'object',
  displayType: 'row',
  properties: {
    list: {
      title: '列表按需',
      type: 'array',
      widget: 'simpleList',
      items: {
        type: 'object',
        widget: 'Card', // Custom nested component
        properties: {
          input1: {
            title: '输入框',
            type: 'string',
          },
        },
      },
    },
  },
};

  8. Advanced `bind` paths for nested objects and lists

    master

    When using bind in complex schemas, follow these pathing rules:

    1. Nested Objects: You must use the absolute path to the target property.
    2. List Components: When inside a List (array) component, the bind path should be written relative to the child node of the List.

    Example: In a nested object obj.properties.range1, the bind value would be ['obj.startDate', 'obj.endDate'].

    import React from 'react';
import FormRender, { useForm } from 'form-render';

const schema = {
  type: 'object',
  properties: {
    obj: {
      title: '对象',
      type: 'object',
      properties: {
        range1: {
          bind: ['obj.startDate', 'obj.endDate'],
          title: '日期',
          type: 'range',
          format: 'date'
        }
      }
    },
    list: {
      type: 'array',
      widget: 'cardList',
      items: {
        type: 'object',
        title: 'List-Item',
        column: 3,
        properties: {
          obj: {
            title: '对象',
            type: 'object',
            properties: {
              range1: {
                bind: ['obj.startDate', 'obj.endDate'],
                title: '日期',
                type: 'range',
                format: 'date'
              }
            }
          }
        }
      }
    }
  }
};

const Demo = () => {
  const form = useForm();
  const onFinish = (formData) => {
    console.log(formData, 'formData');
  };

  return (
    <FormRender
      form={form}
      schema={schema}
      onFinish={onFinish}
      footer={true}
      maxWidth={400}
    />
  );
};

export default Demo;

  9. Develop the FormRender VSCode Plugin

    master

    To develop or debug the plugin locally, follow these steps:

    1. Clone the repository:
    git clone https://github.com/alibaba/form-render.git
cd form-render/tools/vscode-plugin-fr-schema
    1. Install dependencies:
    npm install
    1. Debug the plugin:
    • Open the project in VSCode.
    • Run npm run dev:web in the terminal.
    • Press F5 to start the debugging session.
    git clone https://github.com/alibaba/form-render.git
cd form-render/tools/vscode-plugin-fr-schema
npm install
npm run dev:web

  11. Use Custom SVG Components for Node Icons

    master

    To use custom SVG or image components as icons:

    1. Create a React component that renders the SVG.
    2. Pass the component to the widgets prop of the <XFlow /> component.
    3. In your NodeConfig, set the iconSvg property to the name of the component you registered.