T20mins

Building Accordion Component Using AEM 6.0 Slightly Framework

2014-09-28T23:58:00.002-07:00

Front end components :

There are two component's, one is accordion container component and another one is accordion section component, the container component will act as a container for section component's

Accordion Container Component Snippet

<script>
  $(function() {
    $( "#accordion" ).accordion();
  });
</script>

<div id="globalcont">
<div id="header">
<div data-sly-resource="${ @path='container', resourceType='foundation/components/parsys'}">
</div>
<div data-sly-use.acc="com.rz.AccordionContainer" >
<div id="accordion">
<ul data-sly-list.child="${acc.src}" data-sly-unwrap=""><h3>
${child.title}</h3>
<p>
${child.body}</p>
</ul>
</div>
</div>
</div>
</div>

Accordion Section Component Snippet

<div data-sly-test="${wcmmode.edit}">Show this only in edit mode to the author</div>

Code base for accordion container component

this is the code base for accordion container component what it does is it will iterate all the child nodes of container component and build custom collection called "AccordionCollection"

The AccordionContainer component extends from WCMUse which is comes with AEM 6.0 slightly framework, the main advantage of this you can get all component related properties ex : getResource()

package com.rz;

import io.sightly.java.api.Use;
import com.adobe.cq.sightly.WCMUse;
import javax.script.Bindings;
import com.day.cq.wcm.api.Page;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ResourceWrapper;
import org.apache.sling.api.resource.ValueMap;
import org.osgi.framework.Constants;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.TreeMap;

import javax.jcr.Node;
import javax.jcr.NodeIterator;
import javax.jcr.PropertyIterator;
import javax.jcr.RepositoryException;
import javax.jcr.Value;
public class AccordionContainer extends WCMUse  
{        

 private static final Logger log = LoggerFactory
   .getLogger(AccordionContainer.class);
    List src = null; 
    @Override 
    public void activate()
    {      
        
  Node rootNode = getResource().adaptTo(Node.class);
  try {
   log.error("Executing handler for try");
   if (rootNode != null) {
    log.error("Executing handler for node" + rootNode.getPath());
    Node par = rootNode.getParent();
    log.error("Executing handler for node" + par.getPath());
    NodeIterator child = rootNode.getNodes();
    while (child.hasNext()) {
     src = new ArrayList();
     Node childnode = child.nextNode();
     log.error("Executing handler for section node"
       + childnode.getPath());
     NodeIterator sectionnode = childnode.getNodes();
     long i = sectionnode.getSize();
     log.error("printing the size " + i);
     
     while (sectionnode.hasNext()) {
      Node node1 = sectionnode.nextNode();
      log.error("Executing handler for child section node"
        + node1.getPath());
      String title = node1.getProperty("sectionTitle")
        .getValue().getString();
      log.error("display the property" + title);
      String body = node1.getProperty("sectionBody")
        .getValue().getString();
      log.error("display the property" + body);
 
       src.add(new AccordionCollection(title,body));
              
     }

    }


   
   }
  } catch (RepositoryException e) {
   log.error("any Error");

   e.printStackTrace();
  }
    }   
    public List getSrc() 
    {       
        return src;  
    }
}

Code base for AccordionCollection component

package com.rz;


public class AccordionCollection {

 private String title;
 private String body;
 
 AccordionCollection(String title, String body){
  this.title = title;
  this.body = body;
 }

   
    public String getBody() {
  return body;
 }
 public void setBody(String body) {
  this.body = body;
 }
 public String getTitle() {
  return title;
 }
 public void setTitle(String title) {
  this.title = title;
 }


 @Override
 public String toString() {
  return "AccordionCollection [title=" + title + ", body=" + body + "]";
 }
  
}

Find the output below

Limit tags selection to certian number in AEM 6.0

2014-09-27T00:02:00.001-07:00

Limit tags selection to certian number in AEM 6.0

I see some people have written javascript to limit tags selection to certian number in tags field, but actually there is a OOTB functionality to achieve this and this post will explain how to use OOTB functionality to limit tags selection to certain number

Step 1:

I am going to follow below structure to create tag field but you can use your own strcuture to limit tags selection to certain number, here the tag field node name is categorys

Step 2:

the below properties are created for tag field ( categorys )node

Step 3:

Create node called "namespaces" under your tag field in my case I created under categorys field

The primary type for "namespaces" node is "cq:widgetcollection"

Create a separate node in "namespaces" node and provide whatever name you want, here I given "categorynm"

Step 4:

the below properties are created for tag field "categorynm" node

The "maximum" property plays major role here and this property will limit the number of tags selection and displays error message while authoring

Post message on facebook wall from javascript

2014-09-23T07:07:00.001-07:00

This article will help you to understand how to post a message on facebook wall

Now a days integration of facebook with application is very common requirement which we see from any client and there are multiple ways to integrate but This article will help you to understand how to post a message on facebook wall using javascript

To access facebook API's first we need to initialize facebook sdk by inserting below snippet directly under
tag

Initialize FaceBook SDK :

<script>
window.fbAsyncInit = function() {
FB.init({
appId      : '1374507272793832',
xfbml      : true,
version    : 'v2.1'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Feed Dialog :

You need to call below code on click event of your custom link

FB.ui(
{
method: 'feed',
name: 'T20mins technology site.',
link: 'http://www.t20mins.com',
picture: 'http://t20mins.com/external-xfbml/share-image.gif',
description: 'Technology.',
message: 'Technology.'
});

Code :

<!DOCTYPE html>
<head>
<script src="http://my7steps.com/sites/all/themes/zulka/js/jquery-1.10.2.js"></script>
</head>
<body>
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1374507272793832',
xfbml : true,
version : 'v2.1'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<a id='share_button' href="#">Post Message</a>
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').on('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'T20mins technology site.',
link: 'http://www.t20mins.com',
picture: 'http://t20mins.com/external-xfbml/share-image.gif',
description: 'Technology.',
message: 'Technology.'
});
});
});
</script>
</body>
</html>

