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 HybrisArchitect.com 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.
Quick note: Since the HybrisArchitect.com 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 HybrisArchitect.com Dashboard's Orders Summary Card . This development tutorial is complete.