Skip to main content

Dialogs

buildfire.dialog#

buildfire.dialog is used to show the dialogs in app and control panel. Whether you want to display an alert that needs to grab users attention, ask for a confirmation or perform a more complex operation inside a dialog window, buildfire.dialog has all of it covered. This is a built-in API that allows your control or widget to use built-in dialogs.

Methods#

alert()
#

buildfire.dialog.alert(options, callback)

The alert method displays an alert popup with a specified message and an OK button. An alert popup is often used if you want to make sure information comes through to the user.

buildfire.dialog.alert({
message: "You don't have permission to access this section!",
});

options#

NameTypeRequiredDescriptionDefault
titlestringnoDialog title."Alert"
subtitlestringnoDialog subtitle. If empty, no subtitle will be displayed
messagestringyesMessage or html to be displayed inside of the dialog
isMessageHTMLbooleannospecifies whether message should be rendered as sanitized html instead of plaintextfalse
okButtonTextstringnoChanges the ok button text"OK"

callback(err, data)#

Callback function after the end user clicked on button. Data is always undefined since there is only one button that can be clicked.

NameTypeDescription
errstringerror string, null when operation is successfull
dataobjectThis value is always null since there is only one button that can be clicked

More Examples#

buildfire.dialog.alert({
title: "Access Denied!",
subtitle: "Operation not allowed!",
message: "You don't have permission to access this section!",
});
buildfire.dialog.alert(
{
title: "Access Denied!",
subtitle: "Operation not allowed!",
message: `You don't have permission to access this section! Ask your site administrator to enable this for you! More info <a href="#">here</a>`,
isMessageHTML: true,
},
(err, data) => {
if (err) console.error(err);
buildfire.analytics.trackAction("access-denied");
}
);

confirm()
#

buildfire.dialog.confirm(options, callback)

The confirm method displays a confirm dialog with a specified message, along with a Confirm and a Cancel button. A confirm dialog is often used if you want the user to verify or accept something. Confirm dialog can not be dismissed by clicking on backdrop and will force user to either click Confirm or Cancel button.

buildfire.dialog.confirm(
{
message: "Are you sure you want to go back? Your edits might not be saved.",
},
(err, isConfirmed) => {
if (err) console.error(err);
if (isConfirmed) {
//Go back
} else {
//Prevent action
}
}
);

options#

NameTypeRequiredDescriptionDefault
titlestringnoDialog title."Alert"
subtitlestringnoDialog subtitle. If empty, no subtitle will be displayed
messagestringyesMessage or html to be displayed inside of the dialog
isMessageHTMLbooleannospecifies whether message should be rendered as sanitized html instead of plaintextfalse
confirmButtonConfirmButtonnoChanges the confirm button text{ type: "primary", text: "Confirm"}
ConfirmButton#
NameTypeRequiredDescriptionDefault
typestringnoButton type, used to show the button style. Styles available: default, primary, success, info, warning, danger"primary"
textstringnoButton text"Confirm"

callback(err, isConfirmed)#

Callback function after the end user clicked on button.

NameTypeDescription
errstringerror string, null when operation is successfull
isConfirmedbooleanEither true or false indicating if dialog was confirmed.

More Examples#

buildfire.dialog.confirm(
{
message: "Are you sure you want to delete this item.",
confirmButton: {
text: "Yes",
type: "danger",
},
},
(err, isConfirmed) => {
if (err) console.error(err);
if (isConfirmed) {
//Delete item
} else {
//Prevent action
}
}
);

show()
#

buildfire.dialog.show(options, callback)

This function is the most advanced one and allows user full control over dialog. It can be useful when there is more than one possible feedback option from user.

buildfire.dialog.show(
{
title: "Couldn't import user",
subtitle: "User already exists",
message:
"The user with email <b>john@example.com</b> you are trying to import already exists.",
isMessageHTML: true,
showCancelButton: true,
actionButtons: [
{
text: "Try again",
type: "primary",
action: () => {
console.log("Import user again");
},
},
{
text: "Continue without importing",
type: "primary",
action: () => {
console.log("Continue importing without this user");
},
},
],
},
(err, actionButton) => {
if (err) console.error(err);
if (actionButton && actionButton.text == "Cancel") {
console.log("Cancel clicked");
}
}
);

options#

NameTypeRequiredDescriptionDefault
titlestringyesDialog title
subtitlestringnoDialog subtitle. If empty, no subtitle will be displayed
messagestringyesMessage or html to be displayed inside of the dialog
isMessageHTMLbooleannoSpecifies whether message should be rendered as sanitized html instead of plaintextfalse
showCancelButtonbooleannoSpecifies whether "Cancel" button will be displayedfalse
cancelButtonTextstringnoCance button text"Cancel"
forceActionbooleannoForses user to click one of the buttons to dismiss modalfalse
actionButtons[object]noArray of action buttons to be displayed in dialog footer[]
options.actionButtons[]#
NameTypeRequiredDescriptionDefault
textstringyesAction button text
typestringyesButton type, used to show the button style. Styles available: default, primary, success, info, warning, danger"primary"
actionfunctionyesAction to be called when the button is clicked() => {}

callback(err, actionButton)#

Callback function after the end user clicked on button.

NameTypeDescription
errstringerror string, null when operation is successfull
actionButtonobjectAction button that was clicked

toast()
#

buildfire.dialog.toast(options, callback)

Toast can be used to deliver a short simple message to user such as "Saved" or "Edited", or just to indicate that some accion was or was not successfull without asking for additional feedback

buildfire.dialog.toast({
message: "Importing users...",
});

options#

NameTypeRequiredDescriptionDefault
messagestringyesToast message to be displayed
durationnumbernoToast duration in milliseconds8000
typestringnoChanges toast background color. Options: default, primary, success, info, warning, danger"info"
hideDismissButtonbooleannoHide/show dismiss button on the right side of the toastfalse
actionButtonobjectnoAction button added to the toast if optional feedback is required from user
options.actionButton#
NameTypeRequiredDescriptionDefault
textstringyesAction button text
actionfunctionyesFunction to be called when action button is clicked

callback(err, data)#

Callback is called only when action button is present and clicked

NameTypeDescription
errstringerror string, null when operation is successfull
dataobjectToast action button that was clicked

More Examples#

buildfire.dialog.toast({
message: "Successfully imported users",
type: "success",
});
buildfire.dialog.toast({
message: "User import failed",
type: "danger",
actionButton: {
text: "Try again",
action: () => {
console.log("Import user again");
},
},
});
note

If isMessageHTML is true, message content will be tested for cross site scripting and data will be sanitized.