Show hide dialog fields based on selection in touch ui

AEM is having one OOTB client-library to implement this hide/show feature, used in OOTB list component.

http://adobeaemclub.com/toggle-fields-based-on-selection-in-granite-ui-dialogs/
http://stackoverflow.com/questions/25244844/conditional-show-hide-of-fields-in-aem-6-dialogs


However, OOTB client-library doesn’t cater some very common use case ie show a particular field for more than one option in the dropdown.

For this use case add a custom hide/show JS available here.

Points to remember while implementing the dialog using the custom hide/show JS.

1. Multiple option values can be added on the field separated with a white space to cater to the use case of showing a field for multiple options of selection.
   
   
2. Atleast One field needs to have all the option values. This can be a field which is never hidden for any of the options else sometimes the entire tab doesn’t show up. Eg.
   
   /apps/project/components/content/base-
   list/cq:dialog/content/items/links/items/column/items/orderBy.
   
   
3.  There are some issues with hiding input labels in such case so it might be good idea to wrap the field into the section (granite/ui/components/foundation/well)

Touch UI multifield/composite multifield

6.2 aem provides OOTB multifield in which only one widget/field can be configured.

For example, have a look at the OOTB list component (/libs/foundation/components/list/cq:dialog/content/items/column/items/setStatic/items/well/items/pages)

For Composite multifield, Read here

CREATING AEM PROJECT FROM MAVEN ARCHETYPE

Ensure

• AEM is up and running on http://localhost:4502/
• Java 1.5 or greater and Maven 3.0.4 or greater are installed
• you are connected to the internet

Several Maven archetypes are available for generating CQ projects. Use the archetype that corresponds with your development goals:

·       A content package that installs resources for a CQ application: simple-content-package-archetype

·       A content package that includes third-party artifacts: simple-content-package-with-embedded-archetype.

·       A multi-module application that accomodates the development of Java classes and unit tests: multimodule-content-package-archetype.(described above)

 Both 1 and 2^nd archetype above doesn’t allow for java devt. They only create a folder structure for creating cq components. So if the project has java classes then they should go for only 3 -  multimodule-content-package-archetype.

SIMPLE-CONTENT-PACKAGE-ARCHETYPE

Creates a maven project that is suitable for installing resources for a simple CQ application. The folder structure is that used below the /apps folder of the CQ repository. The POM defines commands for packaging the resources that you place in the folders and installing the packages on the CQ server.

Archetype artifact properties:

·       Group ID: com.day.jcr.vault

·       Artifact ID: simple-content-package-archetype

·       Version: 1.0.2

·       Repository: adobe-public-releases

Maven command:

mvn archetype:generate -DarchetypeGroupId=com.day.jcr.vault \

-DarchetypeArtifactId=simple-content-package-archetype \

-DarchetypeVersion=1.0.2 \

-DarchetypeRepository=adobe-public-releases

Archetype parameters:

·       groupId: The groupId of the content package that Maven generates. The value is autoatically used in the POM file. 

• artifactId: The name of the content package. The value is also used as the name of the project folder.
• version: The version of the content package.
• package: This value is not used for simple-content-package-archetype.
• appsFolderName: The name of the folder below /apps. 
• artifactName: The description of the content package.  
• packageGroup: The name of the content package group. This value configures the group parameter for the Package goal of the Content Package Maven Plugin.

Folder structure:

${artifactId}    |- pom.xml    |- README.txt    |- src       |- main          |- content              |- jcr_root                  |- apps                      |- ${appsFolderName}                             |- components                                |- .content.xml                             |- config                             |- install              |- META-INF                  |- vault                      |- config.xml                      |- filter.xml                      |- nodetypes.cnd                      |- properties.xml                      |- definition                         |- .content.xml

SIMPLE-CONTENT-PACKAGE-WITH-EMBEDDED-ARCHETYPE

Performs the same tasks as the simple-content-package-archetype, and also downloads and includes an artifact from a public Maven repository. 

Archetype bundle properties:

·       Group ID: com.day.jcr.vault

·       Artifact ID: simple-content-package-with-embedded-archetype

·       Version: 1.0.2

·       Repository: adobe-public-releases

Maven command:

mvn archetype:generate -DarchetypeGroupId=com.day.jcr.vault \

-DarchetypeArtifactId=simple-content-package-with-embedded-archetype \

-DarchetypeVersion=1.0.2 \

-DarchetypeRepository=adobe-public-releases

Archetype parameters:

·       groupId: The groupId of the content package that Maven generates. The value is autoatically used in the POM file. 

·       artifactId: The name of the content package. The value is also used as the name of the project folder.

·       version: The version of the content package.

·       package: This parameter is not used.

·       appsFolderName: The name of the folder below /apps. 

·       artifactName: The description of the content package.  

·       embeddedArtifactId: The ID of the artifact to embed in the content package.

