Skip to main content
If you want to get up and running quickly with a proven financial report dashboard that matches your colors, fonts, and branding, then the Embeddable User Interface is your best bet. Tight’s Report Dashboard is a full-featured embedded experience (including all drill-down rows) for everything related to reports; all you need to do is add a “Reports” item to your product’s navigation. Report Dashboard Demo

​
1. Initializing the Embedded Experience

To initialize the Tight Embedded experience in your project, follow the instructions on Embedding Tight’s white-labelled UI.

​
2. Adding the Report Dashboard to your app

To render the Report Dashboard, you will need to provide the elementId parameter, which is the HTML id of the main <div> where you would like the Report Dashboard to render. When your user taps on your “Reports” navigation CTA, you simply need to invoke the following line of javascript: 
Hurdlr.renderScreen(elementId, 'reportDash');

​
3. Modifying the list of reports

If you’d like to alter or re-order the list of reports being shown, you can do so by populating a reports array within the options object as follows: 
Hurdlr.renderScreen(elementId, 'reportDash', { reports: [
  Hurdlr.reports.incomeByBusiness,
  Hurdlr.reports.expensesByBusiness,
  Hurdlr.reports.profitAndLoss,
]});
Passing in an empty array ([]) will show no reports, while passing any value other than an array will cause all reports to be shown. The reports array can contain any of the following values:
ValueReport Name
Hurdlr.reports.profitAndLossProfit & Loss
Hurdlr.reports.revenuesByBusinessBusiness Income by Business
Hurdlr.reports.revenuesByClientBusiness Income by Client
Hurdlr.reports.revenueListIncome Details List with Receipts
Hurdlr.reports.personalRevenuesPersonal Income
Hurdlr.reports.expensesByBusinessBusiness Expenses by Business
Hurdlr.reports.expensesByCategoryBusiness Expenses by Category
Hurdlr.reports.expensesByClientBusiness Expenses by Client
Hurdlr.reports.expensesByVendorBusiness Expenses by Vendor
Hurdlr.reports.expenseListExpense Details List with Receipts
Hurdlr.reports.personalExpensesByCategoryPersonal Expenses by Category
Hurdlr.reports.personalExpensesByVendorPersonal Expenses by Vendor
Hurdlr.reports.recurringVendorsTotal Expenses from Recurring Vendors
Hurdlr.reports.balanceSheetBalance Sheet
Hurdlr.reports.cashFlowStatementCash Flow Statement
Hurdlr.reports.trialBalanceTrial Balance
Hurdlr.reports.agedAccountsReceivableAged Accounts Receivable
Hurdlr.reports.agedAccountsPayableAged Accounts Payable
Hurdlr.reports.scheduleCSchedule C
Hurdlr.reports.form1065Form 1065
Hurdlr.reports.form1120SForm 1120-S
Hurdlr.reports.form1120Form 1120
Hurdlr.reports.t2125T2125
Hurdlr.reports.taxSummaryTax Details (for tax filing)
If you prefer for the list of reports to not be broken into sections, you can also set showReportSections to false: 
Hurdlr.renderScreen(elementId, 'reportDash', { reports: [
    Hurdlr.reports.incomeByBusiness,
    Hurdlr.reports.expensesByBusiness,
    Hurdlr.reports.profitAndLoss,
  ],
  showReportSections: false
});

​
4. Customizing the UI to match your branding

Tight’s API team can quickly customize the UI to match your branding. Please follow the instructions on Customizing the embedded UI to match your branding. Some examples of customized experiences are shown below: Dark mode demo Report Dashboard Demo of custom styling Report Dashboard Demo of custom styling #2