Adobe Experience Manager Advanced Dialogs with Granite UI

Dialogs are the key component to authoring digital experiences with Adobe Experience Manager. This course will teach you to build custom AEM dialogs, including Granite UI, dialog node structure, input validation, and tracing input back to AEM's JCR.
Course info
Level
Intermediate
Updated
Apr 27, 2018
Duration
2h 58m
Table of contents
Description
Course info
Level
Intermediate
Updated
Apr 27, 2018
Duration
2h 58m
Description

AEM dialogs are what empower content marketing teams to author digital experiences inside of Adobe Experience Manager. In this course, Adobe Experience Manager Advanced Dialogs with Granite UI, you will learn how to build AEM dialogs to create more intuitive components. First, you will learn the underlying framework from which components are built: Granite UI. Next, you will discover how a dialog's JCR node structure gets delivered as HTML to the browser. Finally, you will explore how to utilize JavaScript inside of your dialogs for custom functionality and input validation. When you're finished with this course, you will understand how to leverage Granite UI to build custom AEM dialogs that will help your business tackle any marketing objectives. Software required: Adobe Experience Manager.

About the author
About the author

Tyler Maynard has been a technology enthusiast since blowing up his parents 486 DX trying to install a Voodoo 1. In between teaching Node.js at UVU and developing AEM websites you can find him trying to explain why Javascript is good to his boss that writes Java.

More from the author
AEM Building Full Stack Components
Intermediate
2h 5m
Nov 12, 2018
Extending Adobe Experience Manager Advanced
Intermediate
6h 14m
Dec 13, 2017
More courses by Tyler Maynard
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everyone. My name is Tyler Maynard and welcome to my course, Advanced AEM Dialogs with Granite UI. I am an AEM solutions engineer at Hoodoo Digital. AEM's dialogs are the key component to authoring digital experiences and empowering content marketing teams. In this course we will focus on building intuitive AEM dialogs and learn how to leverage their underlying framework, Granite UI. Some of the major topics that we will cover include: Granite UI's role on the server and the client, the dialog node structure, pre-populating dialog content, and creating dynamic content with data source. By the end of this course you'll know how to utilize Granite UI to build custom AEM dialogs to tackle any business objective. Before beginning this course you should be familiar with building an AEM project from source code to an AEM instance. I hope you'll join me on this journey to learn Granite UI and AEM dialog development with the Advanced AEM Dialogs with Granite UI course here at Pluralsight.

Granite UI Form Fields
Granite UI's form fields are what we use to capture content from content authors. These can be simple text fields or more complex fields like color pickers. In this module we will look into the dialog's form and how it creates resources in AEM's JCR and how to use Granite UI form components. Let's look at exactly what we will cover in this module. We'll start by investigating the form that is generated from our Granite UI's components and learn how to locate the resources that are created during form submission. From there we will take a look at the field component, which all other Granite UI form fields extend from and learn how we modify resources with our dialog's inputs. Then we will learn how to work with some of the more advanced form components like the number field and the date picker components. We will close the module by learning about the multifield component, which you can use to work with multiple instances of a single field.

Pre-populating Data for Components and Dialogs
In this quick module you will learn how you can pre-populate the resource in AEM when components are dragged onto the page. This will also populate any dialogs that are pointing to the pre-populated properties. Let's look at exactly what we will cover in this module. We'll start by learning how we can use cq:template nodes on components that will be used as a template for the resource that is created when you drag a component onto the page. Then we will take a look at how pre-populating this resource can be used to pre-populate your dialog's input fields.

Dialog Input Validation and Custom JavaScript
Our dialogs are a collection of form fields and checking data before it's submitted can save you a lot of headache. Input validation allows you to check the data before the dialog is submitted and Granite UI provides an easy way to add custom validation for your form fields. Adding custom validation, however, requires adding custom JavaScript and we can accomplish this through client libraries. We'll start the module by learning how we can add JavaScript to our dialogs through the cq. authoring. dialog client library category. Then we will learn how to add JavaScript in another way, which is through the includeClientlibs Granite UI component. We will also learn why these two methods for adding JavaScript are different and when you might use one over the other. From there you will learn about foundation-validation, which provides field validation in Granite UI. We will close the module by adding our own custom validation to one of the form fields in our dialogs.

Toggleable Dialog Form Fields
There may be times when you want to change what is displayed in a dialog based on the interaction of one of the dialog's input fields like a checkbox or a select drop-down. This module focuses on just that. Creating toggleable dialog form fields. This will be a quick module with demos for you to follow along. We'll start by learning about the secret drop-down show/hide client library that is kind of buried in AEM. We will use the JavaScript from this client library to toggle fields based on a dialog's select drop-down. Then you will learn how to hide a group of fields based on whether a checkbox in a dialog is checked or not.

Dynamic Dialog Content with DataSource
Earlier in this course we briefly talked about datasource, which can be used for creating dynamic content inside of our dialogs. In this last module you will learn how to leverage datasource to generate items dynamically. Let's take a moment to discover what we will cover in this module. We'll start by taking a closer look at datasource and how it can be leveraged in AEM in Granite UI. Then we will populate the options of a select drop-down using back-end logic so our options are dynamic based on content inside of the JCR. We'll close the module by learning how we can use a combination of ACS Commons, which is an open-source project and datasource to help manage our dialogs.