Composer Library - Layout Customizable Component

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.
  • The identifier must follow a subset of the syntax allowed in HTML:

  • Must not be a zero-length String.

  • First character must be an ASCII letter (A-Za-z) or an underscore ('_').

  • Subsequent characters must be an ASCII letter or digit (A-Za-z0-9), an underscore ('_'), or a dash ('-').

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

Alt + <key>

For Firefox, specify

Ctrl+Alt+<key>

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:

  • Displayed in View mode.

  • Displayed in Edit mode.

  • It is always displayed in Edit mode, regardless of the value of the showLayoutChanger attribute.

  • If there is a security or MDS restriction on the Layout Customizable component, then the layout changer is not displayed in View or Edit modes.

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