InsideAEM Limited: Expert knowledge for Adobe Experience Manager and Adobe Marketing Cloud Expert knowledge for Adobe Experience Manager and Adobe Marketing Cloud

Have a Question?

Start typing below to have an answer about Adobe Experience Manager!

How to display a custom widget (xtype) in a page

In this post I would like to explain how to display a custom widget in a page using standard CQ mechanisms. For this to work you need to create a widget and register it with a specific xtype. In addition the widget has to extend the CQ.Ext.ViewPort component. In this example we will create a helloworld widget that will display a Hello World message within a label when the page is loaded.

// Create the namespace
CQ.Ext.ns('My.namespace');
/**
* Create the new widget subclassing CQ.Ext.Viewport
*/
My.namespace.HelloWorld = CQ.Ext.extend(CQ.Ext.Viewport, {
  constructor: function(config) {
    // Register a label as child component to display Hello World!
    config.items=[{xtype:'label', html: 'Hello World!'}];

    // Call superclass constructor
    My.namespace.HelloWorld.superclass.constructor.call(this, config);
  }
});

// Register the new widget under the xtype helloworld
CQ.Ext.reg("helloworld", My.namespace.HelloWorld);

Once you have created your widget you need to create a page to display it. Simply create a node under /content/helloworld with the following configuration:
Page Configuration

Now when you open the page in the browser it should look like this:

Page Result

The following two tabs change content below.

Nono Junang

Technical Director at InsideAEM Limited
I’m a certified Adobe Experience Manager 6 Lead Developer with experience of full project development life cycle from analysis, design, implementation, testing to final delivery. I come along with excellent communication skills as well as extensive experience with multicultural fellows from India, USA, Africa, Europe and Asia Pacific. I speak English, German and French fluently.

Leave a Reply

You must be logged in to post a comment.