Kendo UI Builder comes with many built-in components and supports the implementation of custom components as well. Check out four newly released custom components that can be used in conjunction with each other to create interesting modern views.
In this blog, we are going to see a set of newly released custom components for Kendo UI Builder, and how they can be combined to create interesting modern views. The recently released components are:
All these components are able to:
They are all available from github here.
The rest of this blog is divided into two parts: The first part shows examples using these components and highlights various properties, the second describes the components at a high level.
In this first example, we have a REST service providing data for travel destinations. The three components are bound to different fields of the same data source record. When a destination is selected in the view, we show the destination name, its rating and an image.
In this second example, you can see the rating and the label components are placed below the image and are aligned left and right respectively.
In the first example, we inserted some vertical spacing via the margin bottom property while in the second example we used margin top.
In this third and final example below, we have added the map component to show a view combining the four components:
In all of these examples, the full power of Kendo UI Builder comes to the forefront. These views were created by simply dragging the components to the designer canvas and setting or adjusting some properties with just a few clicks.
Hopefully, you will find these components useful in your own applications, as is. As the complete source code is available from github here, you are welcome to tailor or augment them based on your own needs. They can also be used as a starting point for your own components.
Below, you will find the components description.
In the next blog, we will see how we can create modern views using a card container instead of a traditional grid rendering. Stay tuned :)
This component is available in github here and is based on the OpenLayer map library.The component is primarily driven by coordinates (latitude and longitude numbers) obtained from the data source.
It is assumed the REST data for these numbers is available at fields lon and lat. If you have a different schema, you can simply change the property names in components/custom-olmap-comp/angular/template.html.ejs in the following lines:
"$dataModels.<%- model %>.lon"
"$dataModels.<%- model %>.lat"
Here are all properties:
Change .lon and .lat to your corresponding field name.
You also specify what height you want the map to be. The width will be automatically adjusted to fit the container in the grid system.
Finally, to use this component, you will need to include these two files in the head (see OpenLayer doc here):
We add these to the Kendo UI Builder app properties, head. See this Kendo UI Builder documentation for information on how to do that.
This component is available in github here. Its main improvements are:1. The ability to show the rating range. When this mode is on, we always show five rating icons and only color the icons corresponding to the rating. For example, a three-star rating would result in three colored icons and two greyed out icons, like this:
2. Ability to specify both the top and bottom margin properties. Now, you can align the component with other components in the grid system with just a few clicks—no need to go override any CSS.
3. Ability to align the rendering of the rating to the left, center or right of the container. This is particularly useful when using the responsive grid system and an item below or above is using more width than the column in which the rating component is located. Here is an example where we need to align to the right:
This component is available in github here. The value of this component is to show a label dynamically from a selected data source item. For example, showing a destination description when selecting a destination from a combo-box.Additionally, you can align the label to the right, left or center of the container, as well as changing the font size and specifying the margins.
After receiving your feedback, I have implemented four properties to make it easier to align the image with other components in the view. With just a few clicks, you can quickly adjust:
And most importantly, you can see the effect of adjusting these properties on the designer canvas.
The updated component is available in github here.
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.