{"id":9290,"date":"2024-07-02T14:11:31","date_gmt":"2024-07-02T14:11:31","guid":{"rendered":"https:\/\/axamit.com\/?post_type=glossary-article&#038;p=9290"},"modified":"2024-08-16T13:49:25","modified_gmt":"2024-08-16T13:49:25","slug":"what-is-a-dialog-in-aem","status":"publish","type":"glossary-article","link":"https:\/\/axamit.com\/glossary\/aem\/what-is-a-dialog-in-aem\/","title":{"rendered":"What is a Dialog in AEM?"},"content":{"rendered":"<div class=\"custom-toc\"><ul><\/ul><\/div>\n<h2 class=\"wp-block-heading\">Short Answer<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In Adobe Experience Manager (AEM), a dialog is a user interface component that allows authors to configure and input content for a page component. Dialogs provide a form-like experience where authors can set properties and edit content in a structured manner.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dialogs in AEM<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Role of Dialogs<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dialogs are essential in AEM for content authoring. They empower authors to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Interact with page components by filling in fields, such as text, images, and links.<\/li>\n\n\n\n<li>Configure the appearance and behavior of components.<\/li>\n\n\n\n<li>Input data that is then stored as properties of the component&#8217;s node in the content repository.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Types of Dialogs<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">AEM provides two main types of dialogs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Classic UI Dialogs: These are based on ExtJS and were primarily used in older versions of AEM.<\/li>\n\n\n\n<li>Touch UI Dialogs: Introduced with AEM 6.0, these are based on CoralUI and Granite UI, offering a responsive and modern interface compatible with touch-enabled devices.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Structure of Dialogs<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A dialog is defined by an XML file (dialog.xml for Classic UI or _cq_dialog node for Touch UI) that specifies the layout and fields it contains, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text fields<\/li>\n\n\n\n<li>Path fields<\/li>\n\n\n\n<li>Checkboxes<\/li>\n\n\n\n<li>Selection dropdowns<\/li>\n\n\n\n<li>Image uploaders<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Creating and Configuring Dialogs in AEM<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step-by-Step Dialog Creation<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Define the Dialog Structure: Create the dialog node structure within the AEM component&#8217;s definition.<\/li>\n\n\n\n<li>Add Form Fields: Insert form fields into the dialog and configure their properties, such as field names and default values.<\/li>\n\n\n\n<li>Set Field Validation: Add validation rules if necessary to ensure correct data input by authors.<\/li>\n\n\n\n<li>Style the Dialog: Apply CSS to style the dialog elements to align with the design and user experience guidelines.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Using Dialogs for Content Authoring<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">When an author edits a page in AEM:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>They select a component to edit.<\/li>\n\n\n\n<li>The dialog associated with that component opens.<\/li>\n\n\n\n<li>The author enters or selects the desired content or configuration.<\/li>\n\n\n\n<li>Upon saving, the input is stored within the JCR as properties of that component node.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Best Practices for Dialogs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To create effective dialogs in AEM:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Keep it User-Friendly: Design dialogs to be intuitive and easy to use for content authors.<\/li>\n\n\n\n<li>Organize Fields Logically: Group related fields together and sequence them in a logical order.<\/li>\n\n\n\n<li>Use Appropriate Widgets: Choose form field types that are best suited for the type of content to be entered.<\/li>\n\n\n\n<li>Provide Help Text: Include descriptions or help text to guide authors on how to use the <a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/customizingtouchuidialogs\/\">dialog fields<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dialogs in AEM are fundamental to the content authoring experience, enabling non-technical users to manage and populate content on web pages effectively. They bridge the gap between back-end content storage and front-end content presentation, ensuring a smooth content management process within AEM&#8217;s powerful platform. Understanding how to design and implement dialogs is a core skill for <a href=\"https:\/\/axamit.com\/adobe-experience-cloud\/adobe-experience-manager\/hire-aem-developers\/\">AEM developers<\/a>, directly impacting the efficiency and quality of the content authoring process.<\/p>\n","protected":false},"author":12,"featured_media":5015,"menu_order":0,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"glossary-category":[43],"class_list":["post-9290","glossary-article","type-glossary-article","status-publish","has-post-thumbnail","hentry","glossary-category-aem"],"acf":{"post_title":"Dialog"},"_links":{"self":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/glossary-article\/9290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/glossary-article"}],"about":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/types\/glossary-article"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":3,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/glossary-article\/9290\/revisions"}],"predecessor-version":[{"id":9733,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/glossary-article\/9290\/revisions\/9733"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/media?parent=9290"}],"wp:term":[{"taxonomy":"glossary-category","embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/glossary-category?post=9290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}