Webix

https://docs.webix.com/
Admin
Webix is a JavaScript UI Framework for desktop and mobile browsers, designed to speed up and...
Tokens:3,724,771
Snippets:37,834
Trust Score:9.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Start Development Server

Source: https://docs.webix.com/desktop_jet__installing.html

Navigate to the Desktop root folder, install dependencies using yarn or npm, and then start the development server.

```bash
// navigate to root folder
cd files

// install dependencies
yarn install //or npm install

// start dev server
yarn server //or npm run server
```

--------------------------------

### Install Dependencies and Start Development Server

Source: https://docs.webix.com/query__installing.html

Navigate to the Query root folder, install necessary dependencies using yarn or npm, and then start the development server.

```bash
// navigate to the root folder
cd query

// install dependencies
yarn install //or npm install

// start dev server
yarn server //or npm run server
```

--------------------------------

### Install Dependencies and Start Server

Source: https://docs.webix.com/rich_text_editor__installing.html

Navigate to the Rich Text Editor root folder, install dependencies using yarn or npm, and then start the development server.

```bash
// navigate to the root folder
cd editor

// install dependencies
yarn install //or npm install

// start dev server
yarn server //or npm run server
```

--------------------------------

### Install Dependencies and Start Development Server

Source: https://docs.webix.com/docmanager__installing_docmanager.html

Navigate to the Document Manager root folder, install project dependencies using yarn or npm, and then start the development server.

```bash
// navigate to the root folder
cd docmanager

// install dependencies
yarn install //or npm install

// start dev server
yarn server //or npm run server
```

--------------------------------

### Install Dependencies and Start Dev Server

Source: https://docs.webix.com/desktop__install.html

Navigate to the Webix root folder, install necessary dependencies using yarn or npm, and then start the development server.

```bash
cd core

yarn install //or npm install

yarn server //or npm run server
```

--------------------------------

### Install and Run Angular Demo

Source: https://docs.webix.com/desktop__angular2.html

Steps to install dependencies and start the Angular demo application.

```bash
npm install
npm run start
```

--------------------------------

### Run Package Samples Locally

Source: https://docs.webix.com/pivot_jet__installing.html

Navigate to the Pivot root folder, install dependencies, and start the development server using these commands.

```bash
// navigate to the root folder
cd pivot
 
// install dependencies
yarn install //or npm install
 
// start dev server
yarn server //or npm run server
```

--------------------------------

### Start Development Server for Diagram Samples

Source: https://docs.webix.com/diagram__installing.html

Use these commands to install dependencies and start a development server for modifying and running Diagram package samples locally. This allows you to see changes in real-time.

```bash
// navigate to the root directory
cd diagram
 
// install dependencies
yarn install //or npm install
 
// start dev server
yarn server //or npm run server
```

--------------------------------

### Run Package Samples Locally

Source: https://docs.webix.com/gantt__installing.html

Navigate to the Gantt root folder, install dependencies using yarn or npm, and start the development server.

```bash
// navigate to the root folder
cd gantt

// install dependencies
yarn install //or npm install

// start dev server
yarn server //or npm run server
```

--------------------------------

### Run Package Samples Locally

Source: https://docs.webix.com/usermanager__installing.html

Navigate to the User Manager root folder, install dependencies using yarn or npm, and start the development server.

```bash
// navigate to the root folder
cd users

// install dependencies
yarn install //or npm install

// start dev server
yarn server //or npm run server
```

--------------------------------

### Run Package Samples Locally

Source: https://docs.webix.com/scheduler__installing.html

Navigate to the Scheduler root folder, install dependencies, and start the development server using yarn or npm.

```bash
// navigate to the root folder
cd scheduler

// install dependencies
yarn install //or npm install

// start dev server
yarn server //or npm run server
```

--------------------------------

### Run Package Samples Locally

Source: https://docs.webix.com/report__installing.html

Navigate to the Report Manager root folder, install dependencies using yarn or npm, and start the development server.

```bash
// navigate to the root folder
cd reports

// install dependencies
yarn install //or npm install

// start dev server
yarn server //or npm run server
```

--------------------------------

### Start NodeJS Backend Server

Source: https://docs.webix.com/gantt__installing.html

