Workspaces Complete Guide — دليل مساحات العمل الشامل

Platform: ServiceNow Australia (Sep 2026)
دليل شامل لـ Agent Workspace و Configurable Workspace و UI Builder

Table of Contents

1. Workspace Overview
2. Agent Workspace for ITSM
3. CSM Configurable Workspace
4. HR Service Delivery Workspace
5. UI Builder
6. Custom Workspace Development
7. Workspace Components
8. HR Leave Workspace
9. Best Practices
10. Labs

1. Workspace Overview

Direct URLs

Workspace Types

2. Agent Workspace for ITSM

Direct URL: {BASE}/now/workspace/agent/home

Configuration

**Enable Agent Workspace:**
1. Navigate: All > Workspace > Agent Workspace > Administration
2. Activate workspace for tables:
   - Incident
   - Problem  
   - Change Request
   - Request Item

**Configure Lists:**
1. Navigate: Agent Workspace > Lists
2. Create personalized lists:
   - My Open Incidents
   - High Priority
   - Unassigned

Declarative Actions

// Create custom action button
// Table: sys_declarative_action_assignment
// Action: Escalate to L2

{
  "sys_name": "Escalate to L2",
  "table": "incident",
  "action_type": "server",
  "condition": "state!=6^assignment_group!=L2_Support",
  "server_script": {
    "script": "current.assignment_group.setDisplayValue('L2 Support'); current.work_notes = 'Escalated to L2'; current.update();"
  },
  "icon": "arrow-up",
  "hint": "Escalate this incident to L2 Support"
}

3. CSM Configurable Workspace

Direct URL: {BASE}/now/csm/home

Components

**Landing Page:**
- My Cases list
- SLA status
- Quick actions
- Knowledge search

**Case Form:**
- Customer info panel
- Communication timeline
- Related items
- Actions bar

**Agent Assist:**
- Recommended knowledge
- Similar cases
- Playbook suggestions

4. HR Service Delivery Workspace

Direct URL: {BASE}/now/hr-agent-workspace/home

HR Case Configuration

**Topics:**
1. Navigate: HR > Administration > Topics
2. Create:
   - Leave Management
   - Benefits
   - Payroll
   - Onboarding

**COE (Centers of Excellence):**
1. Navigate: HR > Administration > COEs
2. Create:
   - Leave & Absence COE
   - Compensation COE

5. UI Builder

Direct URL: {BASE}/now/builder/experience

Create Custom Page

**Steps:**
1. Open UI Builder
2. Create Experience:
   - Name: HR Leave Experience
   - App scope: x_786686_hr_leave
3. Create Page:
   - Name: Leave Request List
   - URL path: leave-list
4. Add Components:
   - Data resource (GlideRecord)
   - Repeater
   - Card components

Data Resources

// Data Resource: Get Leave Requests
// Type: GlideRecord

{
  "table": "x_786686_hr_leave_request",
  "query": "employee={@context.user.sys_id}",
  "fields": ["number", "leave_type", "start_date", "end_date", "state"],
  "orderBy": "sys_created_on",
  "orderDirection": "desc",
  "limit": 50
}

Client State Parameters

// Page Parameters
{
  "sys_id": {
    "type": "string",
    "required": false
  },
  "view": {
    "type": "string",
    "default": "list"
  }
}

// Client State
{
  "selectedRequest": null,
  "filterState": "all",
  "showModal": false
}

6. Custom Workspace Development

Create Workspace Experience

**Step 1: Create Experience**
1. UI Builder > Experiences > Create
2. Name: HR Leave Workspace
3. Template: Configurable Workspace

**Step 2: Configure Chrome**
1. Add header with logo
2. Add navigation menu
3. Configure context panel

**Step 3: Create Pages**
1. Home/Dashboard
2. Request List
3. Request Form
4. Calendar View
5. Reports

**Step 4: Configure Routing**
1. Set default page
2. Configure URL routes
3. Add breadcrumbs

Workspace Chrome

// Navigation Configuration
{
  "items": [
    {
      "label": "Home",
      "icon": "home",
      "route": "/home"
    },
    {
      "label": "My Requests",
      "icon": "document",
      "route": "/requests"
    },
    {
      "label": "Team Calendar",
      "icon": "calendar",
      "route": "/calendar"
    },
    {
      "label": "Reports",
      "icon": "chart-bar",
      "route": "/reports"
    }
  ]
}

7. Workspace Components

