Add and Hide Components Using Page Composer

You can select components like task flows, portlets, and layout components from the resource catalog and add them to your page. You can use the Show Component property on the Component Properties dialog box to show or hide page components.

Before You Start

In Page Composer, you get the Design view by default to edit pages. But on some pages, you must use the Source view. If you don't see the Source view, set the Page Composer Enabled (FND_PAGE_COMPOSER_SOURCE_VIEW) profile option to Yes. In the Setup and Maintenance work area, go to the Manage Applications Core Administrator Profile Values task in the Application Extensions functional area.

Add Components in Design View

Here's what you do:

1. Activate a sandbox that has the Page Composer tool in it. Make sure the context layer of your sandbox is supported by the page you want to edit. Otherwise, you won’t be able to edit the page.

2. Click your user image or name in the global header and select Edit Page from the Settings and Actions menu.

3. In the Design View, you can add components using the Select tab.

   1. Click Show Catalog on the top right corner of the page to view the resource catalog pane.

   2. In the resource catalog pane, open the Components folder.

      

   3. Click the Add button associated with the component you want to add to your page and click Close.

   4. Click Hide Catalog on the top right corner of the page to hide the resource catalog pane.

4. Select the component you just added.

5. In the Source View pane, click the Show the properties of <component> icon.

6. Change the component properties, as appropriate. For example, if you added the Text component, enter the text you want to display.

   If you have added an HTML markup with references to an external CSS, here are a few things to keep in mind:

   • The CSS has an Access-Control-Allow-Origin header on its server.

   • Your link tag has a crossorigin attribute specified.

7. Click Close in the Page Composer toolbar to save your changes.

Add Components in Source View

Here's what you do:

1. Activate a sandbox that has the Page Composer tool in it.

2. Click your user image or name in the global header and select Edit Page from the Settings and Actions menu.

3. From the View menu, select Source.

4. Hover over the page until a blue border appears around it.

5. Click anywhere in the page component as long as the border is visible.

6. In the Source View pane, click the Add content into the selected component icon.

7. In the Add Content dialog box, open the Components folder.

8. Click the Add button associated with the component you want to add to your page and click Close.

9. Select the component you just added.

10. In the Source View pane, click the Show the properties of <component> icon.

11. Change the component properties, as appropriate. For example, if you added the Text component, enter the text you want to display.

    If you have added an HTML markup with references to an external CSS, here are a few things to keep in mind:

    • The CSS has an Access-Control-Allow-Origin header on its server.

    • Your link tag has a crossorigin attribute specified.

12. Click Close in the Page Composer toolbar to save your changes.

Here's the list of components you can add to your page:

Component	Description
Box	You can use this component to place content on a page.
HTML Markup	You can use this simple editor to enter raw text and HTML tags, including Javascript embedded in HTML <script> tags.
Hyperlink	You can use this component to add a link to a page or a website. It can point to a location in the application that's either internal or external.
Image	You can use this component to add a picture, a logo, or a linked image to a page.
Movable Box	You can use this component to place content on a page. You can also move, expand or collapse, and resize your content.
Text	You can use this component to add UI text or any other kind of informative content to a page.
Web Page	You can use this component to provide URLs of other web pages within the context of a WebCenter application page.

Hide Components Manually

Use the Show Component property to specify whether the component appears to users. By default, all components are visible. To manually hide a component, deselect Show Component on the Component Properties dialog box.

If the component is a child component, then deselecting the Show Component property hides only the child component.

If the component is a parent component, then deselecting the Show Component property of the parent component hides the parent and all child components it contains. So, when you hide a parent component, you automatically hide all child components.

You can do any of the following:

• Hide a child component directly

• Hide a child component from within the parent component

• Hide a parent component and all child components

To hide a child component directly:

1. Click the Edit icon in the header of the child component. This opens the Component Properties dialog box.

2. Click the Display Options tab.

3. Deselect Show Component.

4. Click OK.

To hide a child component from within the parent component:

1. Click the Edit icon on the containing box's toolbar.

2. Click the Child Components tab.

3. Deselect the box next to the component you want to hide.

4. Click OK.

To hide a parent component and all child components:

1. Click the Edit icon in the box header.

2. Click the Display Options tab.

3. Deselect Show Component.

4. Click OK.

Hide Components Programmatically

You can add an Expression Language (EL) expression to a component that enables you to set a condition for hiding the component. For example, suppose you have two check boxes (1 and 2) on a page. You also have a button (B) that you want to be visible only if check box 2 is selected. To step through the logic, ask yourself questions such as the ones in the following table.

Question	Answer	Purpose of Question
What's the condition? What action or event must happen?	Check box 2 is selected	Determines what the occurrence, or event, is. Determines the component that triggers the event. Determines what expression to write.
What happens when the condition is met? What happens when the event happens?	Button "B" appears. Show the component: Button B (The implication is that button B is hidden until the event occurs.)	Determines the effect of the action.
What property determines whether a component is visible?	The Show Component property	Determines the property the code affects.

So the logic is: If 2 is checked, then the Show Component property of B is activated.

You place the expression on the component that receives the action.

Here's a sample code that you may add to the component.

#{if checkbox2.selected = true}

After you think through the logic and find the correct expression, add it to the property. You can add an expression using the expression builder for the Show Component property only on dashboard pages; not on work area pages. Also, only administrators can perform this task.

To open the EL Editor and add an expression to a property for a dashboard page:

1. Click the Edit icon in the component header.

2. Click the Display Options tab.

3. Click the Edit icon next to the Show Component property, and select Expression Builder.

4. Add an expression to check for an event or condition, and set the property. Based on the result, turn the property on or off.

To hide a parent component and all child components programmatically for a dashboard page:

1. Click the Edit icon in the box header.

2. Click the Display Options tab.

3. Click the Edit icon next to the Show Component property, and select Expression Builder.

4. Add an expression to check for an event or condition, and set the property. Based on the result, turn the property on or off.