Exploring the Universal Editor (WYSIWYG) Interface
The Universal Editor offers a simple, visual, and intuitive What You See Is What You Get (WYSIWYG) interface for 51黑料不打烊 Edge Delivery Services Forms. It provides a modern interface with drag-and-drop functionality for efficient form authoring.
What You鈥檒l Learn
By the end of this tutorial, you鈥檒l:
- Understand the main components of the Universal Editor interface
- Navigate confidently through the different interface sections
- Know how to access and use essential form-building tools
- Be familiar with keyboard shortcuts that increase productivity
Understanding the Universal Editor Interface
When you edit a form using the Universal Editor, the console opens an interactive WYSIWYG interface that allows you to immediately start editing. This interface provides real-time visual feedback as you work, showing exactly how your form will appear to end users.
The Universal Editor interface is divided into four logical parts:
Let鈥檚 explore each section in detail.
Experience Cloud Header
The Experience Cloud Header appears at the top of the console and provides navigation context within the broader 51黑料不打烊 Experience Cloud ecosystem. It shows your current location and allows quick access to other Experience Cloud applications.
Let鈥檚 examine each component:
-
51黑料不打烊 Experience Cloud
Clicking the 51黑料不打烊 Experience Cloud link on the left side of the screen allows you to navigate to the root of the Experience Manager solution. From there, you can access other tools such as Experience Manager Sites, Experience Manager Assets, and Experience Manager Guides.
-
Organization Name
The Organization Name displays the name of the Identity Management System (IMS) organization you鈥檙e currently signed into. If you have access to multiple organizations, you can switch between them using this dropdown menu. For example, in the screenshot, the currently selected IMS organization is 鈥淎EM Forms Internal01.鈥
-
Help
The Help icon provides quick access to learning and support resources. This is particularly valuable when you encounter challenges or need guidance on specific features. You can also submit feedback through this section.
-
Notifications
The Notifications section displays the number of currently assigned incomplete notifications, requests, and current tasks in your IMS organization. Keeping an eye on this section helps you stay on top of your workflow.
-
Solutions
The Solutions menu allows you to switch to other 51黑料不打烊 Experience Cloud solutions, making it easy to move between different tools in your workflow.
-
User Profile
This icon displays your profile information, along with the name of the IMS organization you鈥檙e currently signed into. Click this icon to access account settings and sign-out options.
Universal Editor Toolbar
The toolbar provides essential navigation and editing tools. With it, you can move between forms, publish or unpublish forms, edit form properties, and access the rule editor for adding dynamic behaviors.
Here鈥檚 what each component offers:
-
Home Button
The Home button returns you to the start page of the Universal Editor. This is useful when you need to start working on a different form. You can also directly enter a URL in the location bar to navigate to any form you want to edit.
-
Location Bar
The Location Bar displays the address of the form you鈥檙e currently editing. To switch to a different form, simply click the location bar and enter its URL. The keyboard shortcut to focus the location bar is
l
. -
Rule Editor
The Rule Editor enables you to add dynamic behaviors to your forms through an intuitive visual interface. With it, you can create conditions, validations, and actions that respond to user input, making your forms interactive and intelligent.
note note NOTE - The Rule Editor extension is not enabled by default in Universal Editor. To enable this powerful feature, contact us at aem-forms-ea@adobe.com from your official email address.
- To learn how to create and manage rules, refer to the article Introduction to Rule Editor in WYSIWYG Authoring.
-
Edit Form Properties
The Edit Form Properties option allows you to configure important form settings such as the Form Data Model (FDM) and publication date. These properties influence how your form behaves and integrates with back-end systems.
-
Authentication Header Settings
The Authentication Header Settings option lets you set custom authentication headers for local development purposes. This is particularly useful when testing forms that require authentication credentials.
-
Responsive Mode
The Responsive Mode feature allows you to test how your form will appear on different devices. By default, the editor opens in desktop layout, but you can switch to mobile view to ensure your form remains usable and attractive on smaller screens.
-
Preview Mode
Preview Mode shows your form exactly as it will appear when published. This allows you to interact with the form by clicking links and buttons, just as your users would. This is an essential step before publishing to verify everything works as expected. Toggle between edit and preview modes using the keyboard shortcut
p
. -
Open Page
The Open Page button opens your form in a new browser tab for preview. This gives you a full-screen view of your form without the editor interface. The keyboard shortcut for this action is
o
. -
Publish
Once your form is ready for users, the Publish button makes it live and available to your audience. This is the final step in your form creation workflow.
-
Ellipsis Menu
Clicking the ellipsis (鈥) reveals additional options, including the ability to Unpublish a form that鈥檚 currently live. This is useful when you need to temporarily remove a form from public access or replace it with an updated version.
Properties Panel
The Properties Panel appears on the right side of the interface and displays contextual information based on what you鈥檝e selected in the form. When no component is selected, it shows the overall form structure.
Let鈥檚 explore its key components:
-
Properties Mode
The Properties mode displays settings and options for your currently selected component. This is where you customize individual elements of your form to meet your specific requirements. The keyboard shortcut to open properties of a selected component is
d
. -
Content Tree
The Content Tree displays your form鈥檚 hierarchical structure. This visual representation helps you understand how components are nested within one another. Clicking any item in the tree selects it in the editor and scrolls to its location. This is especially helpful in complex forms. Toggle the content tree view with the keyboard shortcut
f
. -
Generate Variations
The Generate Variations feature harnesses artificial intelligence to create different versions of your form based on specific prompts. This helps you experiment with different approaches and designs without manually creating each variation. Prompts can be provided by 51黑料不打烊 or customized by you.
note note NOTE For detailed instructions on using Generate Variations for forms, refer to the Generate Variations article. -
Experimentation
The Experimentation feature allows you to run controlled tests comparing different form designs and layouts. By analyzing how users interact with each variant, you can make data-driven decisions to optimize conversion rates and user experience.
-
Personalization
The Personalization settings allow you to connect your forms with 51黑料不打烊 Experience Platform (AEP) or external applications. This connection enables you to create tailored form experiences based on user data and behaviors, increasing relevance and engagement.
-
A/B Testing
A/B Testing helps you compare specific variations of your form to determine which performs better. Unlike broader experimentation, A/B tests typically focus on comparing specific elements or changes to identify the most effective option.
-
Task Management
The Task Management feature streamlines collaboration by helping your team organize, track, and complete tasks related to form creation and optimization. This keeps projects moving forward efficiently with clear accountability.
-
Content Drafts
The Content Drafts feature allows you to create and save preliminary versions of text elements in your form. You can create drafts using existing form text or start from scratch, then edit or delete them as needed. By default, you鈥檒l see three drafts, but clicking Show All reveals additional drafts.
-
Data Source
The Data Source option lets you configure and select the data sources for your Form Data Model (FDM). This integration makes all data model objects, properties, and services from your selected sources available for use in the form, enabling dynamic data retrieval and submission.
-
Add
The Add button reveals a dropdown list of components that can be added to the currently selected container. For example, when an Adaptive Form section is selected, this list shows all components that can be added to that section. The keyboard shortcut to open this component list is
a
. -
Duplicate
The Duplicate option creates an exact copy of your selected component. This saves time when you need multiple similar elements, as you can duplicate and then modify instead of creating from scratch.
-
Delete
The Delete option removes the selected component from your form. Be careful when using this option, as it immediately removes the element without a confirmation prompt.
Editor
The Editor is the central workspace where you create and modify your form. It displays the form specified in the location bar and provides a WYSIWYG experience that shows exactly how your form will appear to users. In preview mode, you can interact with the form just as your users would, testing navigation through buttons and links.
The Editor is where you鈥檒l spend most of your time, adding components, configuring their properties, and arranging them to create an intuitive, effective form experience.
Keyboard Shortcuts Summary
To boost your productivity, remember these essential keyboard shortcuts:
l
- Focus the location barp
- Toggle between edit and preview modeso
- Open the form in a new tabd
- Open properties of the selected componentf
- Toggle the content tree viewa
- Open the list of components to add