To use the NodeJS backend for Gantt, clone the repository and run the installation and start commands.

```bash
npm install
node index.js
```

--------------------------------

### Run Package Samples Locally

Source: https://docs.webix.com/spreadsheet__spreadsheet_init.html

Commands to install dependencies and start a development server for running Spreadsheet package samples locally.

```bash
cd spreadsheet

yarn install //or npm install

yarn server //or npm run server
```

--------------------------------

### Server-Side Script Example

Source: https://docs.webix.com/desktop__server_ajaxsave.html

Example of how to access GET and POST parameters in a server-side script (PHP).

```php
$id = $_GET['id'];
$action = $_GET['action'];
$prop1 = $_POST['prop1];
$prop2 = $_POST['prop2];
```

--------------------------------

### Portlet Constructor Example

Source: https://docs.webix.com/api__refs__ui.portlet.html

Demonstrates how to initialize a portlet with basic content and IDs. This setup allows for multiple portlets within a layout.

```javascript
var portlet = webix.ui({
    type:"space",
    rows:[
        { view:"portlet", body:{template:"row 1"}, id:"p1"},
        { view:"portlet", body:{template:"row 2"}, id:"p2"},
        { view:"portlet", body:{template:"row 3"}, id:"p3"}
    ]
});
```

--------------------------------

### Run Package Samples Locally

Source: https://docs.webix.com/chat__installing.html

Navigate to the Chat root folder, install dependencies using yarn or npm, and start the development server to run package samples locally.

```bash
// navigate to the root folder
cd chat

// install dependencies
yarn install //or npm install

// start dev server
yarn server //or npm run server
```

--------------------------------

### Start NodeJS Backend Server

Source: https://docs.webix.com/filemanager__installing_filemanager.html

Install dependencies and run the local NodeJS backend server for File Manager. Provide the absolute path to the file system as an argument.

```bash
npm install

# windows, bash and cmd, same command
npm run local D:\\apps\\some
# linux
npm run local /media/usr/d/apps/some
```

--------------------------------

### Get the start of the week

Source: https://docs.webix.com/api__date_weekstart.html

Use webix.Date.weekStart to get the date object adjusted to the start of the week (Sunday). The original date object remains unchanged.

```javascript
var date1 = new Date(2012,11,12,8,35);
var date2 = webix.Date.weekStart(date1);

console.log(date1); // -> Wed Dec 12 2012 08:35:00 GMT+0300
console.log(date2); // -> Sun Dec 09 2012 00:00:00 GMT+0300
```

--------------------------------

### Constructor Example

Source: https://docs.webix.com/api__refs__ui.window.html

Example of how to initialize and display a ui.window.

```APIDOC
## Constructor
```javascript
var window = webix.ui({
    view:"window",
    id:"my_win",
    head:"My Window",
    width: 200,
    height: 200,
    body:{
        template:"Some text"
    }
}).show();
```
```

--------------------------------

### webix.Date.weekStart

Source: https://docs.webix.com/api__date_weekstart.html

Gets the start of the week for a given date. The start of the week is considered Sunday.

```APIDOC
## webix.Date.weekStart

### Description
Gets the start of the week for a given date.

### Method
Date.prototype.weekStart

### Parameters
#### Path Parameters
- **date** (Date) - Required - A date object.

### Response
#### Success Response (Date)
- **date** (Date) - A date object adjusted to the start of the week (Sunday 00:00:00).

### Request Example
```javascript
var date1 = new Date(2012,11,12,8,35);
var date2 = webix.Date.weekStart(date1);

console.log(date1); // -> Wed Dec 12 2012 08:35:00 GMT+0300
console.log(date2); // -> Sun Dec 09 2012 00:00:00 GMT+0300
```
```

--------------------------------

### Get Tags Response Example

Source: https://docs.webix.com/docmanager__backend.html

Example of the server response when retrieving tag data.

```json
[
  {"id":1,"name":"Review","value":"Review"},
  {"id":2,"name":"Accepted","value":"Accepted"},
  {"id":3,"name":"Denied","value":"Denied"},
  {"id":4,"name":"Personal","value":"Personal"}
]
```

--------------------------------

