Beginners Guide to React JS

React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes.

– Official React Documentation

Glossary:
React JS and React have been used interchangeably throughout the blog and mean the same thing.

React Native: React code that is usable across the web and  mobile.

Angular: MVC framework for UI.

Transpiler: A type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language. Transpiler and compiler can be used interchangeably.

DOM: Document Object Model is a tree of HTML objects.

Note: This blog has been written entirely from my perspective and is what I feel as a newbie to the world of React.

Let’s get started.

There’s a lot of good buzz about React out there.

It seems like React JS has become a library many want to try out but somehow, it’s always out of reach. This blog is aimed towards the audience who is looking for a perfect mix of theory and hands-on.

What is React?

React provides you a templating language and some function holders to primarily render HTML. That’s all React yields, HTML. React is mainly the view layer. React is listed in the same verticals as other JavaScript frameworks but ‘React vs Angular’ doesn’t make sense at all because they aren’t directly comparable. Angular is a complete framework (including the view layer).

Is it worth the hype? Why is it getting so popular?

These are some of the benefits which make React JS standout among its contemporaries:

  • Easy to learn and easy to use:  Being able to do awesome things is great, but only if you don’t have to spend the rest of your life becoming perfect in a new technology. React is easy to learn and easy to use and comes with a good supply of documentation and an exponentially growing community.


    Github Stars History for Angular, React & Vue (Source)

  • Components: Everything in React is a component (will be explained later on). They are like the basic building blocks for your application . Components help you break your design into smaller parts that can be worked upon.
  • The Virtual DOM: One of the really cool parts of React is the virtual DOM. Usually, when you develop an app that has a lot of user interaction and data changes, you have to carefully notice how your app’ design is going to influence performance. Even with quick client side browsers, extensive DOM manipulation can be a performance deteriorator and result in an annoying user experience. Worse, because the DOM is tree-structured, simple changes at the top level can cause huge problems. React caters this by using a virtual DOM. This is, as the name implies, a virtual representation of the DOM. Any new view changes are first performed on the virtual DOM, which lives in memory and not on your screen.

An efficient algorithm then determines the changes made to the virtual DOM to identify the changes that need to be made to the real DOM. It then determines the most suitable way to make these changes and then applies only those changes to the real DOM. This ensures a minimum update time to the real DOM, providing higher performance and a cleaner user experience all around.

All that is fine but what’s up with all that jargon ?

  • Component: A React app comprises of components. A component is a reusable piece of code which defines how some features should look. All the parts you see in the below picture can be broken down into different components like the button, the display panel, all clubbed as a single component.
  • Properties (props): We can pass data to our components that remain unchanged throughout the lifecycle of that component. We can even pass methods as data in our props.
  • State: state, as the name suggests, defines the state of a component. Unlike props, they can change on user-based interactions and internal calculations. Think of them as observable data that control the behaviour of the component. 
  • JSX: It is basically a flavour of JS that can constitute HTML as well. It is highly intelligible. JSX (JavaScript Extended) is not understood by the browser. So, the browser doesn’t freak out, we use a transpiler like Babel which converts JSX into regular JS and renders HTML out of it. 

We will take up something to code on React in the next part of this blog…

My view about React Js 

Coming from JAVA background and having noob level knowledge about fronted (JS, CSS, HTML) lingo, React JS didn’t feel like something that couldn’t be done. A basic syntax of JS (maybe ECMA 6) is what you need to know to get started.

Effort required is a lot less as compared to other JS libraries and frameworks ( Angular for example).
Also when you know that you are getting into something that is largely industry friendly and has a great developer community, it just feels the right thing to do.
React JS when combined with react-router and react-bootstrap, serves as a complete package.

When I first encountered JSX as HTML being written inside JS, the idea itself sounded crazy. I thought why would anybody want that. But
after spending some time with it, everything made a lot of sense. The ability to re-render components based on state changes in the most efficient way is what makes React stand apart.

AEM-DTM-Target Integration. Simplified! – Part1

