App Builder - Views

Zoho creator uses "VIEWS" to store the data collected via Forms. Views are nothing but tables that are automatically populated with data added to a form.  Every form by default has its view. The name is usually [FORM-NAME] & View.  Assume you have created a "Submit Feedback" Form.  A default view named "Submit Feedback View" will be created. The View displays the data only in Live Mode.  

Zoho Creator supports the following view creation formats. You can display your form data in the following formats:

List View: List View is the default view shown when you create a new application. This is similar to a table view with rows and columns of data. The list view enables you to sort, search, filter and group data. The options to Add, Modify and Delete records will be displayed only if the Edit permissions are provided for this view, by the application owner.

Grid view: A grid view presents a tabular view of data, where each column represents a field and each row represents a record. The grid view enables you to edit your records very easily. The options to Add, Modify and Delete records will be displayed only if the Edit permissions are provided for this view, by the application owner.

Note: Grid view is not supported if there is any client side Deluge Script configured in the form (i.e) On edit -> On load script (or) On user input script for any field.

 

Calendar view: A calendar view is displayed based on a date field in your form. If there are more than two date fields, you have to select the date field based on which the calendar view will be displayed. The value of the first field in the view will be displayed on that date. By default, the calender will display the current month/year. You can select the required month/year using the arrow keys, as shown in the screen-shot below. To view the complete record, click on the value displayed or click the specific date. Also refer create a calender view based on the date-time field, to see the clients appointment times at a glance.

Summary view: A summary view displays the summary of each record, as shown below. The options to Add, Modify and Delete records will be displayed only if the Edit permissions are provided for this view, by the application owner.

Chart view: Charts help you to organize and analyze your data. Zoho Creator supports 15 types of charts.

• Column, Stacked Column, Column 3d, Stacked Column 3d
• Bar, Stacked Bar, Bar 3d, Stacked Bar 3d
• Line, Step
• Pie, Pie 3D
• Area, Stacked Area
• Web Chart

A simple column chart view:

 
Note: To display grouped data in charts you can use the chart API supported by Zoho Sheet. Refer the topic Creating charts using Zoho Sheet API for more information.

HTML view: Create a HTML page view by embedding HTML tags and Deluge script using HTML builder.

• The HTML Builder supports drag-n-drop HTML and Deluge tasks to easily create the required HTML view.
• Embed forms, views and widgets in your HTML view.
• Create dashboard, customized bills and invoices.

Refer the topic, HTML View for more information on creating a new HTML view.

Yes, you can create any number of views for the same form with different view names. To create a new view, select New View from the Views tab.

Yes, you can change the existing view type by selecting Display Properties of a view from the View tab, in Edit mode.

1. Select your view from the Views Tab
2. Select Display Properties from the left-side tree
3. Select the required type from the list of icons displayed on the right-side, as shown in the screen-shot below:
4. Click Done to apply the changes.

In live mode, the view will be displayed in the format configured in the Display Properties dialog, as shown above. You can view the data in other formats by selecting the More Actions -> View as option, from the View header.

To customize the width of a each column in a view,

1. Select the view from the View tab.
2. Select the option Set Column Widths from the View Configuration tree.
3. Specify the appropriate width of each column in pixels/percentage. For unchecked columns, the width will be "auto".
4. Click Done to update the changes.

To create a view that will display only records that match a specific criteria,

1. Select the view from the Views tab
2. Select the option Set Criteria displayed in the View Configuration tree. The Set Criteria dialog will be displayed.
3. Select the radio button Restricted Record and create the criteria by selecting the required values. For example, to display only those employees in the "Employee" form who belong to the "HR" department, specify the criteria as shown in the screen-shot below:
4. Click Done to add the criteria.
5. In the Live Mode, the Employee View will display only those employees whose belong to the HR department.

The criteria specified in the GUI will be added to the view definition. The Advanced link displayed on the top-right corner can be used to create views with complex criteria and filters using AND/OR operators or a combination of both using Deluge Script functions. Refer the topic Deluge Reference -> Criteria/ Filters in Views to create views with complex criteria and filters.

Filters are a set of named criteria that allows you to select only specific entries in a view. Zoho Creator creates default filters for the fields belonging to any of the following types. These filters are called "Auto filters".

• Dropdown fields
• Multi Select fields
• Lookup fields
• Date and Time fields