List Component

// Configuration
{
  "table": "x_786686_hr_leave_request",
  "columns": [
    { "field": "number", "label": "Number" },
    { "field": "employee", "label": "Employee" },
    { "field": "leave_type", "label": "Type" },
    { "field": "start_date", "label": "Start" },
    { "field": "end_date", "label": "End" },
    { "field": "duration_days", "label": "Days" },
    { "field": "state", "label": "State" }
  ],
  "actions": ["view", "edit", "approve", "reject"],
  "filters": [
    { "field": "state", "operator": "=", "value": "@param.state" }
  ]
}

Form Component

// Form Layout
{
  "sections": [
    {
      "label": "Request Details",
      "fields": [
        ["employee", "manager"],
        ["leave_type", "duration_days"],
        ["start_date", "end_date"],
        ["reason"]
      ]
    },
    {
      "label": "Approval",
      "fields": [
        ["approval_status"],
        ["work_notes"]
      ],
      "condition": "state!=1"
    }
  ]
}

Dashboard Cards

// KPI Card Configuration
{
  "title": "Pending Approvals",
  "icon": "clock",
  "color": "warning",
  "value": "{@data.pendingCount}",
  "trend": {
    "direction": "up",
    "value": "12%",
    "label": "vs last week"
  },
  "action": {
    "label": "View All",
    "route": "/requests?state=pending"
  }
}

8. HR Leave Workspace

Complete Workspace Configuration

**Pages:**

1. **Home Dashboard**
   - My balance cards
   - Pending requests
   - Team calendar preview
   - Quick actions

2. **My Requests**
   - List with filters
   - Status badges
   - Actions (cancel, view)

3. **New Request**
   - Smart form
   - Balance check
   - Date picker
   - Manager auto-fill

4. **Team Calendar**
   - Monthly view
   - Team member filter
   - Color-coded by type

5. **Approvals** (Manager view)
   - Pending list
   - Approve/Reject actions
   - Bulk actions

Dashboard Page

<!-- UI Builder Layout -->
<now-page>
  <now-row>
    <now-col size="12">
      <now-heading level="1">Leave Management - إدارة الإجازات</now-heading>
    </now-col>
  </now-row>

  <now-row>
    <now-col size="3">
      <now-card>
        <now-card-header>Annual Leave</now-card-header>
        <now-card-content>
          <now-highlighted-value value="{{balance.annual}}"></now-highlighted-value>
          <span>days available</span>
        </now-card-content>
      </now-card>
    </now-col>
    <!-- Repeat for other leave types -->
  </now-row>

  <now-row>
    <now-col size="8">
      <now-card>
        <now-card-header>My Recent Requests</now-card-header>
        <now-card-content>
          <now-record-list 
            table="x_786686_hr_leave_request"
            query="employee={{user.sys_id}}"
            limit="5">
          </now-record-list>
        </now-card-content>
      </now-card>
    </now-col>
    <now-col size="4">
      <now-card>
        <now-card-header>Quick Actions</now-card-header>
        <now-card-content>
          <now-button label="New Request" variant="primary" route="/new"></now-button>
          <now-button label="View Calendar" variant="secondary" route="/calendar"></now-button>
        </now-card-content>
      </now-card>
    </now-col>
  </now-row>
</now-page>

9. Best Practices

Performance

1. **Limit Data Fetching**
   - Use pagination (limit: 50-100)
   - Fetch only needed fields
   - Use aggregates for counts

2. **Lazy Loading**
   - Load details on demand
   - Defer non-critical components

3. **Caching**
   - Cache static reference data
   - Use client state for filters

Security

1. **Data Resources**
   - Always filter by user context
   - Use ACLs on tables
   - Validate input parameters

2. **Actions**
   - Check permissions before action
   - Log sensitive operations

10. Labs

Lab 1: Create HR Leave Workspace

**Duration:** 2 hours

1. Open UI Builder: {BASE}/now/builder/experience
2. Create Experience: "HR Leave Workspace"
3. Create pages:
   - Dashboard (home)
   - Request List
   - Request Form
4. Configure navigation
5. Add data resources
6. Test with different users

Lab 2: Custom Dashboard

**Duration:** 1 hour

1. Create dashboard page
2. Add KPI cards:
   - Balance by type
   - Pending count
   - Upcoming leaves
3. Add list component
4. Add calendar widget
5. Configure permissions

Direct URLs Reference

Next: AI Guide | Development Guide