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 operations
state.app.fetchCount - counter of asynchronous requests; when it is > 0, the screen is disabled and a progress bar is displayed
state.app.error and state.app.errorDetails - text and stack trace of the last application error

Form model

state.app.form.models.model - layout (model) of the main form
state.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 form
state.app.form.models.readOnlyControls - list of the names of the controls that should be converted into the readonly state in the form
state.app.form.models.readOnly - if set to true, the entire form will be converted into the readonly state
state.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 server
state.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 form
state.app.form.formParams.securityGroup - name of a group accociated with the form
state.app.form.formParams.permissions - form permissions
state.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.