Adobe Experience Manager Sites & More

Sai_ratna · 10/15/15

HI,

I am trying to create a new xtype that contains a html5smartimage. I have used following code in new xtype clientlib inside initComponent method.

    this.slide = new CQ.html5.form.SmartImage({
           title:"Image",
ddGroups: ["media"],
           ddAccept: ["image/.*"],
           border: true,
           height: 250,
           disableZoom: true,
           allowUpload: false,
           fileNameParameter:"./fileName",
           fileReferenceParameter:"./fileReference",
           cropParameter:"./imageCrop",
           mapParameter:"./imageMap",
           requestSuffix:".img.png",
           rotateParameter:"./imageRotate",
           uploadUrl:"/tmp/upload/*",
           listeners: {
change: {
scope:this,
fn:this.updateHidden
}
}
});

this.add(this.slide);

Once I open the dialog box I am able to see Image place holder. But I am not able add or drag and drop any images from content finder. Please refer to below screenshot.

[img]Capture.PNG[/img]

How to fix this issue?

Thanks,

Sai

smacdonald2008 · 10/15/15

See this new community article - it covers all of this:

http://helpx.adobe.com/experience-manager/using/creating-aem-multifield-components.html

It covers topics like:

how to work with rich text plugins
how to develop and register a custom xtype
how to work with multifield component
how to control the behaviour of the component using a cq:EditConfig node
how to style the component (for example, add a strike through style)
how to use drag and drop functionality

View solution in original post

Sam205505050 · 10/15/15

Please check this :

http://helpx.adobe.com/experience-manager/kb/creating-cq-widget-supports-image.html

Sai_ratna · 10/15/15

Hi Sam,

The link you have given in your post is for how to add a html5smart image (as a separate tab) in a components dialog box. This link is trying to create a component using existing xtypes.

This approach don't solve my problem. Here I am trying to create a new XTYPE. And that xtype should contain html5smart image as a field.

Thanks,

Sai

Sham_HC · 10/15/15

Hi Sai Ratna Pattnaik,

To create a new xtype you need to extend & register. I am not seeing that in your code. Refer [1] for building custom xtypes.

[1] http://dev.day.com/docs/en/cq/current/developing/widgets.html#Custom%20Widgets

Thanks,
Sham

Sai_ratna · 10/15/15

Hi Sham,

I am already doing that. It just that I have posted only image initialization part. I have used following code for xtype creation.

/**
* @class Ejst.CustomWidget
* @extends CQ.form.CompositeField
* This is a custom widget based on {@link CQ.form.CompositeField}.
* @constructor
* Creates a new CustomWidget.
* @param {Object} config The config object
*/
var Ejst = {};
Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

/**
* @private
* @type CQ.Ext.form.TextField
*/
hiddenField: null,
   /**
* @private
* @type CQ.html5.form.SmartImage
*/
slide: null,
   /**
* @private
* @type CQ.Ext.form.TextField
*/
alt: null,
   /**
* @private
* @type CQ.Ext.form.TextField
*/
preHeader: null,

constructor: function(config) {
config = config || { };
var defaults = {
"border": true,
//"labelWidth": 75
           "layout": "form"
       };
config = CQ.Util.applyDefaults(config, defaults);
Ejst.CustomWidget.superclass.constructor.call(this, config);
},

// overriding CQ.Ext.Component#initComponent
initComponent: function() {
Ejst.CustomWidget.superclass.initComponent.call(this);

this.hiddenField = new CQ.Ext.form.Hidden({
name: this.name
});
this.add(this.hiddenField);

       this.slide = new CQ.html5.form.SmartImage({
title:"Image",
ddGroups: ["media"],
ddAccept: ["image/.*"],
border: true,
disableZoom: true,
allowUpload: false,
fileNameParameter:"./fileName",
fileReferenceParameter:"./fileReference",
cropParameter:"./imageCrop",
mapParameter:"./imageMap",
requestSuffix:".img.png",
rotateParameter:"./imageRotate",
uploadUrl:"/tmp/upload/*",
width: 500,
height: 300,
           listeners: {
change: {
scope:this,
fn:this.updateHidden
},
afterlayout: function () {
this.updateView();
}
}
});
this.add(this.slide);

       this.alt = new CQ.Ext.form.TextField({
           fieldLabel: "Alt Text",
           width: 500,
listeners: {
change: {
scope:this,
fn:this.updateHidden
}
}
});
       this.add(this.alt);

       this.preHeader = new CQ.Ext.form.TextField({
           fieldLabel: "Pre Header",
           width: 500,
listeners: {
change: {
scope:this,
fn:this.updateHidden
}
}
});
       this.add(this.preHeader);

},

// overriding CQ.form.CompositeField#processPath
processPath: function(path) {
console.log("CustomWidget#processPath", path);
this.slide.processPath(path);
},

// overriding CQ.form.CompositeField#processRecord
processRecord: function(record, path) {
console.log("CustomWidget#processRecord", path, record);
this.slide.processRecord(record, path);
},

// overriding CQ.form.CompositeField#setValue
setValue: function(value) {
       var values = JSON.parse(value);
       this.slide.setValue(values.slide);
       this.alt.setValue(values.alt);
this.preHeader.setValue(values.preHeader);
   },

// overriding CQ.form.CompositeField#getValue
getValue: function() {
return this.getRawValue();
},

// overriding CQ.form.CompositeField#getRawValue
getRawValue: function() {
       var values = {
           "slide": this.slide.getValue(),
           "alt": this.alt.getValue(),
           "preHeader": this.preHeader.getValue(),
       }
       return JSON.stringify(values);
},

// private
updateHidden: function() {
this.hiddenField.setValue(this.getValue());
}

});

// register xtype
CQ.Ext.reg('heroCarousel', Ejst.CustomWidget);

Sham_HC · 10/15/15

Hi Sai Ratna Pattnaik,

add panel with form layout. refer http://forums.adobe.com/thread/1149090

Thanks,

Sham

Sai_ratna · 10/15/15

Hi Sham,

With the approach you have suggested, I will not able to crate html5smartImage inside composite field. The above post works fine if its not a composite field.

Thanks,

Sai