How to Create an Orders Summary Card Using the Dashboard (Part 2 of 2)

In the first installment of this two part agile development series, we described how to create the Order Summary JSON API Services that provide the data for the Hybris Architect Dashboard's Orders Summary Card. In this article, we will walk through the development steps to create the front-end Material Design Lite/AngularJS data card that displays the orders summary data.

At the end of this tutorial, the Orders Summary Card will resemble the following section highlighted in green:

How to Create the Dashboard's Orders Summary Card (Step-by-Step)

1. Write AngularJS Code: This step creates the AngularJS code that binds the order summary data from the JSON API Services with the HTML-based Orders Summary Card. Please watch the video to understand how to create the two AngularJS controllers that asynchronously call the Today's Orders Total API and Year-to-Date Orders Total API respectively.

Make sure to place AngularJS code from the video between open and closed HTML Script tags, or in an external JavaScript file that is accessible from the Dashboard's Home page.

Quick note: Since the Dashboard uses Groovy's SimpleTemplateEngine to store the HTML markup,  we will need to escape the client-side dollar sign symbols ($) with black slashes (\) as shown in the video.

3. Click your IDE's Save button

4. Create the HTML-Based Orders Summary Card.

There are many HTML approaches to create Cards using Material Design Lite, I chose the above approach for its overall simplicity.

5. Click your IDE's Save button

6. Go to your Web browser, and enter the following URL: http://localhost:3094/dashboard/home
    You should the see the Orders Summary Card populated with your SAP Hybris Commerce Order Totals

7. Congratulations! You now know how to create the Dashboard's Orders Summary Card . This development tutorial is complete.

About the author

Marc is the Founder of He enjoys helping others learn more about SAP Hybris Commerce. Marc has held the role of Hybris Architect at Exemplis and Nasty Gal. He is a long-time Java/Spring developer. Marc holds an M.S. Software Engineering from Carnegie Mellon University and a B.S. in Accountancy from California State University, Fresno. He can be reached at:

Add a Comment

Your email address will not be published. Required fields are marked *