Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How to create a new xtype containing html5smartimage

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Level 10

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

7 Replies

Avatar

Level 2

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

Avatar

Level 10

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

Avatar

Level 2

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);

Avatar

Level 10

Hi Sai Ratna Pattnaik, 

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

Thanks,

Sham

Avatar

Level 2

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

Avatar

Correct answer by
Level 10

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