Links

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"
});