Creating and Reading OSGi Configuration Values for Adobe Experience Manager 6.3

Step 1: Create an Interface names MyServiceConfiguration and give the appropriate properties as mentioned below:

package com.demo.config.core;

import org.osgi.service.metatype.annotations.AttributeDefinition;
import org.osgi.service.metatype.annotations.AttributeType;
import org.osgi.service.metatype.annotations.ObjectClassDefinition;

@ObjectClassDefinition(name = "My Service Configuration", description = "Service Configuration")
public @interface MyServiceConfiguration {

@AttributeDefinition(name = "Config Value", description = "Configuration value")
String configValue();

@AttributeDefinition(name = "MultipleValues", description = "Multi Configuration values")
String[] getStringValues();

@AttributeDefinition(name = "NumberValue", description = "Number values", type=AttributeType.INTEGER)
int getNumberValue();

}

 

Step 2: Now create MySimpleService interface which will be used by the service:

package com.demo.config.core;

public interface MySimpleService {

String getSimpleValue();
boolean isAuthor();

}

 

Step 3: Now create MySimpleServiceImpl service which will read the configurations values:

• @Component – defines the class as a component
• @Designate – defines at class level the object-class-definition (where configuration values are defined).

package com.demo.config.core;

import org.apache.sling.settings.SlingSettingsService;
import org.osgi.service.component.annotations.Activate;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.ConfigurationPolicy;
import org.osgi.service.component.annotations.Reference;
import org.osgi.service.metatype.annotations.Designate;


@Component(service = MySimpleService.class,configurationPolicy=ConfigurationPolicy.REQUIRE)
@Designate(ocd = MyServiceConfiguration.class)
public class MySimpleServiceImpl implements MySimpleService {



private MyServiceConfiguration config;

private boolean author;

@Reference
private SlingSettingsService settings;

@Activate
public void activate(MyServiceConfiguration config) {
this.config = config;
author = settings.getRunModes().contains("author");
}

public String getSimpleValue() {
return "hello " + config.configValue();
}

public boolean isAuthor() {
return author;
}

}

Call any servlet in touchUI dialog |AEM 6.3+

Firstly we will write a dialog listener, in that listener we will send the request to a servlet and also we can send the values to the servlet using the data attribute.

Step 1: jquery code snippet:

(function(document, $, ns) {
"use strict";

$(document).on("click", ".cq-dialog-submit", function(e) {


$.ajax({
type: 'GET',
url: '/bin/sling/idvalidate',
data: {
text: "TEXT",
heading: "HEADING"
},
success: function(msg) {

alert('success');
}
});


});


})(document, Granite.$, Granite.author);

 

Step 2: Now in our Java servlet we will get the values of which were sent from jquery and perform any kind of operations and send back the response:

 

package com.ftd.platform.core.servlets;

import java.io.IOException;
import java.net.URL;
import java.util.Map;

import javax.servlet.Servlet;
import javax.servlet.ServletException;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.apache.sling.commons.osgi.PropertiesUtil;
import org.osgi.service.component.annotations.Activate;
import org.osgi.service.component.annotations.Component;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;

@Component(
service = { Servlet.class }, property = { " service.description=Servlet", " service.vendor=Adobe",
" process.label=Id Validator Service", "sling.servlet.paths=/bin/sling/idvalidate",
"sling.servlet.methods=GET" })
public class IdValidator extends SlingAllMethodsServlet
{

private static final long serialVersionUID = -293773910749832945L;

String text;
String heading;

private static final Logger LOG = LoggerFactory.getLogger(IdValidator.class);

@Override
protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws ServletException,
IOException
{
response.setContentType("application/json");

text = request.getParameter("text");

heading = request.getParameter("heading").toString();

response.getWriter().write(heading.toString());
}
}

 

TouchUI Dialog Listeners | AEM 6.3+

In AEM 6.3, for using listeners you are searching for cq:listeners code but here are some event listeners which you can utilize on dialog validations:

For example: .cq-dialog-submit can be used to perform some operations before submitting the dialog in AEM 6.3 touchUI

listeners.js:

(function ($, $document) {
        "use strict";
          $document.on("dialog-ready", function() {
            $(window).adaptTo("foundation-ui").alert("Open", "Dialog now open, event [dialog-ready]");
        });
        $(document).on("click", ".cq-dialog-submit", function (e) {
            //$(window).adaptTo("foundation-ui").alert("Close", "Dialog closed, selector [.cq-dialog-submit]");
        });
        $document.on("dialog-ready", function() {
            document.querySelector('form.cq-dialog').addEventListener('submit', function(){
                //$(window).adaptTo("foundation-ui").alert("Close", "Dialog closed, selector [form.cq-dialog]");
            }, true);
        });
        $document.on("dialog-success", function() {
            //$(window).adaptTo("foundation-ui").alert("Save", "Dialog content saved, event [dialog-success]");
        });
        $document.on("dialog-closed", function() {
            $(window).adaptTo("foundation-ui").alert("Close", "Dialog closed, event [dialog-closed]");
        });
    })($, $(document));

 

