Skip to content

WALKME_GOJS_GUIDANCE.md

Latest commit

 

History

History
201 lines (157 loc) · 5.3 KB

WALKME_GOJS_GUIDANCE.md

File metadata and controls

201 lines (157 loc) · 5.3 KB

WalkMe GoJS Guidance - Implementation Summary

Overview

WalkMe has been enhanced to provide comprehensive guidance about the GoJS project. All walkthroughs and tips now focus on GoJS-specific features, capabilities, and best practices.

What Was Enhanced

1. Data Attributes Added

  • Added data-gojs-canvas attributes to all GoJS canvas components:
    • data-gojs-canvas="orgchart" - Organization Chart
    • data-gojs-canvas="bpmn" - BPMN Workflow
    • data-gojs-canvas="erd" - ERD Designer
    • data-gojs-canvas="network" - Network Topology
    • data-gojs-canvas="gantt" - Gantt Chart
  • Added data-export-button to export buttons
  • Added data-walkme-target to specific interactive elements
  • Added data-properties-panel to PropertiesPanel component

2. Enhanced Walkthrough Configurations

Organization Chart (7 steps)

  • Welcome to GoJS Organization Chart
  • The GoJS Canvas
  • Add Nodes
  • GoJS Context Menu
  • GoJS Zoom Controls
  • Properties Panel
  • Export with GoJS

BPMN Workflow (6 steps)

  • Welcome to GoJS BPMN Designer
  • GoJS Node Templates
  • GoJS Linking Tool
  • GoJS Layout System
  • GoJS Undo/Redo
  • Export GoJS Model

ERD Designer (5 steps)

  • Welcome to GoJS ERD Designer
  • GoJS Entity Templates
  • GoJS Data Binding
  • GoJS Links for Relationships
  • GoJS Model Export

Network Topology (5 steps)

  • Welcome to GoJS Network Designer
  • GoJS Node Templates
  • GoJS Force Layout
  • GoJS Connections
  • GoJS Model Persistence

Gantt Chart (6 steps)

  • Welcome to GoJS Gantt Chart
  • GoJS Date Conversion
  • GoJS Resizable Nodes
  • GoJS Dependency Links
  • GoJS Progress Binding
  • Export GoJS Gantt

NEW: GoJS Project Overview (7 steps)

  • Welcome to the GoJS Diagramming Suite
  • What is GoJS?
  • GoJS Core Features
  • GoJS Diagram Types
  • GoJS Model System
  • GoJS Export/Import
  • Start Exploring

3. Enhanced Smart Tips

All smart tips now focus on GoJS-specific features:

Organization Chart Tips

  • GoJS Canvas
  • GoJS Undo/Redo
  • GoJS Zoom
  • GoJS Context Menu
  • GoJS TreeLayout
  • GoJS Data Binding

BPMN Tips

  • GoJS Node Templates
  • GoJS Linking Tool
  • GoJS LayeredDigraphLayout
  • GoJS Link Labels

ERD Tips

  • GoJS Nested Panels
  • GoJS Custom Shapes
  • GoJS Two-Way Binding
  • GoJS Model Export

Network Tips

  • GoJS ForceDirectedLayout
  • GoJS Force Parameters
  • GoJS Device Templates
  • GoJS Network Links

Gantt Tips

  • GoJS Date Conversion
  • GoJS Resizable Nodes
  • GoJS TreeLayout
  • GoJS Progress Binding
  • GoJS Dependency Links

4. WalkMe Launcher Updates

  • Added "GoJS Overview" button as the first option
  • Highlights GoJS overview walkthrough prominently
  • Shows completion status for all walkthroughs

Key GoJS Features Highlighted

Core GoJS Concepts

  1. GoJS Library: Interactive diagramming library
  2. Model-View Architecture: Model stores data, Diagram displays it
  3. Data Binding: Two-way binding with makeTwoWay()
  4. Undo/Redo: Built-in UndoManager (Ctrl+Z / Ctrl+Y)
  5. Zoom & Pan: Built-in zoom controls and panning
  6. Context Menus: Right-click menus for quick actions

GoJS Layouts Explained

  1. TreeLayout: Hierarchical arrangement (Org Chart, Gantt)
  2. LayeredDigraphLayout: Layered arrangement (BPMN, ERD)
  3. ForceDirectedLayout: Physics-based positioning (Network)

GoJS Features Demonstrated

  1. Node Templates: Custom templates for different node types
  2. Linking Tool: Interactive connection creation
  3. Resizable Nodes: Drag-to-resize functionality
  4. Export/Import: model.toJson() and makeImageData()
  5. Custom Shapes: Diamond, Rectangle, Circle, etc.
  6. Nested Panels: Complex node structures

Usage

Starting a Walkthrough

  1. GoJS Overview (Recommended first):

    • Click the WalkMe help button (bottom-right)
    • Click "🎯 GoJS Overview"
    • Learn about GoJS fundamentals

  2. Canvas-Specific Walkthroughs:

    • Click "📍 Start Walkthrough"
    • Or select specific canvas from sidebar
    • Walkthrough adapts to current canvas

Accessing Tips

  • Click WalkMe help button
  • Toggle "💡 Show Tips"
  • Tips appear on hover over relevant elements

Technical Details

Data Attributes for Targeting

<!-- Canvas targeting -->
<div data-gojs-canvas="orgchart" class="gojs-canvas" />

<!-- Button targeting -->
<button data-export-button />
<button data-walkme-target="add-node-button" />

<!-- Panel targeting -->
<div data-properties-panel />

Walkthrough Selectors

Walkthroughs use CSS selectors to target elements:

  • [data-gojs-canvas="orgchart"] - Targets specific canvas
  • [data-export-button] - Targets export buttons
  • [data-properties-panel] - Targets properties panel
  • .gojs-canvas - General GoJS canvas selector

Benefits

  1. Educational: Users learn about GoJS capabilities
  2. Comprehensive: Covers all GoJS features used in project
  3. Contextual: Tips appear when relevant
  4. Progressive: Overview → Specific canvas guidance
  5. Interactive: Step-by-step walkthroughs with highlights

Next Steps

Users can now:

  1. Start with GoJS Overview walkthrough
  2. Explore each diagram type with GoJS-specific guidance
  3. Learn about GoJS features through contextual tips
  4. Understand how GoJS powers each diagram type

Implementation Date: Current Status: ✅ Complete WalkMe Integration: Enhanced with GoJS-specific guidance