Author Archive: sbhaskar

Issues while importing a product catalog from Hybris to AEM

I faced some issues while importing a product catalog from Hybris to AEM with the 5.6.100 packages. The following were the error messages:

  • Cannot server request to /libs/commerce/products
  • Cannot serve request to ProductDataServelet

Recently, Adobe has released packages of version 5.6.200. I didn’t face the issue with these packages. If you face these issues, use the latest packages.

Developing a multifield widget for a CQ component

I had to develop a multifield widget for a CQ component. My requirement was to present the What’s New documents for a product’s releases. There could be many releases in an year. These need to be captured in a table row. A product release is associated with a specific product name and a What’s New URL.

To cut the story short, let me present you with some screenshots. The following is the dialog box where a user enters the release information:

component_edit

In this case, in an year, the product had two releases. One in March and the second one in Dec. The details are displayed as follows in the publish instance:

result

March being the third month, it’s displayed in the third column, and for the obvious reason, Dec is displayed in the 12th column. It displays the release name as a hyperlink to the What’s New doc.

Follow these steps to develop this widget:

  1. Install the Custom Multifield Widget. Follow Adobe’s instructions on how to do it. We will develop the component based on the Custom Multifield Widget that you will install as
    a part of the instructions.
  2. Copy the extjstraining/clientlib folder to your app/yourCompany folder, where you want to develop your component.
  3. Create a component in yourCoumpany folder.
  4. Now, expand to the extjstraining/components/customwidgets folder.
  5. Expand the multifield dialog box.
  6. Copy the multi node to your component’s dialog.
    multi_node
  7. Change the xtype of the node that you copied in the fieldConfig as follows:
    xtype
  8. In yourCompany folder, open the clientlib/js/CustomWidget.js file.
    1. Add one more text field as follows:
      //new textfield start
      this.allowText = new CQ.Ext.form.TextField({

      cls:”ejst-customwidget-2″,

      listeners: {

      change: {

      scope:this,

      fn: this.updateHidden

      }

      }

      });
      this.add(this.allowText);

      //end
    2. Set value for the new text field as follows:
      // overriding CQ.form.CompositeField#setValue

      setValue: function(value) {

      var parts = value.split(“/”);

      this.allowField.setValue(parts[0]);

      this.allowText.setValue(parts[1]);

      this.otherField.setValue(parts[2]);

      this.hiddenField.setValue(value);

      },

    3. Change the xtype as follows:
      // register xtype
      CQ.Ext.reg(‘ejstcustom1′, Ejst.CustomWidget);
  9. In yourCompany folder, open the clientlib/js/exercises.js file. Upadate the provider options for the drop-down list as follows:
    providerOptions
  10. Now, you can create the component’s JSP to format the values entered by the author:
    PropertyIterator propertyIterator= currentNode.getProperties();

    while(propertyIterator.hasNext())

    {

    Property currentProperty=propertyIterator.nextProperty();

    String currentValue=””;
    if(currentProperty!=null &&
    currentProperty.getName()!=null &&
    currentProperty.getName().toLowerCase().compareTo(“multi”)==0)

    {

    if(currentProperty.isMultiple())

    {

    Value[] values=currentProperty.getValues();
    String[] months={“Jan”,”Feb”,”March”,”April”,”May”,”June”,”July”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”};
    int[] table=new int[12];
    String[] version=new String[12];
    int k=0;

    for(Value value:values)
    {
    currentValue=value.getString();
    String[] splitValue=currentValue.split(“/”);

    for (int i=k; i<months.length; i++)
    {
    if (splitValue[0].equals(months[i]))
    {
    table[i]=1;
    version[i]=splitValue[1];
    }

    }

    }

    for (int m=0; m<table.length; m++)
    {
    if (table[m] == 1)
    {
    out.write (“<td>”+version[m]+”</td>”);
    }
    else
    {
    out.write(“<td>”+” “+”</td>”);
    }

    }
    }

    else
    {
    currentValue=currentProperty.getString();
    }

    }
    properties.isEmpty();
    }
    %>

  11. Test the component.

Starting Hybris after installing with AEM

After you install the Hybris packages, if the Hybris server is not getting automatically restarted after an AEM restart, search for hybrisserver.bat. This file helps you to restart the Hybris server.

Accessing CQ pages using a dispatcher configuration

When you set up a dispatcher for Adobe CQ using Apache web server, the request to the specified port should serve CQ pages. Also, verify whether the pages are saved in the cache folder. If the requests are served, but the pages are not cached, most probably you are accessing the pages that contain authentication info in the header.

By default, dispatcher doesn’t cache requests with  authentication info. (This can be enabled by the allowAuthorized property in the dispatcher.any file.) Ensure that you cleared the cookies before accessing the pages.

FTPing files to Scene 7 server

