Creating Forms with the Webix Framework — 4 Practical Examples

This article was peer reviewed by Simon Codrington and Mallory van Achterberg. Thanks to all of SitePoint's peer reviewers for making SitePoint content the best it can be!

As a web designer, the chances are that you have to create web forms on a fairly regular basis. This is often a thankless task and one fraught with headaches (especially if you're doing something more complex, such as creating a multi-step form). In such cases it can be better to use a UI framework to ease the pain and to speed the development process. In this article I'll outline various tips and tricks that let you create different types of forms quickly and with minimum hassle using the Webix framework.

What is Webix?

[author_more]

Webix is JavaScript UI library of HTML5 components that facilitates the creation of mobile and desktop web apps. It provides you with a wide variety of components from a simple button to the SpreadSheet Widget that can be used for developing Excel-like applications. Besides the UI components collection, there's an event handling mechanism, offline mode support, and a bunch of development tools. You can also create your own skins using the skin builder, use visual designer for drag-and-drop UI creation and play with the code in online source code playground. The project also has exhaustive documentation.

I've already written an introductory article that describes the key features and basics of using this framework, so feel free to give that a look beforehand if you're interested.

Including Webix

There are a variety of ways in which you can include the required JavaScript and CSS files in your project. If you download the library package, you'll find these files within the codebase folder. You can include them as follows:

<link rel="stylesheet" href="./codebase/webix.css">
<script src="./codebase/webix.js"></script>

Alternatively you can use CDN:

<link rel="stylesheet" href="http://ift.tt/1Qr9UoG">
<script src="http://ift.tt/1bnVGEy"></script>

You can also use NuGet:

nuget install Webix

Whereby if you use Microsoft Visual Studio, execute this from Package Manager Console:

install-package Webix

Or try Bower:

bower install webix

Creating a Simple Form

Now, with the libraries in place, let's see how the Webix Form Widget works.

webix.ui({
  view: "form",
  id: "myForm",
  container: "areaA",
  width: 350,
  elements: [
    { // first form component },
    { // second form component},
    { // n-th form component */}
  ]
});

We start off by calling the ui method of the webix object and passing it various parameters to configure its output.

• The view property dictates the kind of element created (here we are creating a form, but this could also be a menu or a chart).
• The id property assigns an ID to the form, through which you can later reference it.
• The container property specifies the ID of the HTML element into which the form should be rendered.
• The width property is used to set the width of the form element. Webix assumes that you want to use pixels as a unit of measurement here, so you just need to set a proper number.
• The elements property is an array of components that your form will contain. You can use any appropriate component within the form: text field, radio button, checkbox, buttons, etc.

Let's create a simple login form. We'll need two text fields (one for username and one for the password), one checkbox, and, of course, a submit button.

webix.ui({
  ...
  elements: [
    { view: "text", label: "Username", name: "username" },
    { view: "text", label: "Password", name: "password", type: "password" },
    { view: "checkbox", labelRight: "I accept the terms of use", name: "accept" },
    { view: "button", value: "Submit", width: 150, align: "center", click: submit }
  ]
});

Note that we are specifying name attributes for our form elements and setting type: "password" for our password field, so as to mask the characters as they are entered. Setting an element's label property defines a label for that element and we can use an element's click property to define an event handler that will be called when the form is submitted. Although it is nice to have the possibility of checking that everything is ok with the data, don't forget that client-side validation should only ever supplement server-side validation.

Before we can run this demo, we'll need to define this event handler. Here I'm using Webix Message Box to give the user feedback as to what was entered:

function submit(){
  webix.message(JSON.stringify($$("myForm").getValues(), null, 2));
}

This code uses the Webix getValues method to derive the inserted data from the form with an ID of myForm and then converts it to a JSON string using JSON.stringify().

Well, everything is ready, and we can check the result:

After you insert some data and hit the Submit button you'll get the message:

Here's the demo:

See the Pen NNBgWm by SitePoint (@SitePoint) on CodePen.

Seems like everything works well. Now, let's add something more interesting.

Continue reading %Creating Forms with the Webix Framework — 4 Practical Examples%

by Sergey Laptick via SitePoint