If your form contains any of the above field types, the corresponding field names will be displayed in the GUI as shown below, when you select the Set Filters option for a view in Edit maode. For example, in the Employee form, the field Department is a single-select picklist field. Hence, it is displayed as a default filter, as shown below in addition to the date-time fields. You can enable/disable the auto filters by selecting/deselecting the show check-box. By default, it is enabled.

In Live mode, the filters will be displayed in the Filter list-box as shown below. The name of the field will be taken as the name of the filter. The values for the fields will get displayed in the Filters drop down list. Selecting a filter name, will display only those records that satisfy the filter criteria. For example, in the Employee View, if Department is selected as "Engineering", the only those employees in the Employee form whose department is "Engineering" is listed, as shown below.

Custom filters are a set of named criteria that can be defined by the user. At present, only simple criteria can be defined in the GUI mode. To create more complex filter, refer the topic Deluge Reference ->Criteria/filters in Views.

To create a custom filter,

1. Select the View from the View tab, in Edit mode.
2. Select New Custom filter displayed in the Set Filters dialog.
3. Specify the custom filter name and the condition based on which the records will be filtered.

4. If you have specified more than one condition and the filter needs to match all the conditions, select the match all radio button.
5. If you have specified more than one condition and the filter needs to match any one condition, select the match any radio button.
6. In the Live mode, the auto filters and custom filters will be listed in the Filter list-box.

The custom filters configured in the GUI will be added to the view definition. To view the definition, select More Actions -> View Definition from the View header. Refer the topic Deluge Reference ->Criteria/filters in Views to create views with complex criteria and filters.

Yes, you can create combined views with two or more related forms. For example, in the topic Create Relationship between Forms, we created two forms - "Employee" form to enter employee details and "Department" form to enter department details and created relationship between the two forms. To create a combined view with two or more related forms,

1. Create a view with the form which contains the Lookup field. In our example, the Employee form contains the lookup field "Department" from the department form.
2. Select the Column Properties option displayed on the left-side of the view, in Edit mode.
3. The lookup field will have the related fields as link. Click on the related fields link, and select the columns to be displayed from the related form.

4. Click Done, to update the changes.

Yes, you can rearrange columns in a view.

1. Select the view from the View tab
2. Select the Preview option displayed in the View Configuration tree displayed on the left-side.
3. The columns in the view will be displayed on the right-side. Rearrange the order of columns through easy drag-n-drop.

Hide/Select columns in a view

When you create a new view, it will display all the columns in the form based on which the view is created. If you do not want to display a column in a particular view, you can hide it. This doesn't remove the column or its data in any way.

To limit a column from being displayed in a view,

1. Select the View from the Views tab in Edit mode.
2. Select Column Properties option from the View Configuration tree.
3. Deselect the Show checkbox for the column.
4. Click Done to update the changes

If a new column is added to the form, the view will not reflect the new column added. To show a column,

1. Select the View from the Views tab in Edit mode.
2. Select Column Properties option from the View Configuration tree.
3. Select the Show checkbox for the column.
4. Click Done to update the changes.

Yes, Zoho Creator automatically tracks details about when and by whom a record was added or modified. The name of the user who added/modified the record and the time when it was added/modified is stored in the following fields. This information will be displayed in the view, if the columns are selected from Column Properties option of the View tab in Edit mode.

• Added User - Displays the name of the user who added the record
• Added Time - Displays the time when the record was added
• Modified User - Displays the name of the user by whom the record was last modified
• Modified Time - Displays the time when the record was last modified.
• Added User IP Address - Displays the ip address of the user who added the record.
• Modified User IP Address - Displays the ip address of the user who modified the record.
  

These fields can be used in action scripts or view criteria to perform actions or create filtered views based on the login user. Refer the following topics for more information:

• Tips & Tricks -> Filtering Data in Views -> Is it possible to display only those records that belong to a user?
• Tips & Tricks -> Validate Form Data -> To restrict entries only from the admin user.

The summation icon is displayed only for numeric columns and is disabled, by default. To display the sum of a numeric column,

1. Select the View from the Views tab in Edit mode.
2. Select Column Properties option from the View Configuration tree.
3. The summation icon will be displayed for all numeric columns in the view, as shown in the screen-shot given below.

4. Enable the summation icon and click Done to update the changes. In Live mode, the view displays the sum total of the column at the end of the column.
   