·       embeddedGroupId: The group ID of the artifact to embed.

·       embeddedVersion: The version of the artifact to embed.

·       packageGroup: The name of the content package group. This value configures the group parameter for the Package goal of the Content Package Maven Plugin.

Folder structure:

${artifactId}    |- pom.xml    |- README.txt    |- src       |- main          |- content              |- jcr_root                  |- apps                      |- ${appsFolderName}                             |- components                             |- config                             |- install              |- META-INF                  |- vault                      |- config.xml                      |- filter.xml                      |- nodetypes.cnd                      |- properties.xml                      |- definition

Archetype - multimodule-content-package-archetype (AEM 5.6.1)

1. Create the initial structure from Adobe's multimodule-content-package-archetype

In your shell, go to a directory where your project is supposed to be created.

In the following example, line breaks are only to make reading simpler. Everything goes on one line.

$ mvn archetype:generate \     -DarchetypeRepository=http://repo.adobe.com/nexus/content/groups/public/ \     -DarchetypeGroupId=com.day.jcr.vault \     -DarchetypeArtifactId=multimodule-content-package-archetype \     -DarchetypeVersion=1.0.2 \     -DgroupId=my-group-id \     -DartifactId=myproject \     -Dversion=1.0-SNAPSHOT \     -Dpackage=com.mycompany.myproject \     -DappsFolderName=myproject \     -DartifactName="My Project" \     -DcqVersion="5.6.1" \     -DpackageGroup="My Company"

2. Confirm the provided values by entering "Y" and hitting Return when Maven asks.

Confirm properties configuration: groupId: my-group-id artifactId: myproject version: 1.0-SNAPSHOT package: com.mycompany.myproject appsFolderName: myproject artifactName: My Project cqVersion: 5.6.1 packageGroup: My Company  Y: :

3. Maven has created a directory for the project. Change into it:

# cd myproject

4. Now build the project and install it into your AEM instance. [don’t execute this step before configuring public repo – see next step.]

# mvn –PautoInstallPackage clean install

As a result the following hierarchy is used for the project files:

• myproject - root folder
• content - project folder holding UI resources
• bundle - project folder containing the OSGI services
• pom.xml - the Maven reactor and parent project file

Archetype 10 - com.adobe.granite.archetypes(AEM 6.1)

Requirements

• Adobe Experience Manager 6 or higher
• Apache Maven (3.x should do)
  
  
  

Using CMD – Recommended

Equivalent Maven Command to Create a project based on Archetype 10:

mvn archetype:generate -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=10 -DarchetypeRepository=adobe-public-releases

Now build the project and install it into your AEM instance. [don’t execute this step before configuring public repo – see next step.]

# mvn clean install -PautoInstallPackage

Using AEM plugin

http://www.aemcq5tutorials.com/tutorials/configure-aem-plugin-for-eclipse/

Touch UI Checkbox selected by default

When dialog is opened the checkbox should be selected by default.

Steps to achieve this in touch UI, Read Here

AEM Install : Setting up author and publish instance AEM

At the infrastructure level AEM provides the following:

• Web Application Server: AEM can be deployed in standalone mode (it includes an intergated Jetty web server) or as a web application within a third-party application server (WebLogic, WebSphere, etc).
• Web Application Framework: AEM incorporates the Sling Web Application Framework that simplifies the writing of RESTful, content-oriented web applications.
• Content Repository: AEM includes a Java Content Repository (JCR), a type of hierarchical database designed specifically for unstructured and semi-structured data. The repository stores not only the user-facing content but also all code, templates and internal data used by the application. 

The AEM software package is available in two forms:

• cq-quickstart-6.1.0.jar: A standalone executable jar file that includes everything needed to get up and running.
• cq-quickstart-6.1.0.war: A war file for deployment in a third-party application server.
  
  
  In addition you will also need a license code (to be entered on start-up) or a license.properties file, holding a valid code.

Setting up author and publish instance AEM

Installing an Author Instance

This procedure describes how to set up a default Author instance on port 4502 of the desired host.

To install an author instance:

1.     On the host file system, create a directory and name it author.

2.    Copy the CQ5 cq-wcm-quickstart-<version>.jar file into author/.

3.    Rename cq-wcm-quickstart-<version>.jar to aem65-author-p4502.jar. If you need a different port this can be set in the filename.

4.    Copy a valid license.properties file into author/ as well (the same directory as the aem65-author-p4502.jar file).

5.    Start CQ WCM Quickstart:

       java -jar aem65-author-p4502.jar

            Additional cmds:

a.     For a 32-bit Java VM enter the following:

       java -Xmx1024M -jar aem65-author-p4502.jar

b.     For a 64-bit VM, enter:

       java -jar aem65-author-p4502.jar -XX:MaxPermSize=256m -Xmx1024M

Similarly, for publish- just use port 4503.

Running aem in debug mode

Remote debugging in aem