Widget Configuration

Overview

To display the widgets in the dashboard, you must edit the dashboard configuration files. These can be accessed from /private/dashboard folder of your account’s WebDAV server. The configuration files are dashboard-primary.json5 and/or dashboard-customer.json5. If you are interested in our collection of widgets, you may visit our Widget Catalog.

For more information on how to manage your files through WebDAV, refer to Uploading Files via WebDAV

Prerequisites

In order to set up widgets, you must have the initial dashboard template set up. Please visit Dashboard Customization to get started.

Widgets Set-Up

Keys

Widgets will show up under their respective tabs. To view the widgets, you must declare the tab within the tabs array. The widgets can either be aligned to the left, right, or fullwidth of the dashboard. They can also be positioned to the top or bottom. A sample file configuration can be viewed at the bottom of this page.

You can view our Widget Catalog for visuals and explanations of our many widgets.

Please note that the keys are type string and are case-sensitive.

Recommended Tab	Widget	Key	Configuration
Accounting	Accounts Payable	`accounts payable`	`column`
Accounting	Accounts Receivable	`accounts receivable`	`column`
Accounting	Balance Sheet	`balance sheet`	`column`
Accounting	Profit And Loss	`profit and loss`	`column`
Accounting	Earnings*	`earnings`	`chart`, `column`
Accounting	Income/Expenses*	`income/expenses`	`chart`, `column`
Banking	Bank Accounts	`bank accounts`	`column`
Banking	Bank Balances	`bank balances`	`position`
Banking	Bank Statements	`bank statements`	`column`
Commerce	Commerce Data	`commerce data`	`fullwidth`
Insights	News Feed	`news feed`	`column`
Insights	Reconciliation Summary	`reconciliation summary`	`column`
Payroll	Payroll Data	`payroll data`	`fullwidth`
Taxes	Tax Information	`tax information`	`fullwidth`

*If you have an existing dashboard-charts JSON file this widget must go in that file. See Metrics Cards & Charts Configuration for more details.

Configuration Options

Within the widgets object, each widget key will have another object for configuration. You must choose one of the possible values for the widget to display. Please see the configuration keys and their possible values in this table:

Configuration Key	Possible Values
`chart`	`true`
`column`	`left`, `right`
`fullwidth`	`true`
`position`	`top`, `bottom`

This is an example of what the widget object and tabs array should look like together. The example dashboard contains two tabs, “Requirements” and “Accounting”:

The order you place your widgets in the JSON file will determine the order in which they display on the dashboard.

JSON

{
  dashboards: [
        ...
        tabsets: [
            {
                id: 'requirements',
                title: 'Requirements',
                columns: [12, 0],
                widgets: [
                    {
                        key:'requirements table'
                    }
                ]
            },
            {
              id: 'accounting',
              title: 'Accounting',
              widgets: [
                  {
                      key: 'accounts payable',
                      column: 'left'
                  },
                  {
                      key: 'accounts receivable',
                      column: 'right'
                  },
                  {
                      key: 'profit and loss',
                      column: 'left'
                  },
                  {
                      key: 'balance sheet',
                      column: 'right'
                  },
                  {
                      key: 'income/expenses',
                      chart: 'true',
                      column: 'left'
                  },
                  {
                      key: 'earnings',
                      chart: 'true',
                      column: 'right'
                  }
            ]
}

Example File Configuration

This is an example of what a complete dashboard configuration file may look like. This example contains two dashboards. Please see our Dashboard Customization page for more details on setting up a dashboard template.

JSON

{
  dashboards: [
      {
          key: 'kpi',
          title: 'Key Performance Indicators',
          cssClasses: {
              title: 'mb-0 mt-0 no-shadow',
          },
          hideTabs: true,
          tabsets: [
              {
                  id: 'profile',
                  title: 'Key Performance Indicators',
                  active: true,
                  icon: 'uniform-martial-arts',
                  columns: [3, 9],
                  widgets: [
                      {
                          key: 'profile card',
                          column: 'left',
                          no_box_shadow: true,
                          info: [
                              {title: "Company Legal Name", key: "company-legal-name"},
                            {title: "Website", key: "website"}
                            ]
                      },
                      {
                          key: 'metric cards',
                          column: 'right',
                          no_box_shadow: true,
                          metrics: [
                              'debt_asset_ratio',
                              'current_ratio',
                              'yoy_sales_growth',
                              'debt_service_ratio',
                              'working_capital',
                              'tangible_net_worth'
                          ],
                          sparklines: true,
                      }
                  ],
              }
          ]
      },
      {
          key: 'main-dashboard',
          cssClasses: {
              dashboard: 'mt-2',
          },
          tabsets: [
              {
                  id: 'requirements',
                  title: 'Requirements',
                  columns: [12, 0],
                  widgets: [
                      {
                          key:'requirements table'
                      }
                  ]
              },
              {
                  id: 'accounting',
                  title: 'Accounting',
                  widgets: [
                      {
                          key: 'accounts payable',
                          column: 'left'
                      },
                      {
                          key: 'accounts receivable',
                          column: 'right'
                      },
                      {
                          key: 'profit and loss',
                          column: 'left'
                      },
                      {
                          key: 'balance sheet',
                          column: 'right'
                      },
                      {
                          key: 'income/expenses',
                          chart: 'true',
                          column: 'left'
                      },
                      {
                          key: 'earnings',
                          chart: 'true',
                          column: 'right'
                      }
                  ]
              }
          ]
      }
  ]
}

If you need further help implementing customization please contact us.