Build
Build UIB Component — example output
UI Builder macroponent design
$ nowaikit run build-uib
███╗ ██╗ ██████╗ ██╗ ██╗ █████╗ ██╗ ██╗ ██╗██╗████████╗
████╗ ██║██╔═══██╗██║ ██║ ██╔══██╗██║ ██║ ██╔╝██║╚══██╔══╝
██╔██╗██║██║ ██║██║ █╗ ██║ ███████║██║ █████╔╝ ██║ ██║
██║╚████║██║ ██║██║███╗██║ ██╔══██║██║ ██╔═██╗ ██║ ██║
██║ ╚███║╚██████╔╝╚███╔███╔╝ ██║ ██║██║ ██║ ██╗██║ ██║
╚═╝ ╚══╝ ╚═════╝ ╚══╝╚══╝ ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝ ✦
NowAIKit — The #1 AI App for ServiceNow
- Running build-uib in direct mode (ollama)...
# UI Builder Component Build Report — demo2 Instance
---
## Step 1 — Understand the Requirement
Component Type Validation:
- **Selected:** `macroponent` ✅
- Justification: This is a reusable building block that can be composed into multiple pages (dashboard, workbench, list view). A `macroponent` is appropriate because it bundles child components, data resources, and event handlers into a single reusable unit.
Analysis Without Specific Requirement:
Since no specific requirement was provided, I'll design a Task Status Overview Card macroponent — a common, reusable component for monitoring task workloads and statuses. This component can be embedded in dashboards, workspaces, or detail pages.
Component Architecture Summary:
- Purpose: Display task count metrics with filtering, filtering, and status indicators
- Data Needs: `task` table with status, priority, assigned groups, due dates
- User Interaction: Filter by status, view details, refresh data
- Responsive: Card grid (desktop 4-col, tablet 3-col, mobile 2-col)
---
## Step 2 — Check Existing UIB Components for Reuse
NEDS Components Available:
| Component | Use Case | Available? |
|-----------|----------|------------|
| `now-table` | Task lists | ✅ Yes |
| `now-card` | Task status cards | ✅ Yes |
| `now-button` | Filter actions | ✅ Yes |
| `now-select` | Status dropdown | ✅ Yes |
| `now-heading` | Titles | ✅ Yes |
Recommendation: Use NEDS components for child elements. Build a custom macroponent for composition logic, filtering, and event handling.
No duplicate macroponents found in demo2 instance for task status dashboard cards. Proceed with new build.
---
## Step 3 — Design Component Architecture
```
COMPONENT: task_status_overview (macroponent)
PROPERTIES (configurable inputs):
- table: string — task table name (default: "task")
- status: array — statuses to filter (default: ["normal", "waiting"])
- priority: number — min priority to show (default: 1)
- showDuedate: boolean — show due date column (default: false)
- limit: number — max records (default: 10)
DATA RESOURCES:
- taskList
Source: REST (Task Table API)
Output shape: { items: array, total: number, page: number }
Refresh: manual | taskUpdated event
CHILD COMPONENTS:
- now-card (repeated): bound to data.items[]
- now-button: Filter refresh
- now-select: Status filter
- now-heading: Component title
EVENT HANDLERS:
- CHILD_EVENT → actionName → logic:
- now-button#CLICKED → HANDLE_REFRESH
- now-select#CHANGED → HANDLE_FILTER_CHANGE
COMPONENT ACTIONS:
- HANDLE_REFRESH: Fetch tasks, update state
- HANDLE_FILTER_CHANGE: Update filter property, auto-refresh data
- HANDLE_ERROR: Show error message, log to logs
LAYOUT:
- Desktop: 4-column card grid
- Tablet: 3-column card grid
- Mobile: 2-column card grid (1 for narrow screens)
```
---
## Step 4 — Define Data Sources
### REST Data Resource: `taskList`
```javascript
create_uib_data_broker({
name: 'taskList',
type: 'REST',
endpoint: 'api/sn_sa/task',
method: 'GET',
headers: {
'Accept': 'application/json',
'x-snc-auth': 'Bearer ${apiToken}'
},
query: {
sysparm_query: 'active=true AND state=${status} AND priority>=${priority}',
sysparm_limit: '${limit}',
sysparm_order_by: 'priority DESC,inserted_at DESC'
},
mapping: {
items: '${result.result}',
... (373 more lines — full output truncated for screenshot)