> For the complete documentation index, see [llms.txt](https://appmaster.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appmaster.gitbook.io/docs/web-apps/components-list/view.md).

# View

Element to display a record from the database

## **Initial setting:**

**Model** - data model for the view.

**Endpoint** - data source for the view.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2F2F44FYMnbmVwc3CuXFod%2Fimage.png?alt=media\&token=b6fa6780-3928-4130-ae00-e57a64d704bc)

## **Look\&Feel Settings:**

**Title** (not mandatory) - view title.

**Width** (mandatory) - vew width.

**Direction** (mandatory) - how elements are arranged inside the view, vertically or horizontally. Horizontall be default.

**Size** (mandatory) - view row size.

**Border** (mandatory) - view borders.

**Name** (mandatory) - name of the view.

**Visible** (mandatory) - makes the view visible if turned on. Enabled by default.

## **Data settings:**

In this section, you can manage view lines.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FMZ3AWKnRzeYZ5JEuQYlm%2Fimage.png?alt=media\&token=c78f7a21-1e3c-45f9-bb56-61cde902db0e)

## **Workflow triggers:**

* **onCreate** – fires when the component is created on the page; 
* **onShow** – fires when the component changes its state to visible (displayed on the page); 
* **onHide** – fires when the component changes its state to hidden (stops being displayed); 
* **onDestroy** – fires when the component is destroyed;
* **onDataUpdate** – fires by the View Update Data block.

## **Component Actions:**

### **View Get Properties:**

Gets view's properties

**Input** parameters:

* **Component Id** \[*string*] *-* view component's identifier.

**Output** parameters:

* **Title** \[*string*] - view title;
* **Style** \[*enum*] - view style;
* **Layout** \[*enum*] - view enum;
* **Bordered** \[*boolean*] - state of border;
* **Visible** \[*boolean*] - state of visible;
* **Loading** \[*boolean*] - state of loading.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FPWevXLm1CiVVGM7O1Ejs%2Fimage.png?alt=media\&token=10a37f97-062f-492d-92a4-e0082e8203e3)

### View Set Properties

Sets all view's properties

**Input** parameters:

* **Component Id** \[*string*] *-* view component's identifier.
* **Title** \[*string*] - view title;
* **Style** \[*enum*] - view style;
* **Layout** \[*enum*] - view enum;
* **Bordered** \[*boolean*] - state of border;
* **Visible** \[*boolean*] - state of visible;
* **Loading** \[*boolean*] - state of loading.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FIzhNdB1U6FBelMng77nm%2Fimage.png?alt=media\&token=909ca2d8-8281-48fd-8058-18ab564fab96)

### View Update Properties

Update view's properties

**Input** parameters:

* **Component Id** \[*string*] *-* view component's identifier.
* **Title** \[*string*] - view title;
* **Style** \[*enum*] - view style;
* **Layout** \[*enum*] - view enum;
* **Bordered** \[*boolean*] - state of border;
* **Visible** \[*boolean*] - state of visible;
* **Loading** \[*boolean*] - state of loading.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FlQyPvfIGzILm4C4DI2no%2Fimage.png?alt=media\&token=1c2f7a0c-a039-4098-bd77-4c54fe99d51e)

### View Get Data

Gets data from view

**Input** parameters:

* **Component Id** \[*string*] *-* view component's identifier.

**Output** parameters:

* **Data** \[*Data Model*] -  Data Model element to be used. Available in the business process when **Component ID** is specified only.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FKkYvmfnqb2WXjEksajOT%2Fimage.png?alt=media\&token=9db4f02d-c26f-4d19-9161-a9280d9c2880)

### View Clear Data

Clears data from view

**Input** parameters:

* **Component Id** \[*string*] *-* view component's identifier.<br>

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FifqXD5dRBFu2cPRoOtNV%2Fimage.png?alt=media\&token=9fc19514-d233-493e-ad50-347e9cca7d85)

### View Refresh Data

Refresh data in a view

**Input** parameters:

* **Component Id** \[*string*] *-* view component's identifier.
* **Data** \[*Data Model*] -  Data Model element to be used. Available in the business process when **Component ID** is specified only.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2Fk5NIBvR5Qoij63v2H2pn%2Fimage.png?alt=media\&token=2247596d-d814-4406-95f9-c3ac0974d795)

### View Update Data

Update data in a view

**Input** parameters:

* **Component Id** \[*string*] *-* view component's identifier.
* **Data** \[*Data Model*] -  Data Model element to be used. Available in the business process when **Component ID** is specified only.

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2FMDQeYFJAZtQoVyHXP6UX%2Fimage.png?alt=media\&token=de861268-cd72-4b43-84b1-705a14e73c28)

## **Usage example:**

The view element can be used to display the data of one record from the database. For example, information about the application use&#x72;**:**

![](https://3563768697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MapxHzVskQ_27pNUTT4-1972196547%2Fuploads%2F55BbzyFj3uSEfW5MEJZi%2Fimage.png?alt=media\&token=df8aad5c-9dc8-4e2d-b42a-2c0d4a16285b)