Text Component

The Text component displays text content in your views. It supports both static text and dynamic content through formulas, with markdown formatting for rich text display.

Overview

Use the Text component to:

Display headings and labels
Show dynamic data from your tables
Create rich formatted content with markdown
Add instructional text or descriptions

Adding a Text Component

Open the Layout tab in your app editor
Drag the Text component from the palette onto your canvas
Select the component to open the settings panel
Configure the title, content, and styling options

Settings

Setting	Type	Description
Title	Text/Formula	Header text displayed above content
Content	Text/Formula	Body text (supports markdown)
Title Size	Dropdown	h1, h2, h3, h4, h5, or h6
Alignment	Dropdown	left, center, or right
Text Color	Color picker	Text color
Background Color	Color picker	Background color

Static Text

For simple static content, enter text directly in the settings:

Title: Welcome
Content: This is your dashboard. Select an item from the list to get started.

Dynamic Text with Formulas

Use formulas to display dynamic content:

Basic Field References

Reference table fields using {{}} syntax:

Title: {{customers.name}}
Content: Email: {{customers.email}}

Current Row Context

In a list context, use $row to reference the current record:

Title: {{$row.product_name}}
Content: Price: ${{$row.price}}

User Context

Display information about the current user:

Title: Welcome, {{$user.display_name}}!
Content: You last logged in on {{FORMAT_DATE($user.last_login, 'long')}}

Conditional Content

Use IF() for conditional display:

Content: Status: {{IF($row.is_active, 'Active', 'Inactive')}}

Calculations

Perform calculations in your content:

Content: Total: ${{$row.quantity * $row.unit_price}}

Markdown Support

The content field supports markdown formatting for rich text:

Headers

# Heading 1
## Heading 2
### Heading 3

Text Formatting

**Bold text**
*Italic text*
~~Strikethrough~~
`Inline code`

Lists

- Unordered item 1
- Unordered item 2

1. Ordered item 1
2. Ordered item 2

Links

[Link text](https://example.com)

Blockquotes

> This is a quoted block of text

Code Blocks

```
function example() {
  return "Hello World";
}
```

Tables

| Column 1 | Column 2 |
|----------|----------|
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Combining Markdown and Formulas

Mix markdown formatting with dynamic formulas:

## Order Summary

**Customer:** {{$row.customer_name}}

**Items:**
- Product: {{$row.product_name}}
- Quantity: {{$row.quantity}}
- Unit Price: ${{$row.unit_price}}

**Total:** ${{$row.quantity * $row.unit_price}}

---

*Order placed on {{FORMAT_DATE($row.created_at, 'long')}}*

Title Sizes

Choose the appropriate heading level for your content hierarchy:

Size	HTML Element	Use Case
h1	`<h1>`	Page titles, main headings
h2	`<h2>`	Section headings
h3	`<h3>`	Subsection headings
h4	`<h4>`	Minor section headings
h5	`<h5>`	Small headings
h6	`<h6>`	Smallest headings

Alignment

Control how text is positioned:

Alignment	Description
left	Align text to the left (default)
center	Center text horizontally
right	Align text to the right

Styling

Text Color

Set a custom text color:

Use the color picker to select a color
Or enter a hex value: #1a1a1a

Supports formulas for dynamic colors:

{{IF($row.is_urgent, '#dc2626', '#171717')}}

Background Color

Add a background color for emphasis:

Use the color picker or hex value
Great for callout boxes and highlights
Supports dynamic colors with formulas

Visibility

Control when the text component is visible:

Visibility Formula: {{$row.status = 'active'}}

The component only displays when the formula evaluates to true.

Common Use Cases

Welcome Message

Title: Welcome back, {{$user.display_name}}!
Title Size: h2
Content: Here's an overview of your recent activity.
Alignment: left

Empty State

Title: No items found
Title Size: h3
Content: Try adjusting your filters or create a new item to get started.
Alignment: center
Visibility: {{COUNT(items.*) = 0}}

Title: (empty)
Content: **Attention:** This record is pending review.
Background Color: #fef3c7
Visibility: {{$row.status = 'pending'}}

Summary Card

Title: Monthly Summary
Content:
**Total Orders:** {{COUNT(orders.*)}}
**Revenue:** ${{SUM(orders.total)}}
**Avg Order:** ${{AVG(orders.total)}}

Help Text

Title: (empty)
Content:
> **Tip:** Click on any row to view details. Use the search bar to find specific items.

Dynamic Instructions

Title: Next Steps
Content: {{IF($row.status = 'draft',
  'Fill in all required fields and click Submit.',
  IF($row.status = 'pending',
    'Your submission is being reviewed.',
    'Your submission has been approved.'))}}

Best Practices

Content Hierarchy

Use heading sizes consistently
Reserve h1 for page titles
Use h2-h4 for section headings

Readability

Keep paragraphs short
Use bullet points for lists
Add spacing between sections

Dynamic Content

Provide fallback values for empty fields:

{{COALESCE($row.description, 'No description available')}}

Format numbers and dates for readability:
```
${{FORMAT_NUMBER($row.price, 2)}}
```

Accessibility

Use descriptive headings
Ensure sufficient color contrast
Don’t rely solely on color for meaning

Performance

Avoid complex calculations in heavily repeated text
Use simple formulas when possible
Cache computed values in table fields if needed

Troubleshooting

Common Issues

Issue	Cause	Solution
Blank content	Invalid formula	Check formula syntax and field names
Markdown not rendering	Special characters	Escape special characters properly
Wrong formatting	Missing markdown	Add proper markdown syntax
Text cut off	Container too small	Resize component or use scrolling

Formula Debugging

Start with static text to verify the component works
Add simple formulas: {{$row.name}}
Build up complexity gradually
Check browser console for errors

List Component - Display data in various formats
Button Component - Add interactive buttons
Image Component - Display images

Next Steps

Explore more EmberBlocks features:

Formulas - Learn formula syntax and functions
Actions - Trigger operations from buttons
Views - Organize components in pages