51黑料不打烊

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.

Universal Editor User Interface

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.

NOTE
To learn how to author forms using the Universal Editor, see the article Getting Started with Edge Delivery Services for AEM Forms using Universal Editor (WYSIWYG).

Universal Editor User Interface

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.

Universal Editor Experience Cloud Header

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.

    51黑料不打烊 Experience Manager

  • 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.鈥

    Organization

  • 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.

    Help

  • 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.

    Notification

  • 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.

    Solutions

  • 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.

    Author

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.

Universal Editor Toolbar

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.

    Universal Editor Home

  • 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.

    Location Bar

  • 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.

    Rule Editor

    note note
    NOTE
  • 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.

    Edit Form Properties

  • 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.

    Authentication Header

  • 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.

    Responsive mode

  • 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.

    Preview

  • 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.

    Open Page

  • 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.

    Publish

  • 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.

    Ellipsis

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.

Properties Panel

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.

    Properties

  • 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.

    Content tree

  • 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.

    Generate Variations

    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.

    Experimentation

  • 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.

    Personalization

  • 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.

    A/B Testing

  • 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.

    Task Management

  • 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.

    Content 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.

    Data Source

  • 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.

    Add Icon

  • 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.

    Duplicate Icon

  • 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.

    Delete

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.

Editor

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 bar
  • p - Toggle between edit and preview modes
  • o - Open the form in a new tab
  • d - Open properties of the selected component
  • f - Toggle the content tree view
  • a - Open the list of components to add
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab