IDE Navigation and Interface

The Integrated Development Environment provides comprehensive navigation and interface management capabilities through menu systems, workspace organization, and efficient file access patterns. Understanding navigation mechanisms, menu functions, window management options, search capabilities, and interface organization enables developers to work efficiently, maintain organized workspaces, and access required tools and resources quickly throughout development activities.

The IDE interface combines traditional menu-based navigation with modern sidebar organization and tabbed workspace management, providing multiple pathways to accomplish common tasks while supporting individual workflow preferences and development patterns.

Menu System Overview

File Menu

The File menu provides access to creation functions for new development elements and session management operations. This menu serves as the primary entry point for initiating new development work and controlling IDE sessions.

New Element Creation: The File menu includes options for creating new development elements:

• New Page - Creates Active Pages, Templates, or Content Pages through a unified creation dialog
• New Template - Direct access to Template creation
• New Content Page - Direct access to Content Page creation
• New Controller - Creates standalone Controller classes
• New Class - Creates utility or business logic Classes
• New Trigger - Creates event-driven Triggers for entities

Session Management:

• Exit - Closes the IDE and returns to the portal home page after prompting to save any unsaved changes

Creation Workflow: Selecting any new element option opens a creation dialog with fields appropriate to the element type. Dialogs require name input, configuration selections, and confirmation before generating new files that open automatically in the editor.

Tools Menu

The Tools menu provides access to integrated development and reference tools that support debugging, data exploration, and resource discovery without requiring external applications or separate tool installations.

Available Tools:

• Event Logs - Opens the Event Log interface for viewing execution logs, error messages, and debug output
• Query Console - Opens the Query Console interface for executing Magentrix SQL queries and viewing data
• Font Icons - Opens the Font Icon library for browsing available glyphicons and obtaining implementation HTML

Tool Opening Behavior: Selecting any tool from the Tools menu opens that tool in a new browser tab, preserving the IDE workspace in the original tab. Multiple tools can be open simultaneously in separate tabs, enabling efficient switching between development and debugging activities.

Context Preservation: Opening tools in new tabs maintains all IDE workspace state including open files, unsaved changes, cursor positions, and sidebar navigation state. Returning to the IDE tab after using tools enables immediate continuation of development work without workspace reconstruction.

Window Menu

The Window menu provides workspace management functions and navigation shortcuts for accessing administrative interfaces and portal pages during development sessions.

Tab Management:

• Close All Tabs - Closes all open development file tabs after prompting to save unsaved changes in each file

Navigation Options:

• Open Setup Menu - Opens the Administrator Setup interface in a new browser tab
• Open Home Tab - Opens the portal home page in a new browser tab

Use Cases: Window menu functions support common development workflows including clearing workspace between projects or sessions, accessing administrative configuration without losing IDE context, testing deployed changes on the portal home page, and verifying user-facing functionality during development.

Setup Menu Access: Opening the Setup Menu enables quick switching between development activities and administrative configuration tasks such as entity management, field configuration, user administration, or other setup functions without closing active development work.

Home Tab Testing: Opening the Home Tab enables immediate testing of deployed Active Pages, verification of user interface functionality, confirmation of proper resource loading, and validation that customizations render correctly for end users.

Help Menu

The Help menu provides access to documentation resources in new browser tabs. Help menu items are self-explanatory and open external documentation sites without requiring detailed explanation in this documentation.

Documentation Access: Help menu items link to relevant documentation including Developer Guide, Knowledge Base, and Administration Guide, opening resources in new tabs for reference while maintaining IDE workspace context.

Sidebar Navigation

Sidebar Organization

The IDE sidebar provides hierarchical organization of all development elements, reference resources, and configuration options in a persistent panel on the left side of the interface. Sidebar sections appear as expandable/collapsible trees enabling focus on relevant resources while hiding unrelated sections.

Primary Sections:

• Pages - Active Pages organized in tree structure
• Templates - Templates organized in tree structure
• Contents - Content Pages organized in tree structure
• Controllers & Classes - Controllers and Classes grouped together
• Triggers - Triggers listed with entity associations
• Static Assets - JavaScript, CSS, and image files in hierarchical folders
• Entities - Complete entity schema browser for all available entities
• Labels - Translation labels for multi-language support

Section Expansion: Click expansion arrows or section headers to expand or collapse sections, revealing or hiding their contents. Expanded sections display their full hierarchical structure while collapsed sections show only section headers, reducing visual complexity.

Persistent Availability: The sidebar remains visible throughout IDE sessions regardless of which files are open in the editor. Sidebar persistence enables navigation to any development element without closing or switching between open files.

Tree Navigation

Within each sidebar section, development elements appear in tree structures that may include multiple hierarchy levels, folder organization, or flat lists depending on the section and organizational scheme.

Expansion and Collapse: Click expansion arrows next to folder icons or parent items to expand or collapse tree branches. Expanded branches reveal nested contents while collapsed branches hide nested items, supporting focused navigation.

Visual Hierarchy: Tree structures use indentation, connecting lines, and hierarchical icon arrangements to communicate organizational relationships. Visual hierarchy enables quick comprehension of structure and navigation to desired locations.

Scrolling: Sidebar sections support vertical scrolling when content exceeds visible space. Scroll within sections to access items not currently visible in the viewport without collapsing sections or losing navigation context.

Opening Files from Sidebar

Double-Click Opening: Double-click any development element name in sidebar trees to open that element in a new tab in the editor workspace. Double-click opening provides the fastest access method for known target files.

Right-Click Context Menu: Right-click any element name to display a context menu with available actions. Select Open from context menus to open elements in new tabs. Context menus also provide access to delete, rename, and other element-specific operations.

Multiple File Opening: Open multiple files sequentially by double-clicking different elements. Each opened file appears in a new tab in the editor workspace, enabling simultaneous access to multiple development elements.

Navigation Efficiency: Sidebar navigation enables quick switching between different file types and organizational areas without requiring menu navigation or search operations when developers know file locations in sidebar hierarchies.

Global Search Functionality

Search Location and Access

The global search field appears in the top-right corner of the IDE interface, providing persistent access to search capabilities throughout development sessions. The search field remains visible regardless of open files or sidebar navigation state.

Prominent Placement: Top-right positioning follows common application conventions, enabling quick visual location and access without scanning the entire interface. Search availability at the top level supports frequent use during development.

Always Accessible: Search functionality remains available regardless of current workspace state, open files, or menu selections. Persistent accessibility ensures developers can initiate searches without disrupting active work or changing interface state.

Search Scope

Global search operates across multiple development element types, searching through Pages, Templates, Contents, Controllers, Classes, and Triggers. Search scope encompasses most code-based development elements but excludes Static Assets and Entity schema information.

Comprehensive Coverage: Single search operations query across all in-scope element types, eliminating the need for separate searches in different sections or element categories. Comprehensive coverage accelerates location of elements when their type or location is uncertain.

Excluded Elements: Static Assets (JavaScript, CSS, images) and Entity schema definitions are not included in global search scope. Locate static assets through the Static Assets sidebar tree navigation and entity information through the Entity Browser section.

Search Execution

Enter search terms in the global search field to initiate searches. Search execution may occur automatically as text is typed (real-time search) or upon pressing Enter or clicking a search button depending on IDE implementation.

Keyword Matching: Search operates on keyword matching, looking for elements whose names or content contain entered search terms. Search typically operates in a case-insensitive manner, matching terms regardless of capitalization.

Partial Matching: Search finds elements containing search terms as substrings, not requiring exact complete name matches. Partial matching enables finding elements when only portions of names are known or remembered.

Multiple Word Search: Entering multiple words may search for elements containing all words, any words, or exact phrase matches depending on search implementation. Experiment with multi-word searches to understand specific search behavior.

Search Results

Search results display elements matching search criteria, showing element names, types, and possibly additional context information. Results enable direct navigation to matching elements through clicking or selection.

Result Display Location: Search results may appear in a dropdown below the search field, in a dedicated results panel, or integrated within sidebar sections. Result display varies by IDE implementation but provides consistent navigation functionality.

Direct Navigation: Click any search result to open that element in a new tab in the editor workspace. Direct navigation from results provides efficient access to found elements without manual sidebar navigation.

Result Organization: Search results may organize matches by element type, alphabetically, or by relevance. Organization patterns help locate desired items within results lists when multiple matches exist.

Search Clearing

Clear search terms to dismiss results and restore normal interface state. Most search implementations provide a clear button (X icon) within the search field for quick search term removal without manual text deletion.

Interface Restoration: Clearing search restores sidebar display to normal navigation state, dismissing result overlays and enabling standard tree navigation. Interface restoration enables quick transition from search-based navigation back to hierarchical navigation.

Search Use Cases

Forgotten Location: Use search when unable to remember which sidebar section contains a desired file or where files are located within hierarchical structures. Search eliminates the need to browse through multiple sections.

Quick Access: Search provides faster access than manual navigation when file names are known. Typing partial names and selecting from results is often faster than navigating through sidebar trees.

