SAP Hybris commerce ships with an extension generator tool called extgen, which is short for extension generator. Using extgen tool, you can create new extension based on extension templates. With the extgen tool, you can create one new extension using one template extension. From a technical perspective, any extension can be used as a template extension. The extgen tool is fairly basic in that it simply replaces the tokens configured in properties file.

SAP Hybris Commerce installation

Before running the extgen tool, you need to download the latest version of SAP Hybris Commerce.

Once you have downloaded SAP Hybris Commerce, extract the Hybris Commerce ZIP file.

1.Open a command prompt.


2.Navigate to the %HYBRIS_HOME_DIR%/installer directory.


3. Invoke the installer with the b2c_acc recipe by entering the following command.


Steps to create an extension using extgen

1.Navigate to the %HYBRIS_HOME_DIR%/hybris/bin/platform directory


2. Now run setantenv.bat file. Do not close the command prompt.


3.Now run


Extgen prompts you to specify values for the technical aspects of an extension. Extgen comes with default values for all these technical aspects.

These default values are defined in the project.properties file in the extgen directory. The default value is displayed in brackets ([ and ])

Choose a template for generation

Press enter to use the default value. Here default value is [yempty] and we press enter.


Choose the name of extension

Here we specify the name of the extension is hybrisdiary.


Choose the package name

We can choose default package name for our extension but we specify the name of the package is org.bitbyte .


Now observe that new extension(hybrisdiary) has been created inside hybris/bin/custom folder.


Configure localextension.xml file

Add your extension to your X:\%HYBRIS_HOME_DIR%\hybris\config/localextensions.xml. After the creation of extensions using extgen, make sure to update the localextensions.xml file as below


localextension.xml file

Navigation management through SmartEdit

Navigation management through SmartEdit

SmartEdit provides Navigation management that enables you to add, move, edit and delete navigation nodes for a content catalog. You can easily change the order of the navigation nodes using drag and drop feature. You can also add, edit and remove entries from navigation nodes. Entries are pages, media, and components that you associate with navigation nodes.

When you create a website based on an existing content catalog, a default navigation structure is created for your content catalog. If you create a website based on a new content catalog, you must build navigation structure for your new content catalog.


Signing into SmartEdit

SmartEdit provides an intuitive user interface that allows content managers to easily edit the content catalog of their companies website.


We assume that your server has started already and now follow following steps to sign in into SmartEdit

  1. Open an internet browser.
  2. Enter https://<server.ip.address>:9002/smartedit in the browser’s address bar.
  3. Enter your credentials.(username=’admin’ and password=’nimda’)
  4. Select the language and sign in.


All the catalogs that are available in your websites are displayed in the Your Site page.


Adding Navigation Nodes

We can add following types of navigation nodes:

  1. Top level
  2. Sibling
  3. Child


Adding a Top level Node


Click on + ADD NEW TOP LEVEL and after that Enter the name of the node and title of the node to the corresponding fields and press save.


Now you can see that Bitbyte added as top level node to the site.


Adding Sibling and Child Nodes to Navigation Nodes

Go to navigation node that you want to add a sibling or child node to and Click the Option menu and select Add a Sibling or Add a child. Here we will add child node.


After that we enter the name and the title of the child and save it.


Now you can clearly observe that one child node(Hybrisdiary) added to the Bitbyte node.


AngularJS MVC and Scopes

AngularJS MVC Architecure

MVC stands for model view controller. It is a software design pattern for developing web applications. It is very popular because it isolates the application logic from the user interface layer and supports separation of concerns. The controller receives all requests for the application and then works with the model to prepare any data model by the view. The view then uses the data prepared by the controller to generate a final presentable response. The MVC abstraction can be graphically represents as follows


1. Model

It is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself.

2. View

It  is responsible for displaying all data or only a portion of data to users. It also specifies the data in a particular format triggered by the controller’s decision to present the data.


It is responsible to control the relation models and views. It responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data models.

AngularJS Scopes

Scope is a special JavaScript object which plays the role of  joining controller with the views. Scope contains the model data. In controller, model data is accessed via $scope object.



Code Explanation

  1. Scope is passed as first argument to controller during its constructor definition.
  2. $scope.firstName and $scope.lastName are the models.
  3. We have set values to models which will be reflected in the application module whose controller is myController.



AngularJS Modules and Controller

AngularJS Modules

A module defines an application. It is container for the different parts of your application like controller, services, filters, directives etc.

Controller always belong to a module.

Creation of a module

A module is created by using the AngularJS function angular.module


The “myApp” parameters refers to an HTML element in which the application will run. Now we can add controllers, directives, filters, and more, to your AngularJS application.

AngularJS Controllers

AngularJS application mainly relies on controllers to control the flow of data in the application. A controllers is defined using ng-controller directive. A controllers is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.


In the following example we will explain module and controller.