To change the display name of a column in the view,

1. Select the View from the Views tab, in Edit mode.
2. Select Column Properties option from the View Configuration tree.
3. Specify the new Display Name and click Done to update the changes.

Zoho Creator supports grouping of data based on specific columns in a view. Records with same value for the selected column(s) will be grouped together. To group data by column,

1. Select the View from the Views tab, in Edit mode.
2. Select Set Grouping option from the View Configuration tree.
3. Select the columns to be grouped and click on Add option. The records will be grouped in the order in which the columns are listed.
4. Use the Move Up/Move Down button, to change the sequence in which the records will be grouped.
5. Use the Sort Asc/Desc button, to display the grouping in the ascending/descending order
6. Use the Add/Delete button to add/delete columns to be grouped.
7. Click Done to update the changes.

The Application owner can grant three levels of access permissions to a public application or to shared users of a private application. To set the permissions,

1. Select the View from the Views tab, in Edit mode.
2. Select Set Permissions option from the View Configuration tree.

Add Record: Creating a view with the "Add Record" option selected, will allow shared users to add new records to this view. If access is provided to add new records, the Duplicate Record option is displayed. You can select this option to enable shared users to add a record that already exists in the application. In the Live Mode, the "Add Record" and "Duplicate Record" option will be enabled to the shared users.

Edit Record: Creating a view with the "Edit Record" option selected, will allow shared users to edit existing records in the view. If access is provided to edit existing records, the Bulk Edit option is displayed. You can select this option to enable shared users to edit multiple records with same values. In the Live Mode, the "Edit" and "Bulk Edit" option will be enabled to the shared users.

Delete Record: Creating a view with the "Delete Record" option selected, will allow shared users to delete existing records in the view. In the Live Mode, the "Delete" option will be enabled to the shared users.

To invite users to share your application, refer Sharing.

3. Click Done to create the view based on the specified configurations.

Yes, you can send mail to selected records in a view using the "Custom Action" feature. Custom Actions are actions performed on selected records in a view by executing function calls. For example, you can define a function to send e-mail notifications and configure this function as a custom action for a view. To configure a custom action,

1. Select the view from the View tab.
2. Click on Custom Actions, from the View Configuration tree.

Refer the topic, Deluge Scripting -> Functions, for more information on defining functions and invoking custom actions.

By default, a view displays the records in the order in which they are added. (i.e.) latest records are listed on top. To sort records by a specific column,

1. Select the View from the Views tab, in Edit mode.
2. Select Set Sorting option from the View Configuration tree.
3. All the fields configured for the view are displayed on the left-side list-box. Select the field from the list and add it to the right-hand side.

To change the order of sorting, select the field and click the Sort Asc/Desc button. To sort by multiple fields, select multiple fields from Left Hand Side and add them to the right hand side. You can move up and down to change the sequence by which the records will be sorted.

You can search records in a view using the Search option, displayed below the view header in Live mode. as shown in the screen-shot below. The Search option is supported in List view and Grid view. To specify the search criteria,

1. Click on the Search link which is displayed displayed below the view header in Live mode. The will display the comparison operators supported for each field type and the text-box to specify the criteria value.
2. Specify the search criteria, by selecting the required operator and specify the value. For instance, if you want to search records from an Employee form, for employees in the "HR" department who have joined in the last 30 days, select the operator for Date of Joining as "Last 30 days" and Department as "Contains" with Department value as "HR".

3. Only those records in the database that satisfy the search criteria will be listed.
   Note: Range search is supported for Date and Numeric fields.
   

You can update multiple records in a view using the Bulk Edit option displayed below the View header, in Live mode. The Bulk edit option allows you to apply the same value to multiple records in a view. To update,

1. Select the records that needs to be updated and click "Bulk Edit".
2. In the pop up window, select the field that needs to be updated, specify the new value and click on the Apply button.
3. The selected records will be updated with the value specified.

Yes, you can save the changes made to the view configurations, in live mode.

• To save the changes, click on More Actions -> Save changes.  The Save changes dialog will display the changes made to the view. 
• You can directly save the changes to the same view, by clicking on the Save button (or)
  
• Create a new view by selecting the Save as New view check-box, specify the new view name and then click on Save button. 

