Views

Views are the pages within your EmberBlocks app. Each view contains components arranged on a canvas that display data and enable user interactions.

What is a View?

A View is a single page in your application. Views contain:

• Components - UI elements like lists, text, buttons, and images
• Layout - How components are arranged on the page
• Navigation - How users move between views

Creating Views

To create a new view:

1. Open your app in the Layout tab
2. Click the + button in the Views sidebar
3. Enter the view details:

Field	Required	Description
Name	Yes	Display name shown in the sidebar
Icon	No	Icon displayed next to the view name
Description	No	Brief description of the view’s purpose

View Types

EmberBlocks supports different view types for common patterns:

Blank View

• Start with an empty canvas
• Full control over layout and components
• Best for custom interfaces

Form View

• Pre-configured for data entry
• Optimized for creating or editing records
• Includes validation support

Detail View

• Designed for displaying a single record
• Uses the Details component for field display
• Often linked from list views

The Canvas

The canvas is where you build your view’s layout:

Component Placement

• Drag components from the palette to the canvas
• Components stack vertically
• Side-by-side placement allowed when total width is 100% or less
• Grid-based snapping (12-column grid)

Drop Zones

Valid drop positions include:

• Above the first component
• Between any two components
• Below the last component

Visual indicators show valid drop zones as you drag.

Selecting Components

• Click a component to select it
• Selection shows resize handles
• Settings panel opens on the right

Resizing Components

• Use corner handles for proportional resize
• Use edge handles for width or height only
• Hold Shift to maintain aspect ratio
• Minimum and maximum sizes are enforced

View Sidebar

The sidebar on the left manages your views:

View List

• Shows all views with icons and names
• Drag to reorder views
• Active view is highlighted
• Click to navigate between views

View Folders

Organize views into collapsible folders:

1. Click the folder icon to create a new folder
2. Drag views into folders to organize
3. Click folder header to expand/collapse
4. Drag folders to reorder

Hidden Views

Views can be marked as hidden:

• Hidden views appear in a separate “Hidden” section
• Not shown in the published app’s navigation
• Useful for admin-only or linked views

View Settings

Click the gear icon on a view to access settings:

General Settings

Setting	Description
Name	The display name in navigation
Slug	URL-friendly identifier (auto-generated)
Icon	Icon shown in the sidebar
Description	Optional description
Is Home	Set as the default landing page
Is Hidden	Hide from navigation in published app

URL Slugs

Each view has a URL slug:

• Auto-generated from the view name
• Used in the URL: /app-slug/view-slug
• Can be customized for cleaner URLs

Home View

Designate one view as the home page:

• First view users see when opening your app
• Only one view can be home at a time
• Mark as home in view settings

Component Palette

The palette provides components to add to your canvas:

Component	Description
List	Display data in tables, lists, kanban boards, or cards
Text	Static or dynamic text with markdown support
Button	Trigger actions like CRUD operations
Image	Display images with various fit modes
Details	Show field values for a single record
Chart	Visualize data with various chart types
Filter	Standalone filtering UI
Map	Geographic visualization with markers
Calendar	Event calendar with multiple views
Comments	Threaded discussions on records

See the Components section for detailed documentation.

Settings Panel

When a component is selected, the Settings Panel appears:

Panel Tabs

Tab	Contents
General	Basic settings like title, data source
Style	Visual customization options
Advanced	Visibility conditions, advanced features

Real-time Preview

• Changes apply immediately on the canvas
• Test your configuration as you work
• Reset to defaults if needed

Preview Mode

Test your view before publishing:

1. Click the Preview button in the header
2. Interact with components as a user would
3. Toggle between device sizes (mobile, tablet, desktop)
4. Exit preview to return to editing

View Navigation

Linking Between Views

Use the Navigate action to move between views:

1. Add a Button component
2. Set its action to Navigate
3. Select the target view
4. Optionally pass parameters

Parameters

Pass data between views using URL parameters:

/inventory/item-detail?id={{$row.id}}

Access parameters in formulas with $params.paramName.

Best Practices

View Organization

• Group related views into folders
• Use clear, descriptive names
• Set logical default (home) view

Layout Design

• Start with the most important content
• Use consistent component sizing
• Consider mobile responsiveness

Performance

• Limit components per view for best performance
• Use pagination on large data lists
• Apply filters to reduce data loading

User Experience

• Provide clear navigation paths
• Use consistent styling across views
• Add helpful descriptions and labels

Examples

Dashboard View

A typical dashboard might include:

• Text component for welcome message
• Chart components for KPIs
• List component showing recent items
• Button to navigate to detailed views

Data Entry View

For creating records:

• Text component with instructions
• Form fields for data input
• Save and Cancel buttons
• Validation feedback

Record Detail View

For viewing a single record:

• Details component showing all fields
• Related data in nested lists
• Edit and Delete action buttons
• Comments component for discussion

Next Steps

Continue learning about EmberBlocks features:

• Components - Detailed component documentation
• Formulas - Add dynamic data
• Actions - Create interactive operations