We'll take a look behind the scenes to better understand Kendo UI Builder templates, which help you build beautiful web experiences in Angular.
In my first post on Kendo UI Builder templates, we learned about the distinct items necessary to compose a custom view at design-time and at run-time. In this blog, we will explore what goes on behind the scenes in order to improve our understanding; also, we will learn how to use HTML in view properties and how to support internationalization.
Reminder: If you have not done it when reading the first post, you can download the sample custom-hello-world-v1 from this github repository to follow along.
When we add the custom view to the module, an entry is created in the module metadata file.
You can check this by opening the module file in meta\modules. For example, for a module called “HelloWorld”, we open meta\modules\HelloWorld.json.
In the children property we find greeting and titleX. Also, notice how viewType is assigned to custom-hello-world-v1.
Here is an extract:
Here are the steps that take place at design-time (when selecting the view in Kendo UI Builder):
Here is a graphical representation (operations in italic on the left and results on the right):
Reminder: Kendo UI Builder does not pass mouse or keyboard events to the design-time view. So, when designing your view, you do not have to worry about user interactions.
When we click on the generate button, a similar process is followed. The main difference is that the output does not get rendered as HTML in Kendo UI Builder but instead is saved on the file system in the app/src sub-directory, and of course, the output is dependent on the target framework.
In the previous blog post we used simple strings for the title and greeting properties. But what if we want to use an HTML string that contains HTML tags, HTML entities as well as single and double quotes, for example: <i class="fa fa-thumbs-up"></i> <b>Hello me</b>
This is achieved like so:
To give this a try, in KUIB, enter: <i class="fa fa-thumbs-up"></i> <b>Hello</b> for the greeting property.
You should see:
Note: The thumb up icon is rendered using font awesome, which Kendo UI Builder bundles automatically. For more information check out the font awesome gallery.
The need to escape double quotes is not limited to using HTML strings. Any string property can potentially contain them. So, it is recommended to escape double quotes for all string properties. That’s what we are doing with the title property.
generator/index.js has an entry point getTranslation. This lets us specify which properties to add to the translation file.
When we specify:
When we use the Generate function, Kendo UI Builder creates three entries in the default translation file (app\src\translations\translations.default.json).
Notice how we specify titleX for getting at the property value for title. This is because the value is resolved from the name of the property in the definition file.
All returned key/value pairs are created, in the default translation file, under the specific view key as illustrated in picture below:
This blog has taken a view of what goes on behind the scenes. This knowledge should help when troubleshooting problems. In particular, it is useful to refer to the run-time or design-time diagrams to isolate at which step of the process the problem may lie.
In a future post (which will cover an upcoming sample custom-hello-world-v3) we will put this knowledge into practice by augmenting the model used at design-time and at run-time.
But before we reach this point, the next step (covering sample custom-hello-world-v2) is to look into how to do event handling. You can find that post right here.
If you jumped into this series in the middle and want to start from the beginning, you can find the other posts that we've published so far here:
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You have the right to request deletion of your Personal Information at any time.
You can also ask us not to pass your Personal Information to third parties here: Do Not Sell My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More