Beginner

Setting Components

Here we create a simple dataset - a list of films, where you can add elements.

Here you will need:

  • a list with film data;
  • a form to add new items to the set;
  • a toolbar with 'add' and 'delete' to control the app.

First of all, you should create the app layout and then, place ui components and controls there.

Follow the guide step by step:

Step 1.Introduction

This is a clean page:

webix.ui({
 
});

Step 2. Rows

Divide the page into two rows with the upper one being for toolbar. Set the width to the app - 500px.

webix.ui({
    width:500,
    rows: [
        { template:"Row 1" }, //first row
        { template:"Row 2" }  //second row
    ]
});

The layout doesn't show empty cells. That's why we temporary put templates into rows to force the layout to display the structure.


Step 3. Columns

Divide the lower row into two columns for list and form components.

webix.ui({
    width:500,
    rows: [
        { template:"Row 1" },
        { cols:[
            { template:"Column 1" },//first column
            { template:"Column 2" } //second column
        ]}
    ]
});

Step 4. Toolbar

  • Place a toolbar with two buttons into the first row;
  • Define text for the buttons with the help of their value property;
  • Set the width of the buttons to 100 pixels (with the width property).
webix.ui({
    width:500,
    rows: [
        { view:"toolbar", elements:[
            { view:"button", value:"Add",    width:100 },
            { view:"button", value:"Delete", width:100 }
        ]},
        { cols:[
            { template:"Column 1" },//first column
            { template:"Column 2" } //second column
        ]}
    ]
});

Step 5. Form

Place a form into the first column. The form will contain two text inputs stored in the elements array.

webix.ui({
    width:500,
    rows: [
        { view:"toolbar", elements:[
            { view:"button", value:"Add",    width:100},
            { view:"button", value:"Delete", width:100 }
        ]},
        { cols:[
            {view:"form", elements:[
                { view:"text", placeholder:"Title"},  
                { view:"text", placeholder:"Year"}     
            ]},
            { template:"Column 2" } //second column
        ]}
    ]
});

Step 6. List

  • Place a list into the second column;
  • Use the data property to populate the list with data in JSON format (there can be other possibilities);
  • Notice, how the title and year properties are reflected in the list template.
webix.ui({
    width:500,
    rows: [
        { view:"toolbar", elements:[
        { view:"button", value:"Add",    width:100},
        { view:"button", value:"Delete", width:100 }
        ]},
        { height:120, cols:[
            {view:"form", elements:[
            { view:"text", placeholder:"Title"},  
            { view:"text", placeholder:"Year"}     
                ]},
            {
                view:"list", 
                template:"#title# - #year#", // which data to show
                select:true, //enables selection 
                height:400,
                data: [
                    { id:1, title:"The Shawshank Redemption", year:1994},
                    { id:2, title:"The Godfather", year:1972},
                    { id:3, title:"The Godfather: Part II", 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:"12 Angry Men", year:1957}
                ]
            } 
        ]}
    ]
});

Related sample:  Creating Basic App. Step 1

Go further:

Back to top