journey.dialog

Version compatibility

journey.dialog was introduced with version 4.80.0 of the JourneyApps Runtime.

Dialogs appear as blocking overlays that provides information or confirms destructive behavior. They often prompt users to make a decision.

These docs describe dialogs called from JavaScript/TypeScript. For more fully featured, dynamic dialogs, please refer to the dialog UI component docs. These dialogs are specified from the view XML and can include nested components.

Simple Dialog

Display a dialog with a message and one button.

Property	Description	Example
title	Heading displayed on the dialog
message	Main message displayed in the dialog
okButton	Dialog's OK button. This can either be a string or an object with text and color as fields. Returns true when clicked.	okButton: "Done" or okButton: { text: "Done", color: "positive" }

Example:

main.js

journey.dialog.simple({
    title: "Success",
    message: "You have successfully submitted the form.",
    okButton: "Done"
});

Confirm Dialog

Display a dialog with a message prompting the user to accept or cancel.

Property	Description	Example
title	Heading displayed on the dialog
message	Main message displayed in the dialog
okButton	Dialog's OK button. This can either be a string or an object with text and color as fields. Returns true when clicked.	okButton: "Confirm" or okButton: { text: "Confirm", color: "positive" }
cancelButton	Dialog's Cancel button. This can either be a string or an object with text and color as fields. Returns false when clicked.	cancelButton: "Cancel" or cancelButton: { text: "Cancel", color: "negative" }

Example:

main.js

journey.dialog.confirm({
    title: "Confirm your submission",
    message: "Are you sure you want to submit this form?",
    okButton: { text: "Confirm", color: "positive" },
    cancelButton: "Cancel"
});

Input Dialog

Display a dialog with a message and a text-input for simple data entry.

For more advanced composition dialogs, see the dialog component documentation.

Property	Description	Example
title	Heading displayed on the dialog
message	Main message displayed in the dialog
saveButton	Dialog's Save button. This can either be a string or an object with text and color as fields. Returns the entered value as a string when clicked.	saveButton: "Save" or saveButton: { text: "Save", color: "positive" }
cancelButton	Dialog's Cancel button. This can either be a string or an object with text and color as fields. Returns undefined when clicked.	cancelButton: "Cancel" or cancelButton: { text: "Cancel", color: "negative" }
inputLabel	Label for the input component
inputType	Type of input required from the user. Can be one of the following types (reference: HTML Input Types): email number paragraph password tel text	text
inputValue	Current value set for the input component

Example:

main.js

journey.dialog.input({
    title: "Please enter your name",
    message: "Enter your first and last names",
    inputLabel: "Answer",
    inputType: "text",
    inputValue: "",
    saveButton: "Save",
    cancelButton: "Cancel"
});

Error Dialog

Display a dialog with only a message and one button to indicate an error state.

Property	Description	Example
title	Heading displayed on the dialog
message	Main message displayed in the dialog
okButton	Dialog's OK button. This can either be a string or an object with text and color as fields. Returns true when clicked.	okButton: "Close" or okButton: { text: "Close", color: "negative" }

Example:

main.js

journey.dialog.error({
    title: "Submit Failed",
    message: "Failed to submit the form, please check validations and retry",
    okButton: "OK"
});

Styling Options

Version compatibility

Styling options were introduced in version 4.89.17 of the JourneyApps Runtime.

The style of buttons within these dialogs can be customized as follows.

Example:

main.js

await journey.dialog.error({
      title: 'Alert', 
      message:'My message', 
      okButton: {
            text: 'OK',
            color: 'cyan',
            textColor: "black",
            icon: 'fa-cube',
            iconColor: 'orange',
            labelCapitalization: 'uppercase'
     }
})