Form

Manage forms

In DWKit, forms are created via an in-built form builder. The controls are divided into four groups:

  • Containers
  • Collections
  • Controls
  • Charts

To add an element to the form, use drag & drop or double-click the selected control. There are Builder icons icons displayed beside each element. Use them to move, copy and delete elements or open the property editing form.

You can download and upload forms in JSON format. To do this, press the Download and Upload buttons respectively. For accosiation with one or several workflow schemes, press the Workflow button. For accosiation with a group of permissions, press the Security button. After that, you will be able to use the checkPermission function in the Others tab.

Form

General tab

General tab displays the main properties for adjusting controls.

Style tab

Styles tab displays the properties for adjusting the style of controls. Use the name of a css class without a dot in the Custom CSS field. Use a React-like format of specifying parameters in the Style field.

Builder style

Events tab

Events tab displays control events. Specify the events that should be called in the Actions field. The events are called one by one unless an exception has been called upon running the event.

To add an event, simply write it in the Actions field. You can add a set of parameters Actions will be called with in the Parameters field. Specify the controls, via which Actions will be called, in the Targets field. In case you specify several controls, the events will be called sequentially for each control.

Builder events

Others tab

Others tab displays the fields for control validation and display. You can use the value variable that contains the current control value in the Custom Validation field. You should return true/false or an error notification.

You can use the data variable that contains the current data object in the Visible condition and ReadOnly condition fields. You should return true/false.

In the Custom Validation, Visible conition, ReadOnly condition fields, you can use the following functions:

  • checkRole('rolename') - for checking the user role;
  • checkPermission('permission') - for checking the user permission.

Builder others

Mapping data model

For accosiation with a data model, select a model in the Main Entity field. After that, a list of model attributes will be displayed in the form. Untick the Load checkbox in case you don't need this field.

All form elements that are available for data mapping are displayed in the right part of the screen. To start mapping, drag the elements to one of the Control... fields. To start automatic mapping, press the Auto mapping button.

Form data

Collections

You can add table elements to the form via Collections.

Use CodeActions in the Filter field to limit selection. In case a filter is not specified, the system will generate an automatic filter based on connections in the data model. In case a collection should not be saved with the main object, tick the ReadOnly box.

In case collections control is associated with the collection, when opening a list of attributes, it is necessary to specify the correspondence to the respective column for each attribute.

Form collection

Triggers

Triggers call handlers in the operations with model data.

Parameter Description
Triggers Triggers of the events to be handled. The following triggers are available: AfterSelect, Validate.
Action CodeAction for calling
Parameter The parameter that is passed to the handler function

Form triggers

Action Handlers

Action Handlers are used for declaring user-defined functions in JavaScript. Each method of a js object is a handler of a FormBuilder event. An example of the method:

{
eventname: function({
        data, 
        originalData, 
        state, 
        component, 
        formName, 
        index, 
        controlRef, 
        eventArgs, 
        isChild
        }){
    //code...
    }
}

Set default template button declares a JS object with a set of user events from the form.

Validate method should be commented out before adding. In case you declare validation of a form in this object, calling of a global validation is not happening.

Form actions

Localization

Coming soon...