Introduction:
Let’s start with the introduction of three gems of Adobe Experience Cloud crown:

  1. AEM – Adobe Experience Manager(AEM) is a web content management system with a lot of powerful features to manage, organise and deliver the content with best in class experience. AEM came to Adobe with the acquisition of Day Software in 2010, earlier it was known as Day CQ (Communique). For this article, we are using AEM 6.3 version.
  2. DTM – Dynamic Tag Management(DTM) is a tag management tool which offers tools to integrate Adobe Experience Cloud Solutions as well as solutions like Google Analytics etc.DTM used to be known as ‘Satellite’ before Adobe had acquired it in 2013.
  3. Target – Adobe Target is a personalization solution of Adobe Experience Cloud Suite, which delivers the personalisation of content based on different type rules. Target came to Adobe with the acquisition of Omniture in 2009. In this article, we are going to demonstrate the Target VEC capabilities.

Architecture:
AEM can be integrated with Target directly without using DTM. However, it’s recommended to use the DTM in between due to listed benefits:

  1. Efficiency –DTM allows you to optimise the loading time of multiple tools and marketing tags.
  2. Reduce Cost – Minimise the development cost as once Data Layer is in place multiple solution can leverage the same.
  3. Flexibility – DTMallows you to quickly test and optimise tags without being bound by release cycles.
  4. Multiple Sites – Using DTM you can manage multiple sites from the single console.

AEM is usually connected with DTM using AEM Cloud Services and Target is connected to DTM using Experience Cloud configuration. Here is the relevant diagram:

 

Request Flow:
How a request flows from AEM to Target via DTM:

  1. AEM starts rendering a site page.
  2. Site has a DTM script attached along with Data Layer. DTM script is associated with a relevant property. Data Layer discussed below.
  3. DTM Property has Target added to it, which raises a request to Target and share required data.
  4. Target pushes its response back to AEM instance using mbox js. Note: Now mbox.js has a newer and updated alternative which is known as at.js
  5. AEM page got Target response which gets rendered on the page.     

Data Layer:
As you might have noticed in request flow that AEM site has got the DTM Script and Data Layer associated. Data layer is a W3C standard to store values in javascript object. Data layer is created at AEM and consumed by DTM to get the required data from AEM instance and push to any solution like Analytics, Target etc. We are going to create a sample data layer below in DTM Rules section.

DTM Setup:
To get the access of DTM, one has to raise the request with Adobe Client Care with proper information. Once the access is granted, go to https://dtm.adobe.com and login with the credentials provisioned by Client Care.

To start with DTM, create a new property with the URL of the website. Thereafter add the required tools in the property like Adobe Analytics or Adobe Target. In AEM configuration, we are going to use same DTM Property in order to integrate the AEM with Analytics, Target, etc.

For this article we are going to add Adobe Target, for this we need Client Code which will be provided by the Client Care or alternatively you can try adding using Experience Cloud membership.

 

DTM Property

Adding Tool in DTM Property

Adding Target as a Tool in DTM Property

DTM Rules:
In above steps you have created a new DTM property, added Target as a tool in the same property. Now you need to know how to play with data, DTM uses data layer to get the data from AEM instance. For example, using Target you need to render homepage of website based on browser, location, devices etc or you can also get the user specific details like age, gender, interests etc. Hence you need to get all such information from AEM in data layer. For example, here the data layer:

Once the data-layer is all set, fetch the values from data layer and set it in DTM data elements. We use these data elements in different types of rules. DTM has got three type of rules:
1. Event Based Rule – Rules executed when visitor interacts with on-page elements.
2. Page Load Rule – Rules executed when visitor loads the page.
3. Direct Call Rule – Rules executed when you want to tell DTM to do something specifically.

 

 

DTM Rules

Creating a data element using data layer is quite straight forward. You can see the below screenshot, here we have created a new data element Page Title which is mapped with pageName field of data layer created above 

Data Elements

DTM Workflow:
Every property in DTM follows a standard workflow. Workflow has got three steps:

  1. Creation of property and rules.
  2. Approve the newly added and modified rules.
  3. Publish the property to make the changes live.

AEM-DTM Integration:
There are two ways to integrate DTM with AEM:

  1. Using Cloud Services
  2. Embed JS
  1. Using Cloud Services:

Using AEM admin console, go to Tools > Deployment > Cloud Services. Find ‘Dynamic Tag Management’ and click on ‘Configure now’. Provide a Title and Name of the configuration keeping Parent Configuration field intact. Enter the details as below:

Property Description
API Token The value of the API Token property of your Dynamic Tag Management user account. AEM uses this property to authenticate with Dynamic Tag Management.
Company The company with which your login ID is associated.
Property The name of the Web Property that you created for managing the tags for your AEM site.
Include Production Code on Author Select this option to cause the AEM author and publish instances to use the production version of the Dynamic Tag Management libraries.

