User interface diagram with cascading controls - donvadicastro/generator-xmi GitHub Wiki

User interface diagram can contains dependent controls, when data bound process depends on data from another control. Common example - cascading dropdowns, when selecting item in first triggers data re-binding in second based on selection (country -> states, organization -> members).

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.

After navigating to screen "Country" dropdown will contains all available countries in system and "State" will be empty. Selecting country will trigger loading data into "State" control. "Load states" sequence diagram is designed to support input parameter to filter data through.

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

export class StateManager extends StateManagerBase {
    async loadByCountry(state: FlowStateType & { country: Country }, returns?: any): Promise<FlowStateType & { returns: State[] | null }> {
        const mng = await this.dbManager();
        return super.loadByCountry(state, await mng.state.repository.find({where: {countryRef: state.country}}));
    }
}