Article summary

Summary

Discusses the following points:

  • how to develop an Experience Manager component that uses an editable data grid based on a CQ.Ext.grid.EditorGridPanel. An editable grid lets Experience Manager authors modify data located in the grid's cells.
  • how to setup the grid's column by using a CQ.Ext.grid.ColumnModel instance.
  • how to populate the grid by using an Ext.data.GroupingStore instance.
  • how to use a CQ.Ext.data.HttpProxy instance to retrieve data from Experience Manager.
  • how to use a CQ.Ext.data.JsonReader to store grid data.
  • how to use grid event handlers such as the method that is fired when a change to a grid cell occurs.   
  • how to get grid data by iterating through the grid and retrieving CQ.Ext.data.Record objects.  
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
JavaScript, HTML
Tested On Adobe Experience Manager 5.5, 5.6

Note:

The grid component discussed in this article can be downloaded from PackageShare in a package named Using ExtJS Widgets. After you download this package, you will have the files discussed in this article. 

Introduction

You can create an Adobe Experience Manager (AEM) custom component that contains an editable grid control that displays data. The data within the grid can be edited by clicking on a cell. The data grid is an instance of CQ.Ext.grid.EditorGridPanel

The grid lets an AEM author open the component's dialog and view data, as shown in the following illustration.

Editable Grid2

You can configure the grid's columns by using a CQ.Ext.grid.ColumnModel instance. You define a JavaScript object of this type and use that to set the columns that are displayed in the grid. (This is shown later in this development article.) 

The following illustration shows the project files created in this development article.

projectfiles

The aemgrid is the name of the AEM component that contains an editable data grid. The aemgrid.jsp and defaultgrid.js files contain JavaScript application logic that is responsible for defining a CQ.Ext.grid.EditorGridPanel instance (these files are created later in this development article).

When an AEM author modifies a cell's content, you can programmatically access the modified value. That is, you have access to the modified value as well as the original value. For example, assume that the value of a cell is Cell1. Next assume that the author changes the cell value to Cell2. You have access to both the original value (Cell1) and the modified value (Cell2) (this is shown later in this development article).

This development article steps you through how to build an AEM component that uses a CQ.Ext.grid.EditorGridPanel instance. Perform these steps:

  1. Create a CQ application folder structure. 
  2. Create a template.
  3. Create the page component based on the template.
  4. Create a component that uses a grid.
  5. Add a dialog to the grid component. 
  6. Add JavaScript code to the component files.
  7. Create a CQ web page that uses the new component.

Note:

You can create an AEM component that uses a non-editable grid. This type of grid is based on CQ.Ext.grid.GridPanel. For information, see Creating a custom CQ component that uses a dialog grid.

Create an Experience Manager application folder structure  

Create an Experience Manager application folder structure that contains templates, components, and pages by using CRXDE Lite.  

CQAppSetup

 

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components: contains components that your application uses.
  • page: contains page components. A page component is a script such as a JSP file.
  • global: contains global components that your application uses.
  • template: contains templates on which you base page components.
  • src: contains source code that comprises an OSGi component (this development article does not create an OSGi bundle using this folder).
  • install: contains a compiled OSGi bundles container.

To create an application folder structure:

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter grid.
  5. Repeat steps 1-4 for each folder specified in the previous illustration.
  6. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.  

Create a template 

You can create a template by using CRXDE Lite. An Experience Manager  template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click the template folder (within your application), select Create, Create Template.

4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateGrid.
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter grid/components/page/templateGrid.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

6. Click Next for Allowed Parents.

7. Select OK on Allowed Children.

Create the page component based on the template  

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as an Experience Manager developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click /apps/grid/components/page, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateGrid.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open the templateGrid.jsp located at: /apps/grid/components/page/templateGrid/templateGrid.jsp.

8. Enter the following HTML code.

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is where the component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Create a component that uses an editable grid

After you setup the AEM folder structure, create the AEM component that uses an editable grid. Perform these tasks using CRXDE Lite:

1. Right click on /apps/grid/components and then select New, Component.

2. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter aemgrid.
  • Title: The title that is assigned to the component. Enter AEM Grid component.
  • Description: The description that is assigned to the template. Enter AEM Grid component.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side kick where the component appears. Enter General. (The aemgrid component is located under the General heading in the sidekick.)
  • Allowed parents: Enter */*parsys.

3. Click Ok.

Note:

The remaining part of this article talks about how to create the aemgrid component that uses a grid. The aemgrid.jsp file located at /apps/grid/components/aemgrid.jsp is populated with JavaScript logic later in this development article. 

Add a dialog to the AEM grid component  

A dialog lets an author click on the component during design time and enter values that are used by the component. The component created in this development article lets a user enter values that influence the look of the grid. For example, the user can specify the width, in pixels, of the grid.

The following illustration shows the JCR nodes that represent the dialog created in this section.  

GridDialog


To add a dialog to the aemgrid component, perform these tasks:

  1. Select /apps/grid/components/aemgrid, right click and select Create, Create Dialog.
  2. In the Title field, enter aemgrid.
  3. Click Ok.
  4. Delete all nodes under /apps/grid/components/aemgrid/dialog/ (new nodes are created)..

Create the Overview tab

Create the first (and only) tab in the dialog titled Tree Overview. This dialog contains input controls that impact the grid. The following illustration shows this tab in the CQ dialog.  

Dialog

In the previous illustration, notice the Grid dimensions control. This control is based on a sizetype xtype control. A sizetype control lets the user enter the width and height for the grid. For information, see Class CQ.form.SizeField.  

The Dock window control is based on a selection xtype. In this example, selecting the Yes option results in the grid being docked. For information, see Class CQ.form.Selection.

To create the Overview tab, perform these tasks:

1. Click on the following node: /apps/grid/components/aemgrid/dialog/.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: cq:WidgetCollection

3.  Click on the following node: /apps/grid/components/aemgrid/dialog/items.

4. Right click and select Create, Create Node. Enter the following values:

  • Name: size
  • Type: cq:Widget

5. Select the /apps/grid/components/aemgrid/dialog/items/size node.

6. Add the following properties to the size node.

Name Type Value Description
fieldLabel String Grid dimensions Specifies the label for the control.  
xtype String sizefield Specifies the data type for the control.

7. Click on the following node: /apps/grid/components/aemgrid/dialog/items.

8. Right click and select Create, Create Node. Enter the following values:

  • Name: docked
  • Type: cq:Widget

9. Select the /apps/grid/components/aemgrid/dialog/items/docked node.

10. Add the following properties to the docked node.

Name Type Value Description
fieldLabel String Dock window Specifies the label for the control.
defaultValue String false Specfies which option is checked.  
name String ./docked Specifies the name of the control.  
type String radio Specifies the type of selection. The value radio specifies a radio button.  
xtype String selection Specifies the xtype of the control.

11. Click on the following node: /apps/grid/components/aemgrid/dialog/items/docked.

12. Right click and select Create, Create Node. Enter the following values:

  • Name: options
  • Type: cq:WidgetCollection

13. Click on the following node: /apps/grid/components/aemgrid/dialog/items/docked/options.

14. Right click and select Create, Create Node. Enter the following values:

  • Name: v1
  • Type: nt:unstructured.

15. Add the following properties to the V1 node.

Name Type Value Description
text Sting yes The text that is displayed.
value String true The value that corresponds to this option.

16. Click on the following node: /apps/grid/components/aemgrid/dialog/items/docked/options.

17. Right click and select Create, Create Node. Enter the following values:

  • Name: v2
  • Type: nt:unstructured.

18. Add the following properties to the V2 node.

Name Type Value Description
text Sting no The text that is displayed.
value String false The value that corresponds to this option.

Add JavaScript code to the component files

To develop an AEM component that uses an editable grid, develop these files:

  • defaultgrid.js: contains JavaScript logic that creates a CQ.Ext.grid.EditorGridPanel instance.
  • aemgrid.jsp: defines JavaScript logic that defines the behaviour of the grid.

defaultgrid.js

The defaultgrid.js file contains application logic that defines both the data grid and the CQ.Ext.grid.ColumnModel that defines the columns for the grid. For information, see CQ.Ext.grid.ColumnModel.

The following JavaScript code example defines a CQ.Ext.grid.ColumnModel instance.

var cm = new CQ.Ext.grid.ColumnModel([
        {
            id:'path',
            header: CQ.I18n.getMessage("Path"),
            dataIndex: 'jcr:path',
            width: 220
        },{
            header: CQ.I18n.getMessage("Text"),
            dataIndex: 'text',
            width: 200,
            renderer: function(v) {
                if (v.length > 50) {
                    v = v.substring(0, 46) + "...";
                }
                return v;
            }
        },{
            header: CQ.I18n.getMessage("Test"),
            dataIndex:"test",
            width: 100,
            editor: new CQ.Ext.form.TextField({})
        }
    ]);

In this example, there are three columns defined: Path, Text, and Text. Each column corresponds to a CQ.Ext.grid.Column instance. For information, see CQ.Ext.grid.Column.

The text value that appears in each column header is defined by invoking the CQ.I18n.getMessage method and passing a string value that specifies the text value. For example:

header: CQ.I18n.getMessage("Test")

Notice the third column defined in this code example:

header: CQ.I18n.getMessage("Test"),
dataIndex:"test",
width: 100,
editor: new CQ.Ext.form.TextField({})

The editor field specifies the CQ.Ext.form.Field to use when editing values in this column. In this example, a CQ.Ext.form.TextField is used. This results in the Test column being editable. The other two columns in the grid are not editable.

In this grid example, a CQ.Ext.data.JsonReader instance is used to store the grid data. A CQ.Ext.data.JsonReader object lets you retrieve grid data by using JSON (see below in the sub section named Get Grid Data).

The following JavaScript code creates a CQ.Ext.data.JsonReader instance.

//Create a JsonReader instance used to populate the editable grid
var reader = new CQ.Ext.data.JsonReader({
            root: 'hits',
            totalProperty: 'results',
            fields: [
                {name: 'jcr:path', type: 'string'},
                {name: 'text', type: 'string'},
                {name: 'test', type: 'string'}
            ]
    });

Notice that the fields property specifies three values that correspond to the dataIndex property defined in the data grid columns. In this example, the values jcr:path, text, and test correspond to dataIndex values defined in each CQ.Ext.grid.ColumnModel. These values must match with the values defined in the columns.

To populate the grid with data in this example, a CQ.Ext.data.GroupingStore is used. This data type is a specialized store for grouping data records. For more information, see CQ.Ext.data.GroupingStore.

The following JavaScript code example defines a CQ.Ext.data.GroupingStore.

var store = new CQ.Ext.data.GroupingStore({
        proxy: new CQ.Ext.data.HttpProxy({
            url: CQ.HTTP.externalize("/bin/querybuilder.json"),
            method:"GET"
        }),
        baseParams: {
            "p.limit":0,
            "p.hits":"full",
            "path":"/content",
            "property":"sling:resourceType",
            "property.value":"foundation/components/text"
        },
        reader: reader,
        sortInfo:{field: 'jcr:path', direction: "ASC"},
        groupField: 'jcr:path'
    });

The property that is responsible for populating the grid with data is proxy. This property provides access to a data object. In this example, a CQ.Ext.data.HTTPProxy is assigned to the proxy property. The CQ.Ext.data.HTTPProxy object retrieves data from a CQ servlet that  corresponds to /bin/querybuilder.json. For more information, see CQ.Ext.data.HTTPProxy.

In this example, the data returned by the servlet is stored in the store variable (an instance of CQ.Ext.data.GroupingStore). The store variable is used when defining a CQ.Ext.grid.EditorGridPanel object. It is assigned to the CQ.Ext.grid.EditorGridPanel object's store property (as shown below). This is how the grid is populated with data returned by a CQ servlet.

The following JavaScript code creates a CQ.Ext.grid.EditorGridPanel object.

var gridPanel = new CQ.Ext.grid.EditorGridPanel({
        store: store,
        stateful: false,
        cm: cm,
        clicksToEdit:2,
        sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true}),
        frame:false,
        listeners: {
            beforeedit: function(params) {
            },
            afteredit: function(params) {
                var postParams = {};
                postParams["_charset_"] = "utf-8";
                postParams["./test"] = params.value;
                var response = CQ.HTTP.post(params.record.get("jcr:path"), null, postParams);
                if (CQ.HTTP.isOk(response)) {
                    params.record.commit();
                } else {
                    params.record.reject();
                }
            }
        },
        autoExpandColumn: 'path'
    });

In this example, notice that the cm property is assigned the CQ.Ext.grid.ColumnModel instance. This is how you define the columns that appear in the grid.

Another important piece of code to note is the afteredit function.

afteredit: function(params) {
    var postParams = {};
    postParams["_charset_"] = "utf-8";
    postParams["./test"] = params.value;
    var response = CQ.HTTP.post(params.record.get("jcr:path"), null, postParams);
    if (CQ.HTTP.isOk(response)) {
        params.record.commit();
    } else {
        params.record.reject();
    }
}

This method is invoked by CQ after a cell's data value modified.  You can add application logic to meet your business requirements. In this example, the value params.value returns the value of the modified cell value. The modified value is posted back to CQ using CQ.HTTP.post method. If the response is OK, the record is commited by invoking the params.record.commit method.  If the response is not OK, then the change is rejected by invoking the params.record.reject method.

Get Grid Data

You can get the data located within the grid by calling the grid object's getStore method. This method returns a CQ.Ext.data.Store instance. You can call methods of this object to get data. For information, see CQ.Ext.data.Store.

For example, the following code shows how to get a CQ.Ext.data.Store object and then get the number of records within that store (each row in the grid is considered a record).

var store = grid.getStore();
var countRecs=store.getCount();

You can get the value of each grid cell by iterating through the grid and getting a CQ.Ext.data.Record for each row in the grid. For information, see CQ.Ext.data.Record.

The following JavaScript code is a method named getGridData that iterates through the grid and gets the data value of the second and third columns.

function getGridData(grid)
{

var store = grid.getStore();
var tt=store.getCount();
var iiu=0;

//Iterate through the grid and get back data
for (var z=0; z < tt; z++)
{
var myRec = store.getAt(z);
var myJSON = myRec.json ;

//Get the values of the 2nd and 3rd columns
var TextVal = myJSON.text;
var TestVal = myJSON.test;
}
}

Notice that for each iteration, the CQ.Ext.grid.EditorGridPanel object's getAt method is invoked. This method returns a CQ.Ext.data.Record instance. You can get the value of the CQ.Ext.data.Record object's json property. This property returns JSON data and is only valid if this record was created by an ArrayReader or a JsonReader. (In this exampe, JsonReader is used).

Now you can get the value of each column by referencing the name of the column. Remember that the column name is specified when the CQ.Ext.data.JsonReader instance is created (this is shown earlier in this section).

The following JavaScript represents the entire defaultgrid.js file. Notice that this file contains application logic for a method named getGridPanel. This method returns an instance of CQ.Ext.grid.EditorGridPanel

//------------------------------------------------------------------------------
// example grid showing a reference search
// and how cells can be edited

//Get the grid data
function getGridData(grid)
   {
    
       var store = grid.getStore();
       var tt=store.getCount();
              
      //Iterate through the grid and get back data
       for (var z=0; z < tt; z++)
       {
           var myRec = store.getAt(z);
            var myJSON = myRec.json ; 
           
            //Get the Values of grid columns - 2nd and 3rd
            var TextVal = myJSON.text;
            var TestVal = myJSON.test;
                                  
       }
            
   } 

function getGridPanel() {
    var reader = new CQ.Ext.data.JsonReader({
            root: 'hits',
            totalProperty: 'results',
            fields: [
                {name: 'jcr:path', type: 'string'},
                {name: 'text', type: 'string'},
                {name: 'test', type: 'string'}
            ]
    });

    var cm = new CQ.Ext.grid.ColumnModel([
        {
            id:'path',
            header: CQ.I18n.getMessage("Path"),
            dataIndex: 'jcr:path',
            width: 220
        },{
            header: CQ.I18n.getMessage("Text"),
            dataIndex: 'text',
            width: 200,
            renderer: function(v) {
                if (v.length > 50) {
                    v = v.substring(0, 46) + "...";
                }
                return v;
            }
        },{
            header: CQ.I18n.getMessage("Test"),
            dataIndex:"test",
            width: 100,
            editor: new CQ.Ext.form.TextField({})
        }
    ]);
    // by default columns are sortable
    cm.defaultSortable = true;

    var store = new CQ.Ext.data.GroupingStore({
        proxy: new CQ.Ext.data.HttpProxy({
            url: CQ.HTTP.externalize("/bin/querybuilder.json"),
            method:"GET"
        }),
        baseParams: {
            "p.limit":0,
            "p.hits":"full",
            "path":"/content",
            "property":"sling:resourceType",
            "property.value":"foundation/components/text"
        },
        reader: reader,
        sortInfo:{field: 'jcr:path', direction: "ASC"},
        groupField: 'jcr:path'
    });

    var gridPanel = new CQ.Ext.grid.EditorGridPanel({
        store: store,
        stateful: false,
        cm: cm,
        clicksToEdit:2,
        sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true}),
        frame:false,
        listeners: {
            beforeedit: function(params) {
            },
            afteredit: function(params) {
                var postParams = {};
                postParams["_charset_"] = "utf-8";
                postParams["./test"] = params.value;
                var response = CQ.HTTP.post(params.record.get("jcr:path"), null, postParams);
                if (CQ.HTTP.isOk(response)) {
                    params.record.commit();
                } else {
                    params.record.reject();
                }
            }
        },
        autoExpandColumn: 'path'
    });
    return gridPanel;
}

aemgrid.jsp

The aemgrid.jsp contains application logic that controls the behaviour of the aemgrid component, including the grid. First, the values defined in the dialog are obtained by using the properties.get method, as shown in the following code example.

// load properties defined by the aemgrid dialog
int width = properties.get("width", 600);
int height = properties.get("height", 300);
boolean docked = properties.get("docked", false);

These values control the behaviour of the data grid. The width and height values specify its size. The docked value specifies whether it's docked.

The following method, named getGridPanel, returns a CQ.Ext.grid.EditorGridPanel instance to a variable named gridPanel. This method is defined in the defaultgrid.js file.

var gridPanel = getGridPanel();

To ensure that the defaultgrid.js file is referenced, the following script tag is included:

<script type="text/javascript" src="/apps/grid/components/aemgrid/defaultgrid.js"></script>

To display a CQ.Ext.grid.EditorGridPanel instance, create a CQ.Ext.Window instance. The width, height, and docked variables are used to create a CQ.Ext.Window instance. This is how the values specified in the component's dialog are hooked into the data grid.  

Aslo notice that the gridPanel variable is used, as shown in the following code example.

grid = new CQ.Ext.Window({
            id:"<%= node.getName() %>-grid",
            title:"Grid Example 24",
            layout:"fit",
            hidden:true,
            collapsible:true,
            renderTo:"CQ",
            width:<%= width %>,
            height:<%= height %>,
            x:<%= docked ? 0 : 220 %>,
            y:<%= docked ? 0 : 200 %>,
            closeAction:'hide',
            items: gridPanel,
            listeners: {
                beforeshow: function() {
                    gridPanel.getStore().load();
                }
            },
            buttons:[{
                text:"Close",
                handler: function() {
                    grid.hide();
                }
            },{
                text:"Dock",
                handler: function() {
                    grid.setPosition(0,0);
                }
            }]
        });

Notice that this code defines a window for the data grid. The items property is assigned the gridPanel, which stores an instance of CQ.Ext.grid.EditorGridPanel. This is how a data grid is associated with the window that is defined by using a CQ.Ext.Window data type.

Notice that three buttons are defined.

buttons:[{
text:"Close",
handler: function() {
grid.hide();
}
},{
text:"Dock",
handler: function() {
grid.setPosition(0,0);
}
},{
text:"Data",
handler: function() {
getGridData(gridPanel);
var tt=00;
}
}
]

The first button closes the data grid when the button is clicked. Likewise, the Dock window sets the data grid to positition 0. Using methods that belong to CQ.Ext.grid.EditorGridPanel, you can further control the behaviour of the grid. The third button calls the getGridData method (defined is defaultgrid.js) that gets grid data.

The following code represents the aemgrid.jsp file.

 

<%@include file="/libs/foundation/global.jsp"%><%

    Node node = resource.adaptTo(Node.class);
    // load properties
    int width = properties.get("width", 600);
    int height = properties.get("height", 300);
    boolean docked = properties.get("docked", false);

%>
<h3>Exercise 5: Grid Overview</h3><%
%><p>Learn about:
    <ul>
        <li>The grid config</li>
        <li>The store config</li>
        <li>The expected data format
<code><pre>
{
    results: 3,
    root: [
        { 'id': 1, 'firstname': 'Bill', occupation: 'Gardener' },
        { 'id': 2, 'firstname': 'Frank', occupation: 'Programmer' },
        { 'id': 3, 'firstname': 'Ben' , occupation: 'Horticulturalist' }
    ]
}
</pre></code>
        The above data would require the following store config to consume:
<code><pre>
var store = new CQ.Ext.data.JsonStore({
    reader: {
        totalProperty:"results",
        root:"root",
        id:"id"
    },
    url:"/content/test.json"
});
</pre></code>
        </li>
    </ul>
</p>
 <script type="text/javascript" src="/apps/grid/components/aemgrid/referencesearch.js""></script> 

 <script type="text/javascript"> 

    var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
    if (!grid) {

        var gridPanel = getGridPanel();

        grid = new CQ.Ext.Window({
            id:"<%= node.getName() %>-grid",
            title:"Editable Grid Example",
            layout:"fit",
            hidden:true,
            collapsible:true,
            renderTo:"CQ",
            width:<%= width %>,
            height:<%= height %>,
            x:<%= docked ? 0 : 220 %>,
            y:<%= docked ? 0 : 200 %>,
            closeAction:'hide',
            items: gridPanel,
            listeners: {
                beforeshow: function() {
                    gridPanel.getStore().load();
                }
            },
            buttons:[{
                text:"Close",
                handler: function() {
                    grid.hide();
                }
            },{
                text:"Dock",
                handler: function() {
                    grid.setPosition(0,0);
                }
            },{
                text:"Data",
                handler: function() {
                getGridData(gridPanel); 
                var tt=00;    
                }
            }
            ]
        });
        grid.show();
    } else {
        grid.setWidth(<%= width %>);
        grid.setHeight(<%= height %>);
        grid.setPosition(<%= docked ? 0 : 500 %>,<%= docked ? 0 : 100 %>);
        grid.show();
    }
    
  

</script>

Add the files to the project

  1. To view the CQ welcome page, enter the URL: http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Double-click /apps/grid/components/aemgrid/aemgrid.jsp.
  4. Replace the JSP code with the new code shown in this section.
  5. Select apps/grid/components/aemgrid. Add a new file named defaultgrid.js.
  6. Add the code shown in this section to this file.
  7. Click Save All. 

Create an Experience Manager web page that uses the aemgrid component 

The final task is to create a site that contains a page that is based on the templateGrid (the template created earlier in this development article). This page will let you select the aemgrid that you just created from the sidekick, as shown in the following illustration.

sidekick

  1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Websites.
  3. From the left hand pane, select Websites.
  4. Select New Page.
  5. Specify the title of the page in the Title field.
  6. Specify the name of the page in the Name field.
  7. Select templateGrid from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.
  8. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser. Drag the aemgrid component from the sidekick under the General category.
  9. Double click on the aemgrid component. Enter values into the dialog. Once done, the data grid is displayed.

See also

Congratulations, you have just created an AEM xtype component. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

Note:

It's recommended that you install the package referenced at the start of this article. 

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy