Modify the Requisitions Page Layout Using Page Composer

This topic covers how you can change the page layout from the default two-columns to one-column, and the width of the page to a fixed value.

As an administrator with the correct security privileges, you can modify the layout of the Requisitions page using Page Composer. The Requisitions page is the landing page for the Purchase Requisitions work area, and is also informally referred to as the shopping home page. Requesters, generally employees in your organization, can use the self-service page to place purchase requests for goods or services. You can use Page Composer to modify many pages in Oracle Applications Cloud, and there are many different types of page modifications you can make using Page Composer. This topic provides a specific example of a few changes an organization might make to the layout of the Requisitions page.

Before You Start

Before you can modify the layout of the Requisitions page using Page Composer, you must first create a sandbox.

To perform some tasks in this procedure, you must be proficient with using expressions with Cascading Style Sheets (CSS).

Modify the Column Layout

To modify the column layout of the Requisitions page perform these steps:

Sign in to Oracle Applications Cloud.
From the Navigator, under Procurement click Purchase Requisitions.
On the Requisitions page, click your user image or name in the global header, and from the Settings and Actions menu click Manage Sandboxes.
Select and activate your sandbox.
On the Requisitions page, from the Setting and Actions menu click Edit Pages.
In the sandbox, on the Selection pane, click the Structure tab.
Click just outside of the Recent Requisitions region of the Requisitions page.

A frame displays surrounding the region. Notice the Recent Requisitions and Recent Purchases regions of the page are framed together by default.
On the Confirm Shared Component Edit dialog box, click Edit.
Expand the Source pane to view the page group layout.
In the structure of the page group layout, in the first panel grid layout element, notice from the field label the element includes the Recent Requisitions and Recent Purchases regions. Also notice there are two grid rows. The first grid row is empty. The second grid row has two grid cells.
Hover the cursor over the grid cell labels to display text. Notice the first grid cell contains the Recent Requisitions region. The other contains the Recent Purchases region. These two regions correspond to the two columns in the first panel grid of the Requisitions page.
Click the grid cell that contains the Recent Requisitions region.
On the toolbar click the Cut icon.
Click the first, empty grid row.
On the toolbar, click the Down Arrow next to the Paste icon, and from the drop-down list select Paste Into.

The grid cell you cut, for Recent Requisitions, is pasted into the empty grid row.
Repeat steps 10 through 15 for the second panel grid layout element. Notice from the field label you can see the element includes the Top Categories and Purchasing News regions.
1. This time, click the grid cell for the Top Categories region, cut it, and paste the grid cell into the empty grid row.
In the Selection pane click Close to view the changes to the Requisitions page in the sandbox.
While still in the sandbox, review the changes on the Requisitions page.

You can now see the Requisitions page is in one-column layout, with the following regions from top to bottom: Recent Requisitions, Recent Purchases, Top Categories, Purchasing News, Request Forms, Information and Tips, Recently Viewed.

Fix the Spacing Between Regions

To fix the spacing between the regions on the Requisitions page, follow these steps:

While still in the sandbox and on the Requisitions page, in the Setting and Actions menu, click Edit Pages.
In the Selection pane, click the Structure tab.
On the Requisitions page, click just outside of the region you want to adjust the spacing for. Notice a frame surrounds the region selected.
On the Confirm Shared Component Edit dialog box, click Edit.
Expand the Source pane to view the page group layout.
In the page group layout structure, click the grid row you want to adjust the spacing for.
Click the Edit Properties icon on the toolbar.
In the Component Properties dialog box, on the Display Options tab, adjust the values for the Margin Bottom or Margin Top fields as needed to change the margins from 0 pixels to 15 pixels.
Click OK.
On the Selection pane, click Close to view the changes to the Requisitions page in the sandbox.
Repeat steps 1 through 10 for each region for which you want to adjust the spacing.

Change the Page Width to a Fixed Value

To change the width of the Requisitions page to a fixed value, follow these steps:

While still in the sandbox and on the Requisitions page, in the Setting and Actions menu, click Edit Pages.
In the Selection pane, click the Structure tab.
Click just outside of the Requisitions page title to display a frame around the page.
On the Confirm Shared Component Edit dialog box, click Edit.
Expand the Source pane to view the page group layout.
At the top or root element of the structure, click the Simple Panel Close element.
On the Confirm Task Flow Edit dialog box, click Edit.
In the region structure click the Panel Group Layout: Vertical element.
Click the Edit Properties icon on the toolbar.
On the Component Properties: Vertical dialog box, click the Style tab.
In the Width field, enter the following expression: #{bindings.Flow.inputValue == 'createReq' ? '1000px':''}.

Note:

Do not simply enter 1000 pixels in this field. The expression is coded to ensure this width only applies to the Requisitions page, and not all of the pages in the application.
To place a shadow border on the left and right margins of the page, in the Other CSS field enter the following expression: box-shadow:0px 0px 7px 1px rgba(158,153,158,1);margin:auto;.
Click Apply, then click OK.
On Selection pane, click Close to view the changes to the Requisitions page in the sandbox.
Once you have verified your changes in the sandbox, and are done making changes, you can publish the sandbox to put the changes into effect.

For more information about using sandboxes and Page Composer to modify pages in Oracle Applications Cloud, see the Sandbox Manager section and the Page Modification chapter of the Oracle Applications Cloud Configuring and Extending Applications guide, available on the Oracle Help Center.