View properties

Each view has a set of standard properties, including general, positioning, configuration, events, visibility, and HTML attributes.

When you select a view in a layout, the properties that describe that view instance are displayed. The general, positioning, visibility, and HTML attribute properties are common to all view instances. The configuration properties are defined in the view definition and are specific to instances of that view.

  • General
  • Positioning
  • Configuration
  • Events
  • Visibility
  • HTML attributes

General

The general properties consist of the following fields:
General property Description
Label Sets the display name of the view. The location of the label depends on the view type and whether that location has been overridden by CSS coding. The default value is the name of the view.
Restriction: When you place the view in a table, the label of the view cannot use references to entities within a list, such as currentItem or selectedItem.
Help Provides an area in which you can provide hover help for the view instance.
Control ID Provides an identifier that you can use in JavaScript to access this particular view instance. The Control ID is also known as the view ID in the API documentation.
Binding Sets the business object that is associated with this view instance
View Sets the view definition for the view instance. When you change this property, you change the type of the view, and the configuration properties that you previously set no longer apply.
Label Visibility Sets whether users can see the label at run time. For example, you might want to have a Text Area view display a large description with no accompanying label. The values are Show (default) and Hide.

For example, you can use a variable to dynamically change the visibility according to various conditions. If you use a variable to set the visibility, the variable must be a string with one of the following values: SHOW HIDE.
Base Text Direction Sets the direction of the text that is displayed by the view, such as label text, text values, and other text that the user sees.

The Base Text Direction property is available only if you enable the Base Text Direction preference.

The default value is Default, which means the view uses the text direction that is set in the user's profile. When you set the text direction to Left to Right or Right to Left, the text is locked to the specified direction. When you set the text direction to Contextual, the first strong directional character in a string determines its text direction. This rule applies to all text elements that a view displays. For example, a Text view has an Arabic label, but its field contents are English. In this case, the text in the label is from right to left although the text in the field is from left to right.
Note: In the view editor, you can assign a variable for the Label, Help, Visibility, and Label Visibility general properties of any nested view instances. A special category of variables, called general options, is available in the configuration options. These variables correspond to the view Label, Help, Visibility, and Label Visibility general properties. That is, the nested view instance can refer to its parent view general properties. Unlike the other configuration options, you cannot edit their values in the Variables view.

Positioning

You can control the spacing of the views in your pages or custom view by setting the positioning properties for each view instance. The values that you set can be absolute, for example in millimeters, or relative, for example as a percentage of the available display space.

The values that you set determine the amount of space that surrounds the view content. Padding refers to the space inside the border of the view. Margin refers to the space outside the view border. If your view does not have a visible border defined, you can see the border by selecting the view so that the border is highlighted.

Tip: If you are creating a custom view and you want to include a border, it is recommended that you use a div inside the wrapper div, and that you apply positioning settings to the internal div. This is because the view has a wrapper div created and owned by the framework both at design time and at run time. You should avoid updating this wrapper div because it might conflict with the design time and runtime visual feedback. This means, for example, that the editor highlights the wrapper div when the view is selected, making it difficult to see any styling that is set on the wrapper div.

You can also specify the height of a view, measured from the bottom to the top border, and the width from the left to right border. The minimum height and width settings allow you to limit the reduction in height or width, for example, if the screen space on the run time device is reduced.

The margin and padding properties take up to four values, corresponding to values for the top, right, bottom, and left of the view. If a single value is specified for margin or padding, it is applied to all four sides. For example, if you specify the view margin with a single value of 15pt, then the margin on all four sides of the view will be set to 15 pt. To set the values individually for the different sides of the view, you can type them out individually using the format top right bottom left or you can click the button next to the field to use the dialog to enter values for each side.

The values that you specify can be relative or absolute values, depending on the unit of measurement that you specify. The supported units of measure are described in the following tables.

Table 1. Relative units of measure
Abbreviation Description
% Percentage of viewport
px CSS pixels
em Width of letter 'm' in current font
rem Width of letter 'm' in font of top-level page element
Table 2. Absolute units of measure
Abbreviation Description
in Inch
mm Millimeter
cm Centimeter
pt Point (1/72 inch)
pc Pica (12 points)

Configuration

You define the configuration options in your view so that users can customize a specific instance of that view. Users see these configuration options as configuration properties in that instance.

Events

Using the new event framework and tools, you can develop user-defined events that leverage the programming extensions of the framework for custom views. You can also run your business logic from any of the event handlers. This methodology enables event handlers to react to numerous types of events, regardless of whether the events are triggered programmatically or by devices or user actions.

Visibility

The Visibility properties specify how a view is displayed.

The default value is Same as parent, which means that the view uses the visibility property of the page or view that contains this view.
  • When you set the Visibility property to Editable, users can see the view and add or edit values in it or otherwise interact with it.
  • When you set the visibility to Required, the view is editable and also has a decorator that indicates to users that they must enter or set a value.
    Important: Setting the visibility to Required does not validate whether a user enters or sets a value. You must provide code that does this checking by, for example, implementing a validation service or script for the page that contains the view.
  • When you set the visibility to Read only, users can see the view but cannot interact with the data in it. Read-only views are visually distinguishable from editable views and the functionality for editing their data is disabled or removed.
    Important: The Read-only setting only controls how the view renders. It is not meant to be a form of access control. Since the data can be programmatically manipulated by using an API or a script, your application must include server-side logic to protect the data on the server. For example, if an application has a field customerID that must never be changed on the client, then the server-side logic could compare that the customerID value that is sent from the client is the same as the customerId value that is stored in a system-of-record database.
  • When you set the visibility to Hidden, users see a blank space where the view is positioned. The generated HTML still contains the DOM node for the view. The Hidden value is the visibility of the view on screen and not whether users can see it in the HTML source. If you choose Hidden, the parent view reserves space in the layout as if the view is visible. For example, you have a vertical section with three text fields. If you set the middle field to Hidden visibility, the section displays empty space where the middle field would be if it was visible.
  • When you set the visibility to None, users cannot see the view, but the view is listed in the Invisible Items pop-up window. To make the view visible again, select it in the pop-up list and click Show invisible items. Similar to Hidden, the generated HTML still contains the DOM node for the view. If you set the middle field to None visibility, the section collapses the space between the upper and lower fields. If the middle field becomes visible, the lower field moves down to make room for the middle field.
For example, you can use a variable to dynamically change the visibility according to various conditions. If you use a variable to set the visibility, the variable must be a string with one of the following values: DEFAULT (the code equivalent of Same as parent) EDITABLE REQUIRED READONLY NONE HIDDEN.

HTML attributes

The HTML attributes is where you override styles for a specific view instance.

Overriding a style consists of the following things:
  • An HTML class attribute in each view instance that you want to specifically style
  • A corresponding CSS rule for that class attribute
Important: Do not use the following names as CSS class names in your HTML source code because they are reserved names:
  • CoachView
  • ContentBox
Also, ensure that the names of the CSS classes do not collide with the names of the views. A collision can lead to unpredictable styling at run time because the view name is automatically added for scoping purposes to the class attribute of the view wrapper div.
The following example shows how to move a label:
  1. Add a class to the HTML attributes of the text box instance. For example, click Add Class and then in Class name, type myText.
  2. In CSS code, define the style for the class. For example, define the myText class to override the styles for the label position: 
    .myText.Output_Text .outputTextLabel,
.Text .textLabel {
display: inline-block;
width: 100px;
}
.myText.Text .content {
display: inline-block;
}
  3. In any parent view, add the CSS rule to a .css file and add that file as an included script. If the view is a top-level view in a coach, add a custom HTML item that contains the style rule.