Dirty Handling - modify the Veto Dialog message

Client
1

Hi everyone,

I would like to use the Veto Dialog for Dirty Handling (when a user leaves a page with data being unsaved) as described here:
<INTERNAL_LINK>
Unfortunately, I do not see any way to change the Veto Dialog`s message via props and thus provide the user more suitable information:

export interface VetoDialogProps {
    /**
     * custom component to change the display of the list of affected activities
     */
    readonly activitiesView?: React.ComponentType<ActivitiesViewProps>;
    /**
     * React children
     */
    readonly children?: React.ReactNode;
}
/**
 * Props of a custom activities view.
 */
export interface ActivitiesViewProps {
    /** The Activity for which a cancel confirmation is required. */
    readonly triggeringActivity: Activity;
    /** Set of affected activities that are about to be cancelled. */
    readonly affectedActivities: Activity[];
}

As I could not find a solution to alter the dialog texts, my current approach is to build a dialog myself and use the Dirty Handling Actions, which leads to:

If you do not use the VetoDialog, you have to take care of dispatching a RESPONSE_CANCEL_CONFIRMATION action, if there are activities which need a cancelConfirmation, yourself.
(A12 Dirty Handling docs)

So, I am wondering - is there a way to modify the dialog?

Thanks,

Sandra

2

The built-in veto dialog has the following contents:

  1. the localized message found for the localizable key “veto.message”, which can use the variable activityId as localizable arg.
  2. the localized message found for the localizbale key “veto.unsavedOrLockedActivties”
  3. if the prop dirtyOrLockedActivities is defined, it will show the activitiesView component provided via the prop or a DefaultActivitiesView if the prop is undefined. This is the component, that renders the list of affected dirty/locked Activities

The two messages should be modifiable by configuring a custom localizer in the localizer service chain of the application config, which can provide arbitrary localized content for the two localizable keys.

The activitiesView can be anything, e.g. just an empty div, in order to show nothing, or some more advanced component, that could give the user more info about where data is unsaved via the ActivitiesViewProps triggeringActivity and affectedActivities. Maybe some domain specific info to display could be retrieved from these given activities instead of just listing their ids.

Alternatively, as you already mentioned, you could provide a custom veto dialog yourself. You just need to make sure to dispatch the ActivityActions.responseCancelConfirmation action, when the buttons of your dialog are clicked. You can have a look into our SampleApplication code. The built-in DirtyHandlingViews.VetoDialog is used in the Devapp component in general.devapp.tsx. This would be the place, where your custom dialog had to be placed instead.

3

Sorry, I totally forgot to answer!
Thanks a lot, that worked :slight_smile: