Navigate the Universal Editor Interface for AEM Forms
The Universal Editor provides a visual interface for creating AEM Forms with Edge Delivery Services. It offers a What You See Is What You Get (WYSIWYG) experience that displays exactly how your forms will appear to users.
This guide helps you understand the interface to build forms efficiently. Whether you’re new to form building or an experienced developer, this guide will help you:
Learn Essential Skills:
- Navigate the interface confidently and efficiently
- Use the appropriate tools for common form-building tasks
- Leverage keyboard shortcuts to boost productivity
- Troubleshoot common interface issues
Master Key Workflows:
- Set up your workspace for optimal productivity
- Build forms from concept to publication
- Test and preview forms across devices
- Collaborate with team members on form projects
Getting Started Quickly
First-time users: Start with Essential Tools to learn the core features you’ll use most often.
Experienced users: Jump to Advanced Features for specialized tools and integrations.
Quick reference: Use the Interface Overview and Keyboard Shortcuts sections for fast lookups.
Interface Overview
The Universal Editor interface is organized into four main areas, each designed for specific tasks:
Interface Flow: Most users work primarily in the Editor Canvas (D) and Properties Panel ©, using the Toolbar (B) for actions like preview and publish.
Essential Tools for Form Building
Start here if you’re new to the Universal Editor. These are the core tools you’ll use for most form-building tasks:
1. Editor Canvas - Your Main Workspace
The Editor Canvas is where you build your forms visually. It displays exactly how your form will look to users.
Key Actions:
- Add components by clicking the Add button in the Properties Panel
- Select elements by clicking directly on them in the canvas
- See real-time changes as you configure components
- Test interactions in Preview Mode
2. Properties Panel - Configure Your Components
The Properties Panel (right side) is where you customize selected components and manage your form structure.
Essential Features:
- Properties Mode (
dshortcut) - Configure selected component settings - Content Tree (
fshortcut) - Navigate form structure - Add Components (
ashortcut) - Insert new form fields - Component Actions - Duplicate or delete selected elements
3. Toolbar Essentials - Preview and Publish
The Universal Editor Toolbar provides key actions for testing and publishing your forms.
Must-Know Tools:
- Preview Mode (
pshortcut) - Test your form as users will see it - Responsive Mode - Check how your form looks on mobile devices
- Open Page (
oshortcut) - View form in a new tab - Publish - Make your form live for users
4. Quick Start Workflow
For your first form:
- Start building - Add components using the Add button (
a) - Configure fields - Select components and use Properties Mode (
d) - Test your form - Use Preview Mode (
p) to interact with your form - Check mobile view - Switch to Responsive Mode for mobile testing
- Go live - Click Publish when ready
Validation Checkpoints:
- Can you add and configure form fields?
- Does Preview Mode work correctly?
- Are all required fields properly set up?
- Does the form display well on mobile devices?
Experience Cloud Header
The Experience Cloud Header provides navigation and account management tools. Most form builders use it occasionally for switching between ÃÛ¶¹ÊÓƵ tools or accessing help.
Key Elements:
Most Common Uses:
- Getting Help - Click the Help icon for documentation and support
- Switching Organizations - Use the Organization dropdown if you have multi-org access
Universal Editor Toolbar
The Universal Editor Toolbar contains your primary form editing and publishing tools. These are organized by frequency of use and typical workflow.
Daily Workflow Tools
These tools are used in most form-building sessions:
Preview Mode (p shortcut)
Purpose: Test your form exactly as users will experience it
When to use: Before publishing, after making changes, to test form functionality
Best Practice: Preview after every major change to catch issues early.
Responsive Mode
Purpose: Check how your form displays on mobile devices
When to use: After building your form, before publishing
Best Practice: Always test mobile view - many users will access forms on phones.
Open Page (o shortcut)
Purpose: View your form in a new tab without the editor interface
When to use: For full-screen testing, sharing with stakeholders for review
Publish
Purpose: Make your form live and accessible to users
When to use: After thorough testing in Preview and Responsive modes
Validation Checklist Before Publishing:
- Form tested in Preview Mode
- Mobile responsiveness verified
- All required fields configured
- Submit actions working correctly
Navigation Tools
Home Button
Purpose: Return to Universal Editor start page
When to use: Starting work on a different form
Location Bar (l shortcut)
Purpose: Navigate directly to any form by URL
When to use: Switching between specific forms quickly
Advanced Configuration Tools
These tools are used for specific scenarios or advanced setups:
AEM Form Properties
Purpose: Configure form-level settings like Form Data Model (FDM) and publication dates
When to use: Setting up data integrations, scheduling publication
The Form Properties panel includes the following sections:
-
Submission: Define what happens after a user submits the form. Choose from multiple submission actions such as sending data via email, submitting to SharePoint, using a Form Data Model, or integrating with services like ÃÛ¶¹ÊÓƵ Experience Platform or Microsoft Power Automate. For a full list of supported submit actions, refer to the Submit Action article.
-
Prefill: Configure how form fields are automatically populated before the user interacts with the form. You can connect to data sources such as a Form Data Model (FDM) or use URL parameters to prepopulate fields, enhancing the user experience and reducing manual input. To learn more, see the Prefill Service article.
-
Thank You: Customize what users see after submitting the form. You can display a confirmation message or redirect them to another webpage, ensuring a smooth and professional completion experience. To learn how to configure a thank-you message for forms, see the Configure Thank You Message article.
Rule Editor (Early Access)
Purpose: Add dynamic behaviors, validations, and conditional logic
When to use: Creating interactive forms with complex business logic
Authentication Header Settings
Purpose: Set custom authentication headers for development testing
When to use: Local development with authentication-required forms
Additional Options (Ellipsis Menu)
Purpose: Access less-common actions like unpublishing
When to use: Taking forms offline, accessing advanced options
Properties Panel
The Properties Panel (right side) is your control center for building and configuring forms. It changes based on what you select and provides different tools for different tasks.
Core Form Building Tools
These tools are essential for creating and organizing your forms:
Add Components (a shortcut)
Purpose: Insert new form fields and elements
How it works: Shows available components for the selected container
Common Components:
- Text Input, Email, Phone fields
- Dropdown, Radio buttons, Checkboxes
- File upload, Date picker
- Panels and sections for organization
Properties Mode (d shortcut)
Purpose: Configure settings for selected components
When to use: After adding any component to customize its behavior
Key Settings:
- Field labels and placeholder text
- Validation rules (required, format, length)
- Default values and help text
- Conditional visibility rules
Content Tree (f shortcut)
Purpose: Navigate and organize your form structure
When to use: Complex forms with multiple sections, finding specific components
Benefits:
- Quick navigation to any component
- Visual form hierarchy
- Easy reordering of elements
Component Actions
Purpose: Manage existing components
Available actions:
- Duplicate - Copy components quickly
- Delete - Remove components (no confirmation prompt)
Advanced Features and Integrations
These tools enable sophisticated form functionality:
Data Source
Purpose: Connect forms to backend data systems
When to use: Forms that need to read/write to databases or external services
Capabilities:
- Form Data Model (FDM) configuration
- Dynamic data population
- Submission to external systems
Generate Variations
Purpose: Use AI to create different versions of form content
When to use: Experimenting with different text, layouts, or approaches
| code language-none |
|---|
|
Learn More: Generate Variations Guide
Content Drafts
Purpose: Create and save preliminary text versions
When to use: Iterating on form copy, saving alternative text options
A/B Testing
Purpose: Compare form variations to optimize performance
When to use: Optimizing conversion rates, testing different designs
Experimentation
Purpose: Run controlled tests on form designs
When to use: Data-driven form optimization, user experience testing
| code language-none |
|---|
|
Task Management
Purpose: Organize team workflow for form projects
When to use: Multi-person form development, project tracking
Personalization
Purpose: Connect with ÃÛ¶¹ÊÓƵ Experience Platform for tailored experiences
When to use: Creating personalized forms based on user data
| code language-none |
|---|
|
Editor Canvas
The Editor Canvas is your main workspace where you visually build forms. It displays exactly how your form will appear to users and provides real-time feedback as you make changes.
Key Features:
- WYSIWYG editing - See changes immediately as you make them
- Direct interaction - Click on any component to select and edit it
- Real-time preview - Switch to Preview Mode to test functionality
- Responsive display - Toggle device views to check mobile compatibility
Best Practices:
- Start with structure - Add main sections before detailed components
- Test frequently - Use Preview Mode regularly to catch issues early
- Think mobile-first - Check Responsive Mode throughout the design process
Keyboard Shortcuts
Master these shortcuts to build forms faster and more efficiently:
adfpolPro Tip: Use these shortcuts in combination - for example, select a component, press d to configure it, then p to test the changes.
Common Workflows
Creating Your First Form
- Add structure - Use
ato add a Panel for form sections - Add fields - Insert Text Input, Email, and other components
- Configure properties - Select each field and press
dto set labels and validation - Test functionality - Press
pto preview and test the form - Check mobile view - Use Responsive Mode to verify mobile display
- Publish - Click Publish when ready to go live
Editing Existing Forms
- Navigate structure - Use Content Tree (
f) to find components quickly - Select and modify - Click components directly or use Content Tree
- Test changes - Preview (
p) after each significant change - Validate workflow - Test the complete form flow before republishing
Collaborating with Teams
- Use Task Management - Assign specific form sections to team members
- Share for review - Use Open Page (
o) to share clean previews - Test together - Use Preview Mode for collaborative testing sessions
- Track progress - Check Notifications for task updates
Troubleshooting Common Issues
Interface Problems
Problem: Toolbar buttons, Properties Panel, or other interface elements don’t appear
Solutions:
- Refresh the page - A simple browser refresh often resolves loading issues
- Check browser compatibility - Use Chrome, Firefox, or Safari
- Clear browser cache - Remove cached files that might be outdated
- Verify permissions - Ensure you have proper access to edit forms
Problem: Can’t select components or Properties Panel doesn’t update
Solutions:
- Click directly on components - Avoid clicking on empty areas
- Use Content Tree - Press
fand select components from the tree - Check for overlapping elements - Some components might be blocking others
- Reload the form - Use the Location Bar (
l) to reload the current form
Problem: Preview Mode doesn’t work correctly or shows errors
Solutions:
- Check form validation - Ensure all required fields are properly configured
- Test in Edit Mode first - Verify components work before previewing
- Clear browser cache - Cached scripts might interfere with preview
- Check component configuration - Review Properties Mode settings for errors
Best Practices for Efficient Form Building
Organization Tips
- Use descriptive names - Label components clearly in Properties Mode
- Group related fields - Use Panels to organize form sections logically
- Plan before building - Sketch your form structure before starting
- Keep it simple - Avoid overwhelming users with too many fields
User Experience
- Test frequently - Use Preview Mode after every major change
- Think like users - Consider the complete form-filling experience
- Provide clear labels - Make field purposes obvious to users
- Add helpful text - Use help text for complex fields
Performance Optimization
- Minimize components - Use only necessary form fields
- Optimize images - Compress any images used in forms
- Test on mobile - Ensure good performance on slower mobile connections
- Validate early - Set up proper validation to prevent submission errors
Next Steps
Now that you understand the Universal Editor interface:
- Practice with a simple form - Start with basic fields to get comfortable
- Explore advanced features - Try AI-powered tools and integrations when ready
- Learn form authoring - See the Getting Started Guide
- Master rule editor - Add dynamic behaviors with the Rule Editor Guide
Remember: The Universal Editor is designed to make form building intuitive. Start with the essentials and gradually explore advanced features as your needs grow.