User interface diagram with bound control - donvadicastro/generator-xmi GitHub Wiki

User interface with bonded control generation

User interface diagram can contains control bounded with remote data source, as example table with data.

Sequence diagram, connected to bounded control, will be source of data loaded on form initialization.

UI generation with bounded control

Generated user form

UI diagram will be generated as separate screen page in resulting SPA solution and available by separate url. Following the concept of atomicity and isolation - screen will be represented as separate component, that can be injected into any other user pages.

UI generated screen

After navigating to page during component initialization data load be loaded and linked as data source.

GET http://localhost:3000/api/v1/ui-diagrams/load-users

"loadAll" action need to be implemented inside "UsersManager" component to cover business requirements. As an example:

export class UsersManager extends UsersManagerBase {
    async loadAll(state: FlowStateType & {}, returns?: any): Promise<FlowStateType & { returns: User[] | null }> {
        return super.loadAll(state, [
            new User({firstName: 'Adam', lastName: 'Smith', email: '[email protected]'}),
            new User({firstName: 'Brad', lastName: 'Pitt', email: '[email protected]'}),
        ]);
    }
}
⚠️ **GitHub.com Fallback** ⚠️