UI Modeler

​

Overview

• Visual modeling of UI components and pages
• Page layout and composition
• Navigation and routing structures
• Component hierarchies and containment
• Integration with service layer operations
• Support for various UI frameworks (Blazor, React, Angular, etc.)

​

Designer Configuration

• Designer ID: f492faed-0665-4513-9853-5a230721786f
• Designer Name: User Interface
• Order: 30 (appears after Services in the designer list)
• Type Systems: Common Types, User Interface Core Types, Common UI Components

​

Core Elements

​

Component

• Name: Component name (e.g., CustomerCard, ProductList)
• Type: Component type (page, layout, widget)
• Child Components: Nested components
• Properties: Component properties/inputs
• Events: Component events/outputs

var component = element.AsComponentModel();
var name = component.Name;
var children = component.ChildComponents;

​

Page

• Name: Page name (e.g., CustomerListPage, ProductDetailPage)
• Route: URL route for the page
• Layout: Parent layout component
• Components: Child components on the page

var page = element.AsPageModel();
var route = page.GetRoute();
var layout = page.Layout;

​

Layout

• Name: Layout name (e.g., MainLayout, AdminLayout)
• Sections: Named sections (header, footer, sidebar, content)
• Shared Components: Components common to all pages using this layout

​

Navigation

• Menu Items: Navigation menu structure
• Routes: Application routing configuration
• Guards: Route guards/authorization

​

Container

• Grids and flex containers
• Cards and panels
• Tabs and accordions
• Modal dialogs

​

Data-Bound Component

• Data Source: Service operation providing data
• Binding: Field mappings between data and UI
• Actions: Operations triggered by user interaction

​

UI Component Types

​

Basic Components

• Text: Display text content
• Button: Interactive button elements
• Input: Text input fields
• Checkbox: Boolean input
• Radio: Single selection from options
• Dropdown/Select: Selection from list
• Image: Display images
• Link: Navigation links

​

Layout Components

• Container: Generic container
• Row: Horizontal layout
• Column: Vertical layout
• Grid: Grid layout system
• Card: Card container
• Panel: Panel with header/footer

​

Data Components

• Table: Tabular data display
• List: List of items
• Form: Data entry form
• Detail View: Single item detail display

​

Navigation Components

• Menu: Navigation menu
• Breadcrumb: Breadcrumb navigation
• Tabs: Tabbed interface
• Stepper: Multi-step wizard

​

Modeling Patterns

​

List-Detail Pattern

1. Create a list page component
2. Bind to a query operation returning a collection
3. Add a table or list component
4. Create a detail page component
5. Add navigation from list items to detail page
6. Bind detail page to a query operation returning a single item

​

CRUD Form Pattern

1. Create a form page component
2. Add input fields for each DTO property
3. Bind form to create or update command
4. Add validation rules
5. Add submit button
6. Configure success/error handling

​

Master-Detail Layout

1. Create a page with a split layout
2. Add a list component in the master section
3. Add a detail component in the detail section
4. Bind detail to selected item from list

​

Dashboard Pattern

1. Create a dashboard page
2. Add a grid layout
3. Add card components for each widget
4. Bind each card to different data sources
5. Add refresh and filtering capabilities

​

Service Integration

​

Calling Queries

Page: CustomerList
├─ Data Source → GetCustomers (Query)
└─ Table
    ├─ Column: Name
    ├─ Column: Email
    └─ Column: Phone

​

Calling Commands

Page: CreateCustomer
├─ Form
│  ├─ Input: Name
│  ├─ Input: Email
│  └─ Input: Phone
└─ Button: Submit
    └─ Action → CreateCustomer (Command)

​

Service Proxy Detection

​

Metadata API

​

Accessing UI Models

using Intent.Modelers.UI.Api;

var uiPackage = model.GetUIPackageModel();
var pages = uiPackage.Pages;
var components = uiPackage.Components;

​

Working with Pages

var page = element.AsPageModel();
var route = page.GetRoute();
var components = page.ChildComponents;

foreach (var component in components)
{
    var componentName = component.Name;
    var componentType = component.Type;
}

​

Working with Components

var component = element.AsComponentModel();

if (component.HasDataBinding)
{
    var dataSource = component.GetDataSource();
    var serviceOperation = dataSource.Operation;
}

​

Designer Settings and Extensions

​

Component Packages

• Framework-specific components (Blazor, React, Angular)
• Third-party UI component libraries
• Custom component libraries

​

Core Types

​

Web Client Integration

• HTTP client generation
• API proxy classes
• Authentication/authorization

​

Common Modeling Scenarios

​

Creating a List Page

1. Create a new Page: CustomerListPage
2. Set route: /customers
3. Add a Table component
4. Bind to query: GetCustomers
5. Add columns for each field to display
6. Add action buttons (edit, delete)

​

Creating a Form Page

1. Create a new Page: CreateCustomerPage
2. Set route: /customers/create
3. Add a Form container
4. Add Input components for each field:
   • Name (text input)
   • Email (email input)
   • Phone (tel input)
5. Add a Submit button
6. Bind to command: CreateCustomer
7. Configure navigation on success

​

Creating a Dashboard

1. Create a new Page: DashboardPage
2. Set route: /dashboard
3. Add a Grid layout (e.g., 2x2)
4. Add Card components in grid cells:
   • Sales Summary Card → Bind to GetSalesSummary
   • Recent Orders Card → Bind to GetRecentOrders
   • Top Products Card → Bind to GetTopProducts
   • Customer Stats Card → Bind to GetCustomerStats

​

Creating Responsive Layouts

1. Create a Layout: MainLayout
2. Add sections:
   • Header (navigation bar)
   • Sidebar (side menu, collapsible on mobile)
   • Content (page content area)
   • Footer (copyright, links)
3. Configure breakpoints for responsive behavior
4. Apply layout to pages

​

Integration with Modules

• Blazor Templates: Generate Blazor components and pages
• React Templates: Generate React components
• Angular Templates: Generate Angular components
• Routing Templates: Generate routing configurations
• State Management: Generate state management code
• Validation: Generate client-side validation

​

Best Practices

1. Component Reusability: Create reusable components for common UI patterns
2. Consistent Layouts: Define layouts for different sections of your application
3. Clear Navigation: Model navigation structure explicitly
4. Data Binding: Connect components to service operations early in design
5. Organize by Feature: Group related pages and components together
6. Responsive Design: Consider mobile and desktop layouts
7. Accessibility: Use semantic component types for better accessibility
8. Naming Conventions: Use clear, descriptive names for pages and components
9. Separation of Concerns: Keep presentation logic in UI layer, business logic in services

​

Example UI Model

Layouts:
- MainLayout (header, footer, content)
- AdminLayout (sidebar, content)

Pages:
- HomePage (route: /)
  └─ FeaturedProducts component → GetFeaturedProducts
  
- ProductListPage (route: /products)
  └─ ProductGrid component → SearchProducts
      └─ ProductCard components
      
- ProductDetailPage (route: /products/:id)
  ├─ ProductInfo component → GetProductById
  ├─ AddToCart button → AddToCart
  └─ Reviews component → GetProductReviews
  
- CartPage (route: /cart)
  ├─ CartItems list → GetCart
  └─ CheckoutButton → InitiateCheckout
  
- CheckoutPage (route: /checkout)
  └─ CheckoutForm → PlaceOrder

Components:
- ProductCard (reusable)
- AddToCartButton (reusable)
- ProductRating (reusable)
- PriceDisplay (reusable)

​

Related Resources

• Services Modeler - Define service operations for UI data binding
• Domain Modeler - Understand domain structure for UI design