### Get Comments Response Example

Source: https://docs.webix.com/docmanager__backend.html

Example of the server response when retrieving comments for a file.

```json
[
  {
    "id":45,"text":"He's my patronus!!","date":"2020-04-20T07:56:49Z","user_id":1
  }
]
```

--------------------------------

### Get Users Response Example

Source: https://docs.webix.com/docmanager__backend.html

Example of the server response when retrieving user data.

```json
[
  {"id":1,"name":"Alastor Moody","email":"alastor@ya.ru",
    "avatar":"/users/1/avatar/1.jpg"},
  {"id":2,"name":"Sirius Black","email":"sirius@gmail.com",
    "avatar":"/users/3/avatar/3.jpg"}
]
```

--------------------------------

### GET Request for Modules

Source: https://docs.webix.com/report__backend.html

Example of a GET request to retrieve modules from the backend API.

```http
GET http://localhost:3000/api/modules
```

--------------------------------

### Run Development Server for Samples

Source: https://docs.webix.com/kanban__kanban_init.html

Install dependencies and start the development server to modify and view Kanban samples locally. Use either yarn or npm for package management and server commands.

```bash
// navigate to the root directory
cd kanban
 
// install dependencies
yarn install //or npm install
 
// start dev server
yarn server //or npm run server
```

--------------------------------

### User Manager Backend GET Request Example

Source: https://docs.webix.com/usermanager__backend.html

Illustrates the GET request format for fetching user data from the backend.

```http
GET http://localhost:3200/users
```

--------------------------------

### Start Golang Backend Server

Source: https://docs.webix.com/gantt__installing.html

To use the Golang backend, clone the repository, configure the database connection in config.yml, build the project, and then run the executable.

```bash
go build

# bash
./wg

# cmd
wg
```

--------------------------------

### Get Start of Month - JavaScript

Source: https://docs.webix.com/api__date_monthstart.html

Use monthStart to get the first day of the month for any given date. The time will be reset to midnight.

```javascript
var date1 = new Date(2012,11,12,8,35);
var date2 = webix.Date.monthStart(date1);

console.log(date1); // -> Wed Dec 12 2012 08:35:00 GMT+0300
console.log(date2); // -> Sat Dec 01 2012 00:00:00 GMT+0300
```

--------------------------------

### Constructor Example

Source: https://docs.webix.com/api__refs__ui.list.html

Demonstrates how to initialize and configure a basic ui.list component with data.

```APIDOC
## Constructor

### Description
Initializes a new instance of the ui.list component.

### Method
```javascript
webix.ui({
  view: "list",
  width: 250,
  height: 200,
  template: "#title#",
  select: true,
  data: [
    { id: 1, title: "Item 1" },
    { id: 2, title: "Item 2" },
    { id: 3, title: "Item 3" }
  ]
});
```

### Parameters
* **view** (string) - Must be set to "list".
* **width** (number) - The width of the list.
* **height** (number) - The height of the list.
* **template** (string|function) - Defines the template for each item in the list.
* **select** (boolean|string) - Enables item selection. Can be `true` for single selection or a string for multi-selection mode.
* **data** (array|object) - The data collection for the list. Can be an array of objects or a data object.
```

--------------------------------

### Get Button Value - JavaScript

Source: https://docs.webix.com/api__link__ui.colorpicker_getvalue.html

Retrieves the current value of a button control. This example demonstrates getting the text value of a button.

```javascript
webix.ui({
    view:"form", 
    elements:[
        { view:"button", id:"b1", value:"Edit", css:"webix_primary" },
        { view:"button", id:"b2", value:"Back", css:"webix_primary" }
    ]
});
 
$$("b1").getValue(); // returns "Edit"
```

--------------------------------

### ui.desktop Constructor

Source: https://docs.webix.com/api__refs__ui.desktop.html

Example of how to initialize the ui.desktop component with system parameters and a list of applications.

```APIDOC
## ui.desktop Constructor

### Description
Initializes the ui.desktop view with system parameters and a list of applications.

### Method
webix.ui

### Endpoint
N/A (Constructor)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
webix.ui({
    view: "desktop",
    systemParams: user,
    apps: [{
            name: "spreadsheet",
            icon: "imgs/spreadsheet.png",
            pin: ["bar", "desktop"],
            launch: sParams => {
                // custom launch logic
            },
        },
        // ... other apps
    ]
});
```