Code Explanation:

  • ng-app directive is used to denote that this application should be considered as an angular application. “myApp” is the name given to our AngularJS application.
  • In body tag we have added an ng-controller directive along with the name of our controller “myControl”. This basically makes our body tag the ability to access the contents of the “myControl”. We need to mention the name of the controller under the directive to ensure that we are able to access the functionality defined within the controller.
  • We are creating a module which will attached to our “myApp” So this module now becomes part of our application.
  • In the module, we define a function which assigns a value of “Bit” and “Byte” to our firstName and lastName variables respectively.

AngularJS Directives

AngularJS Directives

AngularJS facilitates you to extend HTML with new attribute. These attributes are called directives.

Directives are special attributes starting with ng- prefix.

We are going to discuss following directives which are the most common directives –

  • ng-app:- This directive starts an AngularJS application.
  • ng-init:-This directive initialize application data.
  • ng-bind:-This directive binds the value of HTML inputs controls to application data.
  • ng-model:-This directive binds the values of AngularJS application data to HTML input controls(input, selection, text area).
  • ng-repeat:-This directive repeats HTML elements for each item an collection.


ng-app directive

ng-app directive defines the root element. It starts an AngularJS application and automatically initializes or bootstraps the application when web page containing AngularJS application is loaded. It is also used to load various AngularJS modules in AngularJS application.



The ng-app directive also tells AngularJS that the <body>  is the owner of the AngularJS application.

ng-init directive

ng-init directive initializes an AngularJS application data. It is used to put values to the variables to be used in the application.

In the following example. we will initialize the variable


ng-bind directive

ng-bind directive bind the application data to HTML view. The ng-bind directive bind AngularJS data to HTML the same way as AngularJS expression.




ng-model directive:

This directive binds the values of AngularJS application data to HTML input controls. In following example, we’ve defined a model named “name” and access that variable using ng-bind directive.





ng-repeat directive:

ng-repeat directive repeats HTML elements for each item in a collection




We have so many other built in directives that we will discuss later.





Introduction to  AngularJS

AngularJS version 1.0 was released in 2012.

Misko Hevery, a Google employee, started to work with AngularJS in 2009.

AngularJS is a JavaScript framework designed for creating single page web application.

AngularJS is entirely based on HTML and JavaScript, so there is no need to learn any other syntax or language.

What is AngularJS?

AngularJS is structural framework for dynamic web apps. It lets you use HTML as your template language and lets you HTML’s syntax to your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Features of AngularJS

1.You don’t need to write special code to bind data to the HTML controls. This can be done by just adding few snippets of code.

2.When carrying out DOM(document object model) manipulation a lot of JavaScript was required to be written to design any application. But with AngularJS, you will be amazed with the lesser amount of code need to write for DOM manipulation.

3.AngularJS provides developers options to write client side application(using JavaScript) in clean MVC(model view controller).

4.AngularJS is open source, completely free, and used by thousands of developers around the world


Advantages of AngularJS

1. MVC(Model view controller)

Most frameworks require programmers to splitting the app into multiple MVC components. After that, the programmer has to write a code to put them together again. AngularJS, however, strings it together automatically. That saves you time, and reduces the app’s time to market.

2.Two way Binding

It is possible to do two way binding with AngularJS, meaning you can make any data related  changes and would immediately be propagated to the corresponding views and when any change is made in the view, that would happen in the underlying models as well. As soon as the app data changes, there will be corresponding changes in the UI as well.

3.Dependency Injection

The built in dependency injection is something most developers love about AngularJS. This feature helps them to develop, test and understood application in a better way.

Dependency Injection is a software design pattern in which components are given their dependencies  instead of hard coding them within the component. This relieves a component from locating the dependency and makes dependencies configurable. This helps in making component reusable, maintainable and testable.


AngularJS can take care of routing which means moving from one view to another. This is the key fundamental of single page application, wherein you can move to different functionalities in your web application based on user interaction but still stay on the same page.

Disadvantages of AngularJS

Though AngularJS comes with lots plus points but same time we should consider the following points:-


There are multiple ways to do the same thing with AngularJS sometimes, it can be hard for novices to say which way is better for a task. Hence it is imperative for programmers to develop an understanding of the various components and how they help.

2.Not secure

Being JavaScript only framework, application written in AngularJS are not safe. Server side an authentication is must to keep an application secure.

3.Not degradable

If your application user disables JavaScript then user will just see the basic page and nothing.

First AngularJS program

Before we start with creating our first AngularJS program, let us see what are the important part of a AngularJS application


This directive defines AngularJS application.


This directive bind the value of HTML controls to application data.


This directive bind the application data to HTML view.


AngularJS expression can be written inside double braces.{{expression}}


AngularJS lets you extend HTML with new attribute called directive.

AngularJS directive are prefix with ng-.

Steps to create AngularJS program

1.Load framework


 2.Declare HTML body as an AngularJS application using ng-app


3.Define model name using ng-model directive


4.Accesing member varible


Now our first AngularJS program