Webix allows visualizing the application workflow by adding the following elements to its components:
Progress bar and icon are provided by Webix Progress Bar module that can be easily mixed into any component including layouts.
webix.extend($$("view_id"), webix.ProgressBar);
Since now, the component with "vew_id" ID features two methods:
Configuration (progress_config) for a progress bar/icon includes:
Progress Bar
//initializing the component
webix.ui({
view:"datatable", id:"data", ..
});
//adding progress bar functionality to it
webix.extend($$("data"), webix.ProgressBar);
...
//using the functionality
$$("data").showProgress({
type:"bottom",
delay:3000,
hide:true
});
Related sample: Progress Bar::Data
Progress Icon
//initializing the layout
webix.ui({
id:"app", rows:[
..app config..
]
});
//adding progress bar functionality to it
webix.extend($$("app"), webix.ProgressBar);
...
//using the functionality
$$("app").showProgress({
type:"icon",
delay:3000
});
Additionally, an app can be disabled for the time being.
Related sample: Progress Bars::Layout
Overlay box is provided by Webix OverlayBox module and allows creating placeholders for data components.
The module needs to be included into the component:
webix.extend($$("list1"), webix.OverlayBox);
After that the following methods become accessible from the component:
A blue bar with webix_loading_overlay CSS class will be shown. To get rid of it, or set another loading image, redefine this class.
List with 'no data' message
webix.ui({
view:"list",
url:"...",
ready:function(){
if (!this.count()){ //if no data is available
webix.extend(this, webix.OverlayBox);
this.showOverlay("<div style='...'>There is no data</div>");
}
}
});
Webix datatable features prebuilt overlay support.