Global state of the client application
The client logic of the DWKit application is based on changes of the application global state and reaction of the React component to the changes. The reaction of the components usually includes redrawing. Architecturally, all the information to be accessed or changed is located in the global state. State is a large JavaScript object of a complex structure. Let's take a look at what its parts are responsible for.
var state = {
app: {
user : null,
impersonatedUserId: null,
fetchCount: 0,
error: undefined,
errorDetails: undefined,
form : {
models: {
model: null,
mapping: null,
children: null,
hideControls: null,
readOnlyControls: null,
readOnly: null
},
modals: new Array(),
data : {
isDirty: false,
isNew : false,
original: null,
modified: null,
children: null
},
errors:{
main: null,
children: null
},
formParams: {
schemes: null,
securityGroup: undefined,
permissions: null,
children: null
}
}
},
router:
{
location: null,
push: null,
refresh : null
}
};
state.app.user
- object containing information on the current authorized user. For example:
{
id: '540e514c-911f-4a03-ac90-c450c28838c5',
name: 'admin',
email: '',
isLocked: false,
roles: ['Admins'],
groups: [],
timezone: null,
localization: null,
},
state.app.impersonatedUserId
- id of a user, on behalf of which an authorized user is executing operationsstate.app.fetchCount
- counter of asynchronous requests; when it is > 0, the screen is disabled and a progress bar is displayedstate.app.error
andstate.app.errorDetails
- text and stack trace of the last application error
Form model
state.app.form.models.model
- layout (model) of the main formstate.app.form.models.mapping
- a support object of converting names of the data fields in a form into names of the data fields in a database. Used to synchronize data between the parent and modal windows.state.app.form.models.hideControls
- list of the names of the controls that should be hidden in the formstate.app.form.models.readOnlyControls
- list of the names of the controls that should be converted into the readonly state in the formstate.app.form.models.readOnly
- if set to true, the entire form will be converted into the readonly statestate.app.form.children
- if the modal edit windows are called from the main form, their layouts (models) are added to this object looking like that:
state.app.form.children = {
FormName1 : {
model: {},
mapping: {},
hideControls: [],
readOnlyControls: [],
readOnly: false
},
FormName2 : {...},
...
}
state.app.form.modals
- array, in which modal windows are registered in the order of their appearance on the screen. The array will look like["FormName1","FormName2"]
. It means that first the main form is displayed, then the "FormName1" form is displayed as a modal window over the main form and the "FormName2" form is displayed as a modal window. As far as the windows are modal, you can edit only the "FormName2" form.
Form data
state.app.form.data.original
- original data of the main form, obtained from the server.state.app.form.data.modified
- modified data of the main form. They coincide with those displayed in the form.state.app.form.data.isDirty
- if true, the data is modified compared to those having come from the server.state.app.form.data.isNew
- if true, the data is absent on the serverstate.app.form.data.children
- if the modal edit windows are called from the main form, their data is added to this object looking like that:
state.app.form.children = {
FormName1_0 : {
original: {},
modified: {},
isDirty: false,
isNew: false
},
FormName2_1 : {...},
FormName1_2 : {...},
...
}
Mind that here properties are called "Form Name" + index, where index refers to the position of a modal form relative to the main form. The higher it is, the farther a modal form is.
Form errors
state.app.form.errors.main
- object with errors of main form validation:{control1 : "error message", control2: "error message"}
state.app.form.errors.children
- errors of child form validation.
state.app.form.children = {
FormName1 : {control1 : "error message", control2: "error message"},
FormName2 : {...},
...
}
Additional form parameters
state.app.form.formParams.schemes
- names of the workflow engine schemes accosiated with the formstate.app.form.formParams.securityGroup
- name of a group accociated with the formstate.app.form.formParams.permissions
- form permissionsstate.app.form.formParams.children
- if the modal edit windows are called from the main form, their additional parameters are added to this object looking like that"
state.app.form.children = {
FormName1 : {
schemes:[],
securityGroup: "",
permissions: {}
},
FormName2 : {...},
...
}
Routing parameters
state.router.location
- current location - address of a displayed page. This is the object of the following type:
state.router.location = {
pathname: '/form/DocumentEdit/b12a546c-e193-4ad5-a5c7-d31de7f7907e/',
search: '',
hash: '',
key: '2xkl9d'
},
state.router.push
- if you write an url in this part of the application state, it will be displayed in a browser address bar, and all the components dependent on the url will be redrawn. The location will also be updated.
state.router.refresh
- if you write any value (for example, the "refresh" line) in this part of the state application, the current page will be redrawn.