Client React components
You can find a brief description of the client architecture in the architecture section.For proper operation, you need to work with three React components: DWKitAdmin
, DWKitForm
and FormContent
. In fact, you will hardly ever need to adjust the DWKitAdmin
component. As for the FormContent
component, it, actually, represents a wrapper over the DWKitForm
component.
The DWKitAdmin component
This component displays the entire admin panel. It is adjusted by default in the starter application.
<DWKitAdmin
apiUrl="/configapi"
workflowApi="/workflow/designerapi"
imageFolder="/images/"
deltaWidth={0}
deltaHeight={0}
controlActions={globalActions}
returnToAppUrl="/"
/>
The settings have already been described in the architecture section. As a rule, you won't have to change them.
The DWKitForm component
This component draws a form created in the form builder and fills it in with data. Its application is described in the architecture section. Let's take a closer look at the props of the DWKitForm component. There are two ways to adjust it.
- The option below is used inside the
FormContent
component to display dynamic forms.
<DWKitForm
key = "form unique key"
formName="FormName"
model={{model (form markup) object}}
data={{data object}}
errors={{error object}}
dataChanged={(form, {key, value}) => {}}
eventFunc={(args) => {}}
getAdditionalDataForControl={this.props.additionalFetch.bind(this, ()=>{return this.props.formName})}
hideControls={["controlName1","controlName2"]}
readOnlyControls={["controlName1","controlName2"]}
readOnly={false}
/>
formName
- the name of a form, under which it is saved in the admin panel, in your system.model
- the object of a layout, by which the form is drawn. This object is saved in the form builder.data
- a data object uploaded to the form.errors
- an object of the{control1 : "error message", control2: "error message"}
type. Control1 and control2 are theName
of a control, set in the form builder. If there is a property with such name in the object,DWKitForm
will display a validation error in this control.dataChanged
- a function that sends changed data to the application.Form
represents a link to theDWKitForm
component,{key, value}
is the control name + its new value.eventFunc
- this function will be called if a control event is associated with a chain of client actions in the form builder. Args is the object of the{key,controlRef,formName,component, eventName, actions, parameters}
type.Actions
is a chain of client actions to be called, for example, the "validate, save, exit" line.Parameters
are the parameter object. This information can be edited in the [form builder events tab] (/documentation/admin/form/#events-tab). The FormContent component forwards this information to the client actionsgetAdditionalDataForControl
- this event is called by the GridView controls with the enabled server paging and Dictionary to obtain data.hideControls
- a list of the names of the controls hidden in the form.readOnlyControls
- a list of the names of the controls that are available in the read-only mode.readOnly
- a global readonly of a form
This option is used when both model
and data
are requested not by the DWKitForm
component itself, but, for example, supplied from the global state of the application. The second option is used when DWKitForm
itself requests data. In this case, you should specify modelUrl
and dataUrl
, not model
and data
. At the same time, you should necessarily specify only modelUrl
; other parameters can be specified if required. For example:
<DWKitForm formName="header" data={{currentUser: user.name}} modelurl="/ui/form/header" />
A form is requested by the concurrent url, while the data are formed manually.
The rule of binding data to a form
DataController is one of the main data suppliers in the DWKit application. It returns the JSON objects of the following type:
{
...
property1: value1,
property2: value2,
__id: '90fb3531-808f-43d9-be92-d3c5e8b70ebd',
collection1: [
{
...
property1: value1,
property2: value2,
__id: 'cd8ebe54-2a33-4b3a-b318-0bbc1d13af87'
...
},
{
...
property1: value1,
property2: value2,
__id: 'f47d6f0e-81a2-4fbd-b6e2-8083b518e547'
...
},
]
...
}
The following rules should be applied in order for the data to be displayed in a proper control (binding):
- For the main record. The name of a property in the json data object should coincide with the name of a control, in which this value should be displayed.
- For the collections. The name of a property - collection (array) should coincide with the name of a control displaying a collection.
- The names of columns in a control (all controls displaying collections have column settings) should coincide with the names of properties of the collection members.
The FormContent component and lifecycle of a form in it
In the DWKit application, the DWKitForm
component is integrated into the application infrustructure. Being wrapped in the FormContent
component, this component enables:
- synchronization of the data from
DWKitForm
and a global state of the application - execution of the chains of user-defined client actions
- display of modal forms upon editing collections (of any level of nesting)
- lifecycle of a form: Requesting a model - Requesting data - Initialization - Execution of client actions
Lifecycle of a form (inside the component) includes the following stages:
- Requesting a model.
FormContent
analyzes the url or its formName property and uploads a model (layout) of a form viaUserInterfaceController
. If the Url representsform/{formName}/
, the formName will be obtained from the url. - Uploading data.
FormContent
analyzes the url and uploads the data viaDataController
. If the Url representsform/{formName}/{filter}
, the filter will be obtained from the url. - Initialization. When the inner
DWKitForm
finds out it has both model and data, it sends a client action with the init name viaeventFunc
. It determines what controls should become readonly and hide.
Then, the conditions set in the form builder are determined.
- After that, the form constantly sends its changed data via the
dataChanged
event and calls chains of client actions.