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"
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:
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.
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:
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
Copyright © 2019 Progress Software Corporation and/or its subsidiaries or affiliates.All Rights Reserved.
Progress, Telerik, Ipswitch, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.