Zoho Creator allows you to create an exact copy of your existing views. This feature will be useful if you want to create new views similar to existing views, but with minor changes to configurations. For example, we have a view named "Employee View" based on the "Employee" form which is displayed in the form of a List. Now, in addition to this view, we want to create a new view which will display the same data in the form of a summary. To do this, it is not necessary to create the new view again from the beginning.

To duplicate a view from Edit mode,

1. Select the view from the Views Tab.
2. Select More Actions -> Duplicate this View option from the view header, in Edit mode.
3. Specify the name of the new view and click Duplicate. The new view will be created with the specified name. You can select this view and make the necessary modifications to the configurations or the display format.
   
   

To rename a view from Edit mode,

1. Select the view from the Views Tab.
2. Select More Actions -> View Properties option from the view header, in Edit mode.
3. Specify the new view name and click Done.

Zoho Creator supports printing a View. All Zoho Creator views (including HTML View) has in-built print support. To print a view,

1. Select the View in Access mode.

2. Select More Actions -> Print option from the view header.
   

The print support for HTML view can be used to generate nicely formatted document. We have a sample application that showcase how HTML view can be used to print a HTML formatted report. Please check the application in the below link.

http://creator.zoho.com/sampleapps/employee-contact-details/#

Clicking the More Info button will display contact details. The print button present in the top right corner is mapped to the url pattern that triggers the print action for a view. The url format to print a view is given below:

http://creatorexport.zoho.com/<app owner name>/<app name>/print/<view name>

How do I delete a view?

To delete a saved view,

1. Select the view from the Views Tab.
2. Select More Actions -> Delete this View option from the view header, in Edit mode.
3. Click OK to delete the view or Cancel to return back.

As of now, Zoho Creator does not support emptying an entire View. However, as a work around, you can create a copy of the Form ( based on which the view is created) and then delete the original Form, which in turn will delete the corresponding view and all its data. To make a copy a Form,

1. Go to the Script tab and select the Form to be copied from the Select Form dropdown.
2. Select Form Definition -> With Action from the left side tree. The Script definition of the entire form will be displayed in the editor area.
3. Copy the entire script displayed
4. Now, select New Form under Select Form dropdown, displayed on the top left.
5. In the script editor, paste the copied code, modify the form name and Save Script. A copy of the original form will be created.

Use the view permalink, if you do not want to share your application with users but just want to send them a link to view your data or to embed in your website/blog. To have a permalink of the view, just select More Actions -> Permalink from the view header in live mode. The permalink will be displayed as shown in the screen-shot below. The view accessed through the ‘Private Link’ url will always be up-to-date.

To display only specific columns in a view but all the columns in the summary,

1. Create a view with all the required fields that you wish to see in the summary.
2. In Live Mode, click on the column header which you would like to hide and select the Hide option from the pop-up menu. You can also use the show/hide columns from the More Actions -> Show/Hide columns option to hide or show columns in a view.

3. The column will no longer be displayed in the view but will be displayed in the summary view. To add back the columns to the view, select More Actions -> Show/Hide columns option. The columns that are hidden from the view, will be shown as deselected. You can add back the columns to your view, by selecting the required column. Click on Save option to save the changes.

Whenever you have filtered/searched records in the view, Zoho Creator automatically displays the More Actions -> Save Changes option. You can save the configurations and also create a new view based on the filtered/searched records in the view.

One of the very useful features of Zoho Creator is to embed the Forms/Views on any website and blog, just by pasting few lines of code. To embed a view,

1. Go to the 'Live mode' by clicking "Access this application" .
2. Select the view to be embedded and click on More Actions -> Embed in your website near the view header.
3. The emded dialog will be displayed with the <iframe> code. To get javascript snippet instead of <iframe>, select the link Get JavaScript Snippet. Copy and paste the code snippet to your website. The embedded view will have permissions to Add, Modify and Delete records based on the Edit permissions provided for this view.
4. By default, the embedded view will enable users to configure the number of records to be displayed in a page, search records and view the record summary. To remove these items from the embedded view, deselect the required items and then copy-paste the <iframe> code to your website/blog.

5. To access the form without login, select the Click Here option displayed in the embed dialog. You will now find an encrypted code appended to the existing code. Copy and paste the code snippet to your website.

By default, Paging, Search and Record Summary options will be displayed in an embedded view. The application owner can remove these items from the embedded view by deselecting the required items and then copy-paste the <iframe> code to the website/blog.

