Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Disclaimer: This is just me experimenting, nothing official.


I really like the custom Bookshop UI (based on Vue.js) because it's minimal and fast.

I was wondering if I could make parts of it generic (based on a given csn entity) without sacrificing performance. That means no client-side metadata analysis.

To achieve that, I use templates to generate HTML pages.


I chose Handlebars as my templating mechanism.

First, I need to register two express handlers in my CAP bookshop application.

One of them makes sure that static files are accessible, the other one uses express-handlebars to connect the Handlebars templating mechanism to my express app. Once the /app endpoint is called, the result of the rendered index page is returned.

The rendering is based on my csn definitions and uses some helper functions which I defined here:

They help me to easily use my csn definitions in my templates.

Let's look at the index page which needs to be rendered:

As you can see, there are no bookshop-specific elements.

Whenever you see {{ ... }}, it means that Handlebars will inject the given expression into the resulting HTML document. We have access to all provided helper functions and input objects.

Usually, the {{ and }} symbols are text-interpolation delimiters for Vue.js. But since Handlebars uses the same symbols, I changed the Vue.js delimiters to ${ and }.

The expression {{> list }} and {{> object }} just means that I want to include my defined partials, shown below.

{{> list }} (showing the table):

{{> object }} (showing the selected object):

As you can see, I can iterate over my elements using {{#each ...}}.

Finally, the Vue.js code to make the app dynamic:

Final Result

The resulting app is not as pretty as the custom-made one, but good enough as a proof of concept. I'm not a frontend developer after all.

You can find the complete code in my GitHub repository.


Thanks for reading and best regards,