In Scene 7, if the file size exceeds certain limit, you need to upload the file using FTP. You need to create an ftp account and then put your files to the ftp server. Later the files need to be uploaded from the ftp server to Scene 7.

The first step is to enable your ftp account:

  1. After logging in, go to Setup > Media Portal.
  2. Select FTP Accounts.
  3. Select the user ID and create a password and click Save.
  4. Note down the FTP Accounts Username created. This is your user ID for the ftp login.

create_ftp_login

Find out the ftp server address.

  1. Check with your admin.
  2. Or, go to Setup > Application Setup > General Settings.
  3. See SCENE7 FTP account. Server details are displayed there.

ftp_server_address1

  1. Now ftp to the server with the user id and password you created.
  2. Put your files there.

When you upload the file from ftp server to Scene 7, you can’t really select the files. So put only those files that you want to push to a specific folder.

  1. Log in Scene 7, and upload the files from ftp server.
  2. Select the folder > Upload.
  3. Select Via FTP from the top bar. This option is enabled only after you enable the ftp account.
  4. Select the folder displayed and click Submit Upload.

Mobile emulators in Adobe CQ

Using Adobe CQ, you can manage websites for mobile devices without recreating it. Adobe CQ provides you with a set of mobile emulators. Using the emulator, you can see the way content appears in various mobile devices.

The following video demonstrates viewing the content in mobile emulators:

Translating strings in a CQ component to user’s preferred language

Adobe CQ provides an easy way to translate strings (fieldLabel) in a component. Inside the component folder, create the i18n sling folder. Then create language folders (sling:folder)  and assign  Mixins of mix:language type. In the language folder, add the jcr:language property and assign the language code.

Dake Smith blog, Internationalization within Sling (and CQ), has some great inputs.

In the image displayed below, the Localization component has two fields: first name and last name. They are localized in two languages: Spanish (es) and French (fr).

hierarchy

In each language folder, create two nodes of sling:MessageEntry type. In the first node, add Slig:key and Sling:Message as shown above. This is for the first string (First Name.) Repeat this for the second node.

After you are done with creating MessageEntry nodes for all the strings that you have in the component, go to the items in the dialog node, and change the fieldLabel value to the slingKey value you defined in the language node.

first_name

To test, go to useradmin, select the user. In the Preferences tab, change the language to the language of your choice.

See the component in French as displayed below:

dialog

 

 

Creating a Facebook component in Adobe CQ

In this blog entry, we will see how to create a component that displays the Facebook Like button.
A Facebook Like button needs no explanation. It allows a user to like your company’s Facebook page and also keeps a record of the number of people “Liked” the page.
facebook_like

Facebook provides great documentation on how to add this into your website. It’s very much straightforward. Get the code from Facebook’s Configurator. If you add the code to a webpage that is available locally and test it, it won’t work. If you are testing the code, ensure that you uploaded the webpage in a server.

Edit the template to include the following script:

<div id="fb-root">
</div>
<script>(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/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

(Don’t ask me for details. I got it from Facebook. :) )

Now create a component, Facebook. We need only one field that’s configurable. It’s for providing the Facebook page URL of your company.
See the screenshot below that depicts the node hierarchy. (The component development is explained in detail in one of my previous posts.)

node_hierarchy

Following is the JavaServer page associated with the component. (facebook.jsp)

<%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %>
<%
 String facebook=properties.get("facebook", "Enter the product page.");
 if (facebook=="Enter the product page.")
 {
 out.write(facebook);
 }
out.write("<p><div class=\"fb-like\" id=\"fb\" data-href=\""+ facebook +"\" data-send=\"false\" data-width=\"450\" data-show-faces=\"true\"></div></p>");
%>

Drag-and-drop the component to the web page. Right-click, select Edit, and provide the Facebook page’s URL.
Note that the component is not displayed at this moment. Close the page and open it again to see the component. (I think it has something to do with the Facebook implementation; I will experiment more later.)

Displaying the newly created component in the sidekick of Adobe CQ

By default, the sidekick doesn’t display the newly created components. You need to enable them explicitly in a CQ author instance.

  1. Create the component.
  2. Using SiteAdmin, open the page that you want to edit in the Author instance.
  3. From the sidekick, click the Design tab.
  4. In the Design of Paragraph tab that appears, click Edit.

    design

  5. Find the component based on the ComponentGroup property you defined and enable it.
    design_par

 

Developing a Quiz component using Adobe CQ

In this blog entry, I will show you how to develop a CQ component. A CQ component, typically, has two parts. The first one is the CQ widget – the Graphical User  Interface (GUI) in which an author adds content. Second one is a script; in this example, a JSP page that defines the logic that you want to apply to the content.

You will see how to develop a widget and get the data included in the widget using the script. We can demonstrate the same using a “Hello World” example; there is no fun in developing such a component!! :)

