Creation of Custom Page Layout

Step 1 : Create a New Portal Application Project

After opening NWDS, create a new Portal Application Project using the wizard.

1. Navigate to File → New → Other

2. Browse through the available wizards: Portal Application ->Create a Portal Application Project.

  3. Choose Next and change the name of your project (Overview Layout)

4. Choose Finish to complete the wizard. The new project is created.

Step 2 : Define the Page Layout as a Java Server Page

1. Navigate to Overview Layout → dist → PORTAL-INF → jsp.

2. Right-click on jsp folder and choose New → File.

3. Enter a file name and add the suffix .jsp. Your file must have the same name as your layout.

   4. Choose Finish and your file is created.

   5. With the help of the layout tag library, create a JSP page that defines the following:

   a. One or more containers on the page in which iViews can be placed.

   b. The iView tray, or frame, in which each iView is placed. If you do not specify a tray, the

portal displays the default tray, which provides links to standard tray functions, such as

refreshing, hiding, or personalizing the iView.

   In our example we use the following jsp page:

<%@ taglib uri="prt:taglib:com.sap.portal.reserved.

layout.TagLibLayout" prefix="lyt"%>

<lyt:template>

<table id="GridLayout1" width="100%" cellSpacing="2">

<tr>

<td width="100%" valign="top" colspan="4">

<lyt:container id="top" wrappingMethod="none" />

</td>

</tr>

<tr>

<td width="25%" valign="top">

<lyt:container id="bottom1" wrappingMethod="none" />

</td>

<td width="25%" valign="top">

<lyt:container id="bottom2" wrappingMethod="none" />

</td>

<td width="25%" valign="top">

<lyt:container id="bottom3" wrappingMethod="none" />

</td>

<td width="25%" valign="top">

<lyt:container id="bottom4" wrappingMethod="none" />

</td>

</tr>

</table>

  </lyt:template>

Step 3 : Update the portalapp.xml File

In our example we use the following  portalapp.xml :

<?xml version="1.0" encoding="ISO-8859-1"?>

<application>

<application-config>

<propertyname="SharingReference" value="com.sap.portal.pagebuilder"/>

</application-config>

<components>

<componentname="overview">

<component-config>

<propertyname="ClassName"

value="com.sapportals.portal.pb.layout.PageLayout"/>

<propertyname="ResourceBundleName"value="pagebuilder_nls"/>

<propertyname="SafetyLevel"value="no_safety"/>

</component-config>

<component-profile>

<propertyname="ComponentType"value="com.sapportals.portal.layout"/>

<propertyname="com.sap.portal.reserved.layout.TagLibLayout"

value="/SERVICE/com.sap.portal.pagebuilder/taglib/layout.tld"/>

<propertyname="com.sap.portal.pcm.Title"value="Overview (100,

25|25|25|25)"/>

<propertyname="com.sap.portal.pcm.Description"value="Overview

Layout(100%Top,25%Bottommostleft,25%Bottomleft,25%Bottom

right, 25Bottommostright)"/>

<propertyname="com.sap.portal.reserved.layout.TemplateFile"

value="overview.jsp"/>

<propertyname="AuthScheme"value="anonymous"/>

<propertyname="com.sap.portal.reserved.layout.Cont1"

value="top">

<propertyname="title"value="Top Column"/>

<propertyname="orientation"value="vertical"/>

</property>

<propertyname="com.sap.portal.reserved.layout.Cont2"

value="bottom1">

<propertyname="title"value="Bottom Column leftmost"/>

<propertyname="orientation"value="vertical"/>

</property>

<propertyname="com.sap.portal.reserved.layout.Cont3"

value="bottom2">

<propertyname="title"value="Bottom Column left"/>

<propertyname="orientation"value="vertical"/>

</property>

<propertyname="com.sap.portal.reserved.layout.Cont4"

value="bottom3">

<propertyname="title"value="Bottom Column right"/>

<propertyname="orientation"value="vertical"/>

</property>

<propertyname="com.sap.portal.reserved.layout.Cont5"

value="bottom4">

<propertyname="title"value="Bottom Column rightmost"/>

<propertyname="orientation"value="vertical"/>

