Dynamic Views & Forms

configuration

• view-model
• layout

clinical

• model
• meta-data

Evn

lookups

i18n

user data

etc.

Save

Cancel

model - metadata

// model

{
    personKey: 1030210250.0,
    lastName: "Davidson",
    firstName: "David",
    get fullName() { 
        return 
            `${this.lastName}, ${this.firstName}`;
    },
    visit: [
        {
            visitKey: 2000009164.0,
            patientClass: "Emergency",
            orders: [
                {
                    orderKey: 1203000316539.0,
                    reasonForOrder: "test me"
                }
            ]
        }
    ]
}

// metadata

{
    personKey: { type: 'number', id: true },
    lastName: { type: 'text' },
    firstName: { type: 'text' },
    fullName: { type: 'text', calculated: true },
    visit: {
        type: 'group',
        multiple: true,
        fields: {
            visitKey: { type: 'number', id: true },
            patientClass: { type: 'text' },
            orders: {
                type: 'group',
                multiple: true,
                fields:  {
                    orderKey: { 
                        type: 'number',
                        id: true
                    },
                    reasonForOrder: { type: 'text' }
                }
            }
        }
    }
}

view-model - layout

// view-model

{
    lable: 'Patient Form',
    fields: {
        firstNameField: {
            lable: 'First Name',
            path: 'firstName'
        },
        lastNameField: {
            lable: 'Last Name',
            path: 'lastName'
        },
        fullNameField: {
            lable: 'Full Name',
            path: 'fullName'
        },
        orderKeyField: {
            lable: 'Order Key',
            path: 'visit.0.orders.0.orderKey'
        }
    }
}

// layout

{
    align: Alignment.Horizontal,
    children: [
        {
            fieldName: 'firstNameField'
        },
        {
            fieldName: 'lastNameField'
        },
        {
            fieldName: 'fullNameField'
        },
        {
            fieldName: 'orderKeyField'
        }
    ]
}

Result

// model

{
    personKey: 1030210250.0,
    lastName: "Davidson",
    firstName: "David",
    get fullName() { return ... },
    visit: [
        {
            visitKey: 2000009164.0,
            patientClass: "Emergency",
            orders: [
                {
                    orderKey: 1203000316539.0,
                    reasonForOrder: "test me"
                }
            ]
        }
    ]
}

(angular Control)

(angular Control)

(angular Control)

Validations

// view-model
...
    lastName: {
        lable: 'Last name',
        path: 'lastName',
        validations: {
            required: true,
            minLength: 2
        }
    },
...

Defaults

// view-model
...
    reasonForOrderField: {
        lable: 'Order Key',
        path: 'visit.0.orders.0.reasonForOrder',
        default: 'Patient feels bad'
    },
...

Tabs

Popup

lookups

// model

{
    ...
    genderKey: 2.0,
    FKLookupRows: {
        genderKey: {
            genderKey: 2.0,
            description: "Male"
        }
    }
}

// metadata

{
    ...
    genderKey: {
        type: 'lookup',
        lookupName: 'GENDER',
        lookupKey: 'genderKey',
        lookupDescription: 'description'
    }
}

// view-model

{
    gender: {
        lable: 'Gender',
        path: 'genderKey'
    },
    ...
}

Modularity

• Fields may define:
  • Basic fields which are rendered to their suitable input (or plain text), according to their metadata
  • Custom components 
  • Sub View Models
• Custom and Sub View Models will receive their respective model, view-model, metadata and form-model.

// view-model

{
    lable: 'Patient Form',
    fields: {
        ...
        orderKeyField: {
            lable: 'Order Key',
            path: 'visit.0.orders.0.orderKey',
            component: 'OrderReportIframeComponent' 
        }
    }
}

some notes 

• Each non active tab isn't get compiled until its activation. Once it gets active, it is compiled (and gets hidden when deactivated again).
• non active tabs are detached.
• Kendo ( == jQuery) is bad for performance.
• each kendo widget is compiled after timeout (0) and has a same-sized placeholder.
• after each value change (of the full form), each control reads its value from the model (for 2 controls for the same field in the model).