Skip to main content

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

Tabs

Tabs must be declared in order to have their accompanying widget display. Please refer to the table under Widgets to see under which tab the widgets belong. The title of each tab may be customized but the id must match the table below.

The id for the tabs must match the ones listed below. They are case-sensitive.

Tab/Title

ID

Accounting

accounting

Banking

banking

Commerce

commerce

Insights

insights

Payroll

payroll

Taxes

tax

This is an example of what the tabs array within the object may look like:

To control the order in which tabs display on the dashboard, arrange them accordingly in the JSON file. To set the default tab to display on loading, include active: true for that specific tab. If no default is set, the first tab will be displayed. In the example below, the tax tab will be the default page.

JSON
{
    tabs: [
        {id:"accounting", title: "Accounting"},
		{id:"insights", title: "Insights"},
		{id:"commerce", title: "Commerce"},
		{id:"banking", title: "Banking"},
		{id: "payroll", title:  "Payroll"},
		{id:"tax", title: "Taxes", active:  true}
    ]
    }

Widgets

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.

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 order you place your widgets in the JSON file will determine the order in which they display on the dashboard.

JSON
{
    tabs: [
        {id:"accounting", title: "Accounting"},
		{id:"insights", title: "Insights"},
		{id:"commerce", title: "Commerce"},
		{id:"banking", title: "Banking"},
		{id: "payroll", title:  "Payroll"},
		{id:"tax", title: "Taxes", active:  true}
    ],
	widgets: {
		//         Accounting Tab
		"accounts payable": {column: "left"},
		"accounts receivable": {column: "right"},
		"profit and loss": {column: "left"},
		"balance sheet": {column: "right"},
		"income/expenses": {chart: true, column: "left"},
        "earnings": {chart: true, column: "right"},
		//        Commerce Tab
		"commerce data": {column: "left"},
		//        Banking Tab
		"bank accounts": {column: "left"},
		"bank statements": {column: "right"},
		"bank balances": {position:  "bottom"},
		// 		  Taxes tab
		"tax information" : {fullWidth: true},
		// 		  Payroll tab
		"payroll data": {fullWidth: true},
		//        Insights Tab
		"reconciliation summary": {column:  "right"},
		"news feed": {column:  "right"},
	}
}

Example File Configuration

This is an example of what a complete dashboard configuration file may look like. You may also view this Github repository.

JSON
{
    tabs: [
        {id:"accounting", title: "Accounting"},
		{id:"insights", title: "Insights"},
		{id:"commerce", title: "Commerce"},
		{id:"banking", title: "Banking"},
		{id: "payroll", title:  "Payroll"},
		{id:"tax", title: "Taxes", active:  true}
    ],
	widgets: {
		//         Accounting Tab
		"accounts payable": {column: "left"},
		"accounts receivable": {column: "right"},
		"profit and loss": {column: "left"},
		"balance sheet": {column: "right"},
		//        Commerce Tab
		"commerce data": {column: "left"},
		//        Banking Tab
		"bank accounts": {column: "left"},
		"bank statements": {column: "right"},
		"bank balances": {position:  "bottom"},
		// 		  Taxes tab
		"tax information" : {fullWidth: true},
		// 		  Payroll tab
		"payroll data": {fullWidth: true},
		//        Insights Tab
		"reconciliation summary": {column:  "right"},
		"news feed": {column:  "right"},
	},
    metrics: [
        'debt_asset_ratio',
        'current_ratio',
        'working_capital',
        'tangible_net_worth',
        'yoy_sales_growth',
        'fixed_charge_coverage_ratio'
    ],
    profile: [
        {title: "Company Legal Name", key: "company-legal-name"},
        {title: "Website", key: "website"}
    ],
    options: {
		metricsSparklines: true,
		taxSandboxData: true
	},
}

If you need further help implementing customization please contact us.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.