{"id":9374,"date":"2024-07-09T12:31:55","date_gmt":"2024-07-09T12:31:55","guid":{"rendered":"https:\/\/axamit.com\/?post_type=glossary-article&#038;p=9374"},"modified":"2024-08-16T14:03:26","modified_gmt":"2024-08-16T14:03:26","slug":"how-to-create-multifields","status":"publish","type":"glossary-article","link":"https:\/\/axamit.com\/glossary\/aem\/how-to-create-multifields\/","title":{"rendered":"How to Create Multifields in Adobe Experience Manager (AEM)"},"content":{"rendered":"<div class=\"custom-toc\"><ul><\/ul><\/div>\n<p class=\"wp-block-paragraph\">In the world of&nbsp;<a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/what-is-aem\/\" data-type=\"post\" data-id=\"2483\">Adobe Experience Manager<\/a>&nbsp;(AEM), a multifield is a component that allows users to input multiple sets of data. These sets of data can be made up of various field types \u2013 text fields, number fields, dropdown selectors, and more. This guide will walk you through the steps of creating a multifield in AEM, providing detailed instructions and insights along the way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Multifields in AEM allow for the collection of variable amounts of data from users.<\/li>\n\n\n\n<li>The Touch UI provides an intuitive interface for creating multifields.<\/li>\n\n\n\n<li>A multifield component is created by defining it in a dialog box.<\/li>\n\n\n\n<li>The process involves creating nodes and properties in the AEM\u2019s Java Content Repository (JCR) using CRXDE Lite.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Multifields in AEM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Multifields in AEM are used when you need to collect or display multiple sets of data. A common application of multifields is in forms, where users might need to enter multiple entries of the same type of data.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Role of Touch UI<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">AEM\u2019s Touch UI provides a modern, user-friendly interface for creating and managing content. It\u2019s through this interface that you\u2019ll be able to create and configure multifield components.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Accessing CRXDE Lite<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CRXDE Lite is an integrated development environment (IDE) in AEM that allows you to interact with the JCR directly. This is where you\u2019ll create the nodes and properties for your multifield component.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To access CRXDE Lite:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open AEM in your web browser.<\/li>\n\n\n\n<li>Append <strong>\/crx\/de<\/strong>&nbsp;to your AEM URL.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Defining the Multifield in a Dialog<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The multifield is defined in a dialog box. A dialog in AEM is a user interface element where authors enter and configure the content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s define a multifield:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the dialog of your component.<\/li>\n\n\n\n<li>Right-click on the dialog and select <strong>Create<\/strong>-&gt; <strong>Create&nbsp;Node<\/strong>.<\/li>\n\n\n\n<li>Name the node and set the <strong>sling:resourceType<\/strong>&nbsp;to <strong>granite\/ui\/components\/coral\/foundation\/form\/multifield<\/strong>.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Field Nodes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After defining the multifield, you need to add field nodes, which represent the individual fields in the multifield:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Right-click on the multifield node and select&nbsp;<strong>Create<\/strong>-&gt; <strong>Create&nbsp;Node<\/strong>.<\/li>\n\n\n\n<li>Name the field node and set the <strong>sling:resourceType<\/strong> to the type of field you want to create. For example, for a text field, you would use <strong>granite\/ui\/components\/coral\/foundation\/form\/textfield<\/strong>.<\/li>\n\n\n\n<li>Repeat these steps for each field you want to add to the multifield.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Configuring the Fields<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each field node can be further configured with properties:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select a field node.<\/li>\n\n\n\n<li>In the&nbsp;<strong>Properties<\/strong>&nbsp;tab, click the <strong>Add Property<\/strong> button.<\/li>\n\n\n\n<li>Add the necessary properties for the field. For example, for a text field, you might add a <strong>fieldLabel<\/strong>&nbsp;property with the label of the field.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Testing the Multifield<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After creating and configuring the multifield, you should test it to make sure it works as expected:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the AEM&nbsp;authoring&nbsp;environment.<\/li>\n\n\n\n<li>Navigate to a page that uses the component containing the multifield.<\/li>\n\n\n\n<li>Open the dialog of the component and check that the multifield is displayed correctly and functions as intended.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Creating a multifield in AEM involves working with the JCR via CRXDE Lite, defining the multifield in a dialog box, adding and configuring field nodes, and testing the multifield. With multifields, you can create more dynamic and flexible components that can handle varying amounts of data, enhancing your ability to collect and display information in AEM.<\/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-9374","glossary-article","type-glossary-article","status-publish","has-post-thumbnail","hentry","glossary-category-aem"],"acf":{"post_title":"Create Multifields"},"_links":{"self":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article\/9374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article"}],"about":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/types\/glossary-article"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/users\/12"}],"version-history":[{"count":6,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article\/9374\/revisions"}],"predecessor-version":[{"id":9747,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-article\/9374\/revisions\/9747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/media?parent=9374"}],"wp:term":[{"taxonomy":"glossary-category","embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/glossary-category?post=9374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}