Renovation
Search…
Custom Dialog
You can show your own set of dialog using this set of commands.

Basic Usage

1
const dialog_fields = [
2
// List of DocFields
3
{ fieldname: "name", label: "Name", fieldtype: "Data" }
4
]
5
​
6
const dialog_data = {
7
// the title to be shown on the modal window
8
title: "Test Dialog",
9
​
10
// the fields to fill in the modal
11
fields: dialog_fields,
12
​
13
// the events to fire when specific fields change
14
events: {
15
name: (core, doc) => {}
16
},
17
​
18
// to define the behaviour of the main button
19
primary_button: {
20
// you can set any label you want
21
label: "Ok!",
22
​
23
// function called on clicking this main button
24
// modal will auto close after click
25
onclick: (core, doc) => {
26
// do something
27
}
28
},
29
close_button: {
30
label: "Close",
31
onclick: (core, doc) => {
32
// say bye ?
33
}
34
}
35
}
36
​
37
core.bus.post({
38
id: "show_dialog",
39
data: dialog_data
40
});
Copied!
The above code snippet can get you going with the dialog box in no time. You can control the fields and you can listen on events raised on them

Prevent Window Auto Close

If you would like to do some validations before the user window is closed, you can declare the onclick function with three params. The third param, usually named close_dialog is a function which when invoked will actually close the dialog/modal.
If the third function was declared and was not called, the modal will not close.
1
...
2
​
3
primary_button: {
4
label: "Save",
5
onclick: (core, doc, close_dialog) => {
6
if (core.model.saveDoc(doc)) {
7
// the window can close now.
8
close_dialog()
9
} else {
10
// something went wrong, let user recheck what he entered
11
alert("Please try again")
12
}
13
}
14
}
15
​
16
...
Copied!