### Response
#### Success Response (200)
N/A (Constructor)

#### Response Example
N/A (Constructor)
```

--------------------------------

### Constructor Example

Source: https://docs.webix.com/api__refs__ui.toggle.html

Example of how to initialize and configure a ui.toggle component.

```APIDOC
## Constructor
```javascript
var toggle = webix.ui({
    view:"toggle",
    type:"icon",
    name:"s4",
    offIcon:"pause",
    onIcon:"play",
    offLabel:"Disabled",
    onLabel:"Enabled"
});
```
```

--------------------------------

### Basic Formula Examples

Source: https://docs.webix.com/spreadsheet__math.html

Formulas must start with '=', function and cell names should be in uppercase. Examples show basic arithmetic and SUM function usage.

```javascript
"data": [
    [ 3, 2, \"=A1+B2\",\""],
    [ 4, 2, \"=7+8\",\""],
    [ 5, 2, \"=7+B2\",\""],
    [ 6, 2, \"=SUM(A3+D7)\",\""]
    ...
 ]
```

--------------------------------

### Get Parent View Example

Source: https://docs.webix.com/api__link__ui.abslayout_getparentview.html

This snippet demonstrates how to get the parent view of a component. It first defines a simple UI structure with a view and then retrieves its parent.

```javascript
webix.ui({
  rows:[
    { id:"myview", template:"some" }
  ]
});

var layout = $$("myview").getParentView();
```

--------------------------------

### Constructor Example

Source: https://docs.webix.com/api__refs__ui.layout.html

Demonstrates how to initialize a basic ui.layout with rows and columns.

```APIDOC
## Constructor

### Description
Initializes a new instance of the ui.layout component.

### Method
`webix.ui(config)`

### Endpoint
N/A (Client-side JavaScript API)

### Parameters
None directly for the constructor, configuration is passed as an object.

### Request Example
```javascript
var layout = webix.ui({
    rows:[
        {template:"row 1"},
        {template:"row 2"},
        {
            cols:[
                {template:"col 1"},
                {template:"col 2"}
            ]
        }
    ]
});
```

### Response
#### Success Response (200)
Returns the initialized layout instance.

#### Response Example
```json
{
  "instance": "layout_object"
}
```
```

--------------------------------

### Get Active Multiview Cell ID

Source: https://docs.webix.com/api__ui.multiview_getactiveid.html

Call this method on a multiview instance to get the ID of the currently displayed cell. No setup is required if the multiview is already initialized.

```javascript
$$("views").getActiveId();
```

--------------------------------

### Get the start of the year with webix.Date.yearStart

Source: https://docs.webix.com/api__date_yearstart.html

Use this method to get a new date object representing the first day of the year of the input date. The time components will be set to midnight.

```javascript
var date1 = new Date(2012,11,12,8,35);
var date2 = webix.Date.yearStart(date1);

console.log(date1); // -> Wed Dec 12 2012 08:35:00 GMT+0300
console.log(date2); // -> Sun Jan 01 2012 00:00:00 GMT+0300
```

--------------------------------

### ui.suggest Constructor Example

Source: https://docs.webix.com/api__refs__ui.suggest.html

Example of how to initialize a text input with a suggest list.

```APIDOC
## ui.suggest

### Description
A suggest control. Can be used standalone or as an editor for other components. Check suggest documentation for more detailed description.

### Constructor
```javascript
webix.ui({
    view:"text", 
    width: 300,
    name:"country", 
    label:"Country", 
    value:"Belarus", suggest:[
        {id:1, value: "Albania"},
        {id:2, value: "Bhutan"},
        {id:3, value: "Colombia"},
        {id:4, value: "Denmark"},
        {id:5, value: "Germany"},
        {id:6, value: "Moldova"}
    ]         
});
```
```

--------------------------------

### Get Time Part of a Date in Seconds

Source: https://docs.webix.com/api__date_timepart.html

Use timePart to get the number of seconds from the start of the day for a given date object. This function requires the Webix library to be loaded.

```javascript
var date1 = new Date(2012,11,12,8,35);
var date2 = webix.Date.timePart(date1);