When this option is not selected, the Staging Settings apply to the author instance, and the Production Settings apply to the publish instance.

There is an option to self-host the DTM libraries which means AEM will host the DTM libraries if this option is checked, if we want to use the libraries from the cloud then we should uncheck this option. Here we are using later one.

  1. Embed JS:

Go to the DTM Console using https://dtm.adobe.com and click on the relevant property.
Go to Embed tab, copy the Header and Footer staging script, go to the AEM author instance and copy the script in header and footer of the website respectively. Similarly, copy the header and footer production script and put in the AEM publish instance.

Let’s say you have integrated DTM with AEM using one of the above-mentioned method, assign the DTM config to the root of your site using AEM Sites console.

DTM-AEM Connection Test:
Now you need to test whether DTM script is getting loaded with your website. In browser, try to open any page of your website where you have assigned the DTM config and open browser console. If “_satellite” object exists then it means DTM script is getting loaded. You can also try retrieving the data elements that you have created in DTM using “_satellite.dataElements”. If you are able to find all the details, you are good to go.

If _satellite object doesn’t exist, it means page doesn’t have the DTM header/footer script. You can view the source of the page to confirm the same.

 

Satellite Object

 

Satellite Data Elements

 

 

DTM Debugging Tools:
In DTM we play with different types of scenarios and scripts, hence we might need to check if the scripts are working fine and order they are getting executed.
There are couple browser plugins are available which proved to be quite for debugging.

Launch Switch:
It enables the logging in console and as well as we can test the changes using staging script, before making the changes live.

There are two button available on the plugin console. Tweaking them will do the following:
Debug: It enables the logging of the rules, you can also add the logs using _satellite.notify(“info”).
Staging: It will enable the changes you have made in property which you have not published. This is used for testing the changes  before making them live.

Download URL for Chrome: https://chrome.google.com/webstore/detail/launch-and-dtm-switch/nlgdemkdapolikbjimjajpmonpbpmipk

 

Tagtician:
It shows the detailed information about all the DTM Rules. 
Download URL Chromehttps://chrome.google.com/webstore/detail/tagtician-for-adobe-dtm/hiaoiehpkillodoeillmodjcadmfmcbg  

Reference:
Adobe DTM Documentation: https://marketing.adobe.com/resources/help/en_US/dtm/

This is the first part 1 of “AEM-DTM-Target Integration. Simplified!” where you have learned how to setup DTM, create DTM property and data elements, integrate DTM with AEM and debug DTM. In Part 2, you will learn how to create different types of rules in DTM, use these rules to share the information to Target, Target activities, Target audience and how to use Target VEC (Visual Enhanced Composer) along with the Target debugging tweaks.

Migration of SCR Annotations to DS Annotations

Migration of SCR Annotations to DS Annotations
Change is a rule of life, and if you are not updating yourself on current trends then you are constantly falling behind on new updates that can be essential to your system. With Adobe, they release a new version of AEM  every year. Last year, they introduced SCR annotations, and now they are supporting DS annotations. From AEM 6.2 DS Annotations are supported, and it is highly recommended that you use these in the newer version of AEM.  

Let’s see brief introduction of SCR Annotations and DS Annotations.

SCR Annotations:
SCR stands for Service Component Runtime. The ”maven-scr-plugin” uses scr annotations from the corresponding subproject at Apache Felix. All annotations are in “org.apache.felix.scr.annotations” package. The Apache Felix SCR described by the OSGi Declarative Services Specification is implemented by the “org.apache.felix.scr” bundle.

SCR annotations do not support new feature from R6 and above. It is highly recommended to use OSGi annotations for Declarative Services instead.

DS Annotations:
DS annotation is an official implementation from OSGi R6 (release 6) specification. It is also known as OSGi Declarative Services Annotations.
Remember that declarative services are a compiled time process. For DS annotations to be effective, they must be handled during the build process.
The migration is fairly easy and both annotation styles will work side-by-side while you complete the switch-over.
So here will we discuss how to migrate from SCR annotation to DS annotations.

Plugin:
For DS annotations we have to use “maven-bundle-plugin” instead of “maven-scr-plugin”. Version 3.2.0 or greater.


Dependencies:
For DS annotations we need artifacts  “org.osgi.service.metatype.annotationsand org.osgi.service.component.annotations” instead org.osgi.core” and “org.osgi.compendium”.

