Form Structure Tree

Use the getDescription and getFormDescription methods in the designer to get the hierarchical structure of the current form. These methods help you view and operate the organizational structure of form components.

Note

The hierarchical structure may be inconsistent with the final rendering rules of the form. For example, the hierarchical structure of some nested components differs from the final rules.

Example

<fc-designer ref="designer" />

Hierarchical Structure of All Components

Get the hierarchical structure of all components in the current designer using getDescription, including both form and non-form components:

<template>
    <fc-designer ref="designer" />
</template>

<script>
    export default {
        methods: {
            getDescription() {
                // Call getDescription method to get hierarchical structure of all components
                const tree = this.$refs.designer.getDescription();
                console.log(tree);
            }
        }
    }
</script>

Returned Data Structure:

[
  {
    "_fc_id": "id_Fxltly0ebc4rbfc",
    "type": "input",
    "field": "Fwt8ly0ebc4rbec",
    "title": "Input",
    "props": {}
  },
  {
    "_fc_id": "id_Fpaxly0ebaayb8c",
    "type": "fcRow",
    "props": {},
    "children": [
      {
        "_fc_id": "id_Fenmly0ebaaybac",
        "type": "col",
        "props": {
          "span": 12
        },
        "children": [
          {
            "_fc_id": "id_Fbpaly0ec9c0brc",
            "type": "slider",
            "field": "Fy9ply0ec9c0bqc",
            "title": "Slider",
            "props": {}
          }
        ]
      },
      {
        "_fc_id": "id_Fyhfly0ebaaybcc",
        "type": "col",
        "props": {
          "span": 12
        },
        "children": [
          {
            "_fc_id": "id_Funoly0ebxmlboc",
            "type": "rate",
            "field": "Fyxily0ebxmlbnc",
            "title": "Rating",
            "props": {}
          }
        ]
      },
      {
        "_fc_id": "id_Fub2ly0ech3rbvc",
        "type": "col",
        "props": {
          "span": 12
        },
        "children": [
          {
            "_fc_id": "id_F4dsly0ecjt3bxc",
            "type": "elButton",
            "props": {}
          }
        ]
      },
      {
        "_fc_id": "id_Fl6jly0ecgndbtc",
        "type": "col",
        "props": {
          "span": 12
        },
        "children": [
          {
            "_fc_id": "id_F340ly0ect4cc0c",
            "type": "timePicker",
            "field": "F23sly0ect4cbzc",
            "title": "Time",
            "props": {}
          }
        ]
      }
    ]
  },
  {
    "_fc_id": "id_F50fly0enjnlc3c",
    "type": "fcRow",
    "field": "F7j1ly0enjnlc2c",
    "title": "Sub-form",
    "props": {},
    "children": [
      {
        "_fc_id": "id_F69aly0enn91c9c",
        "type": "input",
        "field": "F2emly0enn91c8c",
        "title": "Textarea",
        "props": {
          "type": "textarea"
        }
      },
      {
        "_fc_id": "id_Fy8sly0enlh4c6c",
        "type": "input",
        "field": "Fzvtly0enlh4c5c",
        "title": "Input",
        "props": {}
      }
    ]
  },
  {
    "_fc_id": "id_Fvm5ly0entiqcec",
    "type": "tableForm",
    "field": "Fieqly0entipcdc",
    "title": "Table Form",
    "props": {},
    "children": [
      {
        "_fc_id": "id_Filuly0entiqcgc",
        "type": "tableFormColumn",
        "props": {
          "label": "Custom Name",
          "width": "auto"
        },
        "children": [
          {
            "_fc_id": "id_F1kmly0enux1cic",
            "type": "input",
            "field": "Fh9zly0enux1chc",
            "title": "Input",
            "props": {}
          }
        ]
      },
      {
        "_fc_id": "id_Ftlvly0enw7eckc",
        "type": "tableFormColumn",
        "props": {
          "label": "Custom Name",
          "width": "auto"
        },
        "children": [
          {
            "_fc_id": "id_Frmlly0eo0h4cmc",
            "type": "switch",
            "field": "Fqxyly0eo0h4clc",
            "title": "Switch",
            "props": {}
          }
        ]
      }
    ]
  }
]

Get Only Form Components' Hierarchical Structure

Get the hierarchical structure of all form components in the current designer using getFormDescription, which filters out non-form components:

<script>
    export default {
        methods(){
            getDescription() {
                const tree = this.$refs.designer.getFormDescription();
            }
        }
    }
</script>

Returned Data Structure:

[
  {
    "_fc_id": "id_Fxltly0ebc4rbfc",
    "type": "input",
    "field": "Fwt8ly0ebc4rbec",
    "title": "Input",
    "props": {}
  },
  {
    "_fc_id": "id_Fbpaly0ec9c0brc",
    "type": "slider",
    "field": "Fy9ply0ec9c0bqc",
    "title": "Slider",
    "props": {}
  },
  {
    "_fc_id": "id_Funoly0ebxmlboc",
    "type": "rate",
    "field": "Fyxily0ebxmlbnc",
    "title": "Rating",
    "props": {}
  },
  {
    "_fc_id": "id_F340ly0ect4cc0c",
    "type": "timePicker",
    "field": "F23sly0ect4cbzc",
    "title": "Time",
    "props": {}
  },
  {
    "_fc_id": "id_F50fly0enjnlc3c",
    "type": "fcRow",
    "field": "F7j1ly0enjnlc2c",
    "title": "Sub-form",
    "props": {},
    "children": [
      {
        "_fc_id": "id_F69aly0enn91c9c",
        "type": "input",
        "field": "F2emly0enn91c8c",
        "title": "Textarea",
        "props": {
          "type": "textarea"
        }
      },
      {
        "_fc_id": "id_Fy8sly0enlh4c6c",
        "type": "input",
        "field": "Fzvtly0enlh4c5c",
        "title": "Input",
        "props": {}
      }
    ]
  },
  {
    "_fc_id": "id_Fvm5ly0entiqcec",
    "type": "tableForm",
    "field": "Fieqly0entipcdc",
    "title": "Table Form",
    "props": {},
    "children": [
      {
        "_fc_id": "id_F1kmly0enux1cic",
        "type": "input",
        "field": "Fh9zly0enux1chc",
        "title": "Input",
        "props": {}
      },
      {
        "_fc_id": "id_Frmlly0eo0h4cmc",
        "type": "switch",
        "field": "Fqxyly0eo0h4clc",
        "title": "Switch",
        "props": {}
      }
    ]
  }
]

Data Structure

export type DescriptionData = Array<{
    // Unique value
    _fc_id: string;
    // Component type
    type: string;
    // Field ID
    field?: string;
    // Component name
    title?: string;
    // Slot name
    slot?: string;
    // Component property configuration
    props: Object;
    // Children
    children?: DescriptionData;
}>

• _fc_id: Unique identifier used to uniquely identify each component.
• type: Component type, such as input, slider, etc.
• field: Field ID, the field identifier for each component in the form.
• title: Component name, used to describe component functionality.
• slot: Slot name, used to specify component slot.
• props: Component property configuration, containing all configuration information for the component.
• children: Hierarchical structure of child components, representing all child components under the current component.