*Paging: Paging is the facility to configure the number of records to be displayed in a page view.
*Search: The Search option will enable users to search records in a view by specifying the required criteria.
*Record Summary: The record summary enable users to view the summary of each record. .

The Export Data feature in Zoho Creator enables you to export your data anytime in the format of Grid (excel format), PDF, HTML, RSS, JSON, CSV and TSV. You can export data as spreadsheet and take it to Zoho Sheet if you want to do some analysis, export it as PDF if you want to print/email the data, export as HTML to view data in your browser, use RSS feed to subscribe to changes in the data or javascript based JSON feed, use CSV, TSV formats when required. Click on More Actions -> Export Data from the view header, in Live mode.

Spreadsheet View: Data can be viewed in Microsoft Excel, Openoffice, Spreadsheet and Zohosheet.

HTML Document: Data can be opened in browsers like Internet Explorer, Firefox, Safari etc.

PDF Document: Portable Document format is a printer-friendly document

RSS Feed: XML-based format for allowing people to subscribe to changes in the data.

JSON Feed: A javascript-based, lightweight data exchange format.

CSV Feed: This format is used for exchanging data between various spreadsheet programs.

TSV Feed: Flat-file format commonly used for inter-application data transfer.

The RSS feed is automatically updated and therefore no need of exporting the data every time its updated. Once you copy the link and submit it in a RSS feed reader you will be able to see the latest 25 records submitted. To see the entire records, add complete=true at end of the link.

If your view is private, use the Enable Private Permalink option in the Export dialog, to get the private link. You will get a link in the following format:

http://creator.zoho.com/<application_owner_name>/rss/<view_number>/<encrypted code>

Include complete=true as given below:
http://creatorexport.zoho.com/<application_owner_name>/rss/<view_number>/complete=true/<encrypted code>

The frequency with which the RSS feed is updated depends on the Feed reader used and how often the feed reader is configured to fetch the updates from the form/view. We have performed some tests on various Feed Readers and the update time varied from one to another. On an average the RSS update time limit varies between 5-10 minutes.

Yes, you can export only the records that are limited by searching or filtering. Whenever you have filtered/searched records in the view, Zoho Creator automatically displays the More Actions -> Export Filtered Records option in addition to the Export all records option, to download ‘All Records’ or ‘Filtered Records’.

Yes, you can add new records to an existing application by importing data from a .xls, .csv, .tsv file.

1. Select the form/view in access mode.
2. Select the More Actions ->Import Data option from the form header. The Import Data dialog will be displayed.
3. Select the Paste Data tab and copy/paste the data to the "import " dialog.
4. Select the File type as XLS, CSV or TSV.
5. If the data contains field label names in the first row, select the checkbox First row of data is field label names
6. Click Submit to add the data. The existing view will be updated with the new records.

The "Import Data" option will only append new records. You cannot update existing records using this option.

You can copy application with data only if you have subscribed for the Business Free Edition and above. Refer FAQ - > Create application for more information.

Zoho Creator does not currently support disabling the Export option in the view. However, if the view is embedded in a website, the Export option will not be available to the users.

If you would like to have the users access only their records, you can set a Criteria as follows in the Advanced option under Set Criteria of the Views tab.

Added_User == zoho.loginuserid

The above criteria can be used only if the application is Private and all your shared users login to view their data. When a user logs in, the records that have been added by a user will only be displayed.

A calender view based on a date-time field, will display only the date and not the time. When you click on the link, the entire record will pop up which will contain all the fields values. Display of time directly in a calender view is currently not supported. As a workaround, you can follow the steps given below to display the time entered in the date-time field.

1. Add a Formula field to the form and write the expression as (((((Appdate.getHour())) + ":") + (Appdate.getMinutes())) + " ") + Name , where Appdate is the name of the Date-time field and Name is a text field, to enter the name of the customer.
2. In the Edit mode of the View, select the Set Display type as List View and click Done.
3. In the Preview, drag-n-drop the Formula field be the first column in the List View.
4. Now, change the Set Display type as Calendar View and click Done.

The calender view will display the output of the formula in the format "3:30 Airtel", where 3:30 is the time entered in the date-time field and Airtel is the name entered in the Name field.

Yes, you can create custom reports using the HTML view. For more information refer Tips & Tricks -> Creating HTML Views.