In this article, we'll discuss how you can create web components for displaying the data in the form of different types of lists. As an example we'll use the Webix UI library. To understand how everything works, we'll create a simple widget that displays some JSON data as a list. Then you'll learn how to make it interactive by adding the ability to edit the existing data. We'll find out how you can create your own components with the required features from the available Webix widgets. Finally, we'll take a look at more advanced types of lists that Webix provides, such as Grouplist and Unitlist.
Including Webix UI Library
Webix is a JavaScript UI library of HTML5 components for use in creating mobile and desktop web apps. There's a wide variety of components, from a simple button to the SpreadSheet Widget that can be used for developing Excel-like office web applications.
Besides the UI components collection, there’s an event handling mechanism, offline mode support, and a bunch of development tools. For example, you can create your own skins using the Skin Builder or experiment with the code in online source code playground.
You can include the required JavaScript and CSS files to your project using different techniques:
1. Download the library package, and find the files you need within the codebase folder. You can include them as follows:
<link rel="stylesheet" href="./codebase/webix.css">
<script src="./codebase/webix.js"></script>
2. Use CDN:
<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css">
<script src="http://cdn.webix.com/edge/webix.js"></script>
3. Install files via NuGet:
nuget install Webix
If you prefer Bower, try this:
bower install webix
4. If you use Microsoft Visual Studio, execute this command from Package Manager Console:
install-package Webix
Creating a Simple JavaScript List
Before building a JavaScript list, we have to create a new HTML page and add the required JavaScript and CSS files. We’ll use CDN for our example. If you've downloaded a package with these files, you can use the path to them instead. Open the directory of your project, create a new HTML file named index.html, open it in your text editor and use the following code:
<!doctype html>
<html>
<head>
<script src="http://cdn.webix.com/site/webix.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">
</head>
<body>
<script>
</script>
</body>
</html>
You have to put the following code related to Webix between the <script></script> tags. To check if your JavaScript list contains exactly the data that you want and works as it should, you can open the index.html file in your web browser.
To initialize Webix, place all your code inside the webix.ui() constructor. If you want to make sure that your application will be executed after the page is fully loaded, use webix.ready(function() { ... }. Here’s how your code should look:
webix.ready(function(){
webix.ui({
/* your code */
});
});
Let’s create our first list. Webix allows loading data of any supported formats like JSON, XML, CSV, or JSArray. We’ll use the JSON format as an example. Let’s imagine that you want to create a catalog of movies. Here’s an example of data that you can use:
var list_data = [
{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
{ <...> },
{ id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6}
];
To create a widget using Webix, you have to define the type of this widget with the view property and if this widget needs some data to work, you have to define its source with the data property. Also, in the case of lists, you can use the template property to define how data will be rendered.
Let’s look at the example below to check how we can use templates if we want to show the ID, title, and the year from our data set:
webix.ui({
view: "list",
data: list_data,
template: "#id# #title# #year#"
});
The result is shown below:
To make our list more readable, let’s change the template a little bit:
template: "#id#. #title# (#year#)"
Now, everything looks neater:
Data templates allow configuration of the way data is presented inside the component after loading. They can consist of a plain text, JSON keys and XML tags from the initial dataset, or even HTML tags and CSS selectors that add styling. Check this documentation page to learn more about the data templates.
Interaction with JavaScript Lists: Selecting and Editing
Let’s add the possibility to interact with the lists. We’ll start with the simplest feature: selecting. To enable the possibility to select a particular item of the list, you can use the select property:
webix.ui({
view: "list",
data: list_data,
template: "#id#. #title# (#year#)",
select: true //or select: 1
});
As simple as that!
To enable the ability to select multiple items, you can use the following code:
/* "Ctrl"+click multiselection */
select:"multiselect",
/* "Touch" multiselection */
multiselect:"touch"
To provide the user with the ability to edit the list data, we should use another feature of Webix. Using the protoUI() method, you can merge the contents of several objects together into a single object and create a new view. In other words, we can create new widgets with desirable features on the basis of the existing ones.
Let’s create a new view named editlist:
webix.protoUI({
name:"editlist"
}, webix.EditAbility, webix.ui.list);
We have gathered together the List view and the EditAbility mixin that implements common edit interactions. Now we can use this newly created view in our project:
webix.ui({
view: "editlist",
data: list_data,
template: "#id#. #title# (#year#). Rating: #rating#",
select: 1,
/* editing features */
editable: true,
editor: "text",
editValue: "title",
editaction:"dblclick"
});
Here’s what we’ve done. We enabled the editing feature and set the proper editor type. Then, we specified that we want to have the possibility to edit titles. The editaction:"dblclick" code line says that a double-click is required to open the editor.
Avoid Long Lists: Use Paging
If you have a pretty long list, it’s annoying to scroll and scroll it till you find the item you want. A possible solution is to split its content into separate pages. Paging will be the last feature we will consider before proceeding with other types of lists. Moreover, it’ll help us to learn another important thing about Webix: what means of creating a layout it provides.
Our app will consist of two views: a pager and a list. To use more than one component alongside, we have to create a layout. A pager is a separate widget. With Webix you can present a page as a combination of columns and rows. For our example, we’ll need two rows. Here’s what we should do:
webix.ui({
rows:[
{
/* first widget */
},
{
/* second widget */
}]
})
By combining nested rows and columns you can create as sophisticated a layout as you want. But let’s return to our list. The first widget will be the pager component. To initialize it, we need to use the following properties:
- view property defines the type of the widget
- id property is used to link the pager to the proper list
- animate property enables the animation
- group property defines the number of pages
- size property defines the number of records per page
The code for the List widget stays almost the same. Here’s what we need to do:
webix.ui({
rows:[
{
view: "pager",
id:"myPager",
animate: { direction:”top” },
group: 10,
size: 15
},
{
view:”list”,
/* <code for the list> */
pager: "myPager" //link to the pager
}
]
});
And here’s our list that supports beautiful animations:
This is not the only way to save space when dealing with big lists of data. Let's see what other types of lists Webix can offer.
Other Types of JavaScript Lists
Besides an ordinary list that we’ve mentioned above, there are other types of lists that provide a more extended functionality. They are useful for solving specific tasks in arranging list data:
- Grouplist that allows presenting data in groups;
- Unitlist that presents data in groups derived from initial non-hierarchical dataset;
- X-List offers the horizontal arrangement.
Let’s start with the Grouplist.
Upgrade Simple JavaScript Lists with More Powerful Grouplist
When you want to use a large amount of data in a list, it can be useful to group list items according to some criteria. For example, you can simplify selection of a city for registration needs by grouping cities in the list by country.
Let’s upgrade our previous example. We’ll use a Grouplist instead of a simple List widget this time. And we’ll group movies by year. Here are three new properties that we need to learn:
- templateItem defines data that will be presented in a normal data record
- templateGroup defines data that will be presented in the group header in the collapsed state
- templateBack defines data that will be presented in the group header in the expanded state
Besides these properties, we’ll use the scheme property that defines schemes for data processing. Check this out:
webix.ui({
view:"grouplist",
data:list_data,
templateBack: "Year #value#",
templateGroup:" Year #value#",
templateItem:"#rank#. #title#",
scheme:{
$group:function(obj){
/* data is grouped by "year" */
return obj.year;
},
/* sorting by displayed values
"year" or "rank" depending on hierarchy level */
$sort:{ by:"value", dir:"desc" }
},
});
As a result, you’ll get a list that consists of dates:
By clicking one of them, you’ll get the corresponding list of movies. The top row allows returning to the previous page and it looks according to the value of the templateBack property:
You can check the demo. Feel free to play with the code.
Unitlist for Work with Non-Hierarchical Datasets
Unitlist doesn't require radical changes in the appearance of the list. It was created to work with non-hierarchical datasets, so it doesn’t allow switching back and forth from one level of the hierarchy to another. Instead, it allows sorting data items and grouping them according to defined values such as the first letter of the title.
Let’s take a look at the example:
webix.ui({
view:"unitlist",
template:"#title# (#year#)",
data: list_data,
select: true,
uniteBy:function(obj){
return obj.title.substr(0,1);
},
});
Looks pretty much the same as our first example. But this time we’ve used the view:"unitlist" to show that we want to use the Unitlist widget instead of a simple list. Another important difference is the uniteBy property. You can use it to group data according to the specified criterion. In our example we use the first letter of the title as a criterion for grouping.
The result is shown below:
These visual “anchors” help a user to find the necessary category faster while scrolling through the list. Using optional properties such as type, you can change the appearance of list items and headers. For example, this code
type:{
height:50,
headerHeight:30,
},
will give you the following result:
type:{
height:50,
headerHeight:30,
},
You can check the demo here.
Horizontal Items with X-List
Let's finish by making something simple. X-List differs from the List JavaScript widget in the way it presents data: it arranges list items horizontally.
To turn a regular list into an X-List, we have to add two new properties:
webix.ui({
view:"list",
template:"#title# (#year#)",
data: list_data,
select: true,
/* enables horizontal scroll */
scroll:"x",
/* enables horizontal arrangement */
layout:"x",
});
The result is shown below:
Choosing a Proper Solution
By using JavaScript lists you can make your data more structured. Thus it will be easier to find the necessary information. UI libraries allow creating lists with minimal efforts and, what's more important, combine them with other useful widgets. As an example of such a library, we considered Webix, learned how four types of Webix JavaScript lists work and checked some other features of this UI library.
Here's a little memo that can help you decide which type of lists you should choose:
- Simple lists with paging. Use them if you have to work with a big amount of data
- Grouplist can be used to display a hierarchical data structure in which each list element leads to its own subgroup
- Unitlist. Choose it for non-hierarchical data if you want to group elements according to common values
- X-List is a good choice if you want to display data horizontally
It is important to note that these were only the basics of Webix usage. To learn more, check the detailed documentation page.
By configuring the list widget the way you want and combining it with the other Webix components, you can create the web and mobile applications of different levels of complexity. To see how List, Grid, Tree and other widgets work alongside, you can check such online apps as XLReporting
and GanttPRO.
About the Author
Sergey Laptick is a front-end developer and web enthusiast with a high interest in JavaScript and HTML5. He loves anything related to the Web and he is addicted to programming with JavaScript. Nowadays, he spends all of his time learning new things, writing case studies and guides for junior developers. Also he shares his experience at different conferences in Eastern Europe.