Name Verification: Search helps verify correct file names or identify files with similar names. Search results showing multiple similar names enable selection of the correct target.

Discovery: Search with general terms discovers files related to specific features, entities, or functionality. Discovery searches reveal related files that may require coordinated updates or review.

Tab Management

Tab Interface

The editor workspace uses a tabbed interface where each open file appears in its own tab with a tab header displaying the file name. Tabs enable simultaneous access to multiple files while conserving screen space compared to traditional multiple-window interfaces.

Tab Headers: Each tab displays the file name and may include file type icons, unsaved change indicators, or other visual markers. Tab headers enable quick identification of open files and switching between them.

Tab Bar Location: The tab bar appears at the top of the editor workspace, immediately above the code editing area. Tab bar positioning follows common application conventions for tabbed interfaces.

Tab Ordering: Tabs appear in the order they were opened, with new tabs typically appending to the right of existing tabs. Tab order may be manually adjustable through drag-and-drop operations if supported by the IDE implementation.

Opening Multiple Tabs

Open additional files through sidebar navigation, search results, or controller access links while existing tabs remain open. Each newly opened file appears in a new tab, expanding the tab bar horizontally.

Tab Accumulation: Tabs accumulate as files are opened during development sessions. Multiple open tabs enable cross-referencing between related files, comparison of implementations, and quick switching between active work areas.

Tab Limit Considerations: While there may be no enforced limit on open tabs, practical limits exist based on tab bar width and visual readability. Consider closing unused tabs periodically to maintain manageable workspace organization.

Switching Between Tabs

Click Switching: Click any tab header to switch to that tab, bringing its content into view in the editor area. Click switching provides direct access to any open file with a single interaction.

Keyboard Shortcuts: Tab switching keyboard shortcuts may be available depending on IDE implementation. Common patterns include Ctrl+Tab (Windows/Linux) or Command+Tab (macOS) for cycling through tabs sequentially.

Visual Current Tab Indicator: The active tab receives distinctive styling such as background color changes, bottom border highlighting, or other visual treatments that clearly indicate which tab is currently active.

Closing Tabs

Close Button: Each tab header includes a close button (typically an X icon) that closes that specific tab. Click close buttons to dismiss tabs individually without affecting other open tabs.

Unsaved Changes Protection: Attempting to close tabs with unsaved changes triggers confirmation prompts asking whether changes should be saved before closing. Prompts prevent accidental loss of unsaved work.

Close All Tabs: Use the Window menu's Close All Tabs function to close all open tabs simultaneously after handling unsaved changes in each file. Bulk closing enables quick workspace clearing between projects or sessions.

Tab Closure and History: Closing tabs removes them from the workspace without affecting saved file state. Closed files can be reopened through sidebar navigation, search, or other access methods, opening in new tabs with content matching last saved state.

Multi-Tab Workflows

Page and Controller Editing: Open Active Pages and their associated Controllers simultaneously in separate tabs. Switch between page markup and controller logic efficiently while implementing or debugging functionality.

Class and Caller Editing: Open Classes and the Controllers or Triggers that call them in separate tabs. Multi-tab access enables viewing class methods while writing calling code or verifying class method signatures during implementation.

Comparative Analysis: Open multiple similar files in separate tabs for side-by-side comparison or pattern reference. Compare implementations across different controllers, review related triggers, or examine similar page structures.

Reference While Coding: Keep reference files open in background tabs while actively editing other files. Switch to reference tabs to review patterns, verify naming conventions, or check implementation details without losing position in active work.

Workspace Organization

Editor Area

The central editor area occupies the majority of the IDE interface, displaying the content of the currently active tab. The editor area provides syntax highlighting, line numbering, code folding, and other editing features appropriate to the file type being edited.

Full Height Display: The editor area extends vertically from the tab bar to the bottom of the IDE interface, maximizing available space for code viewing and editing. Full height display accommodates longer files and reduces scrolling requirements.

Horizontal Width: Editor width extends from the sidebar to the right edge of the IDE interface. Width accommodates typical code line lengths while preventing excessive horizontal scrolling for most code.

Focus Indicator: The editor area shows visual focus indication when active, accepting keyboard input for editing and navigation. Focus indication may include cursor display, border highlighting, or other visual cues.

Sidebar Collapse and Expansion

Some IDE implementations support collapsing the sidebar to maximize editor space when sidebar navigation is not needed. Collapsed sidebars hide completely or reduce to icon-only views, providing additional horizontal space for code editing.

