Overview

Account information is displayed in many locations throughout the app. To consolidate information or provide a more convenient user experience, you can customize when and what these accounts display.

Account information is displayed using multiple rows. For example, the checking account display on the dashboard view shows the following information on different rows:

  • Account name
  • Available balance
  • Balance
  • Pending balance (if available)

To view all account displays in our DevTools, select Themed Components, then Account Display.

To customize an account display:

  1. Copy account_display.json from client/default/config/account_display.json to institutions/config/accout_display.json.
  2. Find the location you want to edit.
  3. If you want, change the max number of rows (num_rows_max) that display at this location.
  4. Add to or edit that location’s balance rows.

Locations

Location Type
DASHBOARD
ACCOUNTS_LIST
ACCOUNT_DETAILS_HEADER
HOME_ACCOUNT_DETAILS_ADDITIONAL_BALANCES
EXTERNAL_ACCOUNT_DETAILS_ADDITIONAL_BALANCES
TRANSACTION_DETAILS
TRANSFER_SOURCE
TRANSFER_DESTINATION
CROSS_ACCOUNT_TRANSFER
PAYOUT_SOURCE
PAYOUT_DESTINATION
PAYOUT_DETAILS
PAYMENT
PAYMENT_DETAILS
REMOTE_DEPOSIT
QUICK_SAVE_SOURCE
QUICK_SAVE_DESTINATION
DOCUMENT_LIST
ACCOUNT_REORDER
INSTITUTION_DETAILS_ACCOUNTS

Account Display Customizations

balance_rows display rows of information wherever an account is shown. You can add new rows and customize them.

Customization Description
type Type of data that displays.
display_option When the row displays.
balance_behavior The text color used.
show_alert A boolean which shows an alert on the row and sets the text color to DESTRUCTIVE.
icon_type Used on the account details view. Lets the user edit a specific detail or copy it to their clipboard. Defaults to NONE. Can set to EDIT or COPY.

Type of Data

type indicates what data gets displayed. The data displays on one or both sides of the row.

Type Left Text (Example) Right Text (Example)
BALANCE Balance $1.23
AVAILABLE_BALANCE Available Balance $1.23
PENDING_BALANCE Pending Balance $1.23
PENDING_CREDIT Pending Credit $1.23
ORIGINAL_BALANCE Original Balance $1.23
AVAILABLE_CREDIT Available Credit $1.23
CREDIT_LIMIT Credit Limit $1.23
MINIMUM_PAYMENT Minimum Payment $1.23
MINIMUM_PAYMENT_LEFT_ONLY Minimum payment of $1.23 due
PAYOFF_BALANCE Payoff Balance $1.23
STATEMENT_BALANCE Statement Balance $1.23
DUE_DATE Due Date March 4, 2016
DUE_DATE_LEFT_ONLY Payment Due On Fri, Mar 4
DUE_DATE_WITH_AMOUNT_LEFT_ONLY Min $1.23 Due On Fri, Mar 4
INSTITUTION_NAME Epic Bank
INSTITUTION_NAME_ACCOUNT_NUMBER Epic Bank 123456789
ACCOUNT_NUMBER Account Number 123456789
ACCOUNT_NUMBER_ONLY 123456789
ACCOUNT_NUMBER_BALANCE 123456789 $1.23
PRODUCT_NAME Product Name Big Checking
ACCOUNT_NAME Account Name Big Checking
ACCOUNT_NAME_ONLY Big Checking
ACCOUNT_NAME_BALANCE Big Checking $1.23
ACCOUNT_NAME_AVAILABLE_BALANCE Big Checking $1.23
ACCOUNT_NAME_WITH_ACCOUNT_NUMBER Big Checking 123456789
ACCOUNT_NICKNAME Nickname Bob’s Big Checking
APR APR (%) 3.000%
APY APY (%) 3.000%
INTEREST_RATE Interest Rate 3.000%
ROUTING_NUMBER Routing Number 123456789
MINIMUM_BALANCE Minimum Balance $1.23
HOLDINGS_VALUE Holdings Value $1.23
LAST_PAYMENT Last Payment $1.23
MATURES_ON Matures On March 4, 2016
PURCHASE_APR Purchase APR (%) 3.000%
STATEMENT_DATE Statement Date March 4, 2016
CASH_ADVANCE_APR Cash Advance APR (%) 3.00%
PROPERTY_TYPE Property Type Jewelry
PAST_DUE_AMOUNT Past Due Amount $1.23
DAYS_PAST_DUE Days Past Due March 4, 2017
STARTED_ON Started On March 4, 2017

Define When the Row Displays

display_option controls when the row displays.

Display Option Description
ALWAYS_SHOW Always displays.
NEVER_SHOW Never displays.
ONLY_IF_AVAILABLE Only displays if the account has the values the type requires.
ONLY_IF_NONZERO Only displays if either the left or right section of the type displays a non-zero balance.
ONLY_IF_PAST_DUE Only displays if there’s a past due balance on the account.

Set the Text Color Behavior

balance_behavior sets the text color for the info you’re displaying. If your type doesn’t contain a balance, you must set it to NON_BALANCE.

By default, all balance behaviors use the STANDARD text color.

This table shows all balance behaviors and any additional text colors they use:

Balance Behavior Text Color
NON_BALANCE Used for a type that’s not associated with a value, like ACCOUNT_NAME. Always uses STANDARD.
STANDARD_BALANCE Always uses STANDARD.
ASSET_BALANCE If the balance is overdrawn, uses LIABILITIES.
LIABILITY_BALANCE If the balance contains excess money, uses GAINS.
PAST_DUE_ASSET_BALANCE If the balance is overdrawn, uses LIABILITIES. If the balance is past due, overrides any other text color and uses DESTRUCTIVE.
PAST_DUE_LIABILITY_BALANCE If the balance contains excess money, uses GAINS. If the balance is past due, overrides any other text color and uses DESTRUCTIVE.
PAST_DUE If the balance is past due, uses DESTRUCTIVE.