Skip to Content
Technical Articles
Author's profile photo David Kunz

Lightweight Generic CAP UI

Disclaimer: This is just me experimenting, nothing official.

Motivation

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.

Implementation

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,
David

 

Assigned tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Robert Honig
      Robert Honig

      Thanks for sharing this interesting experiment. Keep sharing.

       

      mymilestonecard

      Author's profile photo David Kunz
      David Kunz
      Blog Post Author

      Thank you Robert!

      Author's profile photo Patricia Shor
      Patricia Shor

      This is great stuff!! need to share lots of articles for the reader who like your blog and thanks for sharing your ideas and tips

      SAP Cloud Application Programming Model is a framework of tools, languages, and libraries to efficiently build enterprise-grade services and applications.

      Author's profile photo David Kunz
      David Kunz
      Blog Post Author

      Thanks Patricia!