jquery datatables with colspan and rowspan

To make datatables jquery plugin work with colspan and rowspan, We can use following trick:

<table id="example" class="display nowrap" cellspacing="0" width="100%">

        <thead>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </thead>

        <tfoot>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </tfoot>

        <tbody>

            <tr>

                <td>Tiger Nixon</td>

                <td>System Architect</td>

                <td>Edinburgh</td>

                <td>61</td>

                <td>2011/04/25</td>

                <td>$320,800</td>

            </tr>

            <tr>

                <td>Garrett Winters</td>

                <td>Accountant</td>

                <td>Tokyo</td>

                <td colspan="3">63</td>

                <td style="display:none"></td>

                <td style="display:none"></td>

            </tr>

         </tbody>

</table>

So we need to add same number of hidden td for datatables plugin to work.

Same approach can also be used for rowspan.

Read More

javascript excel export|pdf export|csv export|clipboard copy|Print without warning using datatables jquery plugin

All the libraries needed for browser compatible excel export are in following cdn:

https://cdn.datatables.net/r/dt/jq-2.1.4,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.9,af-2.0.0,b-1.0.3,b-colvis-1.0.3,b-html5-1.0.3,b-print-1.0.3,se-1.0.1/datatables.min.js?1=0

So If we have table, which needs to be exported, we can add following script:

<table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
        </tbody>
</table>

<script>
$('#example').DataTable( {
        dom: 'Bfrtip',
  "bPaginate": false,
  "ordering": false,
  searching: false,
  bFilter: false,
  "info":     false,
        buttons: [
   {extend:'excel',className:'ButtonSubmit',text:'<i class="fa fa-file-excel-o"></i> Excel'},
            {extend:'copy',className:'ButtonSubmit',text: '<i class="fa fa-files-o"></i> Copy'},
   {extend:'csv',className:'ButtonSubmit',text: '<i class="fa fa-file-text-o"></i> CSV'},
   {extend:'pdf',className:'ButtonSubmit',text: '<i class="fa fa-file-pdf-o"></i> PDF'},
   {extend:'print',className:'ButtonSubmit',text: '<i class="fa fa-print"></i> Print'}
        ]
    } );
</script>

Read More

fix newline invisible character from sql server in classic asp to fix json output

Function FixForHTML(tmpText1)
if ( not tmpText1 is nothing and tmpText1 <> "") then
    Dim tmpText2
    tmpText2 = tmpText1
    tmpText2 = Replace(tmpText2,Chr(13),"</p><p>" )
    tmpText2 = Replace(tmpText2,Chr(9),"&#xa0;&#xa0;&#xa0;&#xa0;")
tmpText2 = Replace(tmpText2,Chr(10),"&#xa0;&#xa0;&#xa0;&#xa0;")
    FixForHTML = tmpText2
else
FixForHTML = tmpText1
end if
End Function

Read More

Multigroup stacked bar chart - Google charts

<html>
<head>
</head>
<body>
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Month', 'Dep1/val1', 'Dep1/val2', 'Dep1/val3','Dep2/val1', 'Dep2/val2', 'Dep2/val3'],
          ['Jan', 1000, 400, 200,300,400,270],
          ['Feb', 1170, 460, 250,350,420,260],
          ['Mar', 660, 1120, 300,300,400,270],
          ['Apr', 1030, 540, 350,300,400,270]
        ]);
        var options = {
        isStacked: true,
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2016',
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          hAxis: {format: 'decimal'},
          hAxes: {
      0: {
      },
      1: {
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      },
      2:{
        gridlines: {
          color: 'transparent'
        },
        textStyle: {
          color: 'transparent'
        }
      }
    },
         series: {
 0: {
        targetAxisIndex: 0,
color:'#ff0000'
      },
      1: {
        targetAxisIndex: 1,
color:'#165489'
      },
      2: {
        targetAxisIndex: 2,
color:'#ff0000'
      },
      3: {
        targetAxisIndex: 0,
color:'#165489'
      },
      4: {
        targetAxisIndex: 1,
color:'#ff0000'
      },
      5: {
        targetAxisIndex: 2,
color:'#165489'
      }
    },
          height: 500,
          colors: ['#1b9e77', '#d95f02', '#7570b3'],
          annotations: {
          alwaysOutside: false,
          textStyle: {
            fontSize: 17,
            auraColor: '#eee',
            color: '#eee'
          }}
        };

        var chart = new google.charts.Bar(document.getElementById('chart_div'));

        chart.draw(data, google.charts.Bar.convertOptions(options));

      }
