Showing a Message Dialog or Confirmation Prompt in a Creatio Freedom UI Page

Showing Message Dialogs and Confirmation Prompts from a Freedom UI page work by executing a request to show a dialog. You can pass an array of buttons plus a message. This asynchronous request will provide you with the result selected by the user. The request to execute is a crt.ShowDialogRequest. The end result is a flexible message dialog.

To display a message, you’d simply execute a crt.ShowDialogRequest as follows:

request.$context.executeRequest({
	type: "crt.ShowDialogRequest",
	$context: request.$context,
	dialogConfig: {
		data: {
			message: "You did a thing.",
			actions: [{
				key: "OK",
				config: {
					color: "primary",
					caption: "OK
				}
			}]
		}
	}
});

If you want to display a confirmation prompt, you’d do just the same, except you’d define more buttons. In this example, we’ll define the prompt that displays in this article with two different choices:

const okBtn = {
	key: "OK",
	config: {
		color: "primary",
		caption: "Do it"
	}
};
const cancelBtn = {
	key: "CANCEL",
	config: {
		color: "default",
		caption: "Cancel"
	}
};

const result = await request.$context.executeRequest({
	type: "crt.ShowDialogRequest",
	$context: request.$context,
	dialogConfig: {
		data: {
			message: "Do you want to do the thing?",
			actions: [cancelBtn, okBtn]
		}
	}
});

if (result === "OK") {
	// ok was clicked
}

Note, we can await the result to get the button (key) that the user clicked. As for the buttons, you can include a key (the tag for the button), a caption, and a color. The color choices available you can include are as follows:

• “default” = white, no color
• “primary” = blue
• “accent” = green
• “warn” = red