User Tools

Site Tools


tutorial:forms

Data Entry Forms

XLApp.io can be used to build data entry forms for collecting surveys, data from customers, employees etc.

In the following tutorial we will create a simple Customer Satisfaction Survey.

Click Here to download the XLSX file.

Since empty cells with general format are ignored by XLApp Engine we need to set the cell type to Text and Name them.

Here we create a simple XLSX with the following fields

Name Phone No Email Ambiance Food

Then then the first step is to select the cells where the users will enter the data and make them into Text Type.

Then We name the Cell which will accept the name of the customer as CustName.text.

CellNames are used in XLapp to determine the Way a Cell Looks and Behaves.

XLApp uses cell names as a powerful way to decide the behavior of the cells in the mobile app.

The Names have three parts separated by a period. The first part is the Name of the field the second is the Type of the field (Ex: Text, Radio, Checkbox etc) and the third is additional properties (Ex: filter ).

Here we are naming the cell as Name with cell type text.

The Next Cell we name as Phone.number, so the field is named as Phone of type Number.

The Next Cell we name as CustomerEmail.email, so the field is named as CustomerEmail of type email. Since this field has the type as email, the mobile app will allow only emails to be entered. The field validations for ensuring that this field is an email is automatically built in.

The Next Cell we name as Ambiance .radioh, so the field is named as Ambiance of type radioh. radioh is a built in widget that shows the list as a single select horizontal radio button. The App preview will show this.

Similarly we do this for Food.radioh.

Finally lets have a cell that says “Thank you” which we will map to output form.

Upload and Map Cells

We now upload the file and map the Input and output cells.

Preview the App

We can now preview the app. Here we can see how radioh type has transformed our list into a nice widget.

The user can now enter the data. In case the user enters invalid data for example an invalid email, the app will automatically catch it.

After completing the form with valid data the user can click on result.

Now the data is captured and stored on the server and the user is displayed a “Thank You” message.

View Logged Data

To View the data that has been logged you can click on the Dnld Log link next to the uploaded file in xlapp.io file list page.

Form here you can download the collected data as CSV by clinking on the download CSV Button on top.

Since we named the cells we can see the data Named accordingly in the Downloaded CSV. If the cells were not named then the CELL IDs (Ex: 0_4_3) would show up in the column labels. Its always recommended to name the Input and Ouput cells so that it is easier when viewing the logs.

tutorial/forms.txt · Last modified: 2015/07/30 08:20 by admin