Java Package:
In DS Annotation, package “org.apache.felix.scr.annotations.*” will be replaced with “org.osgi.service.component.annotations.*”  and “org,osgi.service.metatype.annotations.*”.

Migration of Component and Services:
We used to use @Component, @Service annotations in SCR Annotations while in DS annotation just have @Component annotation with the collaboration of all these annotations.

SCR annotation Implementation:


DS annotation Implementation:

Migration of Sling Servlet:
We used to use @Component, @Service @SlingServlet @Properties in SCR Annotations while DS annotation just has @Component with the collaboration of all these annotations.

SCR annotation Implementation


DS annotation Implementation:


Migration of Custom Workflow process:
SCR annotations Implementation:


DS annotation Implementation:
 


Migration of Custom OSGi Configuration:
Major changes came in custom OSGi configuration. OSGi annotations provided a flexibility to create configuration in a separate interface and we can use it in any place.

SCR annotations Implementation:


DS annotation Implementation:
Interface:


Actual Class:


Fig- OSGi Configuration in Felix Console


Migration of OSGi Config:
Migration of OSGi config is quite tricky. There are two scenarios for OSGi config.

  1. You have created new configuration according to DS annotations and you want a config of it for a default value.
  2. You are migrating old custom config to a new one (DS annotations) and you already have config file.

Scenario 1:
If you have created your own custom config. For e.g.

Interface:

So, your default configuration will be:


Scenario 2:
If you have already default configuration and you are migrating to DS annotation. For e.g.

Config file:


So, your interface will be:


Hope this blog will help you to migrate from SCR to DS annotation.

Thank you!! Happy Learning!!

 

TRIGGERING A WORKFLOW USING EVENT LISTENERS IN AEM

AEM Version: 6.2
Target Audience: AEM Developers

Introduction

In AEM 6.2 Workflows, we can trigger a workflow when a DAM Asset is created, modified, or deleted within a given path. In this article, we will explore triggering workflows from our code based on events in the JCR.

Suppose you have a workflow that creates custom renditions of assets in addition to the default AEM renditions, when the asset is under “/content/dam/ProjectName/images/”. You would have set up two launchers for triggering this workflow: one with event type as “Node Create” and one with “Node Modified”. We can also achieve the same functionality through our code, without touching the GUI.

Requirement

When assets are moved into a certain folder structure in DAM, trigger a workflow that creates a 100px X 100px thumbnail of our image.

No-rendition-outside-imgs

Fig 1: Before Moving the asset, no custom thumbnail. Fig 2: Desired result after moving the asset, the new thumbnail.

Analysis

The intuitive thought is that when an asset is moved, a new node is created in the new location and the old one is deleted. However, experience shows that AEM does not create a new node in the destination folder on Node Move. We know this because the ‘jcr:Created’ property does not change. AEM does not even change the last modified date.

Creation Timestamp Before Moving the Asset Creation Timestamp is the same after moving

Fig 3: Creation Timestamp Before Moving the Asset. Fig 4: Creation Timestamp is the same after moving

Modification Timestamp Before Moving the Asset. Modification Timestamp is the same after moving

Fig 5: Modification Timestamp Before Moving the Asset. Fig 6: Modification Timestamp is the same after moving.

What if we copy the asset?

On copying the asset, a new version of the same is created. This triggers the Node Creation launcher.

No versions before copying the asset Version created after copy-pasting the asset

Fig. 7: No versions before copying the asset. Fig. 8: Version created after copy-pasting the asset.

Approach

Event Listeners

AEM supports observation, which enables us to receive notifications of persistent changes to the workspace. A persisted change to the workspace is represented by a set of one or more events. Each event reports a single simple change to the structure of the persistent workspace in terms of an item added, changed, moved or removed. There are thus 7 possible events at the JCR level, viz:

  1. Node Added
  2. Node Moved
  3. Node Modified
  4. Node Removed
  5. Property Added
  6. Property Removed
  7. Property Changed

We connect with the observation mechanism by registering an event listener with the workspace. An event listener is a class implementing the EventListener interface, that responds to the stream of events to which it has been subscribed. An event listener is added to a workspace with:

(A detailed explanation of each parameter is given with the code example in the package as well as the at the end of this article) As defined by the EventListener interface, listener must provide an implementation of the onEvent method:

