Technical Articles
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.
The rendering is based on my csn definitions and uses some helper functions which I defined here:
As you can see, there are no bookshop-specific elements.
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 ...}}
.
Final Result
Thanks for reading and best regards,
David