Renovation
Search…
Form Custom Dashboard
You can add custom dashboards to Form view, beside the Attachments and Tags.
You have to get familiarized with the interface DashboardElement, which is the basic building block of custom dashboards.

DashboardElement Interface

1
interface DashboardElement {
2
type: "text" | "link" | "link-href" | "btn" | "icon-btn" | "loop";
3
/** When type = Text */
4
text?: string;
5
/** Property in context doc */
6
property?: string;
7
class?: string;
8
style?: string;
9
target?: string;
10
/** Type: icon-btn */
11
icon?: string;
12
​
13
onclick?: (
14
core: Renovation,
15
doc: RenovationDocument,
16
frm: FormController
17
) => void;
18
/** type: link-href */
19
href?: (item: unknown) => string;
20
/** Router link (type: link) (Returns array of route) */
21
link?: (item: unknown) => string[];
22
/** type: loop */
23
template?: DashboardElement[];
24
}
Copied!

Basic Usage

You have to post to form_dashboard_item with the dashboard data
1
const dasboardData = {
2
// some random id to distinguish your dashboard
3
id: "test_dashboard",
4
​
5
header: DasboardElement[],
6
items: DasboardElement[],
7
itemsClass,
8
itemsMaxHeight,
9
itemsStyle,
10
itemsListClass,
11
itemsTemplate: DasboardElement[],
12
footer: DasboardElement[],
13
​
14
// optional init function
15
// this gets executed onload of form
16
init: (core, doc, frm) => {
17
},
18
​
19
// optional function that gets executed whenever
20
// frappe-docevent gets updated
21
onDocInfoLoaded: (core, doc, frm) => {
22
},
23
​
24
// optional function to decide whether to show this dash or not
25
condition: (core, doc, frm) => {
26
}
27
};
28
​
29
core.bus.post({
30
id: "form_dashboard_item",
31
data: dasboardData
32
});
Copied!

Attachment Dashboard Example

1
const dashData = {
2
condition: (core, doc) => {
3
return !doc.__islocal;
4
},
5
header: [
6
{ type: "text", text: "Attachments", class: "title" },
7
{
8
type: "icon-btn",
9
icon: "plus",
10
class: "p-0",
11
onclick: (core, doc) => {
12
this.openUploader(null);
13
}
14
}
15
],
16
init: function(core, doc) {},
17
onDocInfoLoaded: function(core, doc) {
18
form.updateAttachmentsDashboard();
19
},
20
failed: function() {
21
// to show load fail
22
this.items = null;
23
this.footer = [
24
{
25
type: "text",
26
text: "No Attachments",
27
class: "text-center mt-1 h6 uppercase"
28
}
29
];
30
},
31
items: [],
32
itemsTemplate: [
33
{
34
type: "link-href",
35
href: (item: { file_url: string }) =>
36
form.coreService.core.storage.getUrl(item.file_url),
37
target: "_blank",
38
class: "flex-grow-1 text-secondary small",
39
property: "file_name"
40
},
41
{
42
type: "icon-btn",
43
icon: "close",
44
onclick: (core, item) => {
45
this.deleteAttachment(item);
46
}
47
}
48
],
49
footer: []
50
};
Copied!

Assignment Dashboard Example

1
const dashData = {
2
condition: (core, doc, frm) => {
3
return !doc.__islocal;
4
},
5
header: [
6
{ type: "text", text: "Assign Doc", class: "title" },
7
{
8
type: "icon-btn",
9
icon: "plus",
10
class: "p-0",
11
onclick: (core, doc) => {
12
this.openAssignDocDialog();
13
}
14
}
15
],
16
items: [],
17
init: async function(core: Renovation, doc) {
18
this.items = [];
19
this.footer = [];
20
const r = await core.model.getUsersAssignedToDoc({
21
doctype: me.doc.doctype,
22
docname: me.doc.name
23
});
24
if (r.success && r.data && r.data.length) {
25
this.items = r.data;
26
} else {
27
this.footer = [
28
{
29
type: "text",
30
text: "No Assignments",
31
class: "text-center mt-1 h6 uppercase"
32
}
33
];
34
}
35
},
36
itemsTemplate: [
37
{
38
type: "link",
39
link: (user: GetUsersAssignedToDocResponse) => [
40
"/",
41
"form",
42
"User",
43
user.assignedTo
44
],
45
target: "_blank",
46
class: "flex-grow-1 text-secondary small",
47
property: "assignedTo"
48
},
49
{
50
type: "icon-btn",
51
icon: "close",
52
onclick: (core: Renovation, item: GetUsersAssignedToDocResponse) => {
53
core.messages.next({
54
isPrompt: true,
55
title: "Unassign Document",
56
message: `Are you sure to unassign ${item.assignedTo} from the document ?`,
57
handler: async v => {
58
if (!v) {
59
return;
60
}
61
this.unassignDocument(item.assignedTo);
62
}
63
});
64
}
65
}
66
]
67
};
Copied!