Display Options

Component display options control a range of display-related behaviors on a given component instance. Typically, display options settings affect the display elements surrounding component content (that is, its chrome). Chrome includes the header, the Actions menu, Expand and Collapse icons, and so on. For example, use the display options on a task flow component to hide or show a header and enable or disable menus and other options on the header.

Though it is not obvious in the page editor, the showDetailFrame component is usually wrapped around task flows. Consequently, the Display Options dialog for task flows, and any other component wrapped in a showDetailFrame, share the same Display Options properties.

The Display Options dialog for several components is divided into two subtabs: Basic and Advanced. This provides a means of separating an otherwise long list of display options into more manageable and relevant groups.

Note:

While Display Options are available for all components, the settings may not have an effect on some components.

The following table lists and describes the Display Options properties that generally apply to most components. Where there are variations, they are noted in the tables covering the specific components.

Table 6-3 Display Options Properties

Property	Description
`Allow Minimize`	Select whether to show the minimize action on the component header (that is, a Collapse icon on the component chrome). Select the check box to show the Collapse icon. Deselect the check box to omit the Collapse icon. The minimize action collapses the component like a window shade, leaving only its header on view. When a component is minimized, the icon toggles to an Expand icon, which you can use to restore the full component to view.
`Allow Move`	Select whether to enable users to move the component on the page. Choose from: enabled—Component can be moved using the Move options (Move Up, Move Down, Move Left, and Move Right) on the component Actions menu. The Move options that show depend on the orientation of the parent container (horizontal or vertical). Move options are context sensitive. For example, in a vertically-oriented parent container if there are no components above the current task flow the Move Up option does not appear on the Actions menu. drag and drop only—Component can be moved using drag and drop only. disabled—Component cannot be moved.
`Allow Remove`	Select whether to show the Remove icon on the component header (that is, the component chrome) when the page is in view mode. Choose from: Select the check box to show the Remove icon on the component header in view mode. Deselect the check box to omit the Remove icon in view mode. Note that after you select to remove a component in this way in page view mode, you can restore the component only by editing the page and adding another component instance. As a page author, you may not wish to allow end users to remove a component when viewing the page. Users authorized to edit the page can remove the component in the page editor.
`Allow Resize`	Select whether to show a window resizer on a component instance. The window resizer enables you to increase the component height. Select the check box to show the Resize option on the component. Deselect the check box to omit the Resize option. Note: Selecting this property fixes the height of a `showDetailFrame` component, so the content will have a scrollbar or white space to fill the area depending on whether the content is larger or smaller than the resized `showDetailFrame` component. Deselecting `Allow Resize` is recommended to allow the content flow, so when there is more content the `showDetailFrame` component is bigger.
`Chrome Style`	Select to specify a shade for the component background. Enter: `light`—Light is transparent; the prevailing background color shows through `medium`—Medium draws an light line below the header area. `dark`—A graduated shade moving from the bottom of the header area to the top of the component from transparent to dark. `coreDefault`—A graduated shade slightly lighter than dark
`Display Header`	Select this check box to show a header on the component instance.
`Display Shadow`	Select to render a shadow behind the component instance.
`Font`	Specify the font to use for text appearing in the component header. Enter one or more fonts. Separate multiple values with a comma (,), for example `arial,helvetica,sans serif`. Enclose font names that contain spaces in single quotation marks, for example `'Times New Roman'`. The browser tries to use the first value, and uses other values in turn, depending on which font is available to the local system.
`Font Color`	Select a color for the text appearing in the component header. Select a color using one of the following techniques: Select a color by clicking it. Enter the color's RGB equivalent in the Font Color field. Enter RGB values in the format `RRGGBB` or `#RRGGBB` or `r,g,b` Create a custom color by clicking Custom Color in the picker and selecting a color and a saturation level using the selector and the slider provided.
`Font Size`	Specify the size of text appearing in the component header. Enter a value using one of the following types of values: `length`–Sets the font size to a fixed size. For example, enter: `14px`, `1.5em`, and so on `xx-small`, `x-small`, or `small` `medium`–The default `large`, `x-large`, or `xx-large` `smaller`–Sets the font size to a size smaller than the parent element. `larger`–Sets the font size to a size larger than the parent element. `%`–Sets the current font size to a percentage of the font size of the parent element. For example, enter: `75%`
`Font Style`	Select an option for applying a font style to the text in a component header. Choose from: Bold Italic Underline Strikethrough
`Short Desc`	Provide tooltip text for the component instance. When users roll their mouse pointers over the component instance, the text you enter here pops up.
`Show Actions`	Select whether to enable users to move the component on the page. Choose from: On Hover—Show actions only when users hover their mouse pointers over the component header. Always (default)—Always show actions on the component header. Never—Never show actions on the component header.
`Stretch Content`	Select whether to stretch the component content. `auto` (default): The content stretches to fill the container. `true`: Stretch the content to fill the container, so that the container shows only one component at a time `false`: Do not stretch the content
`Text`	Enter text to appear in the component header. If you select to hide the header, the value you enter here is ignored.

To set the display options for a component on a page:

Enter display options values on the Basic and Advanced tabs, or click the icon next to a field to select and open the Expression Language (EL) Editor. The editor provides a means of entering custom values, such as text strings and Expression Language (EL) expressions.

Note:

When you enter EL in the generic Display Options dialog, the entry is automatically validated. If the EL syntax is invalid, an error appears and the value is neither applied nor saved. .

EL validation is not performed on non-generic display options.
For display option descriptions, refer to the table above or refer to component-specific display options:
Save your changes.