Form Custom Dashboard

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!

Routing

Link Field Custom Queries

Last modified 2yr ago

Copy link

Contents

DashboardElement Interface

Basic Usage

Attachment Dashboard Example

Assignment Dashboard Example