Desk Page Studio

Desk Page Studio is a web-based IDE for creating and editing Frappe Page components with visual code editor, AI assistant features, and integrated file management.

Understanding the Desk Page Studio Page

Purpose: Desk Page Studio enables developers to create, edit, and manage Frappe Pages visually through a web interface with Monaco Editor and AI assistant support (optional). This page provides a complete workflow from creating new pages to committing changes to the filesystem.

Function: This page provides a complete IDE for: - Creating new Frappe Pages with automatic file structure generation - Editing page JavaScript code with syntax highlighting and autocomplete - Viewing and filtering page lists by application and type - Managing draft changes before commit - Generating missing files for orphan pages - Synchronizing metadata from JSON files - Tracking changes in Update Sets for version control - Using AI assistant to help with development (if TechMaju AI is installed)

Role Required

• System Manager
• TM Developer

Desk Page Studio Fields

Procedure

1. Navigate to TechMaju Core > Desk Page Studio

2. Viewing and Filtering Pages:

   • Use Application dropdown to filter by application
   • Use Type dropdown to filter by page type:
     • All Pages: All pages
     • System Generated: System pages (read-only)
     • Custom Pages: Custom pages that can be edited
   • Click Filter button to toggle filter panel
   • Click Refresh button to reload page list from codebase

3. Creating a New Page:

   • Click '+ New Page' button
   • Fill in the form with the following information:
     • Page Name: Unique name in lowercase-with-hyphens format (example: my-custom-page)
     • Title: Page title to be displayed
     • Application: Select module/application for the page
     • Icon: Icon name (example: fa fa-file) - optional
     • Restrict To Domain: Domain restriction - optional
     • Standard: Select Yes/No
     • System Page: Check if system-generated page
   • Click Create
   • System will create automatic file structure:
     • {page_name}.json - Page metadata
     • {page_name}.js - JavaScript client code
     • {page_name}.py - Python server methods (boilerplate)
     • __init__.py - Python package initialization

4. Editing Pages:

   • Click page name from list to open in editor
   • Edit JavaScript code in Monaco Editor
   • Use syntax highlighting and autocomplete
   • Modified status will appear if there are unsaved changes
   • Note: System Pages are marked with blue badge and are read-only

5. Using AI Assistant (if TechMaju AI is installed):

   • Type instructions in AI Chat panel
   • AI will provide code change suggestions
   • Review diff before applying changes
   • Accept or reject each suggestion
   • Chat history is saved in session

6. Saving Draft:

   • Click 'Save Draft' button to save changes to session
   • Draft is saved in database, not yet to filesystem
   • Can be reset with 'Reset Draft' menu (back to last commit)

7. Committing Changes:

   • Click 'Commit' button to write changes to filesystem
   • Commit confirmation will appear
   • Files that will be written:
     • {page_name}.json - Latest metadata
     • {page_name}.js - JavaScript code from draft
     • {page_name}.py - Python code (if any)
     • __init__.py - Package initialization
   • Changes are automatically tracked in Update Set (if developer mode is active)
   • Cache will be cleared and asset build runs in background

8. Managing Missing Files:

   • Orphan Page (red badge): Page exists in database but no folder in codebase
     • Click 'Sync from Codebase' to generate file structure from metadata
   • Missing Files (yellow badge): Some mandatory files are missing
     • Click 'Generate Missing Files' to create missing files
   • Mandatory files: .json, .js
   • Optional files: .py, __init__.py

9. Menu Actions:

   • Reset Draft: Revert draft to last committed version from file
   • Sync Metadata: Update Page doctype from JSON file (if manually edited outside Studio)
   • Page Settings: Open Page doctype form in new tab
   • Open Page: Open the currently edited page in new tab

10. Sidebar Toggle:

    • Click sidebar toggle icon to hide/show page list
    • Provides more space for editor

Best Practices

• Always test in development environment before committing to production
• Use descriptive Page Names in kebab-case format (lowercase-with-hyphens)
• Save Draft regularly to avoid losing changes
• Review diff from AI suggestions before applying - don't accept all automatically
• Commit changes atomically - one feature or fix per commit
• Generate missing files before committing to avoid errors
• Don't edit System Pages - they are read-only and will be overridden during upgrades
• Sync metadata if making manual changes to JSON files outside Studio
• Use appropriate module when creating new pages for good organization
• Backup Update Sets regularly for good version control
• Run 'bench build' manually if auto-build fails after commit
• Test page in browser after commit to ensure no runtime errors
• Use AI Chat for boilerplate code and refactoring suggestions, but always review the results