Use the Layout Customizable Component to enable runtime layout customization. When you add page content within a Layout Customizable component, users can switch between a set of predefined layouts, for example, two column, three column, three row, and so on. More
Use this component only if there is a requirement to customize the layout of the page. Do not use it as a general purpose layout component.
A Layout Customizable component contains a direct child Panel Customizable Component and two facets with Panel Customizable components in which you can place other components. The content in the three Panel Customizable components can be placed in different ways using predefined layouts.
Note: The three Panel Customizable components are added by default. You can replace these with container components of your choice.
Example
<pe:layoutCustomizable id="layoutCustomizable1" type="threeColumn"> <cust:panelCustomizable id="panelCustomizable2"/> <f:facet name="contentA"> <cust:panelCustomizable id="panelCustomizable3"/> </f:facet> <f:facet name="contentB"> <cust:panelCustomizable id="panelCustomizable4"/> </f:facet> </pe:layoutCustomizable>
Common Attributes
Element | Description |
---|---|
id |
Specifies the unique identifier for the component on the page. This attribute is populated with a unique value by default when you add the component.
|
rendered | Specifies whether the component is rendered. When set to false, no output will be delivered for this component (the component will not in any way be rendered, and cannot be made visible on the client). The default value is true. |
type | Specifies the type of layout to be applied on the component. You can select from a set of 8 predefined layouts. The default value is threeColumn. |
Appearance Attributes
Element | Description |
---|---|
text |
Specifies the text to be displayed for the Change Layout menu.Use the text attribute to provide a descriptive label for the Layout Customizable component so that the component is clearly visible on the page at run time. |
accessKey | Specifies a character used to gain quick access to this component. The character specified in this attribute must exist in the text attribute for this component instance. If it does not, the user will receive no visual indication of the existence of the accessKey. The easiest, and most convenient way to specify both the text and the mnemonic together is to use textAndAccessKey.
You can specify browser-specific access keys as follows: For Internet Explorer, specify
For Firefox, specify
|
type | Specifies the type of layout to be applied on the component. You can select from a set of 8 predefined layouts. The default value is threeColumn. |
showIcon | Specifies whether the default layout change icon must be displayed. Available values are true and false. The default value is true. |
showLayoutChanger | Specifies whether the default layout options must be displayed. Available values are true and false. The default value is true.
When set to true, the runtime behavior of the layout changer is as follows:
|
showTypes | Specifies the names of predefined layouts that must be displayed in the layout changer. Use this attribute to control the layout options displayed to users. You can provide a space-separated list of layout types. By default, all eight layouts are displayed when a user clicks the Change Layout icon or link. |
shortDesc | Specifies a short description of this component.
This text is commonly used by user agents to display tooltip help text, in which case the behavior for the tooltip is controlled by the user agent, for example, Firefox truncates long tooltips. For form components, the shortDesc is displayed in a note window. |
Style Attributes
Element | Description |
---|---|
styleClass |
A CSS style class to use for this component. The style class can be defined in your JSPX page or in a skinning CSS file, for example. |
inlineStyle | The CSS styles to use for this component. This is intended for basic style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. If the inlineStyle's CSS properties do not affect the DOM element you want affected, then you will have to create a skin and use the skinning keys which are meant to target particular DOM elements, like ::label or ::icon-style. |
Advanced Attribute
Element | Description |
---|---|
binding |
An EL reference that will store the component instance on a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean. |
Customization Attributes
Element | Description |
---|---|
customizationAllowed |
Specifies whether customizations are allowed on this component. Available values are true and false. The default value is true. |
customizationAllowedBy |
Specifies the roles for which customization must be enabled.
Note: To display all relevant roles in this drop-down list, you must ensure that the roles are specified in the MDS customization policy. More The Expression Builder option available when setting these attributes allows you to bind the attribute to a managed bean. |
Other Attribute
Element | Description |
---|---|
customizationId |
This attribute is deprecated. It will be removed in the next release. Use the id attribute. |
Related Topics
"Adding Custom Actions to Components" in Developing WebCenter Portal Assets and Custom Components with Oracle JDeveloper