Hi there 
Is it possible to have an label next/Instead to the multi-selection Button-icon?
At the moment there is just the multi selection Button when pressed activates / deactivates the multi selection functionality.
I would like to replace this by something like “Start Selection for Batch Process”-Button
Version: 2024 ext 6
Kind regards,
Timo
Hi @timo-thin-buffer
You can only add the multi-select in the Overview model but we have no modeling uptions to configure it.
You might be able to customize the Widget directly…
this should be doable via the componentMap of the Overview Engine. There’s an example of how to work with the componentMap in the second task of the Frontend Tutorial.
In your case, you’ll likely need to use the MultiSelectionButton prop of the ComponentMap interface.
I also have a small example from a training on how to replace the Add button in the overview with a Quick Access Button widget, which I’d be happy to share if you (or a developer on your project) are interested.
Best regards,
Denise
Hi Denise,
that sound really interesting!
I would be really happy to see your example form the training 
Kind regards,
Timo
The example is based on version 2025.06 (specifically Project Template version 202506.0.1). The idea is to replace the Add button in the default Person module from the PT with a Quick Access button that offers the option to open a new form or create a dummy document.
As a first step, I annotated the Add button that I wanted to replace in the Overview Model.
Next, I created a custom overview component, PersonOverview. How to do this is described in this section of the second task of the frontend tutorial.
To actually replace the Add button in this custom overview component, you need to customize its componentMap. One of the components there is the OverviewButton, which has the annotation from the Overview Model as its prop.
We can therefore check the annotation to identify which button we specifically want to customize.
For the other buttons, we simply return the OverviewButton from the default component map.
Otherwise, we return the QuickAccessButton widget. All the props (label, iconName, etc.) for the main action can be taken from the props of the OverviewButton we’re replacing.
This looks as follows:
import { ReactElement, ReactNode } from "react";
import { useSelector } from "react-redux";
import { CRUDViews } from "@com.mgmtp.a12.crud/crud-core";
import { View } from "@com.mgmtp.a12.client/client-core/lib/core/view";
import {
ComponentMap,
DefaultComponentMap
} from "@com.mgmtp.a12.overviewengine/overviewengine-core/lib/main/view/configuration/component-map";
import { QuickAccessButton } from "@com.mgmtp.a12.widgets/widgets-core";
import { Icon } from "@com.mgmtp.a12.widgets/widgets-core/lib/icon";
import type { ButtonProps } from "@com.mgmtp.a12.widgets/widgets-core/lib/button/index.js";
import { Button } from "@com.mgmtp.a12.widgets/widgets-core/lib/button/index.js";
import { LocaleSelectors } from "@com.mgmtp.a12.client/client-core/lib/core/locale";
import { RESOURCE_KEYS, useLocalizer } from "../../localization";
export default function PersonOverview(props: View): ReactElement {
const localizer = useLocalizer();
const locale = useSelector(LocaleSelectors.locale());
const componentMap: ComponentMap = {
...DefaultComponentMap,
OverviewButton(buttonProps) {
if (buttonProps.buttonModel.annotations?.some((annotation) => annotation.name === "add-overview-button")) {
const mainAction = ({ iconName, label, ...rest }: ButtonProps & { iconName?: string }): ReactNode => (
<Button
{...rest}
label={label}
icon={iconName && <Icon>{iconName}</Icon>}
title={!label && iconName ? iconName : undefined}
/>
);
const label = buttonProps.buttonModel.label?.find((label) => label.locale === locale.language)?.text;
const iconName = buttonProps.buttonModel.icon?.name;
const primary = buttonProps.buttonModel.primary;
return (
<QuickAccessButton
secondary
mainAction={mainAction({ label, iconName, primary })}
className="-u-margin-b-xs"
actionItems={[
{
text: localizer(RESOURCE_KEYS.application.person.overview.buttons.addNew),
graphic: <Icon>assignment_add</Icon>
},
{
text: localizer(RESOURCE_KEYS.application.person.overview.buttons.addDummy),
graphic: <Icon>group_add</Icon>
}
]}
/>
);
}
return <DefaultComponentMap.OverviewButton {...buttonProps} />;
}
};
return <CRUDViews.OverviewEngineView {...props} timeMode="24h" componentMap={componentMap} />;
}
Note: Here I’m using the CRUDViews.OverviewEngineView component, which is not actually intended for customization. I used it here to keep things simple for the scope of this training.
In a real project, however, OverviewEngineFactories.ViewComponent should be set up and used instead, as it is the component intended for customization. For more information, please refer to the CRUD documentation.
If you want to learn more about how to work with the componentMap (and widgetMap) to customize the Overview Engine, I recommend checking out the second task of the frontend tutorial, where this is explained in more detail.
But I hope this gives you a first impression.
Let me know if you have any questions — and I’d be really interested to hear how this turns out for you and to see your solution if you come up with one!
Best regards,
Denise
Thank you very much
Unfortunately this is not as easy applicable in our solution because all the “design files” like viewProvider.tsx are placed in a central repository for multiple solutions.
I have to find out first if we are even allowed to adjust that repository.
But thank you very much for your extensive answer
Best regards,
Timo
No worries at all, happy to help!
Just a quick thought: I’m not fully familiar with your project setup, but you could also register custom view components directly in your module and use them in your App Model. That way, there’s no need to touch the “global” viewProvider.tsx file, which I’d generally recommend avoiding anyway if the customization only affects a specific module.
Hope that helps!
Best,
Denise