How to create custom portal layout

[Former Member]

Hi Experts,

In my project, we have to display iViews links in following way

in one portal page.

iView11 iView12 iView13 iView14 iView15

iView21 iView22 iView23 iView24 iView25

Please note that these are only links. When the user will click on

any link, that iView should get open.

Can you please let me know how to go about it.

I understand that if I can create some custom portal layout,

we can create frame of size 2*5 (i.e. 2 rows and 5 coloumns)

In each of these frames we can drag the individual 10 iViews.

It should sort out the problem.

I can see some standard portal layout like 1 full page, 2 coloumns

etc. But, since standard layout is not available for 2*5, I think I have to

create new portal layout.

Can you please help me in sorting out the issue.

Pls let me know if I am totally wrong and there is some different

solution of the problem.

Regards,

Brian

[former_member189631 · Accepted solution]

Hi Brian,

You can create a new layout by modifying standard layout.

• please download the par.bak file com.sap.portal.layouts.default.par.bak System Admin -> support -> Portal Runtime -> Browse deployment -> frrom :ROOT/WEB-INF/deployment/pcd (download this folder)

• extract the par file from par.bak and store that in your local computer

• import the file into to NWDS. You can store the file with original filename or custom name. (In case of original file the standard file will be modified when u do the deployment)

• you can create new jsp component and place this code:

<%@ taglib uri="prt:taglib:com.sap.portal.reserved.layout.TagLibHtmlb" prefix="hbj" %>

<%@ taglib uri="prt:taglib:com.sap.portal.reserved.layout.TagLibLayout" prefix="lyt" %>

<lyt:template>

<hbj:content id="myContext" >

<hbj:page title="Portal Page">

<hbj:gridLayout id="GridLayout1" width="100%" cellSpacing="2">

<hbj:gridLayoutCell rowIndex="1" columnIndex="1" width="20%" verticalAlignment="top">

<lyt:container id="column1" />

</hbj:gridLayoutCell>

<hbj:gridLayoutCell rowIndex="1" columnIndex="2" width="20%" verticalAlignment="top">

<lyt:container id="column2" />

</hbj:gridLayoutCell>

<hbj:gridLayoutCell rowIndex="1" columnIndex="3" width="20%" verticalAlignment="top">

<lyt:container id="column3" />

</hbj:gridLayoutCell>

<hbj:gridLayoutCell rowIndex="1" columnIndex="4" width="20%" verticalAlignment="top">

<lyt:container id="column4" />

</hbj:gridLayoutCell>

<hbj:gridLayoutCell rowIndex="1" columnIndex="5" width="20%" verticalAlignment="top">

<lyt:container id="column5" />

</hbj:gridLayoutCell>

</hbj:gridLayout>

</hbj:page>

</hbj:content>

</lyt:template>

IF You not modify the standard , then you can select any existing component and relace the above code.

The create an iview agaist deployed one (in case of new portal component) and se the property is template as = "yes".

Now you will see the option when u create a new page layout,,

Ram.

[Former Member]

Hi Brian,

Here are the necessary steps for creating a custom layouts.

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

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

--> 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 hiding, refreshing or personalizing the iView.

You can specify one tray for each container. The tray is displayed for all iViews in the container.

--> Additional HTML that appears on each page.

2. Create a elements:

ClassName --> com.sapportals.portal.pb.layout

.PageLayout

ResourceBundleName --> pagebuilder_nls

In the elements:

ComponentType --> com.sapportals.portal.layout

com.sap.portal.pcm.Title --> The display name of the layout.

com.sap.portal.pcm.Description --> A layout description.

com.sap.portal.reserved.layout.TemplateFile --> The name of the JSP page that defines the layout (relative to the PORTAL-INFjsp directory)

com.sap.portal.reserved.layout.Cont1, com.sap.portal.reserved

.layout.Cont2, and so forth --> Each container defined in the JSP must have a property in the portalapp.xml.

The names of these properties should end in ContX, where X is a sequence number starting at 1.

The value is a name for the container.

com.sap.portal.reserved.layout.TagLibLayout --> /SERVICE/com.sap.portal

.pagebuilder/taglib/layout.tld

com.sap.portal.reserved.layout.TagLibHtmlb --> /SERVICE/com.sap.portal.htmlb/

taglib/htmlb.tld

Only required if using the default iView tray or adding HTMLB tags to the JSP page.

For each container profile property described above, you can include the following meta-properties:

plainDescription --> The display name of the container

orientation --> Container orientation, which must be set to vertical

designClass --> A CSS class for the HTML table created by the container (

)

3. Create a PAR file with your JSP pages and deployment descriptor. Place the JSP pages in the PORTAL­‑INF/jsp directory.

4. Deploy the PAR file.

Hope this helps.

Do reward points if found helpful.

Thanks & Regards

Gourav.

[former_member193769]

Hi,

Create JSP page and paste the iview links in one page.

Copy the iview links from preview.

if user clicks on any link set it to open in the portal content.

Because 15 iviews in a single means you will easily get scroll bars in each iview.

Thanks,

gopal

[Former Member]

Brian,

check this link to create custom layouts

http://help.sap.com/saphelp_nw70/helpdata/EN/42/efbac120711a71e10000000a422035/frameset.htm

reward points if helpful