</script>
</body>
</html>

Read More

AEM (CQ5) - placeholder text for component using use api

There is no property in AEM for text components to show placeholder (watermark) or default text for un authored empty component on page.

I will give a work around with which you achieve the above and can get and set request parameters for other use also.

There is global request object available in sightly or server side javascript, So we are going to use that as a medium to pass information.

We can create 2 files one to set the parameters and one to return or get the parameters in your common utility location as follows:

setAttributes.js :

use(function () {
    var key;
    for (key in this) {
        request.setAttribute(key, this[key]);
    }
});

getAttributes.js :

use(function () {
    var o = {}, c, l, name;
    for (c = 0, l = this.names.length; c < l; c += 1) {
        name = this.names[c];
        o[name] = request.getAttribute(name);
    }
    return o;
});

So above is code to set the key pairs in request object and to get them back from request object with help of server side javascript.

We can use above code  as use api in any sightly component include as follows:

<div data-sly-use="${'../utils/setAttributes.js' @ placeholder = 1, nextvar = 2}"
     data-sly-resource="path to component"></div>

So above code will save passed variables in request object which is globally available.

So in the components code (html in case of sightly), we can use use-api  to get back those parameters. If you knows the name of parameter you can simply read it by following line

request.getAttribute("placeholder");

Then you can check if there is nothing saved in dialog of component, we can simply print that value as placeholder or watermark text.

Read More

AEM (CQ5) - partials for AngularJS

When developing Single page app in aem, You would have to include partials inside the master page and at the same time you would want that to be author-able  on its own. So You can use the concept of partials as follows:

Create a main page component which would be serving as a master page and for angular partial includes , You can create another content page component and keep 2  html or jsp pages one with same name and other as partial.html. In the contentpage.html keep all the libraries as per the main master page. But in case of partial.html, you can only keep only one parasys component.

<div class="page__par" data-sly-resource="par"></div>

no other other libabry include will be there as in contentpage.html.

So in the angularjs code you can use that partial.html as follows:

.when('/routename', {
templateUrl: function (urlattr) {
return '/content/projectname/locale/siteadminpagename.partial.html';
}
})

Read More

AEM (CQ5) - re-init editable overlay layer for touch ui

In case single page apps with aem on touch ui , When we insert partials (aem page) in paren aem page,  page does not become editable, So we have to intiate the edit layers mannualy.

if (typeof parent.window.Granite != "undefined" && typeof parent.window.Granite.author != "undefined" && typeof parent.window.Granite.author.overlayManager != "undefined") {
parent.window.Granite.author.overlayManager.destroy(parent.window.Granite.author.ContentFrame.loadEditables());
if (!parent.$(".js-editor-GlobalBar-previewTrigger").hasClass("is-selected")) {
parent.$(".js-editor-GlobalBar-previewTrigger").trigger("click");
parent.$(".js-editor-GlobalBar-layerCurrent").trigger("click");
}
}

Read More

angularjs custom trigger $rootScope:inprog error

At any point in time there can be only one $digest or $apply operation in progress

So when you try to trigger a event, there is possibility that $digest or $apply is already in progress.

There is a way out to overcome that situation with the use of $timeout. So if you want to trigger some event from inside other event callback code, you have wrap the code inside $timeout :

$timeout(function() {event.target.click();});

Read More

AEM (CQ5) - reading JSON file in sightly with granite use api

Reading json file from i18 folder  and return from server side javascript and use as "use api" in sightly :

