This project is a self-contained, zero-dependency HTML simulation of two industry-leading IT service platforms built for demonstration, portfolio, and learning purposes. Everything — HTML, CSS, and JavaScript — lives in a single file that opens directly in any browser.
No build tools. No frameworks. No backend. Just open and explore.
| Feature | Salesforce Service Cloud | BMC Helix ITSM |
|---|---|---|
| Interactive Dashboard | ✅ | ✅ |
| Time Period KPI Filtering | ✅ | ✅ |
| Live Data Rendering | ✅ | ✅ |
| Modals & Detail Panels | ✅ | ✅ |
| Create / Submit Forms | ✅ | ✅ |
| Export Report (Download) | ✅ | ✅ |
| Settings Persistence (localStorage) | ✅ | ✅ |
| Platform Switcher | ✅ | ✅ |
A full-fidelity simulation of the Salesforce Service Cloud experience, featuring:
📊 Service Dashboard
- 5 live KPI cards: Total Cases, Open Cases, Resolved, Avg Resolution, SLA Compliance
- Case volume bar chart (This Week / This Month / This Quarter)
- Case status donut chart with legend
- Top Agents leaderboard with performance bars
- SLA risk breakdown with counts and percentages
🎫 Case Management
- Search cases by keyword in real time
- Filter by Status (Open / In Progress / Resolved)
- Filter by Priority (High / Medium / Low)
- Create new cases via modal form
- View full case details in expanded modal
- Update status, priority, and agent assignment
- Resolve and close cases with confirmation
👤 Customer Management
- Search customers by name, email, or company
- Filter by company with dynamic dropdown
- Add new customers via form
- View customer profile and linked case history
- Edit contact details and company info
📚 Knowledge Base
- Browse articles by category with pill navigation
- Search across all articles by keyword
- Filter by category with dropdown
- Article count badge updates dynamically
- Open full article content in modal
📞 Omnichannel Inbox
- Switch between Email, Chat, Phone, Social channels
- Inbox list renders per channel with unread indicators
- Mark all items as read
- Compose and send replies within the inbox
- Live chat simulation with typing indicator and AI responses
📈 Reports & Analytics
- Period selector: Last 30 Days / Last 90 Days / This Quarter
- All KPI cards update with period-specific data
- Bar chart updates for case volume trends
- Agent performance bars and percentages update
- SLA compliance breakdown updates
- Export to text file downloads with full report content
- Schedule reports modal with email and frequency options
⚙️ Settings
- SLA policy targets per priority tier
- Toggle switches for 9 automation & notification options
- Saves to
localStorageand restores on next visit - Save Changes button with visual confirmation
📖 Documentation & Help
- Getting Started, Onboarding, Quick Start guides
- Full API Reference with endpoint docs
- Webhooks & Events documentation
- Admin Guide with role matrix
- Video tutorials with chapter breakdowns
- Release notes for v3.0 / v3.1 / v3.2
A pixel-accurate simulation of BMC Helix ITSM with all core ITSM modules fully interactive:
📊 ITSM Dashboard
- 5 KPI cards: Total Incidents, Open Incidents, Resolved, Avg Resolution, Change Success
- Period selector: Last 30 Days / Last 7 Days / This Quarter — all cards update with different data
- Refresh button updates the "Last updated" timestamp and re-renders all KPIs
- Incident Trends bar chart, Service Performance metrics, System Health progress bars
🚨 Incident Management
- Full incident table rendered from JavaScript data array
- Filter by Priority (Critical / High / Medium / Low)
- Filter by Status (Open / In Progress / Resolved)
- View button opens a detail modal with: title, category, priority, status, technician, created time, and activity log
- Resolve button marks incident resolved and removes the button
- Create Incident form adds new rows to the live table
⚠️ Problem Management
- View button opens a Problem Detail modal with root cause, related incidents, status, and workaround
- Schedule / Approve / Reject action buttons update the status badge inline
- Create Problem form appends new rows to the problem table
🔁 Change Management
- Approve / Reject / Deploy Now / Schedule buttons with toast feedback
- Create Change Request form with type, risk, scheduled date, and rollback plan
- New change requests appear in the table with Approve/Reject actions
🧾 Assets & CMDB
- Type filter dropdown (Hardware / Software / Network) hides/shows rows instantly
- Each asset has a contextual action button:
- Config Map — shows CI specs and relationships
- Licenses — shows seat count, renewal date, and cost
- Dependencies — shows uplinks, VLANs, and downstream CIs
- Lifecycle — shows lifecycle stage, upgrade plans, and support dates
- Retire — shows retirement schedule and workload migration status
- All actions open a dedicated detail modal
- Add Asset button triggers an asset form
🛎️ Service Requests
- Quick-access cards for Access Request, Software Installation, Password Reset
- Approve button updates status badge to "Approved" and shows toast
- Assign button opens a modal to choose team and add a note — updates status to "In Progress"
- Update button opens a status update modal with notes — updates status badge
- View button shows full request detail modal
- New Request form adds a new row to the live table
📊 Reports & Analytics
- Period selector: Last 30 Days / Last 90 Days / This Quarter
- All 5 KPI cards, incident trend bars, and change success rates update per period
- Export PDF button downloads a full ITSM report as a
.txtfile
⚙️ Settings — 6 Panels
| Panel | Content |
|---|---|
| 👥 User Roles & Permissions | Role matrix table — ITSM Admin, Change Manager, Incident Manager, Technician |
| ⏱️ SLA Policies | Resolution targets per priority + escalation toggle |
| 🔄 Automation Workflows | 6 automation toggles — AI classification, auto-assign, freeze windows |
| 🔔 Notification Settings | 6 notification toggles — email, SMS, push, digest, exec summary |
| 🔗 Integrations | ServiceNow, Slack, Jira, PagerDuty, Microsoft Teams — with status and Configure/Connect buttons |
| 🔒 Security & Audit | 2FA, SSO, IP allowlisting, session timeout, View Logs, Run Scan |
- Clicking each nav item switches the panel
- Save Changes persists all settings to
localStoragewith visual confirmation
📄 BMC_Helix_Modified.html ← Single self-contained file (all platforms)
│
├── 🎨 <style> ← All CSS (Salesforce + BMC design systems)
│ ├── Salesforce Lightning Design System variables
│ ├── BMC Helix dark theme variables
│ ├── Shared component styles (modals, tables, badges, toggles)
│ └── Responsive utilities
│
├── 🟣 #marketingView ← Salesforce Service Cloud
│ ├── Header & Navigation
│ ├── Dashboard, Cases, Customers, Knowledge Base
│ ├── Omnichannel, Reports, Settings, Docs, Help
│ └── Platform Shell (full in-browser app simulation)
│
├── 🔴 #bmcView ← BMC Helix ITSM
│ ├── Header (Product Nav)
│ ├── Hero + Value Proposition
│ ├── Module Nav Bar (sticky)
│ ├── Dashboard, Incidents, Problems, Changes
│ ├── Assets & CMDB, Service Requests, Reports, Settings
│ └── CTA + Footer
│
└── 📜 <script> ← All JavaScript (~64 functions)
├── Shared utilities (modal, toast, openModal, closeModal)
├── Salesforce JS (cases, customers, KB, omnichannel, reports)
└── BMC Helix JS (incidents, problems, changes, assets, requests, reports)
No installation required. Just open the file in a browser.
# Clone the repository
git clone https://github.com/your-username/itsm-platform-simulation.git
# Navigate to the folder
cd itsm-platform-simulation
# Open the file directly in your browser
open attached_assets/BMC_Helix_Modified.html # macOS
start attached_assets/BMC_Helix_Modified.html # Windows
xdg-open attached_assets/BMC_Helix_Modified.html # LinuxOr simply download the HTML file and double-click it — it works offline with no server needed.
| Technology | Role |
|---|---|
 |
