Beginner

Interaction Between App Elements

As soon as you have 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, you learnt how to create a form and a list. In this step, you will learn how to make use of the form for adding / updating items in the list. You will also learn how to delete items and how to delete values from the form before inputting new values with the help of the "Clear" button.

Setting IDs, attaching event handlers

You need to attach functions to the buttons that will add / update and delete list items.

You can attach an event handler to a component in two ways:

All the native methods (including the one that attaches event handlers) are called from the component object. You can get a component object using the $$() helper that requires the ID of a component:

var obj = $$("component_id");

You can call any native method like this:

$$("component_id").attachEvent(...);
// or
obj.attachEvent();

To attach functions to buttons, you need to specify the event that will trigger their execution and the functions or function names. Here, the dedicated functions are called by button click:

{ view:"button", value:"Save", width:70, click:save_row },
{ view:"button", value:"Delete", width:70, click:delete_row },
{ view:"button", value:"Clear Form", width:70, click:() => $$('myform').clear() }

Next, let's set IDs to the needed components. You will work with form to get values from it as well as with the list to add, update, and remove records there.

{ view:"form", id:"myform", elements:[...] },
{ view:"list", id:"mylist", template:"..." }

Apart from the ID, components and controls have another identifier, name. It's a read-only component property. Form needs names of the controls inside it to get and set their values.

{
    view:"form", id:"myform", elements:[
        { view:"text", name:"title", placeholder:"Title" },  
        { view:"text", name:"year", placeholder:"Year" }
    ]
}

Now, let's define the functions:

"Delete" button to delete rows

To delete a row from the list, you need to get the ID of a selected list item and then pass it to the remove(); method of List as a parameter:

function delete_row(){
    var id = $$("mylist").getSelectedId(); //returns the ID of selected item
    $$("mylist").remove(id);
}

"Save" button to add / update records

The Save button will be used both for adding new records and for updating the selected records.

Adding items

To add an item, first you need to get text values from the form. Form values are returned with the getValue() method of Form. Let's call the method referring to the form with its ID and then use the add() method of List to add a new item with these values:

function save_row(){
    const formData = $$("myform").getValues();
    /* {"title":"New Film","year":"1999"} */
    $$("mylist").add(formData);
}

Updating items

1. First, you need to fill the form with the values from the list it when a user selects one. A form is filled with the help of the setValue() method. As a parameter, you must pass a list item object.

To get this object and put it in the form, handle the onAfterSelect event of the list. The handler function receives the ID of the record; with the help of this ID you will be able to get the object from the list.

$$("mylist").attachEvent("onAfterSelect", function(id){
    const record = this.getItem(id);
    /* {"id":1,"title":"The Godfather","year":1972} */
    $$("myform").setValues(record);
});

2. Look back at the above code sample and compare the data object with that in the save_row() function (formData and record). You will notice that when you fill the form from the list, there is one more data field - "id". The ID is not displayed in any of the inputs, and still the form stores it.

Now you will modify the save_row() function and make it also update list items. Use the ID from the form to choose when the function should do which.

A list item is updated with the updateItem() method that requires two parameters:

  • the ID of the item,
  • the new data object that will update the item in the list.
function save_row(){
    const formData = $$("myform").getValues();
    if (formData.id)
        $$("mylist").updateItem(formData.id, formData);
    else
        $$("mylist").add(formData);
}

Confirmation window

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 item?",
        callback: function(result) { 
            if (result) {
                $$("mylist").remove(id);
            } 
        }
    });
}

A confirmation window is initialized by the webix.confirm constructor. It accepts the following parameters:

  • title (string) - text header of the window;
  • text (string) - text message to the user;
  • callback - the function that will be called on button click. The result parameter is true or false depending on the user's choice (yes or no). If the result is positive, the remove(); function is executed.

It is also a good idea to check if a list item is selected and warn a user if not:

function delete_row() {
    var id = $$("mylist").getSelectedId();
    if (id)
        webix.confirm({
            title: "Delete",
            text: "Are you sure you want to delete the selected item?",
            callback: function(result) { 
                if (result) {
                    $$("mylist").remove(id);
                } 
            }
        });
    else
        webix.message("Select a film first","debug");
}

A warning is shown in a Webix message popup. Read more about message boxes in the corresponding chapter.

Related sample:  Creating Basic App. Step 2

Related articles:

Go to the previous page - Creating a Basic App

Go further to Server-Side Integration

Back to top