Skip to content

Commit 9f72062

Browse files
hotlonghotlong
authored
Merge pull request #669 from objectstack-ai/copilot/add-form-view-examples
2 parents 67f5a1c + 8748865 commit 9f72062

10 files changed

Lines changed: 1428 additions & 14 deletions

File tree

‎examples/app-crm/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ Follows the **by-type** directory layout — the ObjectStack standard aligned wi
5050
```
5151
src/
5252
├── objects/ # 📦 10 Core Objects (account, contact, lead, opportunity, ...)
53+
├── views/ # 👁️ UI Views (FormView & ListView configurations for all objects)
54+
├── pages/ # 📄 Pages (Record, Home, App, Utility page layouts)
5355
├── actions/ # ⚡ Custom Actions (lead, contact, opportunity, case, global)
5456
├── apis/ # 🌐 REST Endpoints (pipeline-stats, lead-convert)
5557
├── apps/ # 🚀 App Configuration (crm.app.ts)
@@ -71,6 +73,24 @@ Comprehensive guides covering all aspects:
7173
3. **[Security](./docs/05-security.md)** - Profiles, roles, sharing, permissions
7274
4. **[AI Capabilities](./docs/08-ai-capabilities.md)** - Agents, RAG, NLQ, ML
7375

76+
### 🎨 UI Examples
77+
78+
The CRM includes comprehensive UI examples demonstrating all form layouts and page types:
79+
80+
#### FormView Examples (`src/views/`)
81+
- **6 Form Layout Types**: Simple, Tabbed, Wizard, Split, Drawer, Modal
82+
- **Advanced Features**: Collapsible sections, 1-4 column layouts, conditional visibility, cascading dependencies
83+
- **5 List View Types**: Grid, Kanban, Calendar, Gallery, filtered views
84+
- **Field Controls**: readonly, required, hidden, colSpan, visibleOn, dependsOn, custom widgets
85+
86+
#### PageSchema Examples (`src/pages/`)
87+
- **Record Page**: Comprehensive detail page with highlights, tabs, accordion, related lists, AI chat
88+
- **Home Page**: Dashboard-style with KPIs and quick actions
89+
- **App Page**: Application launcher grid
90+
- **Utility Page**: Floating utility panels
91+
92+
See `src/views/lead.view.ts` and `src/pages/` for complete implementations.
93+
7494
### 🚀 Quick Start
7595

7696
```bash
@@ -96,6 +116,8 @@ pnpm --filter @example/app-crm dev
96116
|----------|-------|----------|
97117
| **Objects** | 10 | Account, Opportunity, Case, Product |
98118
| **Fields** | 100+ | AutoNumber, Formula, Lookup, Address |
119+
| **Views** | 12+ | Grid, Kanban, Calendar, Gallery, Forms (Simple, Tabbed, Wizard, Split, Drawer, Modal) |
120+
| **Pages** | 4 | Record Detail, Home, App Launcher, Utility Bar |
99121
| **Profiles** | 5 | Admin, Sales Manager, Sales Rep |
100122
| **Sharing Rules** | 5+ | Criteria-based, Territory-based |
101123
| **AI Agents** | 5 | Sales Assistant, Service Agent |

‎examples/app-crm/src/pages/app_launcher.page.ts‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
2+
3+
import { Page } from '@objectstack/spec/ui';
4+
5+
/**
6+
* App Launcher Page
7+
*
8+
* Demonstrates an application launcher page similar to Salesforce App Launcher.
9+
*
10+
* Features:
11+
* - Grid-based app icon layout
12+
* - Global search
13+
* - Quick access to all apps
14+
*/
15+
export const AppLauncherPage: Page = {
16+
name: 'app_launcher_page',
17+
label: 'App Launcher',
18+
description: 'Central hub for accessing all applications',
19+
20+
type: 'app',
21+
22+
template: 'centered',
23+
24+
regions: [
25+
{
26+
name: 'header',
27+
width: 'full',
28+
components: [
29+
{
30+
type: 'global:search',
31+
id: 'app_search',
32+
label: 'Search Apps',
33+
properties: {},
34+
},
35+
],
36+
},
37+
38+
{
39+
name: 'main',
40+
width: 'large',
41+
components: [
42+
{
43+
type: 'page:header',
44+
id: 'launcher_header',
45+
label: 'App Launcher Header',
46+
properties: {
47+
title: 'App Launcher',
48+
subtitle: 'Select an app to get started',
49+
icon: 'th',
50+
breadcrumb: false,
51+
},
52+
},
53+
{
54+
type: 'app:launcher',
55+
id: 'app_grid',
56+
label: 'Application Grid',
57+
properties: {},
58+
},
59+
],
60+
},
61+
],
62+
63+
isDefault: false,
64+
assignedProfiles: ['sales_user', 'sales_manager', 'service_user', 'system_administrator'],
65+
66+
aria: {
67+
label: 'App Launcher Page',
68+
description: 'Central application launcher for accessing all apps',
69+
},
70+
};