</property>

<propertyname="XML_Template"value="&lt;?xml

version=&quot;1.0&quot;encoding=&quot;UTF-8&quot;?&gt;&lt;PageLayout

xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation=&quot;../xsd/PBlayout.xsd&quot;

layoutID=&quot;pcd:portal_content/templates/pcc/layouts/1Top4Bottom_(100__2

5_25_25_25)&quot;

pageID=&quot;1Top4Bottom&quot;&gt;&lt;CustomAttributes&gt;&lt;Attribute

key=&quot;JSP_Template&quot;

value=&quot;gpar:/1Top4BottomLayout/1Top4Bottom&quot;/&gt;&lt;/CustomAttrib

utes&gt;&lt;TableLayoutwidth=&quot;100%&quot;height=&quot;100%&quot;

cols=&quot;4&quot;/&gt;&lt;ContainersRow&gt;&lt;Container

containerID=&quot;com.sap.portal.reserved.layout.Cont1&quot;&gt;&lt;TableCe

llDatawidth=&quot;100%&quot;height=&quot;100%&quot;colSpan=&quot;4&quot;

vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;/ContainersRow&gt;&lt;Cont

ainersRow&gt;&lt;Container

containerID=&quot;com.sap.portal.reserved.layout.Cont2&quot;&gt;&lt;TableCe

llDatawidth=&quot;25%&quot;height=&quot;100%&quot;colSpan=&quot;1&quot;

vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;Container

containerID=&quot;com.sap.portal.reserved.layout.Cont3&quot;&gt;&lt;TableCe

llDatawidth=&quot;25%&quot;height=&quot;100%&quot;colSpan=&quot;1&quot;

vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;Container

containerID=&quot;com.sap.portal.reserved.layout.Cont4&quot;&gt;&lt;TableCe

llDatawidth=&quot;25%&quot;height=&quot;100%&quot;colSpan=&quot;1&quot;

vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;Container

containerID=&quot;com.sap.portal.reserved.layout.Cont5&quot;&gt;&lt;TableCe

llDatawidth=&quot;25%&quot;height=&quot;100%&quot;colSpan=&quot;1&quot;

vAlign=&quot;top&quot;/&gt;&lt;/Container&gt;&lt;/ContainersRow&gt;&lt;/Pag

eLayout&gt;"/>

</component-profile>

</component>

</components>

<services/>

</application>

2.Deploy the New Layout to the Portal

   Step 1 : Create EAR File

1. Right-click your project folder.
2. Choose Export.
3. Navigate to SAP NetWeaver Portal → EAR File and choose Next.  

4. Search for your layout project and choose Next.

5. Optional: On the next screen you can change the name of your EAR file and its location.

   Optional: Mark “Include the source code of the portal application”.

6. Choose Finish. The EAR file is created.

Step 2 : Deploy the EAR File to the Portal

...

1. Navigate to the Deployment view in NWDS. If it is not yet opened, navigate to Window → Open Perspective → Other. Choose Deployment from the list. 

2. Import your EAR file from the workspace.
3. Click Start to deploy the EAR file to the portal

  3.Configure the Layout for Use

   Before you can use the new layout, you have to configure some settings.

   Step1 : Create a PCD-Object

1. Navigate to Content Administration → Portal Content Administration → Portal Applications->

Overview Layout.

2. Right-click your layout and choose Copy.
3. Navigate to Content Administration → Portal Content Administration →Portal Content.
4. Choose a folder, or create a new one where you’ll store your layout.
5. Right-click the folder and choose Paste as PCD Object.

6. Enter the metadata of your layout.

7. Choose Next.
8. Choose Finish. Your layout is created as a PCD object.

Step2 : Create a Delta Link

1. Right-click the new PCD object and choose Copy.
2. Navigate to Portal Content → Templates → WPC Templates → Layouts.
3. Right-click the folder and choose Paste.

4. Choose Create a delta link on the next screen

5. Choose Next.
6. Choose Finish. Your layout is ready for use.

4.Result

   When you are creating a new page, you can choose the new layout. As

   soon as you are in the editing mode, the new overview layout is chosen and displayed as follows: