Ratings are used everywhere today. Learn how to create a custom rating component with Kendo UI Builder, the low-code Angular application designer.
Star rating or dollar rating components are quite popular these days, whether for showing how great a travel destination is or how expensive a restaurant is. Here is a visual example:
In this blog we are going to see how we can easily create such a rating component in our apps with Kendo UI Builder. Here are the parameters of the component we would like to be able to control:
To follow along, download the template sample zip from github or clone the repository, open folder templates/components/custom-rating-comp-v1/ and follow the instructions outlined in this post to install this template in your target application. The sample is specific to the Angular framework.
As usual, we will look how the component is defined (the component definition file), how it renders at design-time and finally how the run-time portion is implemented.
Open the file components/custom-rating-comp/custom-rating-comp.json
It contains similar properties as the basic component sample, so these should be familiar to you. If not please refer to this blog post.
The new properties we are interested in are:
These are self-describing. There are two property editors we have not encountered yet: icon and color editors. So, let’s expend on these:
First you will notice it’s a string. When we select a font awesome icon we will get a string like “fa fa-star”, which we can directly use as a CSS class as in:
<i class="fa fa-star"></i>.
If you are not familiar with this syntax, please check out fontawesome.
Second, we specify the
editorType to be
icon and most importantly that it will open in a window dialog using
"window". This is necessary as the icon selection UI is too complex to fit nicely into the property panel.
Here is what it looks like in the property panel:
And when we click on the Edit button, we get:
This is a string. When selecting a color we will get something like “#48d3d3”, which we can directly use as a CSS color style.
This property is specified as
"color", which uses a Kendo UI Color picker widget.
And it looks like this:
As in the earlier post, Introduction to Custom Components for Kendo UI Builder, we define an icon used to show and uniquely identify visually the component in the component palette (Left panel).
We also define a template:
This template simply iterates x amount of times to repeat a font awesome icon.
The icon is styled with the various properties we enter in the designer.
Here we implement a custom component template that encapsulates an Angular rating component. This is the same technique presented in this blog.
In components/custom-rating-comp/angular/config.json.ejs we define all the properties from design time that we want to make use of:
These properties will be added to the components elements of the
$config variable (The generated file name is app/src/app/modules/custom-components/rating/rating.view.base.component.ts)
For example, I have added two instances in my blank view and I have:
The template file is straightforward as it essentially passes all properties down to the Angular component. We just have to remember to use the
id property to access the specific instance:
It is available at this GitHub directory.
The template is concise:
We repeat the icon n times using an
ngFor construct. We use the designer properties either as a CSS class (for the icon) or as CSS styles (height, color, spacing).
The rating TypeScript component file is simple. The only noticeable thing is that we create a dummy array to use with
ngFor only works on iterable (it does not accept a simple number).
To use this sample, you need to register the Angular component to the Angular Module system. Add the following code to the generated application source code: app\src\app\shared\shared.module.ts:
Please, follow the same steps described in section “Steps to use Sample” in this blog post.
We have built a rating component that requires no coding at all. It is completely configurable with point and click.
This blog demonstrated it was a relatively easy task. One of the main reasons is that we could leverage the existing icon and color editors in the property panel to make it a breeze to tailor the rating component with any Font Awesome icon. And since these icons are based on SVG technology, we can easily customize their size and color with CSS properties.
This sample uses the rating value entered at design-time to decide how many stars to render. This is fine for a learning sample but not as useful in practice. In a future iteration of this component we will explain how we can hook it up to show the rating value from an object selected in another component on the same page (combo-box). Stay tuned 😊.
If you jumped into this series in the middle and want to start from the beginning, you can find the previous blog posts here:
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.Learn More
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share 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.