================
View Form Dialog
================

The **View Form Dialog**
opens when a developer selects the item in the Application builder and clicks 
the **View Form** button. 

It has two tabs **Layout** and **Form**.

Layout tab
==========

On the Layout tab, you can specify how the table is displayed in the view form of 
the item.

.. image:: /admin/_images/view_form_layout.png
	:align: center
	:alt: View Form Layout tab

Setting table fields
--------------------

The **Layout** tab has two lists of fields. The left list contains the fields 
that were selected be displayed in the table. In the right list there are available 
fields that you can select.

To select a field, select it in the right list and use the **Left arrow** 
button in the center or press **Space** key on a keyboard. 

To unselect a field, select it in the left list and use the **Right arrow** 
button in the center or press **Space** key on a keyboard.

To order the selected fields use the buttons that located below left list.

You can specify the width of the selected columns. To do this, select the field 
and enter its width in the Width column. The value can be specified in any 
supported CSS unit, for example, in pixels - ``px``, in percentage, relative to 
the parent element - ``%``. The width specified as an integer value is 
interpreted as the width specified in pixels.

Examples of column width values:

* 100px
* 100
* 50%
* 2cm

Setting table options
---------------------

On the right side of the "Layout" tab are the controls that you can use to 
specify the options of the table displayed in the view form:

* **Multiple selection**  - if  set, a leftmost 
  column with check-boxes will be created to select records. So, that when a user 
  clicks on the check-box, the value of the primary key field of the record will 
  be added to or deleted from the 
  :doc:`selections </refs/client/item/at_selections>`
  attribute.

* **Dblclick edit** - if set, the edit form will be displayed when the user 
  double-clicks on the table row.
  
* **Number of rows** - an integer number, if set, specifies the number of rows 
  displayed by the table, otherwise, if **Hight** is not specified, 
  the application calculates the height of the table, based on the page height

* **Height** - an integer number, if set, specifies the height of the table in 
  pixels, otherwise , if **Number of rows** is not specified, the application 
  calculates the height of the table, based on the page height

* **Row lines** - an integer, specifying the number of lines of text displayed 
  in a table row, if it is 0, the height of the row is determined by the contents of 
  the row cells

* **Selected row lines** - an integer value, if **Row lines** is set and 
  this value is greater that 0, it specifies the minimal number of 
  lines of text displayed in the selected row of the table

* **Freeze columns** - an integer, if it is greater than 0, it specifies 
  number of first columns that become frozen - they will not scroll when the table
  is scrolled horizontally.

* **Sort fields** - click the button to the right of the input field to open the list of fields and
  select the fields by which you can sort the contents of the table by clicking
  in the corresponding column header of the table.

* **Summary fields** - click the button to the right of the input field to open the list of fields 
  and the fields for which the summary will be calculated and displayed in the
  corresponding column footer. For for numeric fields sums will be calculated, 
  for not numeric fields - the number of records.

You can get or change these values programmatically on the client by using the
:doc:`table_options </refs/client/item/at_table_options>` 
attribute of the item 

Form tab
========

.. image:: /admin/_images/view_form_form.png
	:align: center
	:alt: View Form Form tab

On this tab are the controls that you can use to specify the options of the 
view form

* **Form border** - if set, the border will be displayed around the form

* **Form header** - if set, the form header will be created and displayed
  containing form title and various buttons

* **History** - if set and 
  :doc:`saving change history is enabled </admin/saving_history>`, the history 
  button will be displayed in the form header

* **Refresh button** - if set, the refresh button will be created in the form 
  header, that will allow users to refresh the page

* **Search** - if set, the search input will be created in the form header

* **Defaul search field** - click the button to the right of the input field to select 
  a default search field

* **Filters** - if set and there are visible filters, the filter button will 
  be created in the form header

* **Close button** - if set, the close button will be created in the upper-right 
  corner of the form

* **Close on escape** -  - if set, pressing on the Escape key will close the form

* **Width** - an integer, the width of the modal form, if not set the value is 
  600 px

* **View details** - click the button to the right of the input field to select
  details, that will be displayed in the view form

* **Detail height** - an integer, the height of the details desplayed in the 
  view form, if not set, the height of the detail table is 200px

* **Buttons on top** - if this check box is checked the buttons are displayed on 
  the top of the view form, when form has a default form template

You can get or change these values programmatically on the client by using the
:doc:`view_options </refs/client/item/at_view_options>`
attribute of the item 

Click the **OK** button to save to result or **Cancel** to cancel the operation.
After saving, you can see the changes by refreshing the project page.