A simple scenario:

(function(document, $, ns) {
"use strict";

$(document).on("click", ".cq-dialog-submit", function(e) {


var $formminmax = $(this).closest("form.foundation-form");   
var idSelector = $formminmax.find("[name='./idSelector']").val(); // This will contain the textfield data having name property as idSelector.
var field = $formminmax.find("[data-granite-coral-multifield-name='./prodId']");
var totalLinkCount = field.children('coral-multifield-item').length;

var prodData = []; //This will store the multifield data from the dialog.


for (var i = 0; i < totalLinkCount; i++) {
prodData.push(field.find($("[name='./productid']")[i]).val());
}


});
})(document, Granite.$, Granite.author);

 

Create TouchUI Multifield Component in AEM 6.3+

ca:dialog content.xml for multifield:

<?xml version=”1.0″ encoding=”UTF-8″?>
<jcr:root xmlns:sling=”http://sling.apache.org/jcr/sling/1.0&#8243; xmlns:cq=”http://www.day.com/jcr/cq/1.0&#8243; xmlns:jcr=”http://www.jcp.org/jcr/1.0&#8243; xmlns:nt=”http://www.jcp.org/jcr/nt/1.0&#8243;
jcr:primaryType=”nt:unstructured”
jcr:title=”Multifiled”
sling:resourceType=”cq/gui/components/authoring/dialog”
fieldLabel=”Multifield”>
<content
jcr:primaryType=”nt:unstructured”
sling:resourceType=”granite/ui/components/foundation/container”>
<layout
jcr:primaryType=”nt:unstructured”
sling:resourceType=”granite/ui/components/foundation/layouts/tabs”
type=”nav”/>
<items jcr:primaryType=”nt:unstructured”>
<bannerconfig
jcr:primaryType=”nt:unstructured”
jcr:title=”Config”
sling:resourceType=”granite/ui/components/foundation/section”>
<layout
jcr:primaryType=”nt:unstructured”
sling:resourceType=”granite/ui/components/foundation/layouts/fixedcolumns”
margin=”{Boolean}false”/>
<items jcr:primaryType=”nt:unstructured”>
<column
jcr:primaryType=”nt:unstructured”
sling:resourceType=”granite/ui/components/foundation/container”>
<items jcr:primaryType=”nt:unstructured”>
<productid
jcr:primaryType=”nt:unstructured”
sling:resourceType=”granite/ui/components/foundation/container”
name=”./prod”
required=”{Boolean}true”>
<items jcr:primaryType=”nt:unstructured”>
<productid
jcr:primaryType=”nt:unstructured”
sling:resourceType=”granite/ui/components/coral/foundation/form/multifield”
composite=”{Boolean}true”
eaem-show-on-collapse=”EAEM.showProductName”
fieldLabel=”Products”
required=”{Boolean}true”>
<field
jcr:primaryType=”nt:unstructured”
sling:resourceType=”granite/ui/components/coral/foundation/container”
name=”./prodId”>
<items jcr:primaryType=”nt:unstructured”>
<column
jcr:primaryType=”nt:unstructured”
sling:resourceType=”granite/ui/components/coral/foundation/container”>
<items jcr:primaryType=”nt:unstructured”>
<productId
jcr:primaryType=”nt:unstructured”
sling:resourceType=”granite/ui/components/coral/foundation/form/textfield”
fieldDescription=”Product ID”
fieldLabel=”Product ID”
name=”./productid”
required=”{Boolean}true”/>
</items>
</column>
</items>
</field>
</productid>
</items>
</productid>
</items>
</column>
</items>
</bannerconfig>
</items>
</content>
</jcr:root>

Multifield and Dialog data in Jquery using Coral UI | AEM 6.3 +

Simple way to get the multifield and dialog data in your clientlib’s jquery to perform any kind of validations in 6.3 and above versions:

Step 1: Creating your clientlibs folder with following properties:

<?xml version=”1.0″ encoding=”UTF-8″?>
<jcr:root xmlns:cq=”http://www.day.com/jcr/cq/1.0&#8243; xmlns:jcr=”http://www.jcp.org/jcr/1.0&#8243;
jcr:primaryType=”cq:ClientLibraryFolder”
categories=”[cq.authoring.dialog,abc.components.banner]”
dependencies=”[granite.jquery]”/>

Step 2: I am creating a event listener in my case and in that I will be getting the values of multifield.

(function(document, $, ns) {
“use strict”;

$(document).on(“click”, “.cq-dialog-submit”, function(e) {
var $formminmax = $(this).closest(“form.foundation-form”);
var text= $formminmax.find(“[name=’./text’]”).val(); // This will contain the textfield data having name property as idSelector.
var field = $formminmax.find(“[data-granite-coral-multifield-name=’./multi’]”);
var totalLinkCount = field.children(‘coral-multifield-item’).length;

var prodData = []; //This will store the multifield data from the dialog.

for (var i = 0; i < totalLinkCount; i++) {
prodData.push(field.find($(“[name=’./data’]”)[i]).val());
}

});
})(document, Granite.$, Granite.author);