SAP Commerce Administration Console Development

Solution is based on yhacext extension template, that extends SAP Commerce Administration Console (more details you can find: Adding Functionality to Administration Console)

HTML Web Components Design Guidelines

Solution has been built based on open-source SAP UI5 Web Components. To get more details how to start with them, please review Getting Started page.

How To Start?

Front-end has been build in Javascript and NPM packages as there is plethora of solutions out there which speeds up front-end development. With web components functionality and styling are encapsulated and doesn't interfere with other components. Web components are possible to use with other JS frameworks e.g. Vue, Angular, React and vanilla HTML, which makes them future-proof for possible changes in HAC design.

Install NPM

To make possible to start with project it is required to install NPM. Here you can find the way how to install NPM and Node.js.

When npm is installed it is required to install all JS dependencies for project. To do that run:

# go to your workspace
cd easycore/hac/resources
# here you can find 'package.json' file
npm i

That will install all required extensions, and you are free to go with development.

Web components

All web components are built with help of lit-element, which makes them user-friendly and follows same approach, which you can find in Vue or Angular.

There is a marketplace of web components available, where you can easily find suitable components to be used, but it is recommended to use ones available from SAP UI5 Design System.

There are other Design Systems available and component libraries which helps out to build composable page.

IDE configuration

To start development it is required to have IDE which supports HTML and Javascript development. You can install Relevant plugins/extensions to simplify your development.

If you are using Visual Studio Code there are additional extensions available, which helps with development:

lit-plugin - to support lit-element for easy web-components development

Local development

To work with components locally environment already has prepared dummy page where you can test them. It should represent same html structure which is in your jsp file. So file easycore/hac/resources/index.html which is that dummy html page is very similar to easycore/hac/resources/jsp/easyextensions.jsp which is configured and used in hac cockpit.

To run development server with hot code replacement it is needed to run:

npm run watch

That builds, watches JS/CSS files and starts development server. New browser window is opened. It is also possible to open it manually by opening address http://localhost:3000. When file is changed page will be automatically reloaded.

Mocking server requests

If there is a need to mimic server response for front-end, it is possible to add URL mapping and assign response to that. You can add mock middleware mapping to file easycore/hac/resources/bs.config.js. Where is section middleware with list of configurations:

  middleware: [
    {
      route: '/easyhac/repositories',
      handle: function (req, res, next) {
        res.write(JSON.stringify(REPOS));
        res.end();
        next();
      },
    },
  ],

Route is responsible for exact URL mapping and example of handling response for that.

For more information how to handle middleware options, review browser-sync documentation for Browsersync middleware.

Building HTML stable version for HAC

When UI is ready it is required to build sources, add them to repository and run ant all in Commerce Cloud.

# easycore/hac/resources directory
npm run build
# go to $PLATFORMHOME (hybris/bin/platform)
ant all

All generated JS and CSS files from Webpack bundler are saved in easycore/hac/resources/static folder.

Keep in mind to copy all html changes from dummy index.html to your HAC *.jsp file.

Auto reload changes during development

If you use tanuki-wrapper in project, system should automatically reload tomcat after build, so no need to do any changes. If you use external Apache Tomcat it is required to allow context reloading. which can be done by ant build process. You can do that by adding to local.properties.

hac.tomcat60.context.reloadable=true

Last modified: 18 August 2025