console.log(date1); // Wed Dec 12 2012 08:35:00 GMT+0300
console.log(date2); // 30900
```

--------------------------------

### Start Golang Backend Server

Source: https://docs.webix.com/usermanager__installing.html

Clone the Golang backend repository and build it to start the User Manager server locally.

```bash
go build

# bash
./usermanager

#cmd
usermanager
```

--------------------------------

### Run Golang Backend with Preview Service

Source: https://docs.webix.com/docmanager__installing_docmanager.html

Start the Golang backend server and enable the file preview service by providing the preview service URL and data directory.

```bash
#bash
./wfs-ls -preview http://localhost:3201/preview -data some/folder

#cmd
wfs-ls -preview http://localhost:3201/preview -data some/folder
```

--------------------------------

### Get HTML Input Node of a Button

Source: https://docs.webix.com/api__link__ui.counter_getinputnode.html

This example demonstrates how to get the HTML element of a button within a Webix form. The returned element is a standard HTML button element.

```javascript
webix.ui({
    container:"box",
    view:"form", 
    elements:[
        { view:"text",   id:"f1", label:"Email" },
        { view:"text",   id:"f2", label:"Password", type:"password" },
        { view:"button", id:"b1", value:"Login",  css:"webix_primary" }
    ]
});

$$("b1").getInputNode();
//-> <button type="button" class="webix_button">Login</button>
```

--------------------------------

### Desktop Constructor

Source: https://docs.webix.com/api__refs__ui.desktop.html

Example of initializing the desktop view with system parameters and defining applications.

```javascript
webix.ui({
    view: "desktop",
    systemParams: user,
    apps: [{
            name: "spreadsheet",
            icon: "imgs/spreadsheet.png",
            pin: ["bar", "desktop"],
            launch: sParams => {
                ...
            },
        },
        ...
    ]
});
```

--------------------------------

### Define Custom Template Start for Pager Type

Source: https://docs.webix.com/api__link__ui.pager_type_other.html

Use this to define custom template start functions for view rendering. This example shows how to set a custom templateStart for the 'some' type.

```javascript
some.type.templateStart = function(obj, type){
   return "<div>"
};
```

--------------------------------

### Constructor

Source: https://docs.webix.com/api__refs__ui.button.html

Example of how to initialize and configure a ui.button.

```APIDOC
## Constructor

### Description
Initializes a new instance of the ui.button.

### Method
```javascript
webix.ui({
    view: "button", 
    id: "my_button", 
    value: "Button", 
    css: "webix_primary", 
    inputWidth: 100 
});
```

### Parameters
- **view** (string) - Must be set to "button".
- **id** (string) - Optional. A unique identifier for the button.
- **value** (string) - The text displayed on the button.
- **css** (string) - Optional. CSS class to style the button (e.g., 'webix_primary').
- **inputWidth** (number) - Optional. Sets the width of the button.
```

--------------------------------

### webix.Date.monthStart

Source: https://docs.webix.com/api__date_monthstart.html

Gets the start of the month for a given date object. The time components will be reset to midnight.

```APIDOC
## webix.Date.monthStart

### Description
Gets the start of the month for a given date object.

### Method Signature
_Date_ **monthStart**(_Date_**date**);

### Parameters
#### Path Parameters
- **date** (Date) - Required - A date object.

### Response
#### Success Response (Date)
- Returns a new Date object adjusted to the start of the month (day 1, midnight).

### Request Example
```javascript
var date1 = new Date(2012, 11, 12, 8, 35);
var date2 = webix.Date.monthStart(date1);

console.log(date1); // -> Wed Dec 12 2012 08:35:00 GMT+0300
console.log(date2); // -> Sat Dec 01 2012 00:00:00 GMT+0300
```
```

--------------------------------

### Configuring Gantt

Source: https://docs.webix.com/desktop__gantt.html

Guides on configuring the Webix Gantt widget, including installation, creation, and localization.

```APIDOC
#### Configuring Gantt 
  * Installing Gantt
  * Creating Gantt
  * Configuring Gantt
  * Localizing Gantt

