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
Solved! Go to Solution.
Views
Replies
Total Likes
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:
Views
Replies
Total Likes
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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);
Views
Replies
Total Likes
Hi Sai Ratna Pattnaik,
add panel with form layout. refer http://forums.adobe.com/thread/1149090
Thanks,
Sham
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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:
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies