Modeling & Development MMH: Quick Filters

Engines Overview Engine
1

Feature
You can reference custom events for modeled buttons, e.g. in the Overview Model. An example for this would be to have buttons for quick filters. These buttons can automatically apply filters based on specific criteria on click.

Below we have implemented such events to filter an overview of Person documents based on the generation that they are a part of, specifically Millenials and Gen X.

Implementation
:information_source: The full code will be available with the recording of the session on the elearning plattform.

Two buttons have been added to the Overview Model that reference the events “filter_for_millennials” and '“filter_for_gen_x”. We now need to implement the corresponding event handlers that apply the respective filters.

Filters in the Overview Engine are specified as a FilterMap. You can find an example of what such a filter map can look like for different data types in the Overview Engine documentation..

In this use case, the filter maps are defined as follows for the respective events:

Filters in the overview are specifi

File: client/src/modules/person/filters/constants.ts

//...
export const quickFilterMap = new Map<string, OverviewEngineApi.FilterMap>([
    [
        "filter_for_millennials",
        {
            "People.PersonalData.DateOfBirth": {
                filterType: "Date",
                type: "Date",
                criteria: {
                    start: new Date("1981-01-01"),
                    end: new Date("1996-12-31")
                }
            }
        }
    ],
    [
        "filter_for_gen_x",
        {
            "People.PersonalData.DateOfBirth": {
                filterType: "Date",
                type: "Date",
                criteria: {
                    start: new Date("1965-01-01"),
                    end: new Date("1980-12-31")
                }
            }
        }
    ]
]);

In a custom view component for the Person overview, we can then create and register the event handler for the onEventButtonClick to the Overview Engine.
To avoid overwriting any potential active filters of other fields, we also need currently active filters out of the uiState.

The filters in the overview can then be changed by dispatching an even action, namely onFilterChanged with the active filters and the quick filters combined.

File: client/src/modules/person/filters/PersonOverview.tsx

//...
export default function PersonOverview(props: View): ReactElement {
    const dispatch = useDispatch();
    const uiState = useSelector(OverviewEngineSelectors.uiStateWithoutDefaults(props.activityId));

    const eventHandlers: OverviewEngineApi.EventHandlers = {
        onEventButtonClick: (event) => {
            if (event.includes("filter_")) {
                const quickFilters: OverviewEngineApi.FilterMap = { ...quickFilterMap.get(event) };
                const activeFilters = uiState ? uiState.activeFilters : {};
                dispatch(
                    OverviewEngineActions.event({
                        activityId: props.activityId,
                        engineAction: Events.onFilterChanged({
                            activeFilters: { ...activeFilters, ...quickFilters }
                        })
                    })
                );
            }
        }
    };

    return <CRUDViews.OverviewEngineView {...props} eventHandlers={eventHandlers} />;
}

The PersonOverview component of course needs to be registered to the Client for the Person module:

File: client/src/modules/person/index.ts

//...
const VIEWS: { [name: string]: React.ComponentType<View> | undefined } = { PersonOverview };

function viewComponentProvider(name: string) {
    return VIEWS[name];
}

const module = (): Module => ({
    id: "PersonModule",
    views: () => viewComponentProvider
});

export default module;

If the Person module has not been registered yet, this also needs to be done:

File: client/src/modules/index.ts

//...
export const ALL_MODULES = [
    AppModelAdapterModule,
    TreeEngineFactories.createModule(),
    TreeEngineServerConnectorFactories.createModule(),
    welcomeModule()
    welcomeModule(),
    personModule()
];
//...

This module registration is not setup out-of-the-box for the Project Template, you can find how to do it also in the documentation.

Lastly, the PersonOverview component just needs to be used instead of OverviewEngine in the VIEW_ADD directive of the OverviewScene in the PreviewApp_AM.

1 Like