When an event occurs that falls within the scope of the listener, the repository calls the onEvent method invoking our logic which processes/responds to the event. In our case, we will register an event listener to listen for “Node Moved” events under “/content/dam/images” so that when an asset is moved to that folder, our workflow can be triggered.

Implementation

When the component is activated, the activate(…) method is called. It contains a call to ObservationManager.addEventListener(…) for registering the event listener. The deactivate(…) method contains logic for deregistering the event listener, and is triggered when the bundle is being stopped.

When the relevant event occurs, the onEvent(…) method is called, which contains logic for processing the event. In our case, we trigger a workflow.

The following is the relevant code from ThumbnailNodeMovedListener.java:

Download this code (including the workflow):

Build it using

N.B: Creating a workflow is not part of this tutorial, and therefore a ready workflow has been provided in the code package. However, if you want to learn to create workflows, here is an excellent resource: ->

/workflow-in-aem/

References

Adobe Consulting Services. (2018, March 20). acs-aem-samples/SampleJcrEventListener.java at master · Adobe-Consulting-Services/acs-aem-samples. Retrieved from Github: https://github.com/Adobe-Consulting-Services/acs-aem-samples/blob/master/bundle/src/main/java/com/adobe/acs/samples/events/impl/SampleJcrEventListener.java

Day Software AG. (2018, March 20). JCR 2.0: 12 Observation (Content Repository for Java Technology API v2.0). Retrieved from Adobe Docs: https://docs.adobe.com/docs/en/spec/jcr/2.0/12_Observation.html

How to Change Data Type (Typecast) in AEM, Use @TypeHint

Problem Statement:

How to convert a variable from one data type to another data type in AEM.

For a use case where a number field is used in dialog and further data will be utilized in Sightly (HTL) for numeric comparison operations. Problem can come up as data will be stored in String format and comparison can only be made on same data type elements.

Solution:

@TypeHint: It is used to forcefully define the data type of a property. It can be used as following:

Scenario:

I have a number field in my dialog with name ‘sponsoredPosition’, by default it’s value is stored in String format and I wanted it to be stored in Long format instead of String.

Steps:

In the component add a node, parallel to the ‘sponsoredPosition’ node (The one of which data type needs to be changed) of the type nt:unstructured.

  1. In the new node add following properties:
  2. ignoreData{Boolean} = true
  3. value{String} = Long
  4. Name{String} [email protected]
  5. sling:resourceType{String} =   granite/ui/components/foundation/form/hidden.

Here,

(a) ignoreData, as the name suggests tells value of this field should not be stored.

(b) In value field you must define the data type in which you want your data to be stored.

(c) In Name field add ‘@TypeHint’ suffix to the property name of original node whose value was stored in string(by default) .

(d) Resource type hidden is used for hiding it in dialog.

 

BLOG SUMMARY & BUSINESS GOAL

This blog is intended to provide technical AEM users a solution to an asked question and tactical training on the topic: How to Typecast in AEM.

Conclusion

Adding @TypeHint solved the issue, now value is being stored in Long format instead of String.

Interested in more training and support for your organisation using AEM CMS? Request a consultation to discuss Argil DX managed services.

Workflow in AEM

In this blog, we will have a beginner journey on how to create a simple workflow, a launcher and custom steps involved in it.

Let us begin by understanding

WHAT ARE WORKFLOWS?

Workflow is a well defined series of steps that allows to automate activities of Experience Manager. It is divided into various steps including people (participants), procedures (process) or some tools. The flow of workflow can be either sequential or parallel when multiple procedures can run parallely to each other. In short, a workflow is similar to a flow-chart which describes the series of procedures to be executed having multiple participants to achieve a desired outcome.

There are many out of the box workflow models available for use and we can write our custom workflows which can be tailored as per the business needs of the company.

There can be plethora of use cases for writing workflows that may depend on the business needs.

For example, the process of publishing a page can be customized and tailored for inclusion of some special participants that need to approve the request for activation or send a mail after approval or rejection.

Workflow Models

Workflow Model is a container or blueprint of the workflow that combines the workflow steps and link them logically.

  • It has a start and an end node (plus an optional participant step) by default.
  • It can contain different nodes and the transitions that link them. The workflow nodes can get any input from author or can do processing via Java code or ECMA scripts.
  • Workflow payload is an important term which is considered as a resource on which workflow will perform it’s functions.

