As soon as you've learned how to create a basic app, let's go on and enable the app's functionality with the help of attached events and functions.
In the previous step we made a form and a list. Now we want to add items to the list by filling the form as well as to delete items from list.
At the same time, here we'll additionally create an update button on toolbar to update existing records in the list and a clear form button to delete values from the foorm before inputting new values.
We need to attach functions to the buttons so that they can implement adding, updating and deleting operations stated by their values.
An event handler can be attached to the components in two ways:
All the native methods (including the one that attaches event handlers) are called from the component object that can be received using the following construct:
var obj = $$("component_id");
And then call any native method, e.g.:
$$("component_id").attachEvent(...);
$$("component_id").clear();
To attach functions to buttons, you need to specify the event that will trigger their execution anmd the functions (function names). Here, dedicated functions are called by button click.
{ view:"button", value:"Add", width:70, click:"add_row"},
{ view:"button", value:"Delete", width:70, click:"delete_row"},
{ view:"button", value:"Update", width:70, click:"update_row"},
{ view:"button", value:"Clear Form", width:70, click:"$$('myform').clear())"}
Then, let's set IDs to the needed components. We will work with form to get values from it as well as with list to add and update records there.
{view:"form", id:"myform", elements:[...]},
{view:"list", id:"mylist", template:"..."}
Apart from ID, components and controls have another identifier, name. It's a read-only component property. In case with form, we need element names to derive form values.
{ view:"text", name:"title", placeholder:"Title"},
{ view:"text", name:"year", placeholder:"Year"}
Now, let's describe the functions:
To delete a row from the list, we need to get the selected item and them pass it to the remove(); function as parameter.
function delete_row(){
var id = $$("mylist").getSelectedId(); //returns the ID of selected item
$$("mylist").remove(id);
}
To add an item, we need to get text values from the form and assign them to list according to its template values.
Form values are derived with the getValue() function called from the form using its ID. To get to the necessary value, specify its name.
function add_row() {
$$("mylist").add({
title: $$("myform").getValues().title,
year: $$("myform").getValues().year,
})
}
Item update is a two-step process.
1 . Here we use setValues(); method to set selected data as values for the form fields. The function fires on list item selection and takes this item ID as argument. List values are set to the fields with specified names:
$$("mylist").attachEvent("onAfterSelect", function(id){
$$("myform").setValues({
title: $$("mylist").getItem(id).title,
year: $$("mylist").getItem(id).year
});
});
2 . The core of a custom update_row() function is the getValues() method that gets values from form fields. Finally, the list is updated with the function of the same name - update()
function update_row() {
var sel = $$("mylist").getSelectedId(); //checks whether the item is selected
if(!sel) return; // if not, function execution is stopped
var value1 = $$('myform').getValues().title;
var value2 = $$('myform').getValues().year;
var item = $$("mylist").getItem(sel); //selected item object
item.title = value1;
item.year = value2;
$$("mylist").updateItem(sel, item);
}
To avoid accidental deletion of an important item, you need to safeguard user actions with a "confirm" window:
function delete_row() {
var id = $$("mylist").getSelectedId();
webix.confirm({
title: "Delete",
text: "Are you sure you want to delete the selected contact?",
callback: function(result) {
if (result) {
$$("mylist").remove(id);
}
}
});
}
Confirmation window is inited by the webix.confirm constructor. It inlcudes
Read more about message boxes in the corresponding chapter.
Related sample: Creating Basic App. Step 2
Go to the previous page - Creating a Basic App
Go further to Server-Side Integration
Back to top