| Discusses the main points of Gantt initialization and configuring.
```

--------------------------------

### Start Golang Backend Server

Source: https://docs.webix.com/report__installing.html

Configure the DB connection and run the Golang backend service for Report Manager. Optional step to generate test data is included.

```bash
# generate test data, optional
metadb --demodata
# run the service
metadb --scheme ./demodata/meta.yml
```

--------------------------------

### Get Browser-Specific Transition End Event Name

Source: https://docs.webix.com/api__env_transitionend_other.html

Use this property to get the correct event name for CSS transitions ending, which varies by browser. For example, WebKit-based browsers use 'webkitTransitionEnd'.

```javascript
alert(webix.env.transitionEnd); // in WebKit-based browser returns "webkitTransitionEnd"
```

--------------------------------

### Configure Golang Backend with Preview Service

Source: https://docs.webix.com/filemanager__installing_filemanager.html

Start the Golang backend server with the preview parameter, specifying the URL of the preview service. This configuration is only compatible with the Golang backend.

```bash
#bash
./wfs-ls -preview http://localhost:3201/preview some/folder

# cmd
wfs-ls -preview http://localhost:3201/preview some/folder
```

--------------------------------

### Get RangeChart Frame Data

Source: https://docs.webix.com/api__ui.rangechart_getframedata.html

Call this method on a RangeChart instance to get an array of objects that fall within the current frame. This includes the starting and ending objects of the range. Available only in PRO Edition.

```javascript
rangechart.getFrameData();
```

--------------------------------

### Build and Run Golang Backend for Query

Source: https://docs.webix.com/query__installing.html

Build the Golang executable and run the Query backend server. Make sure to configure the database connection and import the SQL dump.

```bash
go build

./query
```

--------------------------------

### Get File Metadata Response

Source: https://docs.webix.com/filemanager__backend.html

Example response object containing metadata tags for audio files.

```json
{
  "Title":"IAMX - Little Deaths","Artist":"IAMX",
  "Album":"Unfall","Year":"2017","Genre":"Electronic"
}
```

--------------------------------

### Configuring Diagram

Source: https://docs.webix.com/desktop__diagram.html

Guides on installing and initializing the Webix Diagram widget, along with working with its configuration options.

```APIDOC
#### Configuring Diagram

* **Installing Diagram**: Describes how to install the Diagram widget.
* **Creating Diagram on a Page**: Touches upon initializing Diagram and working with its configuration.
```

--------------------------------

### Get Row Groups Snapshot

Source: https://docs.webix.com/api__ui.spreadsheet_getrowgroups.html

Call this method to get an array of all row group objects currently defined in the spreadsheet. Each object details the start and end rows, nesting level, and whether the group is open.

```javascript
const rowGroups = $$("ssheet").getRowGroups();
```

--------------------------------

### Create Desktop as a Webix View

Source: https://docs.webix.com/desktop_jet__creating.html

Use this method to integrate Desktop as a standard Webix view. Ensure `webix.ready` is called before initialization.

```javascript
function start(user) {
    webix.ready(function() {
        if (webix.env.touch) webix.ui.fullScreen();
        else if (webix.env.scrollSize) webix.CustomScroll.init();
        desktop = webix.ui({
            view: "desktop",
            systemParams: user,
            apps: myApps,
        });
    });
}
login("someurl").then(start);
```

--------------------------------

### Get the last selected area

Source: https://docs.webix.com/api__link__ui.excelviewer_getselectarea.html

Call this method without parameters to get the last selected area. The returned object contains details about the selection, such as start and end cells, and CSS for the border. Available only in PRO Edition.

```javascript
var area = $$("dtable").getSelectArea();
```

--------------------------------

### Build and Run Golang Backend Server

Source: https://docs.webix.com/filemanager__installing_filemanager.html

Build the Golang backend for File Manager and run it. Use the `wfs-ls` command with the folder path to list directory contents.

```bash
go build

# bash
./wfs-ls some/folder

# cmd
wfs-ls some/folder
```

--------------------------------

### Get the Start of a Day

Source: https://docs.webix.com/api__date_daystart.html

Use dayStart to set the time component of a date to midnight. This is useful for date comparisons or grouping.

```javascript
var date1 = new Date(2012,11,12,8,35);
var date2 = webix.Date.dayStart(date1);

