Custom ComboBox with Dynamically Generated option value by the Servlet

In this post, I will explain how to create ComboBox with Dynamically generated option value in AEM6 dialog?
Let's see with the example:-



I created a dialog with a tab named as tab1. Under this node, I created a node named as items with the property jcr:primaryType = cq:widgetCollection.Under this node, I created a node named as comboBox with the property jcr:primaryType = cq:widget as shown in figure-



Now set the properties of this node as shown in figure-

For creating a comboBox, I used these properties-
type=select
xtype=selection









All other properties are explained below-

allowBlank = It restricts you from submitting the dialog without selecting any option from the comboBox.

fieldLabel = Text that will be shown before comboBox.

options = This property is used to define the servlet path that returns the JSON. This JSON will act as the option value for the comboBox. In my case it's value is /bin/page.html that returns a JSON as shown below-

{"1":[{"path":"/content/geometrixx/en/toolbar/contacts","title":"Contact"},{"path":"/content/geometrixx/en/toolbar/feedback","title":"Feedback"},{"path":"/content/geometrixx/en/toolbar/newsletter","title":"Newsletter"}]}


optionsRoot  = This property defines what property of the given JSON act as the source of options for this comboBox. As my JSON object contains an Array corresponding to a key "1", So my optionsRoot property value will be "1".

optionsTextField =  This field represents that which key from the JSON object will be treated as an options text values i.e. The text that will be displayed in the comboBox.

optionsValueField - This field represents that which key from the JSON object will be treated as the value of that option i.e. On selecting a value from comboBox what will be returned to the server.

Now, In my case the array has multiple JSON objects having two keys with corresponding values. These values are "path" & "title".
 I want to show "title" as option text value, i.e. It will be visible to the author & "path" is for returning the value to the server when user selects title value from the comboBox.
So I set these properties like this-
optionsTextField = title
optionsValueField = path

For example-
If user selects the "Contact" then "/content/geometrixx/en/toolbar/contacts" will be returned to the server for further processing.

After using all the above properties the dialog will be look like this-

NOTE:
If your servlet returns only single JSONArray and at the place of "path" and "title" are "key" and "value" like-

[{"key":"/content/geometrixx/en/toolbar/contacts","value":"Contact"},{"key":"/content/geometrixx/en/toolbar/feedback","value":"Feedback"},{"key":"/content/geometrixx/en/toolbar/newsletter","value":"Newsletter"}]
Then the last three  properties (optionsRoot, optionsTextField, optionsValueField) are not required because by default the value of optionsTextField is "key" & the value of optinosValueField is "value".

But if your JSON is in the form of like this-

{"1":[{"key":"/content/geometrixx/en/toolbar/contacts","value":"Contact"},{"key":"/content/geometrixx/en/toolbar/feedback","value":"Feedback"},{"key":"/content/geometrixx/en/toolbar/newsletter","value":"Newsletter"}]}
Then only optionsRoot value is mandatory.

But if you want to give another name at the place of "key" and "value" then, all of these three properties are mandatory.

If your JSONArray is like as-
[{"path":"/content/geometrixx/en/toolbar/contacts","title":"Contact"},{"path":"/content/geometrixx/en/toolbar/feedback","title":"Feedback"},{"path":"/content/geometrixx/en/toolbar/newsletter","title":"Newsletter"}]

Then, You have to convert your JSON in this form-

{"1":[{"path":"/content/geometrixx/en/toolbar/contacts","title":"Contact"},{"path":"/content/geometrixx/en/toolbar/feedback","title":"Feedback"},{"path":"/content/geometrixx/en/toolbar/newsletter","title":"Newsletter"}]}

Then, You can use last three properties properly.


Be Happy

Dispatcher Configuration on Apache2 Server

In this blog, I will explain the easiest way of dispatcher configuration on Apache2 Server and OS version Ubuntu 15.04. This configuration will also work on Ubuntu 14.04.

Let's start:-
Firstly, you have to install Apache2 server on your Ubuntu machine using this command-
sudo apt-get install apache2

Now type the command-
sudo service apache2 start

Now hit a url in a web browser-
http://localhost

You will get apache2 welcome screen as shown in figure-

Now download the dispatcher package from this link-
https://www.adobeaemcloud.com/content/companies/public/adobe/dispatcher/dispatcher.html

If you are using the apache2 version 2.4.10, you have to download dispatcher version 4.1.9
Extract this *.tar.gz file, You will get a folder named as dispatcher-apache2.4-linux-x86-64-4.1.9.

In this folder you have a file dispatcher-apache2.2-4.1.9.so file, just rename this file with dispatcher.so
The location of this file will be like as shown in figure-

Copy and paste this dispatcher.so file to /usr/lib/apache2/modules as shown in figure-

Before paste this file into this directory you have to change the permission of the directory using this command-
sudo chmod 777 -R /usr/lib/apache2/modules






