The T account control is fully responsive, and uses 100% of the available width of the container in which it is embedded. Depending on the available width, the number of T accounts on each line is updated dynamically to fit the available space.

On mobile devices, the T account control requires the full available width in order to display all its content.

The minimum width of each T account element is 20 rem (320 px). The width of the T account element grows until it reaches a breakpoint where enough width is available to render 2 or more T accounts on one line, leaving a space of 1 rem (16 px) between the T account items.

The T account control consists of a header toolbar, an account group heading, and individual T account elements. The header toolbar and account group heading can be hidden on the API level.

Header Toolbar

• A – Title: Provides a short and meaningful summary of the control’s content.
• B – Total Balance: Calculates the overall balance based on total credit and debit amounts of the ledger accounts included.
• C – View Switch: Switches the view between the T account view and table view.
• D – Settings: Displays a settings dialog, allowing users to show or hide additional information about accounts.

Account Group Heading

Each account group heading uses the expand/collapse behavior of the sap.m.Panel control, with an additional total balance indicator for the T accounts in the group as well as Expand All / Collapse All buttons. The Expand All / Collapse All buttons can be used to expand or collapse the content of all T accounts included in this account group.

• A – Expand/Collapse: Expands or collapses the group of accounts.
• B – Account Group Title: The name of the group of accounts.
• C – Group Balance: Calculates the balance based on total credit and debit entries of all T accounts included in the account group.
• D – Expand All: Expands all T accounts within the group of accounts.
• E – Collapse All: Collapses all T accounts within the group of accounts.

T Account

Every T account element consists of a heading, debit and credit content headings, and individual ledger entry blocks.

The number of individual entry blocks is unlimited and could potentially reach hundreds of blocks.

The entry blocks are nested under Credit and Debit headings. Each entry block takes 50% of the available width of the container. The credit and debit entry blocks are separated by a 1 rem (16 px) space.

• A – Expand/Collapse: Expands or collapses the T account.
• B – Account Title: The name of the T account.
• C – Account Balance: The sum of all credit and debit entries in the T account.
• D – Debit Content Heading
• E – Credit Content Heading
• F – Entry Block Amount: Provides the amount for a single ledger entry.
• G – Entry Block: Displays details of a specific ledger entry.

Each journal entry usually impacts several ledger accounts. When the user clicks an entry in a T account, the control highlights this entry and all related entries in other T accounts, which helps identify matching entries in different accounts.

You can allow users to add color indicators to specific journal entries.

The T account control supports this on API level. However, the implementation should be done on the app level.

By default, the control arranges T accounts dynamically to consume as little space as possible within the column grid. However, users can rearrange the T accounts freely by dragging them around.

If you would like to let users store their reordered layouts, use the variant management control.

The view settings dialog enables the users to show or hide certain attributes of each entry block in a T account.

Additionally, you can show or hide labels that precede the values.