Page Introduction

1. Operation Area

Associated Data Table

Set the data table referenced in the form. After association, you can drag data table fields to the form panel, or modify the associated data table through the form editing popup.

Terminal Adaptation

Designers can preview the form display on different types of devices by switching between Pc, Pad, and Mobile.

Undo & Redo

The designer provides undo and redo operations to prevent inability to roll back after operational errors.

Script

Supports designers to write scripts for data interaction with the form, through which personalized business logic can be implemented.

  {
    props: {
        uname:{
            type:String
        }
    }
,
    data: function () {
        return {}
    }
,
    created: function () {

    }
,
    mounted: function () {
        setTimeout(function ()˘{
            this.setup();
        }
    ,
        0
    )
        ;
    }
,
    beforeDestroy: function () {

    }
,
    methods: {
        setup: function () {
            console.log(this.uname);
            informat.system.getToken().then(res => {
                console.log(res);
            });
            this.onEvent('onChange', function (data) {
                console.log('onChange', data);
            });
            this.onEvent('onClick', function (data) {
                // this.getData(true).then((res)=>{
                //     this.client.callAutomatic({
                //         automaticId:'formdesignerInvoker',
                //         args:[res]
                //     })
                //     // console.log('onClick.getData',res);
                // });
                this.submitForm(true);
            }, 'buttonSubmit');
            this.onEvent('onClick', function (data) {
                this.reset();
            }, 'buttonCancel');

            this.onceEvent('onChange', function (data) {
                console.log('onNameChange', data);
            }, 'name');
        }
    }
}

Style

Implemented using style overriding. By adding class name definitions, new styles can override original styles, which can be flexibly implemented through this method.

.form-border {
  background: #f6f7f9;
  border: solid 1px rgb(63, 94, 251);
  border-radius: 8px;
}

Preview

Preview allows you to view the designed form page, and you can also check validation, form data acquisition, and other effects through this feature.

2. Field Panel

Displays fields that can be operated by dragging/clicking in the form designer, and integrates them into Layout Fields, Container Fields, Basic Fields, Advanced Fields, and Custom Fields according to their different functions.

3. Form Canvas

Allows drag-and-drop to adjust positions, copy, delete, and other operations on form fields.

4. Field Property Panel

Configure the properties, styles, and events of form fields. For details, refer to Field Usage Instructions.

5. Outline Tree Panel

Displays the structure tree of the current form (field type, field identifier).

6. Form Property Panel

Configure form properties, custom styles, etc.

Form Width

Set the display width of the form. For size unit ranges, please refer to CSS Length