Collapse Control: Sidebar collapse may be triggered through dedicated collapse buttons, keyboard shortcuts, or interface gestures. Collapse controls enable quick toggling between full sidebar and maximum editor space.

Expanded View Restoration: Expand collapsed sidebars to restore full navigation access. Expansion restores previous sidebar state including open sections and scroll positions, enabling seamless return to navigation workflows.

Use Cases: Collapse sidebars when working with wide code files, viewing long lines, or focusing on editing without navigation distractions. Expand sidebars when navigation is needed or when making frequent file switches.

Interface Scaling

Browser zoom controls affect IDE interface scaling, enabling adjustment of text size and interface element sizing for readability and comfort preferences. Standard browser zoom shortcuts (Ctrl/Command + plus, minus, zero) adjust overall interface scale.

Text Readability: Increase zoom to improve text readability for developers with vision preferences or when working on high-resolution displays. Larger text reduces eye strain during extended development sessions.

Screen Space Balance: Decrease zoom to fit more content on screen when working with large files or when multiple reference materials need simultaneous visibility. Reduced zoom maximizes information density within available screen space.

Proportional Scaling: Browser zoom scales all interface elements proportionally including sidebar, tab bar, editor content, and menu elements. Proportional scaling maintains interface usability at different zoom levels.

Navigation Best Practices

Efficient File Access

Sidebar for Browsing: Use sidebar tree navigation when browsing for files within known sections, exploring folder hierarchies, or viewing organizational structure. Sidebar navigation provides context about file organization and relationships.

Search for Direct Access: Use global search when file names are known or partially remembered. Search provides faster access than navigating through multiple hierarchy levels when target files are identified.

Recent Files Awareness: Some IDE implementations maintain recent file lists or expanded state for recently accessed sections. Leverage recent file features when repeatedly accessing the same files during focused development work.

Workspace Management

Close Unused Tabs: Periodically close tabs for files no longer actively needed in current work. Closing unused tabs reduces workspace clutter, improves tab bar readability, and focuses attention on active work areas.

Logical Tab Grouping: When working on related functionality, open related files together creating logical groupings in tab bar. Grouped tabs support efficient workflows by keeping related resources adjacent and easily accessible.

Save Before Switching: Save files before switching to different work areas or closing tabs. Pre-switch saving prevents loss of work if unexpected events occur and ensures current progress is preserved.

Context Preservation

Minimize IDE Closure: Keep the IDE open in a browser tab throughout development sessions rather than repeatedly opening and closing. Continuous availability eliminates workspace reconstruction time and maintains development context.

Tab Persistence Awareness: Remember that closing the IDE browser tab loses all open files, unsaved changes, and workspace state. Be deliberate about IDE closure and ensure all important work is saved before closing.

Multi-Monitor Usage: On multi-monitor setups, dedicate one monitor to the IDE while using other monitors for documentation, testing, or tool access. Multi-monitor arrangements maximize available workspace and reduce window switching.

Troubleshooting Navigation Issues

Sidebar Issues

Missing Sidebar: If the sidebar doesn't appear, check whether it is collapsed or hidden. Look for expand buttons or interface controls that restore sidebar visibility.

Section Not Expanding: If sidebar sections don't expand when clicked, verify that sections contain content to display. Empty sections may not expand or may display messages indicating no available items.

Scroll Position Loss: If sidebar scroll position resets unexpectedly, note that some implementations reset scroll position on section expansion/collapse or file opening operations. Re-scroll to desired positions as needed.

Tab Issues

Tab Bar Overflow: When too many tabs are open to display simultaneously, tab bars may provide scrolling, dropdown overflow menus, or other mechanisms to access non-visible tabs. Look for navigation controls at tab bar edges.

Close Button Not Working: If tab close buttons don't respond, verify that unsaved change prompts aren't appearing behind other windows or in unexpected locations. Check for modal dialogs requiring attention before tabs will close.

Lost Tab Content: If tab content appears empty or doesn't load, try closing and reopening the file from sidebar navigation. Refresh the browser if file content consistently fails to display.

Search Issues

No Results: If searches return no results when matches should exist, verify search term spelling, try partial terms, experiment with case variations, and check that searched elements are within search scope (not Static Assets or Entities).

Too Many Results: If searches return overwhelming result counts, refine search terms with more specific keywords, use longer search strings to narrow matches, or use distinctive identifiers that appear in fewer files.

Search Not Available: If search functionality doesn't appear or respond, verify browser compatibility, ensure the IDE loaded completely, and refresh the browser if search features fail to function.

Jump to IDE Checklist

<< Code Editor Features | Labels in the IDE >>