Now copy an another file named as dispatcher.any file from dispatcher-apache2.4-linux-x86-64-4.1.9/conf directory and paste to the etc/apache2/conf-available directory.
Again, if you can't paste this file into this directory  you have to change the permission of the directory using this command-
sudo chmod 777 -R /etc/apache2

Now you can easily paste your file in this directory and all those directories which are placed into appache2 directory. The location of this directory is shown in figure-
"In this file you have to change the port number to 4503 as the default number 8080".





After this, you have to create a soft link of dispatcher.any file into the conf-enabled directory using this cammand-
ln -s /etc/apache2/conf-available/dispatcher.any /etc/apache2/conf-enabled/dispatcher.any

 It will look like this-









Now create a dispatcher.load file in mods-available folder and write a line in this file-
LoadModule dispatcher_module /usr/lib/apache2/modules/dispatcher.so

It will look like this-

"Note: - This file will be used to load dispatcher module on Apache2 server".

Now create a soft link in mods-enabled directory using this command-
ln -s /etc/apache2/mods-available/dispatcher.load /etc/apache2/mods-enabled/dispatcher.load

It will look like this-

Now open apache2-conf file which is placed in etc/apache2 directory and search for the Directory tag. Here you have to add one more directory tag as given below-

<Directory />
  <IfModule disp_apache2.c>
   SetHandler dispatcher-handler
  </IfModule>
  Options FollowSymLinks
  AllowOverride None
</Directory>

Now open ports.conf file & add these some line at the end of the file-

<IfModule disp_apache2.c>
     DispatcherConfig conf-enabled/dispatcher.any
     DispatcherLog    logs/dispatcher.log
     DispatcherLogLevel 3
     DispatcherNoServerHeader 0
     DispatcherDeclineRoot 0
     DispatcherUseProcessedURL 0
     DispatcherPassError 0
</IfModule>

Now go to /etc directory and open hosts file using this command-
sudo gedit /etc/hosts

Add one more line in this file-
127.0.0.1       publish.sjigaurav.com

You can add anything whatever you want at the place of publish.sjigaurav.com.

Now configuration is complete you can restart your apache2 server using this command-
sudo service apache2 restart

Go to your web browser and hit the url publish.sjigaurav.com you will find the welcome screen.
It starts successfully.



Be Happy

Custom Multifield xtype in AEM

In this blog, I will explain how can we create custom multifield in a dialog and design dialogs.

For creating a custom multifield, Firstly we have to create a node with the properties jcr:primaryType = cq:Widget and xtype = multifield. Under this node we have to create a node named as fieldConfig with the properties jcr:primaryType = cq:Widget and xtype = multifieldpanel.
For the custom multifield xtype we have to include a js file in our clientLibray as given below-

var MyClientLib = MyClientLib || {};

MyClientLib.multifieldpanel = CQ.Ext.extend(CQ.Ext.Panel, {
    panelValue: '',

    constructor: function(config){
        config = config || {};
        MyClientLib.multifieldpanel.superclass.constructor.call(this, config);
    },

    initComponent: function () {
        MyClientLib.multifieldpanel.superclass.initComponent.call(this);
        this.panelValue = new CQ.Ext.form.Hidden({
            name: this.name
        });
        this.add(this.panelValue);
        var dialog = this.findParentByType('dialog');
        dialog.on('beforesubmit', function(){
            var value = this.getValue();
            if(value){
                this.panelValue.setValue(value);
            }
        },this);
    },
    getValue: function () {
        var pData = {};
        this.items.each(function(i){
            if(i.xtype == "label" || i.xtype == "hidden" || !i.hasOwnProperty("dName")){
                return;
            }
            pData[i.dName] = i.getValue();
        });
        return $.isEmptyObject(pData) ? "" : JSON.stringify(pData);
    },
    setValue: function (value) {
        this.panelValue.setValue(value);
        var pData = JSON.parse(value);
        this.items.each(function(i){
            if(i.xtype == "label" || i.xtype == "hidden" || !i.hasOwnProperty("dName")){
                return;
            }
            if(!pData[i.dName]){
                return;
            }
            i.setValue(pData[i.dName]);
        });
    },
    validate: function(){
        return true;
    },
    getName: function(){
        return this.name;
    }
});

CQ.Ext.reg("multifieldpanel", MyClientLib.multifieldpanel);



Let's see with the example:
I created a dialog and in this dialog I created a node named as list with the properties jcr:primaryType = cq:Widget and xtype = multifield as shown in the figure.

Under this node we have to create a node named as fieldConfig with the properties jcr:primaryType = cq:Widget and xtype = multifieldpanel as shown in the figure.

Under this fieldConfig node we have to create a node named as items with the property jcr:primaryType = cq:WidgetCollection as shown in figure.

Under this items node  we can create multiple nodes which xtype can be same or different and dName property is mandatory which works as the name property. In my case I created two nodes named as title or link with the property xtype = textfield and pathfield as shown in figure.

Now when we  open our dialog, we find our dialog like this:

Be Happy