Confirmation Message for a footer button

[dmytro-clear-peat]

We are trying to get a delete function for the workflows task, and it works partially for now.
Is it possible to configure the model so, that we get a confirmation dialog for a button in the Task footer. UI designer doesn’t give us such option.

Thank you

[baschir-loud-bluff]

Seems that we have confirmations only for repeat buttons. Please file a requirement.

If you want to consider it, it should also be quite easy as a customizing. I would customize the dispatch config that dispatches the original event in a modal “on confirm button click”.

[dmytro-clear-peat]

Hey bjaghoori,
thank you for the answer.
How can I open a confirmation dialog?

My idea is:

• Create a custom saga-event
• Catch the event and open a dialog
  • How to open a dialog, should I extend a view component and add there a new dialog-component?
    I couldn’t find anything like “openDialog(text)” in code. Do you maybe have a tutorial or documentation page for me?
• On “Ok” run the worflows event, close dialog.

Thanks

[baschir-loud-bluff]

I did thit recently myself in the SME. My code is a bit more generic than you need, but I hope you get the point (custom eventHandlers prop).

import React from "react";
import { useDispatch, useSelector } from "react-redux";

import { View } from "@com.mgmtp.a12.client/client-core/lib/core/view";
import {
	FormEngineActions,
	FormEngineStateAdapter,
	FormEngineViews
} from "@com.mgmtp.a12.client/client-core/lib/extensions/form-engine";
import { DispatchConfiguration } from "@com.mgmtp.a12.formengine/formengine-core/lib/view";

export type EnhancedFormEngineProps = View & FormEngineViews.FormEngineProps & EventHandlers;

export type EventHandlers = {
	eventHandlers?: Partial<DispatchConfiguration>;
};

export function EnhancedFormEngine(props: EnhancedFormEngineProps) {
	const defaultFeProps = useDefaultProps(props);
	const fePropsWithEventHandlers: FormEngineViews.FormEngineTplProps = {
		...defaultFeProps,
		eventHandlers: {
			...defaultFeProps.eventHandlers,
			...props.eventHandlers
		}
	};
	return (
		<FormEngineViews.FormEngineTpl {...fePropsWithEventHandlers} />
	);
}

function useDefaultProps(props: FormEngineViews.FormEngineProps) {
	const dispatch = useDispatch();
	const stateProps = useSelector(state => FormEngineStateAdapter.mapStateToProps(state, props));
	const dispatchProps = FormEngineActions.mapDispatchToProps(dispatch, props);
	return {
		...props,
		...stateProps,
		...dispatchProps
	};
}