Here is a step-by-step guide to creating a component in AEM Touch UI with more detail:
- Open the AEM Touch UI: To create a component, you need to have access to the AEM Touch UI. You can access the Touch UI by navigating to http://localhost:4502/sites.html and logging in using your AEM credentials.
- Create a new folder: In the Touch UI, navigate to /apps and create a new folder to store your component. Give the folder a name that represents your component. For example, you could name it
my-component. - Create a component: Within your component folder, click on the “Create” button and select “Component” from the dropdown menu. Give your component a name that reflects its purpose. For example, you could name it
myComponent. - Define the component properties: In the Component Properties dialog box, enter the properties of your component, such as the title, description, and group. Here are some common properties:
- Title: The title of the component.
- Group: The group to which the component belongs.
- Description: A brief description of the component.
- Dialog title: The title of the dialog box that appears when the component is edited.
- Dialog height: The height of the dialog box.
- Define the component structure: In the Component Editor, define the HTML structure and layout of your component using the drag-and-drop interface. You can add different types of components to your structure, such as text, images, and videos. You can also use the “Design” mode to create your component structure.
- Define the component dialog: In the Component Editor, create a new tab and add fields to create the dialog box that will appear when you edit your component. You can add different types of fields to your dialog box, such as text fields, image selectors, and drop-down menus. Here are some common fields:
- Title: A text field for the title of the component.
- Image selector: An image selector for selecting an image to display in the component.
- Text field: A text field for entering content to display in the component.
- Drop-down menu: A drop-down menu for selecting different options for the component.
- Add component scripts and styles: Within your component folder, create a
clientlibsfolder and add a JavaScript file and a CSS file to define the behavior and styling of your component. You can use JavaScript to add interactivity to your component, such as displaying and hiding certain elements. You can use CSS to style your component, such as changing the font size and color. - Preview and test your component: Use the Preview mode to test your component and make any necessary changes. You can also test your component by adding it to a page and previewing the page.
- Package and install the component: Once you have created your component, you need to package it into a content package and install it in AEM. You can do this using the CRX Package Manager tool. To package your component, select your component folder and click on the “Package” button. Give your package a name and click on “Create”. Then, install your package by selecting it in the Package Manager and clicking on the “Install” button.
That’s it! You have now created a component in AEM Touch UI. This process is more efficient and user-friendly than in Classic UI and is the recommended way to create new components in AEM.
