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.