List of workflows can be seen on http://localhost:4502/libs/cq/workflow/content/console.html.

Figure 1: AEM Workflow Console

Figure 2: Tabs in Workflow Console

These are the tabs that contain the information about the workflows.

  • Models:- has workflow models having title of the workflow, version, description, and model id.
  • Instances:- lists the active instances of workflows having status (running, suspended etc.), initiator, start time, workflow model, payload associated with the workflow.
  • Archive:- contains the history of all the workflow instances. It contains the status (completed, aborted etc.),  initiator, start and end time, workflow model, payload, workflow title etc.
  • Launcher:- contains the launchers of workflow models that trigger initiation of workflows automatically on some action. It contains fields such as event type (created, deleted, modified), nodetype, globbing or path specified for action of node, condition, workflow model that needs to be triggered, description, value of enabled, exclusion list, run modes.
  • Failure:- shows failed instances of workflow on which some error occurred during execution. The issues can be fixed and workflow instances can be resumed.
Example

Let’s have a look at one of the practical examples of workflow. To create a new workflow we can add the title and the name (cannot contain spaces) of the workflow by clicking on New tab.

Figure 3: Create a new Workflow Model

Thereafter, we can edit the workflow created to customize it. This is the by default view of the workflow wherein there is a start and an end node with a default participant step.

Figure 4: By default view of workflow

We can view the logical layout of the workflow in the console whereas to see the node structure stored for the workflow we can see /etc/workflow/models/sample_workflow.

Figure 5: Node structure of workflow in CRX

It contains metadata about the workflow stored in JCR. We can notice flow and model nodes. It has the nodes between start and end node present in the workflow. The model node has all the steps added in the workflow marked as nodes alongwith the transitions they have between them. We can see the metadata of node 6 in the snapshot since it is a process step having title as Publish Page.

We can see the running instance of the workflow under /etc/workflow/instance path in CRX.

Figure 6: Nodes in trigger workflow instance

This is an example of trigger workflow having data (metadata and payload of which workflow instance is working upon), history, metadata of a particular step and work Items associated with the workflow.

Workflow Nodes

There are many workflow nodes that can be dragged and dropped such as Participant step, process step, and split, or split, dialog participant step, form participant step, container step, goto step etc.

  1. PARTICIPANT STEP: In this step the user can give
  • Title and description and select a user or a group.
  • The email option will send an email in the inbox of the user/group.

  

Figure 7: Participant Step

  1. PROCESS STEP: In this step
  • Common tab can contain title and description of the process step.
  • There are timeout settings too in which we can set the timeout limit of the workflow after which the timeout handler will start it’s execution.
  • In the process tab we select the process from the dropdown (We can add our own process in the list using java).
  • We have to check the option of Handler Advance so as to allow the workflow process step to proceed to the next step after performing it’s task.
  • There is another field named as Arguments in which we can pass the arguments to the process step for function and task.

   

Figure 8: Process Step

Now, to add our own process in the list we have to make a workflow process and register it as a service in java and can add the logical code that will execute on this process step.

This code snippet shows the basic skeleton of a workflow process that it required for process step.

@Component will register our Java class as a component with the properties that enables it immediately and helps it get the metadata provided by the execute method of WorkflowProcess class.

@Service will register our Java class as a service to be used in the Workflow process.

@Properties will add certain properties such as process.label which will show our class in the process list of the process step. The value of this property will be shown in the drop down list.

The Java class should implement WorkflowProcess interface and give definition to execute method. This method provides three arguments namely WorkItem, WorkflowSession, MetaDataMap.

  • WorkItem defines the currently started java process. It contains the data of the workflow and can be fetched using this argument such as Id, workflow, workflow data etc. We can access the workflow object using this. We can get payload of the data using a method of workItem.
  • WorkflowSession controls the workflow by providing methods that can deploy, complete, create, start, stop, resume, suspend, retrieve, complete workflow models, instances or user/groups. We can start another workflow using workflow session of current workflow.
  • MetadataMap is a Map<String, Object> of properties that are entered in the dialog of the process step. We can fetch the list of the arguments from metadata map.

There can be many other types of steps that can be configured within the workflow and can be tailored using java code, scripts, parameters etc. to provide the desired functionality.

  1. An OR SPLIT can be used to introduce branching in the workflow with which only one branch of the workflow can be activated (conditional) based on the script which is mentioned in the dialog.
  • The user can give either the path of the script or can write ECMA script in the given tab.
  • The Common tab has an option to select the number of branches required in the OR Split.