Demo :

Click here to post message on facebook wall

An easy way to integrate facebook with your application

2014-09-23T02:13:00.001-07:00

Now a days integration of facebook with application is very common requirement which we see from any client and there are multiple ways to integrate but in this article I am going to explain you how to integrate facebook like button with your website using javascript

To access facebook API's first we need to initialize facebook sdk by inserting below snippet directly under
<body> tag

Initialize FaceBook SDK

<script>
window.fbAsyncInit = function() {
FB.init({
appId      : '1374507272793832',
xfbml      : true,
version    : 'v2.1'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

The important thing which we need to keeep in mind is appId : '1374507272793832'

You can get appId by going to https://developers.facebook.com/ Settings and App ID

Render Like Button

You need to call below code to render like button

<div  class="fb-like" data-send="true" data-width="450" data-show-faces="true">
</div>

YouTube events are not firing from javascript

2014-09-22T06:21:00.001-07:00

While integrating analytics with YouTube player, we found that the custom events were not firing when we use Iframe based javascript approach

Finally we found that by adding "enablejsapi=1" at the end of youtube url then is started working as expected , refer below code

Ex: http://www.youtube.com/embed/0Bmhjf0rKe8?enablejsapi=1

<iframe id="player" src="http://www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" allowfullscreen>
</iframe>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars: {
'autoplay': 1,
'controls': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
var playerReady = false;
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
playerReady = true;

}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
alert('Fired...');
}
}
</script>

AEM 6.0 BSOD Error

2014-09-22T02:40:00.000-07:00

When ever I open AEM 6.0 instance in my local machine the system is going down and getting BSOD error

To overcome this problem, I have installed below things in my local machine

1. Install JDK1.8
2. Install AEM6.0 Service Pack1

Install JDK 1.8 :

you can download and install JDK 1.8 by following below link

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Installing Service Pack 1

Recently Adobe has released Service pack for AEM 6.0, you can download it by going through the package share

Install Service Pack :

Unzip your quickstart folder by using below command

java -jar a*.jar -unpack

Now, create a new folder called install in quick-start folder and place Service pack 1 for AEM 6.0 in install folder and then start your AEM 6 instance

Integration with other third-party service

2013-10-07T07:27:00.002-07:00

The below list of questions will help you to get some high level overview of how to integrate
your application with other third party services and also will help you what are all the question's
we may need to ask to third party provider

Do you have any kind of web interface where we can test web methods by passing sample data?
How many ways we can integrate your product in to our application? ( Web-methods, REST API's, JavaScript api's, ODATA etc )
Does all API's support all functionality’s?
Limitations of your product?
Do you have any web interface, where we can do basic/limited operations like creating test user's, checking reports etc...
Who will provide secret token? Can we generate secret key by following client side web interface?
Any limitation on web service API’s calls count? Will you charge if the request count exceeds?
Do we need to send username and password along with web service request or username, password and secret token is enough?
Will you charge any amount? if we raise a request to create new user or modify something etc... ?
What kind of output does your application returns?

JSON
XML
Encrypted IMAGE
IFrame contains html

If the output is html, does it support all browsers?
What kind of authentication mechanism, do we need to follow while using web-service?
If authentication mechanism is basic then do we need to make SSL requests?
Does your application supports SSL?
Does your web-service supports generating entity classes?
How can we identify whether the request is succeed or not?
Is there any time-out applied for web-service calls?
If we are not able to access your web-service url, what are all the things do we need to check, do you have any trouble-shooting document?
Do we need to do any kind of encryption while passing parameters to server?

CMS Best Practices

2013-10-02T10:29:00.000-07:00

Don't include JQuery libs at component level

I have seen so many people who include JQuery libs at component level, the disadvantage of including at component level is for each and every component the system will make request to server to download JQuery libs and it may lead to page performance

Sometimes we get lot of undefined JavaScript errors because of loading multiple versions of JQuery libs

Solution:

Maintaining central location, I suggest create client libs and include at Basetemplate level, if new version comes just update client libs

In some scenarios the system will force you to include at component level, in such cases use JQuery.noConflict () option to avoid conflicts

Consider that the AEM also provides JQuery libs, some functionality which is depending on particular version of JQuery then download into your clientlibs; otherwise try to utilize OOTB JQuery Libs

Don’t deploy CSS or JS files in to production

Is it right approach deploying CSS, JavaScript files as part of deployment package in “Content Management System”?

Why, because I have seen some people who came from traditional web development and no knowledge on CMS trying to deploy css and js files through package and finally mess up entire environment like overriding content of css and js files of content authors

How can we handle this situation, in any CMS you can find two types of content one is static content and another one is dynamic content

Dynamic content:

The content which you think it changes frequently by content author or admin’s need to be handled by content deployment or replication or page activation

Ex: Style sheets, images, text etc…

Normally, the content authors or site admin’s performs this action

Static content:

The content which you think it will not change in future need to be deployed as package such as style sheets, images, JavaScript files etc…
This is the developer job and the developer includes this content into package and deploys into a respective environment

Solution:

Don’t include css and js files in your deployment package, if you feel the content author is going to modify it, keep it in central location which can be accessible by content authors as well as developers

Normally in SharePoint you can do this by placing style sheets in style library and in CQ5 you can do this by putting in etc/designs folder

Don’t deploy configuration file in to the production environment

The general meaning of configuration file is to change settings of system at any time, but if you deploy your settings through deployment package that may override existing entries which has made by author and the system may go down

I strongly recommend don’t deploy your configuration settings through package which you feel it changes frequently

Always create I18n folder at site level not at component level

Don’t create I18n folder at component level, if you create your I18n folder at component level you may lose certain capabilities,

Suppose in future if you want to create new locale it is very difficult to check entire solution to identify I18n folders, which needs to convert into new locale and which may lead to maintenance issue and moreover there is a chance for duplicate entries

These duplicate entries may override existing ones and you need to spend lot of time to debug the issue

Always use locale copy while creating new website

Don’t create web site by simply creating pages in hierarchy manner, it is very difficult to implement MSM

The page nName needs to be in the format of or _, for example en, en_US, en_us, en_GB, en_gb.
•   The supported language code is lower-case, two-letter code as defined by ISO-639-1
•   The supported country code is lower-case or upper-case, two-letter code as defined by ISO 3166

Don’t iterate nodes, try to use Query Builder, if you are performing any search operation

Use Case:

The user shall be able to receive news based on subscribed opt-in's

The Taxonomy for news is

    Therapy area news
    Oncology news

While registering into site the end user select’s any of news taxonomy keyword either Therapy area or oncology, based on the selection the system will send respective news related email’s to the user

Here, don’t iterate each and every user node to find out opt-in, try to use query build to avoid performance impact

The sibling nodes should not exceed more than 2k

Keep in mind that the sibling nodes should not exceed more than 2k , under normal circumstances it is fine like simple creating and reading node’s but, if you are performing any kind of search operation on these nodes this may impact on performance

Don't enable dispatcher level cache in lower environment only enable in production environment

Don’t enable dispatcher level cache in lower environment, if you are planning to do load testing, test it on lower environments either pre-prod or the environment which is similar to your production box

Always make sure the cache should be enabling in production box, initially this may impact on performance but while going forward the performance will increase

Before enabling cache in production box think about your application digital asset size, if the volume of size heavy, then it is better to enable cache ASAP

All environments should be in sink to avoid surprises

Always make sure that the environments should be in sink to avoid last minute surprises, I strongly recommend don’t directly work on production environment if you face some problems in production environment, first fix it in pre-prod environment , then test it in prod author and finally fix it on publish environment

I recommend first deploy package in author and publish environment then replicate content from author to publish environment, before replication content check all configurations are fine or not

I have seen some people who directly work’s on publish environment and making entire system down, but this is not right approach

Don't do over architecture keep it simple

While developing components don’t do over architecture keep it as simple as possible, sometimes the over architecture may impact on performance, for simple components try to reduce layers

Don't store PII information in cookies

The Personal Identification Information is very important for any client, so don’t store PII information in cookies like user password, social security number etc,..

Try to leverage to use OOTB functionalities

Once you receive requirements from your client first check whether it is feasible with OOTB functionality or not, if it feasible then tries to use OOTB, if it is not feasible then only start developing custom components

Identify Data Model before start developing custom components

Choosing database is not an big difficult just compare relational database features with JavaContentRepository features

Ex :

For some of the requirements demands versioning capability, in such cases the relational database does not support versioning functionality, so we need to think about JCR

Avoid loading unnecessary dependencies in POM files

Try to avoid loading un-necessary jar files through POM entries, identify all required common jar files and create separate module and import that in to other modules

This we can achieve only through user education

Don’t refer untrusted resources

I have seen some components which is directly referring like below code

The best practice is download the .js file to your solution and refer it

Use CDN

To achieve greater performance, if possible try to implement CDN, but this totally depends on client

Don’t hard code CDN server url while making image, video, file etc… it is very difficult to identify each and every link

Create separate Filter which parse each and every url, if it is a digital asset then redirect to CDN server to download that Digital Asset

Create custom error pages

For any website the custom error pages are mandatory like 500 server error, 404 not found etc… if we directly display as it is then this will directly effect on overall website credit

So always design custom error message pages and apply it

XSS

Cross site scripting enable attacker to inject maliculious code in to your system, so don’t forget to encode user inputs before submitting form

Use XSSFilter in CQ5 to validate User entered information

Know the difference between Sessions

If you see Any CMS there are two sessions one is Admin session and another one is User Session

For read only operations use User sessions and if you are doing some edit and update operations then go with admin sessions

If the requirement is just reading items or nodes and display it on a page then just go with user session

Try to avoid using admin sessions , if you are obtaining inputs from end user try to store into /content/usergenerated folder in content repository

For just reading nodes and properties use user session slingRequest.getResourceResolver().adaptTo(Session.class)

Information Architecture Planning

2013-09-12T08:09:00.000-07:00

Introduction

In the current digital-world the amount of data that the company’s are storing in their repositories’ and also dealing is growing day by day and it is very important for any company to efficiently use this data to make company success or failure, for any company the first priority is customer, if the customer is not able to find what he wants in company website then chances are high to loose them, the web sites which helps customers to find what they need quickly and easily will definitely win the customers

How can I describe you as Information Architecture?

I am an information architect and I am responsible for organizing huge amount of data in my company

What client is expecting?

You have received requirements from client to build a new website; you can develop this website with four pages and 10 components and deliver it, but what exactly the client is expecting out of these functionalities? What are the web site goals?

Identifying goals are very simple, assemble all the people who are responsible for making project success, it includes client or peers and ask them to provide order of importance to the content. Collect all suggestions and document everything share it with all stake holders to get approval

This article talks about how efficiently we can organize data

Why do we need to organize data?

Have you ever think why your company is investing lot of money and time on designing and developing intranet portals? What is the return on investment? Can we not design sites without wasting money and time?

The answer for all above questions is yes, we can do only, if you are ready to face below problems

The cost of losing customers:

The site looks very good but day by day, no of hits per day is going down and finally identified that the customer is not able to find what he wants in your portal

The cost of re-design:

How many dollars do us need to spend, if the site is poorly designed and not meeting your goals and need to re-design entire site

The cost of time:

The employee time is very important for any organization, how much time does your employee spends extra 5minutes per day struggling to find out what he wants? If you don’t have proper intranet portal

Assume that you are working for a big organization and everyday you get hundreds of mails, if you don’t organize your mails properly finally you end-up with wasting time on searching mails

The cost of maintenance:

How much money you spend to maintain technical people or third party providers (Savvies, Rack space etc…) to update single line in your page, there should be some kind of mechanism that the non-technical people also should be able to update the content

In WCM based portals every month we may expect hundreds of pages, how can we handle this situation if we don’t have proper architecture planning?

What is information architecture?

Information architecture talks about organizing your company’s information and website structure by categorizing content logically, priority basis and also ensures that the content is organized in proper structure in each section of web site

The best example for information architecture is Library, because the Library are well-structured and they follow subject oriented approaches, when you get into Library you can see all magazines are placed one side and books are placed other side, in books section you can find clear separation between each and every category, all fiction related information placed one side and all romantic related books are other side

When I was in child hood , I used to go to library to borrow some books for my grand-mother , the librarians used to keep display boards to easily identify books

by writing book information like author, book name etc…on the display board by seeing display boards, I could easily find out what I want

Here, the librarian plays information architecture role, first he will try to find out relationship between each and every books by following label of books or on author’s information and then put it in proper place

Also the librarian tries to find out what kind of information the readers are looking for by interacting with them, based on that he will have a call with library’s organizers and get approvals to purchase new books

Information architecture planning?

When it comes to website design the IA plays with content such as images, videos, files, documents, people, process etc…

Long time back, I was designed and implemented intranet portal for my company on SharePoint content management system while developing this, I used to interact with lot of people to find out what exactly they were expecting, to find out, we used to have regular meetings with respective department heads and create datasheet for every department and shared with respective POC’s as well as all stakeholders

We asked them to prioritize content and give ranking to every user story or paragraph in the datasheet but, sometimes if the client is poor client then we may need to give suggestions based on experience to the client on prioritization of content

Once, we got all the datasheets from respective managers or POC’s , we used to prioritize all and once we got some logical conclusion by analyzing content and identifying audience, we have designed draft version of sitemap and wire-frames to showcase to leads how the website looks like

Identifying the stake-holders?

As an Information Architect you need to identify and clarify all stake holder goals, the stake-holders are the people who define the depth and scope of project, identifying the audiences, determining sensitivity of information, giving approvals on each phase of development and giving functional clarification

Roles include: Senior Managers who give approval for every phase
Content owners, end users, development leads, respective department heads etc…

What are goals?

The world is changing day by day and people come up with new strategy’s to sustain in current market, for that they will ask you to create new site or migrate current site to either in content management system or some other platform

As an information architect you need to find out why they are moving to new platform? To

Increase sales
Attract more audience
Reduce phone calls by providing online support
Increase brand value

Getting information from stake-holders is not one day job. The customer’s priorities changes day by day, so you need to have regular meetings with them and try to get what exactly they are expecting and also to get approvals on functional clarifications on certain phases

Target Audience:

The audiences are people who visit your website

People who sells items in your site
People who purchase items through your site
People who maintains content of site
Venture capitalist who wants to know about your company etc…

As an IA you need to identify whom the client is targeting who are the primary audience and secondary audience

There is an ecommerce portal which sells products through online; their target audience is men’s and they get few females customers also, but the client says that they have strong male audience , so while designing our website we need to keep this in mind and we need to design our site which targets men’s as primary

Content analysis

Don’t wait for complete information, first start analyzing the content which you already have, interact with your stake holders and decide what should be included in a new site, if you are migrating content from existing site, then analyze the existing content management system, sitemap, total pages and find out what needs to be include and excluded, keep the content that will be only useful to end users, don’t put un necessary information which the end-user really does not want

Next, try to imagine end-user perceptive, once he/she enters into your web site, what you are show casing to them based on client goals is the matter

Normally, digital marketing sites displays top 10 articles or products and special offers etc...On home page

Organizing content:

Once the analysis is completed next step is organizing content, we need to identify the relation between content and also relation between one page to other , if you feel there is a similar content, you can make it as separate group and provide meaning full name, later we need to design navigation structure based on these groups

Making logical groups are very important thing, because while going forward we will apply metadata and labels on this

Sitemap:

Before designing sitemap we should try to understand what are all the functionalities, features and what kind of content are going to have in website

Report Suites Architecture

2012-11-19T08:44:00.000-08:00

I have seen lot of people started thinking about development, when we ask them to integrate site catalyst, Google analytic or urchin in their site, people are immediately jumping into code like how to call JavaScript to record data into site catalyst and how to retrieve site catalyst data etc… but all these things are simple, we can get lot of examples when we read respective SDK’s, but there is another area where we need to put actual attention

What is Report Suite in Site Catalyst?

Every day the omniture system captures thousand of records from web application or website which are integrated with ominture, where exactly all these information stores? These information stores in report suite of site catalyst and we need to pass reportsuiteid for every request

Is one report suite sufficient for entire application?

Before creating new report suite we need to identify what kind of information the client wants to track and what kind of reports he/she wants to generate, without having all these required information in your hand and if you blindly starts then you will be definitely in big mess

Because the report suite supports only 100 events, 75 Traffic variables and 75 conversion variables, what if we want track more than 100 events and if we want to create 76 Traffic variable ?

See the below image,

if we create single report suite for entire Amazon site, then it is very difficult to maintain, if India location head wants to see last one month reports of “Amazon India site” then to generate this report is difficult, we need to apply filters, sometimes the data accuracy problem may occur, and sometimes the events, variables may cross the limit and also we are missing modularization concept here

The solution for this is create new report suite for every location, so that the location head can easily generate reports, sometimes we may need aggregate data across all locations, we can create global report suite which contain all locations information

Note : creating report suites is totally depends on how you organize your data , don't forget to get complete information from your client and also the information architects or CMS experts can help on this

Is it right approach deploying CSS, JavaScript files as part of deployment package in “Content Management System”?

2012-11-17T01:33:00.001-08:00

Is it right approach deploying CSS, JavaScript files as part of deployment package in “Content Management System”?

Why, because I have seen some people who came from traditional web development and no knowledge on CMS trying to deploy css and js files through package and finally mess up entire environment like overriding content of css and js files of content authors

How can we handle this situation, in any cms you can find two types of content one is static content and another one is dynamic content

Dynamic content:

The content which you think it changes frequently need to be handled by content deployment or replication or page activation

Ex: Style sheets, images, text etc…

Normally, the content authors or site admin’s performs this action

Static content:

The content which you think it will not change in future need to be deployed as package such as style sheets, images, JavaScript files etc…

This is the developer job and the developer includes this content into package and deploys into a respective environment

Solution:

You can solve this using several ways one is creating two sets of css files one is for static content and another one is for dynamic content so that if you deploy new package in your CMS environment that t will not disturb dynamic content

Second one is don’t include css and js files in your deployment package keep it in central location which can be accessible by content authors as well as developers

Normally in SharePoint you can do this by placing style sheets in style libray and in CQ5 you can do this by putting in etc/designs folder

Reading data from site catalyst through CQ5

2012-11-05T10:33:00.000-08:00

In this article I am going to explain how to read data from site catalyst and display it on CQ5 components

REST api’s :

The omniture exposes REST api to read/write data from site catalyst data source, REST is a lightweight protocol and alternative to Web Services (SOAP, WSDL, etc.), in this I am not going to explain REST based concepts

CQ5:

To connect to site catalyst data source the cq5 has provided cq-analytics.jar file, this jar file is just wrapper of omniture REST api it provide different methods to read data from omniture, using this we can successfully read data from site catalyst from CQ5 environment

POM of cq-analytics jar :

<artifactId>cq-analytics</artifactId>

<scope>provided</scope>

</dependency>

Code :

The cq5 is provided “SitecatalystWebservice” to connect to site catalyst and there is one more class “Account” we use this entity class to pass account information to site catalyst web service

Account acc = new Account (true, companyName, userName, secret, server);

SitecatalystWebservice active = sling.getService(SitecatalystWebservice.class);

String str = active.getReportSuites(acc);

String reports = active.getSuccessEvents(acc,”reportSuiteId”)

The above code returns all success events which are created for “reportSuiteId”

CompanyName :

The name is company name which we use to connect to CQ5 omniture site catalyst

Username :

Omniture site catalyst username

Secret:

The secret key is unique for every user we can find this by navigating “Omniture Site Catalyst” -> Admin -> Admin Console -> Company

Server :

This is datacenter url we can find this in omniture admin console

Bug in SharePoint 2010

2012-08-13T23:07:00.000-07:00

I have created "Survey" activity feed using sharepoint object model but when I try to remove the same I am getting Not Implemented exception

Error Message :

"The method or operation is not implemented."

Code :

removeType = app.ActivityTypes["Survey"];
m_ActivityManager.ActivityApplications[app.ApplicationId].Remove();
//getting The method or operation is not implemented.

if (removeType != null)
{
app.ActivityTypes.Remove(removeType); //getting The method or operation is not implemented.

removeType.ActivityTypeNameLocStringResourceFile = Survey_RFile;
removeType.ActivityTypeNameLocStringName = "Srvey _Feed_Display";
removeType.IsPublished = true;
removeType.IsConsolidated = true;
removeType.Commit();
removeType.Refresh(true);
}

Problem :

Problem is the Remove() method is not implemented

app.ActivityTypes.Remove(removeType);

Resoultion :

Then how can we Remove this?

We can remove the same through sql query but that is not supported by microsoft, if you still want to go ahead and remove you can use below query's

delete [ActivityTemplate] where activitytemplateid > 18
delete [ActivityType] where ApplicationID > 5
delete [ActivityApplication] where ApplicationID > 19

WTF...Do we need to wait until the microsoft releases service pack for this?

CQ5 : Creating new page and adding content

2012-06-12T10:02:00.000-07:00

In this article, I am going to explain how to create new page and content using SlingHttpRequest Object

<%@page import="com.day.cq.dam.api.Rendition"%>
<%@page import="com.day.cq.dam.api.Asset"%>
<%@page import="org.apache.sling.api.SlingHttpServletRequest"%>
<%@include file="/libs/foundation/global.jsp"%>
<%@page import="org.apache.sling.api.resource.ResourceResolver"%>

<%@page import="com.day.cq.wcm.api.Template"%>

<%
ResourceResolver resolverPage = slingRequest.getResourceResolver();
Resource resPage = resolverPage.getResource("/content/geometrixx");

We are going to read page class, so we need to adapt our Resource to Page.class

Page geoPages = resPage.adaptTo(Page.class);
if(geoPages!=null) {
Resource res2 = resolverPage.getResource(geoPages.getPath());

//The PageManager class helps us to create new pages

PageManager pm = geoPages.getPageManager();

if(pm!=null) {
pm.create("/content/","MspBoxhomeName","/apps/mspbox/templates/contentpage","MspBoxTitle");
Page newPage = pm.getPage("/content/MspHome/");
if(newPage != null)
{
Node newNode = newPage.adaptTo(Node.class);
Node cont = newNode.getNode("jcr:content");
if(newNode != null)
{
cont.addNode("par").setProperty("sling:resourceType","foundation/components/parsys");
Node parNode = cont.getNode("par");
parNode.addNode("image");
Node imageNode = parNode.getNode("image");
imageNode.setProperty("sling:resourceType","foundation/components/image");
imageNode.setProperty("fileReference","/content/dam/geometrixx/shapes/tri_equilateral.png");
parNode.addNode("text");
Node textNode = parNode.getNode("text");
textNode.setProperty("sling:resourceType","foundation/components/text");
textNode.setProperty("text","<p>With at least two equal sides, isoceles is sometimes equilateral and visa versa. Or as the ancient Greeks would say, iso skelos!</p><p></p>");
cont.save();

}
}
}
}
%>

CQ5 : Reading DAM assets

2012-06-11T10:06:00.001-07:00

<%@page import="com.day.cq.dam.api.Rendition"%>
<%@page import="com.day.cq.dam.api.Asset"%>
<%@page import="org.apache.sling.api.SlingHttpServletRequest"%>
<%@include file="/libs/foundation/global.jsp"%>

<%@page import="org.apache.sling.api.resource.ResourceResolver"%>

<%

ResourceResolver resolver = slingRequest.getResourceResolver();
Resource res = resolver.getResource("/content/dam/geometrixx/movies");

Node rootNode = res.adaptTo(Node.class);
if(rootNode!=null) {

NodeIterator children = rootNode.getNodes();
while (children.hasNext()) {
Node node = children.nextNode();
if(node != null) {
Resource res1 = resolver.getResource(node.getPath());
Asset as = res1.adaptTo(Asset.class);
String src = "";
String name = "";
String rel = "";
if(as != null) {

Rendition ren = as.getRendition("cq5dam.thumbnail.140.100.png");
src = ren.getPath();
name = as.getName();
rel = as.getPath();
}
out.print("<ul>");
out.print("<li rel=" + rel + "title=" + name + ">");
out.print("<img src=" + src + "></img>");
out.print("</li>");
out.print("</ul>");
}
}
};

%>

CQ5 Reading Node Properties

2012-06-11T10:04:00.000-07:00

In CQ5 everything stores in the form of content ( Nodes and Properties ), but while reading content from repository the apache sling framework assumes this is a Resource.Because the sling follows REST based architecture

In this article I am going to explore how to read properties of a Node

<%@page import="org.apache.sling.api.SlingHttpServletRequest"%>
<%@include file="/libs/foundation/global.jsp"%>
<%@page import="org.apache.sling.api.resource.ResourceResolver"%>
<%

By using CRXDE I am going to create component called "PropertyReader" and going to read properties of this component

In CQ5 everything stores in the form of content that means "PropertyReader" component also exists in content repository

the below code will send a request to server and tries to return Resource object if it does not find any resource then it returns Null

We need to use SlingHttpServletRequest object to communicate with CQ5 CRX, here the slingRequest is avariable which is already defined in global.jsp file

ResourceResolver resolver = slingRequest.getResourceResolver();
Resource res = resolver.getResource("/apps/mspbox/components/PropertyReader");

If needed you can adapt a Sling Resource to a JCR Node like below code Node.class, if you are going to read DAM Assets then you need to use Asset.class

Code :

<%@page import="org.apache.sling.api.SlingHttpServletRequest"%>
<%@include file="/libs/foundation/global.jsp"%>
<%@page import="org.apache.sling.api.resource.ResourceResolver"%>
<%

ResourceResolver resolver = slingRequest.getResourceResolver();
Resource res = resolver.getResource("/apps/mspbox/components/PropertyReader");

Accessing a Property :

Node rootNode = res.adaptTo(Node.class);
ValueMap prop = res.adaptTo(ValueMap.class);
String group = prop.get("componentGroup", (String) null);
out.print(group);

Reading all properties :

if(rootNode!=null) {
NodeIterator children = rootNode.getNodes();
while (children.hasNext()) {
Node node = children.nextNode();
if(node != null) {
PropertyIterator pi= node.getProperties();
out.print("<table>");
while (pi.hasNext()) {
Property p = pi.nextProperty();
out.print("<tr><td>");
out.print(p.getName());
out.print(p.getPath());
out.print("</td></tr>");
}
out.print("</table>");
}
}
};
%>

OUTPUT :

General
cq:layout
jcr:createdBy
jcr:created
cq:dialogMode
jcr:primaryType

Custom 404 Page not found error page - SharePoint

2011-03-25T20:19:00.000-07:00

SharePoint is a content management system, so people creates thousands of pages and at the same time deletes hundreds or thousands of pages, if you hit one of page in deleted pages then you will get page not found error (blue and white screen page), but the problem is the error page is not user friendly, you will not find any redirection link, so how will you solve this problem?

Usually, we apply 404 page at IIS virtual directory level, but how will you apply same for SharePoint website?

In SharePoint when we create web application using SharePoint central administration internally that will create a virtual directory under IIS, so now our job is so easy, just check below code, the SPWebApplication refers to Virtual Directory

Create a feature receiver and add below code in to FeatureActivated method

See, the web application class contains a property called “FileNotFoundPage” just apply your custom 404 page to that property

SPSite curSiteColl = properties.Feature.Parent as SPSite;
System.Uri webApplicationUri = new Uri(curSiteColl.Url);
SPWebApplication webApplication = SPWebApplication.Lookup(webApplicationUri);
webApplication.FileNotFoundPage = "404ErrorPage.html";
webApplication.Update();

The property accepts only HTML page, so we need to assign HTML page and then using Java script redirect to our custom .aspx page

<html>
<head>
<meta HTTP-EQUIV="Content-Type" content="text/html; charset=utf-8" />
<meta HTTP-EQUIV="Expires" content="0" />
<script language="javascript" src="/_layouts/1033/init.js"></script>
<script language="javascript" src="/_layouts/1033/core.js"></script>
<script language="javascript">
var requestedUrl = escapeProperly(window.location.href);
STSNavigate("/_layouts/ErrorPages/404ErrorPage.aspx?oldUrl=" + requestedUrl);
</script>
</head>
<body>
</body>
</html>

Now, open the 404ErrorPage.aspx page and add whatever message you want under place holder main section

<asp:Content ID="mainContent" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<table>
<tr>
<td class="ErrorPageTitle" >
<span class="ErrorPageTitle1">Page Not Found</span>
</td>

</tr>
<tr>
<td> <span class="ErrorPageMsg1">The page you requested could not be found. Use this link<http://mspbox.blogspot.com> to redirect to home page </td>
</tr>
</table>
</asp:Content>

Custom error message in SharePoint 2010 + Feature Receiver

2011-02-24T03:52:00.000-08:00

In SharePoint 2007 there was no way to redirect to custom error page when you use event receivers, if you try also it redirects to default out of the box blue-white error page

But in SharePoint 2010 there are some properties by using this you can redirect to custom error page

public override void ItemAdding(SPItemEventProperties properties)

{
base.ItemAdding(properties);
string tite = properties.AfterProperties[“title”].ToString();
if(tite.Contains(“RSM”))
{
properties.Cancel = true;
properties.Status = SPEventRecieverStatus.CancelWithRedirectUrl;
Properties.RedirectUrl = “/_layouts/CustomError.aspx?errormessage=bang...don't use RSM...I hate RSM”;
}
}

Limitations.

This works only for synchorounous events like Itemadding, deleting etc...
Works only for browser based clients not with outlook.

Language pack probem Spanish(United States)

2011-02-15T19:37:00.000-08:00

Today, we started developing new locale for our existing site that is Hispanic locale for United States, but the main problem which we found is Microsoft does not provide language pack for Hispanic (United States) the solution for this we have chosen (Spanish) Mexico language pack (es-MX)under regional settings of site collection settings of site because the Spanish (Mexico) and Spanish (United States) are almost same

But, before start developing new locale with above approach the resource files should be in the form of .es-MX.resx not .es-US.resx because you have chosen (Spanish)Mexico language pack (es-MX) under regional settings of site collection

Planning Content Type Hubs in SP2010

2011-02-01T23:39:00.000-08:00

when you are developing enterprise application for large organization some fields are common across all brands such as brand name, brand logo, SEO title, SEO description etc..

How will you handle this common fields across farms?

Scenario (P&G only for reference)

Assume that we are designing architecture for P&G products, normally P&G has lot of products (Pantene, Olay, pampers etc...)but, all these products have some common fields such as Product logo, product name, SEO title, SEO description etc... How will you handle this?

SharePoint 2007

In SharePoint 2007 usually what we do? we go and create separate content type for this called brand content type and deploy this into site collection but, here the problem is we need to go to each and every web application and install site content type feature , there is no central location to place common fields, in future if you want to update particular column, you have to go to each and every web application and update

SharePoint 2010

In SharePoint 2010 there is a new concept called Content Type Hubs, through this you can manage all common fields centrally and publish it to the other web applications, so in 2010 the other web applications can subscribe these content types and pull down the published content types from the CTH and also can get updates when ever changes happened in published content types

Here, mainly you need to concentrate on three things

Site collection to host the content types and act as a Content Type Hubs

Managed metadata service application( to expose content type hub to each and every web application)

Web applications ( to subscribe content type hubs)

Advantages

No need of going to each and every web application and installing the content types and if you want to do updates on particular content type you can simply do it on Content Type Hubs and push it down, so managing the content types easy

In reality the content types changes frequently like adding new fields or creating new content type etc... It's easier to coordinate this from a single location and make sure that xml files are correctly set up across all web applications/farms.

Moving data from one site collection to other and make it up

2011-01-18T21:46:00.000-08:00

In SharePoint, we need to concentrate on lot of things while moving site from one environment to another environment and make it up

Based on my experience, I am sharing some of the details with you guys

If you are using VSIDE to develop your site for example creating custom web parts, master pages, css files, features etc...and then developed using VSIDE Then WSP package is best solution but this will solve only half portion of your requirement that means you are deploying static content means the data which will not change frequently

But, you need to think about how the dynamic data will be deployed from one environment to another environment dynamic content means the content which is authored by client like new article page, new documents uploaded into document library etc...

here you need to use either content deployment or Export /Import but in my SharePoint journey I have used both, choosing the right option is depends on how our environment is setup?

If your environment is farm environment and having multiple nodes with reliability and security then we can use content deployment option because content deployment will transfer the data on wire so, make sure that there should not be any connection failure while doing content deployment

Before doing content deployment you need to consider lot of things

1. The source farm and destination farm should be identical, assume that you have installed latest service pack or language packs on source farm and the same is not available on destination farm then this will give problem and the content deployment will fail.

2. The destination site collection should be blank site collection if not then the job will fail because when The first time the content deployment job runs, the correct template and all associated configuration settings will be applied to the destination server if site collection already contains data then the job will fail.

3. The disk space in source and destination farm should be enough otherwise disk allocation problem will occur because when job starts it will create a cab file in source temporary folder and export into destination farm temporary folder.

4. if you have any custom features to install in destination server just install before running your job but don't activate the features because if you activate that will create data in content database so, this may lead to content deployment fail.

5. Don't run the content job's parallel this may lead to content job fail.

Normally SharePoint enterprise application will have two farm topology authoring and production farm. Authoring farm works on AD and production is internet facing site and works on FBA, the content authors will upload the data into authoring site and the same will be available in production site through content deployment. There is no specific requirement to have only two farm topology, based on requirements you can build multi-farm,I worked for one client who is having five farm topology

I suggest to use content deployment because you can do differential content deployment that means whatever changes made recently will be only moved to one environment to another environment so, this will not override existing content

Creating site columns thorugh SQL query

2010-06-16T16:20:00.000-07:00

Sometimes, you may feel pain while creating site columns and content types through CAML, because you need to know CAML syntax for each and every site column data type, but you can avoid this by simply running one sql query

Normally in SharePoint when we create any site column or content type through SharePoint user interface that will go and stored into content database in the form of CAML, so we can run simple sql query and get that data and build it into features and deploy the same in some other environment means production

Steps

1. create sitecoumns and content types using SP user interface

2. connect to sql server database

3. Execute below query

"Select definition from content types where definition is not null"

4. you can see all site columns and content types in form CAML

5. just extract that and build a features and deploy

Access denied error when code runs with SPsecurity.RunWithElevatedPriviliges

2010-06-11T17:11:00.000-07:00

Today, while reviewing code ,I have found some thing, which will give access denied error if our code runs with SPSecurity.RunWithElevatedPriviliges and AllowUnsafeUpdates = true

Check the piece of code which I have written below that gives access denied error

using (SPSite site = new SPSite(SPContext.Current.Web))
{
SPList list = web.Lists[listUrl];
SPFieldCollection fieldCol = list.Fields;
SPListItem newItem = list.Items.Add();
foreach (SPField field in fieldCol)
{
if (!field.Hidden && !field.ReadOnlyField)
{
if (field.Title.Equals(question, StringComparison.OrdinalIgnoreCase))
{
newItem[field.Title] = answer;
web.AllowUnsafeUpdates = true;
newItem.Update();
web.AllowUnsafeUpdates = false;
break;
}
break;
}
}
}

The main problem here is that the current request will execute under the priviligies of anonymous user credentials because user is a anonymous user, so this code always gives access denied error

The web object is created using SPContext, so this web object is runs under credentials of spcontext, so this always gives problem

using (SPSite site = new SPSite(SPContext.Current.Site.ID))
{
using(SPWeb web = site.OpenWeb())
{
SPList list = web.Lists[listUrl];
SPFieldCollection fieldCol = list.Fields;
SPListItem newItem = list.Items.Add();
foreach (SPField field in fieldCol)
{
if (!field.Hidden && !field.ReadOnlyField)
{
if (field.Title.Equals(question, StringComparison.OrdinalIgnoreCase))
{
newItem[field.Title] = answer;
web.AllowUnsafeUpdates = true;
newItem.Update();
web.AllowUnsafeUpdates = false;
break;
}
break;
}
}
}
}

The above code will run under credentials of system account that means with full permissons so this will execute fine here the difference is we are creting spsite object with url not from current context and the SPsecurity.RunWithElevatedPriviges will work fine here

Another reusable component - Site Columns and Content Type generator

2010-02-28T02:21:00.000-08:00

I have seen so many people struggling to create sitecolumns and contenttypes in CAML format while developing sharepoint aplications. Some people spend days to complete these and some people spend hours depends on their knowledge on sharepoint, recently I have created webpart which will give sitecolumns and contenttypes in the form of CAML the main advantage of this is you will get complete features folder

you just need to deploy this into ur 12 hive features folder just install and activate

I just completed beta version of this webpart need to test and upload this into my blog

I hope this will save lot of time for each and every developer, min 1hour

First create your site columns using sharepoint GUI

Creating Site Columns

Site Actions

Modify All settings

Galleries

Site Columns

Create

Enter Column name , choose appropriate data type and click on create

This will create site column for you in sharepoint create as many you want

Creating Site Content Types

Site Actions

Modify All settings

Galleries

Site Content Types

Create

Provide Name and click on ok, this will create your content type

Adding columns to the content type

Go to content type gallery

Select content type the one which you created recently

Click on add from existing site columns

Select site columns and click on Ok

This will create content types for you

Now install RSM.Exporter webpart on respective webapplication

Add that webpart in any page of ur web application the webpart will dispaly as shown in fig

you just enter your site column feature name on site columns textbox and provide description for your feature and do same thing for site content types also and click on create sitecolumns and content types feature button

Now go to your "C://" drive and check "RsmmTechno" folder there you can find two folders one is for site columns and another one is for content types

So we have successfully completed creation of site columns and content types features now we need to create a page layouts based on content types

Steps to create page layouts :

Select content type which you want to attach to the page layout from content type drop downlist

Enter page layout feature name

Enter page layout name

Select fields which you want to render while creating page using page layout from the list box

Click on create page layout feature

Once again go to your "C://" drive and check "RsmmTechno" folder there you can find page layout feature along with site columns and content type as shown in below fig

Just open each and every folder you can find feature.xml file and element.xml files as shown in below fig

Now, Install and activate features

Create a page using page layout

I think this will help you guys a lot, no need of breaking heads what is the syntax for this sitecolumn content type and page layout etc...

Deploying Custom Resource files into "App_GloablResources"

2010-02-24T22:43:00.000-08:00

Normally, when you create new webapplication in sharepoint the system will automatically copies all resources files from \\12\Config\Resources folder to respective webapplication Virtual directory "App_GlobalResources" folder this will work fine in normal scenarios, so in deployment you can just place your custom resources files into 12 hive Resources folder and create webapplication everything will work fine

But some times we may have to install some kind of upgradion packages with out affecting existing system which contains custom resource files? What would be the approach if we want to place all custom resources files into already created webapplication???

Options to deploy resources files in existing webapplication

1. We have to create deployment document and saying that copy and paste all the files into "App_GlobalResurces" folder

2. Create a separate feature and while activating that feature write a code to copy and paste all the files from feature folder to "App_GlobalResources" folder

Personally I prefer second approach

Please check below image to find out folder structre and where all resource files are placed

Just create feature with event receiver class in the FeatureActivated event write below code

using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Administration;
using System.IO;
using Microsoft.SharePoint.Utilities;
namespace RSMTechno.DeployGlobalResources
{
class DeployGlobalResources : SPFeatureReceiver
{

public override void FeatureActivated(SPFeatureReceiverProperties properties)
{

string sourcePath = string.Empty;
SPSite site = (SPSite)properties.Feature.Parent;
SPWeb web = site.OpenWeb();
//sourcepath is the path where all resource files are stored
sourcePath = string.Format("{0}\\FEATURES\\{1}\\", SPUtility.GetGenericSetupPath("TEMPLATE"), properties.Definition.DisplayName);
try
{
SPWebApplication webApp = web.Site.WebApplication;

foreach (SPUrlZone urlZone in webApp.IisSettings.Keys)
{
SPIisSettings settings = webApp.IisSettings[urlZone];
string destinationPath = Path.Combine(settings.Path.ToString(), "App_GlobalResources");
string[] filePaths = Directory.GetFiles(sourcePath, "*.resx");
foreach (string filePath in filePaths)
{
string fileName = Path.GetFileName(filePath);
File.Copy(filePath, Path.Combine(destinationPath, fileName), true);
}

}
}
catch (Exception)
{
throw new Exception("Failed to copy files");
}
}
}
}

Then build the application and deploy and activate the feature everything will work fine

Click here to download source code RSMTechno.DeployGlobalResourceFilesCode