Here, we are going to develop a Quiz component. An author can enter a question and multiple possible answers to check the mastery of the reader. When the reader selects an answer and submits, the appropriate message appears in the page. Following is the screenshot of the Quiz component in the Author instance.

component1

Basic understanding of the following is a prerequisite:

  • CQ Author and Publisher instance (You should ideally have them running in your machine.)
  • CQ templates (You should have a template that you can modify for this example.)
  • JavaScript
  • Java Server Pages (JSP)

I will not provide details on how to create a template. Refer to the  “How to Create a Fully Featured Internet Website” document that has lots of good information on how to accomplish this task.

Create the component node

  1. Login to CRXDE Lite as an admin.
  2. Inside the app folder, go to your website directory and locate the Components folder.
  3. Right-click the folder and then select Create Component. Create a component, question, with the following details:
    allowedParents = */parsys
    resourceSuperType = foundation/components/page

Develop GUI of the component

In the Quiz component, we need six text fields. First one for the question, four text fields for various options, and the sixth one is for the author to enter the correct answer. The first step to develop GUI of the component is to add a Dialog node that can hold various elements such as text boxes.

  1. Right-click the question node and select Create Dialog.
  2. Right-click the dialog node, and add another node with the following properties:
    name: items
    Type: cq:WidgetCollection
  3. Right-click and create a Panel, Tab1, with the following properties. We need only one tab in the GUI.
    name: Tab1
    Type: cq:Panel
  4. Right-click and add another node of widget collection that can hold the text fields.
    Name: items
    Type: cq:WidgetCollection
  5. Now, let us add the text fields. Right-click and add a node.
    Name: question
    Type: cq:Widget
  6. Add the following properties manually.
    fieldLabel – String – Question
    name – String – ./question
    xtype – String – textfield
  7. Repeat step 5 and 6 for the following:
    optionA
    optionB
    optionC
    optionD
    answer

Ensure that you changed the name and fieldLabel based on the text field. After completing this operation, this is what your node hierarchy looks like:

node_hierarchy

 

Update the JSP file to include the logic to process the content

Update the content of the question.jsp page as shown below:

<%@include file=”/libs/foundation/global.jsp”%>
<%@page session=”false” %>
<%
<!– section1 –>
String question=properties.get(“question”, “Type the question”);
String optionA=properties.get(“optionA”, “Type the option A”);
String optionB=properties.get(“optionB”, “Type the option B”);
String optionC=properties.get(“optionC”, “Type the option C”);
String optionD=properties.get(“optionD”, “Type the option D”);
String answer=properties.get(“answer”, “Type the answer”);
<!– section2 –>
out.write(“<FORM><B>”+question+”</B><P>”);
out.write(“<INPUT TYPE=hidden name=\”answer\” VALUE=\””+answer+”\”>”);
out.write(“<INPUT TYPE=\”radio\” NAME=\”options\” VALUE=\””+optionA+”\”>”+optionA+”<br>”);
out.write(“<INPUT TYPE=\”radio\” NAME=\”options\” VALUE=\””+optionB+”\”>”+optionB+”<br>”);
out.write(“<INPUT TYPE=\”radio\” NAME=\”options\” VALUE=\””+optionC+”\”>”+optionC+”<br>”);
out.write(“<INPUT TYPE=\”radio\” NAME=\”options\” VALUE=\””+optionD+”\”>”+optionD+”<P> “);
out.write(“<INPUT TYPE=\”button\” NAME=\”Validate\” VALUE=\”Validate\” onClick=\”checkAnswer(this.form)\”>”);
out.write(“</FORM>”);
%>

If you know the basics of JSP, you have already figured out what we are doing.

String question=properties.get(“question”, “Type the question”);

In section 1, we assign the value provided in the question text box to a string variable.
properties.get(“question”, “Type the question”) method gets data in the question field and the second argument is the default value that an author sees while editing the component.

The second section in the code is nothing but a form in a JavaScript. We dynamically change the values and labels using the inputs from the author. When a reader, submits an answer, we call a method checkAnwser(). We have not yet defined this method in the JSP page. It is defined in the template page.

Include the script in your template

You can include JavaScript functions that you use in the header of your template. The following code checks the correct answer and provides the user appropriate error message.

<head> <script type=”text/javascript”>
function checkAnswer(form) { for (var i = 0; i < form.options.length; i++) { if (form.options[i].checked)
{
break
}
}
if (form.options[i].value == form.answer.value)
{ alert(“You selected the correct answer!!”) } else { alert(“You selected an incorrect answer!!”) }
}
</script> </head>
 

Add the component in the Author instance

  1. Create a page with the template that you used.
  2. From the side-kick, drag-and-drop the Question component to the page.
  3. Right-click the component and click Edit.
  4. Enter the details and click OK.

edit

The question and options appear in your page. Now publish the page to see it in the Author instance.