console.log(date1); // -> Wed Dec 12 2012 08:35:00 GMT+0300
console.log(date2); // -> Wed Dec 12 2012 00:00:00 GMT+0300
```

--------------------------------

### Icon Initialization

Source: https://docs.webix.com/desktop__icon.html

Example of how to initialize the Icon component with its properties.

```APIDOC
## Initialization
```
{ view:"icon", icon:"mdi mdi-email", align:"left"}
```

### Main properties
* **icon** (string) - icon name. The name of a default icon is formed as **wxi-name**. A custom icon requires specifying the **full name of the icon**.
```

--------------------------------

### Constructor Example

Source: https://docs.webix.com/api__refs__ui.richselect.html

Demonstrates how to initialize and configure a ui.richselect component with a label, default value, and a list of options.

```APIDOC
## Constructor
```javascript
var richselect = webix.ui({
    view:"richselect",
    label:"Choose", 
    value:1, options:[
        { "id":1, "value":"Banana"}, 
        { "id":2, "value":"Papaya"}, 
        { "id":3, "value":"Apple"}
    ]
});
```
```

--------------------------------

### Constructor

Source: https://docs.webix.com/api__refs__ui.unitlist.html

Example of initializing the ui.unitlist component with data and configuration.

```APIDOC
## Constructor

### Description
Example of initializing the ui.unitlist component with data and configuration.

### Method
```javascript
var unitlist = webix.ui({
    view:"unitlist", 
    height: 200,
    uniteBy:function(obj){
        return obj.title.substr(0,1); 
    },
    type:{
        height:40,        
    },
    template:"#title#",
    data: [{ id:1, title:"The Shawshank Redemption", year:1994},
    { id:2, title:"The Godfather", year:1972},
    { id:3, title:"12 Angry Men", year:1974},
    { id:4, title:"The Good, the Bad and the Ugly", year:1966},
    { id:5, title:"My Fair Lady", year:1964},
    { id:6, title:"Collector", year: 1987}]
});
```
```

--------------------------------

### Multicombo Options Examples

Source: https://docs.webix.com/api__link__ui.multicombo_options_config.html

Demonstrates setting multicombo options using an array of objects, an array of strings, and a server path.

```javascript
webix.ui({
    view:"multicombo",
    value:1, // the initially selected one
    label: 'Fruit',
    options:[
       { "id":1, "value":"Banana"},
       { "id":2, "value":"Papaya"},
       { "id":3, "value":"Apple"}
    ]
});

webix.ui({
    view:"multicombo",
    value:"Apple",
    options:["Banana", "Papaya", "Apple"]
});

webix.ui({
    view:"multicombo",
    options:"server/options.php"
});
```

--------------------------------

### Get Ranges Data (After 8.2)

Source: https://docs.webix.com/migration.html

Starting from version 8.2, the 'getRanges' method includes the sheet name in the returned range data.

```javascript
$$("ssheet").ranges.getRanges("Sheet 1");
/* [
    {
      "name": "MYRANGE",
      "range": "Sheet1!B4:C7", // includes sheet name
      "global": true
    }
] */

```

--------------------------------

### Constructor

Source: https://docs.webix.com/api__refs__ui.menu.html

Example of initializing the ui.menu component with data and type configuration.

```APIDOC
## Constructor

```javascript
var menu = webix.ui({
    view:"menu", 
    data:[
        {id:1, value:"Translate", submenu:["English", "French", "German"]},
        {id:2, value:"Post"},
        {id:3, value:"Info"}
    ],
    type:{
        subsign:true,
    }
});
```
```

--------------------------------

### Determine Swipe Direction with onSwipeX

Source: https://docs.webix.com/api__link__ui.accordionitem_onswipex_event.html

An example of how to determine the swipe direction (left-to-right or right-to-left) using the start and current context coordinates.

```javascript
// example of usage
webix.attachEvent("onSwipeX",function(c1,c2){
   if( c2.x - c1.x > 0 ){
        // swipe from left to right
    }
   else{
       // swipe from right to left
   }
});
```
Tokens:
Raw