‎examples/app-crm/src/pages/home.page.ts‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
2+
3+
import { Page } from '@objectstack/spec/ui';
4+
5+
/**
6+
* Sales Home Page
7+
*
8+
* Demonstrates a home page layout with dashboards and quick access widgets.
9+
* Similar to Salesforce Lightning Home Page.
10+
*
11+
* Features:
12+
* - Dashboard-style layout
13+
* - Multiple component regions
14+
* - Global search and notifications
15+
* - Quick action cards
16+
*/
17+
export const SalesHomePage: Page = {
18+
name: 'sales_home_page',
19+
label: 'Sales Home',
20+
description: 'Sales team home page with key metrics and quick actions',
21+
22+
type: 'home',
23+
24+
template: 'three-column',
25+
26+
variables: [
27+
{
28+
name: 'selectedPeriod',
29+
type: 'string',
30+
defaultValue: 'this_month',
31+
},
32+
],
33+
34+
regions: [
35+
{
36+
name: 'header',
37+
width: 'full',
38+
components: [
39+
{
40+
type: 'page:header',
41+
id: 'home_header',
42+
label: 'Sales Home Header',
43+
properties: {
44+
title: 'Sales Dashboard',
45+
subtitle: 'Welcome back, {current_user.first_name}',
46+
icon: 'home',
47+
breadcrumb: false,
48+
},
49+
},
50+
],
51+
},
52+
53+
{
54+
name: 'left_sidebar',
55+
width: 'small',
56+
components: [
57+
{
58+
type: 'page:card',
59+
id: 'quick_create',
60+
label: 'Quick Create',
61+
properties: {
62+
title: 'Quick Create',
63+
bordered: true,
64+
body: [
65+
{
66+
type: 'nav:menu',
67+
id: 'create_menu',
68+
properties: {},
69+
},
70+
],
71+
},
72+
},
73+
{
74+
type: 'page:card',
75+
id: 'my_recent_items',
76+
label: 'Recent Items',
77+
properties: {
78+
title: 'Recent Items',
79+
bordered: true,
80+
},
81+
},
82+
],
83+
},
84+
85+
{
86+
name: 'main',
87+
width: 'large',
88+
components: [
89+
{
90+
type: 'page:card',
91+
id: 'key_metrics',
92+
label: 'Key Metrics',
93+
properties: {
94+
title: 'Key Performance Indicators',
95+
bordered: false,
96+
body: [
97+
{
98+
type: 'record:highlights',
99+
id: 'kpi_highlights',
100+
properties: {
101+
fields: ['total_revenue', 'deals_won', 'pipeline_value', 'conversion_rate'],
102+
layout: 'horizontal',
103+
},
104+
},
105+
],
106+
},
107+
},
108+
{
109+
type: 'page:tabs',
110+
id: 'home_tabs',
111+
label: 'Home Tabs',
112+
properties: {
113+
type: 'card',
114+
position: 'top',
115+
items: [
116+
{
117+
label: 'My Leads',
118+
icon: 'user-plus',
119+
children: [
120+
{
121+
type: 'page:section',
122+
properties: {},
123+
},
124+
],
125+
},
126+
{
127+
label: 'My Opportunities',
128+
icon: 'dollar-sign',
129+
children: [
130+
{
131+
type: 'page:section',
132+
properties: {},
133+
},
134+
],
135+
},
136+
{
137+
label: 'My Tasks',
138+
icon: 'tasks',
139+
children: [
140+
{
141+
type: 'page:section',
142+
properties: {},
143+
},
144+
],
145+
},
146+
],
147+
},
148+
},
149+
],
150+
},
151+
152+
{
153+
name: 'right_sidebar',
154+
width: 'medium',
155+
components: [
156+
{
157+
type: 'ai:chat_window',
158+
id: 'sales_assistant',
159+
label: 'Sales Assistant',
160+
properties: {
161+
mode: 'sidebar',
162+
agentId: 'sales_assistant',
163+
context: {
164+
page: 'home',
165+
user: '{current_user.id}',
166+
},
167+
},
168+
},
169+
{
170+
type: 'page:card',
171+
id: 'upcoming_events',
172+
label: 'Calendar',
173+
properties: {
174+
title: "Today's Schedule",
175+
bordered: true,
176+
},
177+
},
178+
],
179+
},
180+
],
181+
182+
isDefault: true,
183+
assignedProfiles: ['sales_user', 'sales_manager'],
184+
185+
aria: {
186+
label: 'Sales Home Page',
187+
description: 'Sales team home page with metrics, leads, and quick actions',
188+
},
189+
};

‎examples/app-crm/src/pages/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
2+
3+
export { LeadDetailPage } from './lead_detail.page';
4+
export { SalesHomePage } from './home.page';
5+
export { AppLauncherPage } from './app_launcher.page';
6+
export { UtilityBarPage } from './utility_bar.page';

0 commit comments

Comments
 (0)