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 |
|
Banking |
|
Commerce |
|
Insights |
|
Payroll |
|
Taxes |
|
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.
{
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 |
|
|
Accounting | Accounts Receivable |
|
|
Accounting | Balance Sheet |
|
|
Accounting | Profit And Loss |
|
|
Accounting | Earnings* |
|
|
Accounting | Income/Expenses* |
|
|
Banking | Bank Accounts |
|
|
Banking | Bank Balances |
|
|
Banking | Bank Statements |
|
|
Commerce | Commerce Data |
|
|
Insights | News Feed |
|
|
Insights | Reconciliation Summary |
|
|
Payroll | Payroll Data |
|
|
Taxes | Tax Information |
|
|
*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 |
---|---|
|
|
|
|
|
|
|
|
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.
{
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.
{
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.