Structure and semantic layout |
 |
Full design systems for both platforms |
 |
All interactivity — no libraries or frameworks |
 |
Inter typeface (loaded via CDN) |
 |
Settings saved across browser sessions |
✅ 64 JavaScript functions powering all interactivity
✅ Dynamic table rendering from in-memory data arrays
✅ Real-time search and multi-filter support
✅ Modal system with open/close for all detail views
✅ Toast notification system (success / error / info)
✅ Settings persistence via localStorage (both platforms)
✅ File download (Export Report as .txt)
✅ Period-driven data updates (no page reload)
✅ Inline status badge updates (Approve / Reject / Resolve)
✅ Platform switcher (Salesforce ↔ BMC Helix) with smooth scroll
- Mimics the Salesforce Lightning Design System color palette (
#0176D3,#032D60,#2E844A) - Sticky top navigation with hamburger side nav
- Full platform shell with tabs, sidebar icons, and content panels
- Live chat widget with typing indicator simulation
- Dark navy theme (
#060C1C,#1A2233,#252A3D) with BMC orange accents (#FF6B3D) - Colorful SVG dot-mesh hero background (matches BMC's design language)
- Sticky module nav bar with 8 section shortcuts
- 6-panel settings system with individual content views
| Use Case | Description |
|---|---|
| 🎓 Portfolio Project | Showcase full-stack UI design and vanilla JS skills |
| 📚 Learning Tool | Study ITSM/CRM workflows and terminology |
| 🎤 Demo / Presentation | Walk through live features in any meeting |
| 🧪 UI Prototyping | Use as a reference for design patterns |
| 📝 Training Material | Help teams understand platform capabilities |
This project is a fan-made simulation for demonstration and portfolio purposes only.
It is not affiliated with, endorsed by, or connected to Salesforce, Inc. or BMC Software, Inc.
All trademarks, product names, and logos belong to their respective owners.
No real data is collected, transmitted, or stored beyond the user's own browserlocalStorage.
This project is released under the MIT License
Made with ❤️ for the ITSM and CRM community
