This module focuses on the "Output" phase of the information system. After data is captured and processed, Module 7 allows developers to transform raw MariaDB rows into high-level business intelligence and professional financial documents.
<up-chart>A powerful data visualization component that renders interactive charts. It is designed to sit at the top of dashboards to provide an immediate overview of financial health.
Key Attributes:
type: The visual format ("bar", "line", "pie", "doughnut").
api: The backend endpoint that returns a JSON array of labels and values.
colors: (Optional) A comma-separated list of hex codes to override the theme.
Developer Recipe (Emmet):
Emmet code
// A bar chart showing monthly sales from the ledger
up-chart#salesChart[type="bar" api="acc_ledger:monthly_summary"]
<up-report> / <up-reportf>These elements are the "Print Engine" of Unicorn P. While grids are for editing, <up-report> is for generating A4-ready, printable documents like Invoices, Balance Sheets, and Profit & Loss statements.
<up-report>: The main container that handles pagination, headers, and footers.
<up-reportf>: (Report Field) A specialized cell within a report that handles specific formatting (e.g., forcing a negative number to appear in red or in parentheses).
Key Attributes:
template: The name of the sys_object containing the report's HTML/Emmet structure.
export: (Boolean) Enables "Export to PDF" and "Export to Excel" buttons.
Developer Recipe:
Emmet code
// Generating a printable Invoice
up-report#inv_print[object="acc_invoice" template="invoice_template" export]
<up-display> / <up-celldisplay>Used for high-density, read-only information displays. They are more efficient than input fields when the user only needs to view data.
<up-display>: Used for standalone values (e.g., a "Total Balance" badge at the top of a screen).
<up-celldisplay>: Used inside grids or lists to format data based on its type (e.g., turning a 0/1 into a Yes/No badge or formatting a currency).
Key Attributes:
type: ("currency", "date", "status", "badge")
value: The raw data to be formatted.
Developer Recipe:
Emmet code
// A currency display for the total amount
up-display#total_amount[type="currency" value="1500.50"]
For "Money & Gain," always offer your clients an "Export to Excel" option on every report. In your Backend JS API, when a user triggers an <up-report>, you can use the sys_log to track which reports are most used, helping you decide which features to charge more for in the future.
Ready to move to Module 8: Workflow & Business Process (BPMN)?