You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The data view is a starting point for showing the contents of exactly one object. For example, if you want to show the details of a single program item, you can use a data view to do this:
In a more complex example, a data view can contain customer information and [tab containers](/refguide/tab-container/) per specific topic (for example, addresses and payment information) with nested data grids for related objects:
The footer of the data view is the section at the bottom of the data view that often contains buttons to confirm or cancel changes.
22
22
23
-
## 3 Properties
23
+
## 3 Properties Pane
24
24
25
-
An example of data view properties is represented in the image below:
25
+
The properties pane is divided into two major sections by a toggle at the top of the pane: **Properties** and **Styling**. Data view properties consist of the following sections:
With this property, you can specify the position of the input widget labels inside the data view. If the orientation is horizontal, the labels will be placed next to the input elements. If the orientation is vertical, the labels will be placed above the input elements.
45
+
46
+
Note that form groups are responsive and the labels may be placed above input elements, even if the orientation is set to horizontal, depending on the viewport size. Also, note that a data view with a vertical orientation cannot be nested inside a data view with a horizontal orientation. In that case, the form groups will be rendered horizontally, regardless of the value of the orientation property.
47
+
48
+
Default: *Horizontal*
49
+
50
+
#### 4.1.2 Label Width (Weight)
51
+
52
+
If the form orientation is set to horizontal, this property can be used to specify the width of the input widget labels inside the data view. The width is specified using column weights from the [Bootstrap grid system](http://getbootstrap.com/css/#grid). For more details, see [Layout Grid](/refguide/layout-grid/).
53
+
54
+
Default: *3*
55
+
56
+
#### 4.1.3 Show Footer
57
+
58
+
With this property, you can specify whether you want the footer of the data view to be visible. The footer of nested data views is always invisible, regardless of the value of this property.
59
+
60
+
Default: *True*
61
+
62
+
#### 4.1.4 Empty Entity Message
63
+
64
+
If this message is specified, a data view that receives no source data will show this message instead of its content. Otherwise, the data view will show its static content and disabled input elements. This property is a translatable text. For more details, see [Language Menu](/refguide/translatable-texts/).
41
65
42
-
### 3.2 Data Source Section {#data-source}
66
+
There are a number of ways a data view can end up without source data. For instance, a data view with a **Listen to widget** data source will remain empty until an object is selected in the target grid. In this scenario, **Empty entity message** can be used to guide the user to select an item from the grid.
67
+
68
+
Default: *empty*
69
+
70
+
### 4.2 Data Source Section {#data-source}
43
71
44
72
The data source determines which object will be shown in the data view. For more information on data sources, see [Data Sources](/refguide/data-sources/).
45
73
@@ -52,13 +80,9 @@ The data view supports the following types of data source: context, microflow, n
52
80
| Nanoflow | A data source that runs a selected nanoflow and displays a return value. For more information on the nanoflow source, see [Nanoflow Source](/refguide/nanoflow-source/). |
53
81
| Listen to widget | A data source that allows a data view to display detailed information on an object in the list widget on the same page. For more information on listen to widget source, see [Listen To Widget Source](/refguide/microflow-source/). |
The editable property indicates whether the data view as a whole is editable or not.
64
88
@@ -68,7 +92,7 @@ The editable property indicates whether the data view as a whole is editable or
68
92
| Inherited from snippet call | Set to **Yes** or **No** by the containing data container of the snippet call (default value for data views inside a snippet). |
69
93
| No | The data view is not editable: no widget inside the data view will be editable.|
70
94
71
-
#### 3.4.2 Read-Only Style
95
+
#### 4.3.2 Read-Only Style
72
96
73
97
This property determines how input elements are rendered if they are read-only.
74
98
@@ -79,49 +103,33 @@ This property determines how input elements are rendered if they are read-only.
79
103
80
104
{{% alert color="info" %}}Read-only style is not supported on native mobile pages.{{% /alert %}}
81
105
82
-
### 3.5 General Section {#general}
83
-
84
-
#### 3.5.1 Form Orientation
85
-
86
-
With this property, you can specify the position of the input widget labels inside the data view. If the orientation is horizontal, the labels will be placed next to the input elements. If the orientation is vertical, the labels will be placed above the input elements.
87
-
88
-
Note that form groups are responsive and the labels may be placed above input elements, even if the orientation is set to horizontal, depending on the viewport size. Also, note that a data view with a vertical orientation cannot be nested inside a data view with a horizontal orientation. In that case, the form groups will be rendered horizontally, regardless of the value of the orientation property.
89
-
90
-
Default: *Horizontal*
91
-
92
-
#### 3.5.2. Label Width (Weight)
106
+
### 4.4 Visibility Section {#visibility}
93
107
94
-
If the form orientation is set to horizontal, this property can be used to specify the width of the input widget labels inside the data view. The width is specified using column weights from the [Bootstrap grid system](http://getbootstrap.com/css/#grid). For more details, see [Layout Grid](/refguide/layout-grid/).
95
-
96
-
Default: *3*
97
-
98
-
#### 3.5.3 Show Footer
99
-
100
-
With this property, you can specify whether you want the footer of the data view to be visible. The footer of nested data views is always invisible, regardless of the value of this property.
If this message is specified, a data view that receives no source data will show this message instead of its content. Otherwise, the data view will show its static content and disabled input elements. This property is a translatable text. For more details, see [Language Menu](/refguide/translatable-texts/).
114
+
## 5 Styling
107
115
108
-
There are a number of ways a data view can end up without source data. For instance, a data view with a **Listen to widget** data source will remain empty until an object is selected in the target grid. In this scenario, **Empty entity message** can be used to guide the user to select an item from the grid.
To perform actions on a data view, select it on a page and right-click it. The list of possible actions opens. While some actions from this list, such as **Select data source**, **Edit condition for visible**, are a quick way to set the properties, the following actions are specific actions that you can perform:
119
127
120
128
***Go to entity** – opens a domain model and highlights an an entity that is used as the data source
121
129
***Go to data source****microflow**– this action is only displayed when a microflow is set as the data source and opens this microflow
122
130
***Go to data source nanoflow** – this action is only displayed when a nanoflow is set as the data source and opens this nanoflow
An example of checkbox properties is represented in the image below:
23
+
The properties pane is divided into two major sections by a toggle at the top of the pane: **Properties** and **Styling*. Checkbox properties consist of the following sections:
The on-change property specifies an action that will be executed when leaving the widget, either by using the <kbd>Tab</kbd> key or by clicking another widget, after the value has been changed.
The on-enter property specifies an action that will be executed when the widget is entered, either by using the <kbd>Tab</kbd> key or by clicking it with the mouse.
The on-leave property specifies an action that will be executed when leaving the widget, either by using the <kbd>Tab</kbd> key or by clicking another widget.
71
79
72
80
This differs from the [On change](#on-change) property in that the event will always be triggered, even if the value has not been changed.
0 commit comments