"use strict";
use([], function () {
  var resourceResolver = resource.getResourceResolver();
  var resourceContent = resourceResolver.getResource(file path in project + ".json/jcr:content");
  var jsonText = "";
  if (resourceContent != null) {
    var WCMUtils = Packages.com.day.cq.wcm.commons.WCMUtils;
    var stringWriter = java.io.StringWriter;
    var rd = new java.io.BufferedReader(new java.io.InputStreamReader(resourceContent.properties["jcr:data"], java.nio.charset.Charset.forName("UTF-8")));
    var sb = new java.lang.StringBuilder();
    var cp;
    while ((cp = rd.read()) != -1) {
      sb.append(java.lang.Character(cp));
    }
    jsonText = sb.toString();
  }
  if (jsonText == "") {
    jsonText = "{}";
  }
return {
  items : JSON.parse(jsonText);
  json : jsonText;
};
});

Read More

AEM (cq5) - reading cookie in sightly with granite server side javascript use api

var cookies_collection = request.getCookies();

if (cookies_collection != null) {
 for (index in cookies_collection) {
   if (cookies_collection[index].getName().equals("cookie_Name")) {
               //concat with string to typecast from object , so as we can return as string
cookie_val = cookies_collection[index].getValue()+"";
   }
 }
}

Read More

javascript variable and function Hoisting

All the declarations in javascript are moved to the top, When the page is executed.

Hoisting Example :

a = 25;

b = a+5/100;

var a;

Here var a; statement will be moved to top by javascript engine.

But this is not true for intializations :

Non Hoisting - intialization Example :

document.write(x);

var x=5;

In this case x will be undefined when the first statement is executed.

Same is true with function declarations also.

var funct1 = function(){
      console.log("func1");
}

function funct2(){
      console.log("func2");
}


func2 will be hoisted in above case, But func1 will not be hoisted as that is a intialization.

Read More

include same widget for dialogfieldset and panel for reuse in aem component dialog

For a component having multiple widgets with same structure but different name and save locations :

To use the same cq:WidgetCollection for them , You need to use xtype : cqinclude for that and add a property with name path and value  as a "infinity.json" path to the common widget like :

/apps/........./widgetname/items.infinity.json

For each item in common widget create a listeners node  with primary type as "nt:unstructured".

In the listeners node add the following properties :

added : function(object,container,index){for(item in object.items.items){object.items.items[item].name=object.items.items[item].name.replace("widget name",container.name)}}

beforeadd: function(object,container,index){object.initialConfig.name =  object.initialConfig.name.replace("widgetname",object.ownerCt.name);object.name =  object.name.replace("widgetname",object.ownerCt.name);object.optionsConfig.name =  object.optionsConfig.name.replace("widgetname",object.ownerCt.name);

}

You would be able to use same widget at multiple places like a include file without installing any extra plugin.

Read More

How to add listener to refresh angular code of component on dialog save in AEM CQ5

To refresh/ re - compile the angular code on dialog save button pressed, You should add "cq:editConfig" node under the component. Under this node create a node with name "cq:listeners"  with primary type as "cq:EditListenersConfig".

On this listener node add a property "afteredit" with following value :

function(path, definition) {
var s=window;var frameObj = document.getElementById('ContentFrame');
if(typeof frameObj !== "undefined" && frameObj !== null){
s = frameObj.contentWindow;
}else{path.refreshSelf();};
var el = this.dom;
if(typeof el === "undefined" || el === null){el = this.el.dom};  s.angular.element(s.document.body).injector().invoke(function($compile) { var scope = s.angular.element(el).scope(); $compile(el)(scope);});
}

Read More

Session and cookie Storage in Safari Private browsing mode

Safari Browser does not allow session storage in case of private browsing mode and throws the exception of 0 quota.

To overcome that problem, You should always put your session storage code in try and catch. If any exception comes you can save the information in cookie, But You should be careful about cookie data, As cookie does not allow non ascii character in safari, But some browsers allow them in cookie.

If there is semi colon ";" as a character in cookie value then cookie value will be truncated after that and wont be saved properly in any type of browser, To overcome this problem you have to use encodeUriComponent method on the value before saving it in cookie. For fetching the right value you can use decodeUriComponent method.

Happy coding :).

Read More