Figure 9: OR Split (marked with green)

 

Figure 10: ECMA script written for branch 1 (set as default route).

We can write different condition for branch 2 or can upload a script.

  1. AND SPLIT wherein all the branches go parallely and we can execute tasks for multiple processing.
  2. A CONTAINER STEP can allow another workflow to be executed as a child of the current workflow.This workflow is a sub workflow that can be instantiated. Another way of performing the same action is via Java code where we can start a workflow using workflowSession.
    This code snippet gets the model of the child workflow that needs to be invoked. Thereafter, the data of the workflow is created which is used to start the workflow in the current session.
  3. GOTO STEP traverses between the steps in the workflow based on the result of the ECMA script. It can be used to implement the use case of looping in the workflow process.
  4. DIALOG PARTICIPANT STEP is a special scenario of participant step where the user/group needs to give some information that is to be used in the workflow.
    • The additional step in this step is to provide a path of the dialog. We have to make that dialog in CRX  (/etc/workflows/dialog) and provide the path of that dialog to receive the input from the selected user/group.
    • The structure of the dialog should be cq:dialog type. This data can be stored in the form of payload (when we set the value of the property as ./jcr:content/nodename) which can be overwritten in subsequent uses of this dialog.
    • The data can also be stored with the work item (when the value is node name) metadata and is persisted with subsequent use of dialog.
Workflow Launchers

Workflow launchers can be used to trigger the workflow based on some event that can be specified in the launcher. We can add a launcher under the Launcher tab.

Figure 11: Creation of Launcher for Workflow

  • Event type:- can be either created, modified or deleted i.e. the action on which the launcher will trigger the workflow mentioned.
  • Nodetype:- is for the type of the node on which the launcher will apply to start the workflow.
  • Path:- specifies the path on which this action will be applied to during the workflow initiation i.e. on the which the launcher of the workflow will be applied to.
  • Condition tab:- determines the condition to be applied when the workflow is launched. This is optional in case a user wants to start the launcher based on a specific condition only.
  • Workflow:- Launcher needs to be associated with a workflow model so that it can be determined that what will be triggered with the help of this launcher.
  • Description:- can be set and activate should be enabled to enable the launch of the workflow launcher.
  • Exclude:- list is a comma separated list of JCR events or items to be ignored via workflow triggering.
  • Run modes:- in this dialog is to specify the server on which this will be applied to (author, publish, author & publish).

Hope you understood the basics of workflow and try to implement this in one of the use cases you experience.

We can explore workflows in detail in the future blogs.

Thanks for reading.

Happy Coding.

AEM Forms

Overview

AEM has provided AEM Forms tool in AEM 6 that simplify creation and management of complicated forms and form fragments. This tool ease the creation of interactive adaptive forms and authoring is similar to authoring components in pages. AEM forms uses “Lazy loading” i.e. components are loaded only when they are required so forms will be loaded faster.

It gives variety of features:

  • Pre-filling of forms
  • Theme development console
  • Inbuilt complex submit actions like PDF generation of HTML form
  • Rule editor
  • E-sign
  • File attachment
  • Scribble signature
  • Form fragment
  • Emailing the form data to an applicant on successful submission
  • You can easily write your custom submit action if needed.
  • and much more.
Steps to create an adaptive form:
i. Go to touch UI main console and select forms. 

ii. Select Forms and Documents

iii. Now create a new adaptive form by clicking the create button on top right corner. 

iv. Now select a theme , you can use by default theme or you can make your own theme and use it. For the time being let’s select tabbed enrollment.

v. Now provide basic information about the form you want to make.

vi. Now create and open it.

vii. Your basic form will look like this , let’s understand it’s components.

 

  1. We can divide our form in sections/tabs so that unrelated fields or the different sections of forms and be separated. We can add or remove these sections and we can rename these section by simply clicking on it and change its property in sidekick.
  2. These are the default fields we can change its field label , input type field , Placeholder, Regex in the property field in the sidekick.
  3. We can add more fields in the form by dragging those from parsys.
  4. We can configure logo of the form by simply clicking on the logo icon and edit it . we can select an image from DAM or we can upload it from our file system.we can also edit the logo title by simply clicking it and editing it.
  5. Form title can also be configured and if we want we can also exclude it to come in the final report which will be sent after submit.
  6. This is help content, we can provide this with each field, it is of 2 types short and long.We can provide this while providing properties to field below the patterns section.
  7. These are the basic buttons, we can modify their backend and frontend like any other form component.

viii. Now you can add any no. of fields in any section and make your AEM form.

List of available form components

 

 

Rule Editor

There are so many situations when we want certain rules to be applied to forms in the fields like in the drop down if India is selected in one list then other list must show states of India and in case of USA states of USA’s states must display, or when user enter pincode then name of city automatically comes in next field or you want to perform certain calculations.

AEM Forms provide very easy console for these rules here one can set up rules without writing single word of code.

  1. To make or apply a rule select the section on which you want to apply the rule and select the rule editor symbol(hammer and plate).
  2. Select the section from sidekick in the left.
  3. Select create (plus + icon on top).
  4. Select the type of operation you want to perform viz. When, Show, Hide, Enable , Set value, validate etc.
  5. Set the desired operation eg.

Form Fragment

A form designer is used to create common segments which will be used generic for all the forms like name and address, family details, income details, and so on. These reusable, generic and standalone segments are called adaptive form fragments and are widely used to design forms in AEM.

How to create form fragment
  1. Select create adaptive form fragment from form console
  2. Fill the basic details like name and description.
  3. Open it.
  4. A blank page with a parsys will appear now drop the required components and make your form fragment.
  5. All of your progress will be auto saved so just perform your task and go back.
Using the emulator:

While making the forms we can see how it will look in different breakpoints(i.e. Screen sizes)

This feature is available at top of the form.

We can select device and  change its  orientation very easily with few mouse click.

  1. This shows list of various android and ios phones and tablets.
  2. This button changes orientation of device.

Other than reference themes and fragments there are many ways Adobe Experience Manager Forms makes form creation and usage easy, quick. Consistent throughout multiple channels.

Is a Misconfigured “Page Not Found” Jeopardizing Your Website?

Since Zap Technology Solutions released its free Security Scanner (http://scan.zapts.com) there have been a lot of folks scanning their websites.  However, a few scans reported that sites were more vulnerable than they actually were.  Something wrong with the scanner?  No.  It is due to a simple misconfiguration of the website’s AEM/CQ5-based “Page Not Found” response.  You see, the standard HTTP response code for a successfully served page is 200 (OK).  However, typically a “Page Not Found” page has a response code of 404 (Page Not Found).

Read more

Website, WCMS, and Network Security

With the most recent news about Sony’s hacking (just the latest in what seems like weekly headlines of hacking), I wonder how do other companies address security? I know that Utility companies and government agencies are required by regulations to be more stringent about security, but what about other organizations?

Read more

AEM Conferences – Why YOU Should Attend…

As the president of Zap Technology Solutions, I’ve been fortunate enough to be able to attend Adobe CQ5/AEM-related conferences for the past 3 years.  The two conferences that I never miss are the Adobe Summit put on by Adobe and the Evolve Community Summit put on by 3|Share.  I love both of these conferences for different reasons.

The Adobe Summit is a great big production and has thousands of people in attendance.  The key notes are amazing.  The insight into future innovations is inspiring.  The vendors on hand and all in the same place are fabulous.  The amount of information available is endless.  The Summit Bash and the after parties are a lot of fun too.  In 2016, Adobe Summit will be moving from Salt Lake City to Las Vegas.  Just another reason to attend.

The Evolve Community Summit is entering its 3rd year.  It’s moved from November to August in 2015.  This conference has a much stronger technical base to it.  It’s less about the digital marketing and more about the technology.  We spend less time talking about features and more time talking about how to solve real-world problems.  There’s a little more honesty at this conference in that people recognize that working with AEM is not all rainbows and unicorns and aren’t afraid to say so (even the Adobe folks in attendance.)  There’s more honesty about some of the short-comings and how to work around them.  Some of the brightest technical leaders in the AEM space attend this conference.

In addition to the knowledge and sessions which are provided as part of the each of these conferences, there’s also an opportunity to add even more learning to your time at the conference.  You can take Adobe certified classes and take Adobe Certification Exams.  If you were planning to take some training and/or get certified, this is a great way to both attend a great conference as well as get the training/certification that you need.

Let me know if you’ll be attending either of these conferences and we might be able to meet up.

Jason Meyer

President, Zap Technology Solutions