Custom layout using html

In portal custom form how do I change the layout from
Comapanyname -----
Abn ------
to :
company Abn
Is using html the only way to go ?
I would appreciate if you can give me a sample of html to achieve this.
Sonal.

Hi,
Do not have <br> between the label and the value. If <br> is there in the html source remove it. This will print both in the same line.
Thanks,
Sharmila

Similar Messages

Issue with creation of custom layouts using SAP Help Documentation

Hi Experts,
My requirement is to create a home custom page layout (using web dynpro) in Composite Environment. The default options available in CE are not useful for me. I set out to make a custom layout using the following this SAP Help Documentation: [ Creating a Web Dynpro Page Layout (SAP Library - Using the Portal as a Frontend)|https://cw.sdn.sap.com/cw/docs/DOC-102846]
I have followed the instructions and followed all the steps, yet I fail to see the application in CE. The custom page layout is not displayed neither in options and is not available any where.
Please let me know if anybody followed these steps and have got any success.
Thanks in advance
Srikant

Hi
Can somebody let me know if they have implemented a customised solution of creation of page layouts using Web Dynpro - as per the steps suggested by SAP.
Thanks in advance
Srikant

Absolute pôsitionning vs custom layout using custom constraints

Hello,
Context:*
my team has developped a custom PlanningPanel that show a kind of time sheet or planning: this display shows "task" objects (which represent operations performed by industrial equipments) and "result" objects (which represent the products and byproducts of the operations).
We needed rather simple edition functionalities, not a full-fledged Gantt-diagram (critical path highlighting, etc), so we dismissed trying to find a planning edition library and we went our own way.
We decided on absolute positionning (null Layout). It was a lot of work, but has worked quite well, until recent maintenance caused some regressions, and proved a bit hard to evolve.
I'm afraid I can't post an SSCCE; what I want to do in this thread is discuss alternatives (what other solutions did we have, or could we switch to). I may be spwaning dedicated forum threads to ask on specific issues.
Requirements:*
Display:
- each task is on its own line (and the x axis represents the clock)
- several tasks can have a common clock span (they are executed in parallel)
- each task shows up as a rectangle
- results shows as icons under their task
- contextual tooltips are displayed when hovering over the tasks/results areas
Edition:
- the user can select a task, or a result (and edit a contextual form)
- resize the rectangles (which edits the task duration)
- move (drag and drop) a task, moving its results along (changes the start time and end time, or reorder lines for clarity)
- define dependencies (so that one task's inputs are made of former tasks' results) as connecting lines.
The system is also used to drive the task execution (generates command scripts for task-specific systems and spawns the adequate processes). The application provides a read-only view of the tasks in action (for monitoring purposes), which shows each task as a colored rectangle that fills up as the process advances
- the monitoring view enable to select a task/result to open a detailed state view, or pause/resume a task
- but the user can not add/delete/move anything
- Both editor and monitor views are close enough so that we wanted to factor the layout code
Design Choice(s):*
The developper decided on absolute positionning across the whole panel.
Thinking back, the lines could easily have been laid out in a GridLayout, but for the rest, it seemed a good option.
Thinking further, here are the alternatives I may have proposed (the app is in production as of today, but it is still possible to rework the thing along the next version if it decreases maitenance costs).
- initial thought: custom PlanningPanel with one big paint method. The paintComponent() would use the model to draw the appropriate rectangles on its Graphics2D.
- the current solution: custom PlanningPanel with absolute positionning of children panels: the PlanningPanel has a null Layout, its children are TaskPanel and ResultPanel instances, which are positionned manually (+setBounds()+).
- custom Panel with Renderers: there would be only one panel, whose paintComponent() method would use a couple of flyweight TaskRenderer and ResultRenderer.
- custom LayoutManager: there would be only one regular JPanel, whose Layout would be a custom PlanningLayout, that knows how to translate TaskModel properties (start time, duration,...) into coordinates
In all cases above the dependency lines are drawn in the main panel's paintComponent(). The lines could also have been empty non-opaque JPanels, laid out consistently, and overriding their paintComponent() that would simply draw the appropriate diagonal.
In all cases, the coordinates are computed by custom code, based on the properties of the tasks, and the moderate complexity of this computing is the same in all cases, provided their is a handy mapping between each "widget" and its corresponding entity (+TaskModel+, ResultModel).
The approaches merely differ in how they integrate with event and repaint handling.
We considered the Renderer approach, but I was afraid it would complicate the interactions (DnD, resizing, click, even contextual tooltip), same thing for the big paint method approach.
It still think the current model where each task and result is an instane of some subclass of JComponent is quite straightforward in this regard:
theTaskPanel.addMouseListener(new MouseListener() {
public void mouseClicked(...) {
contextualFormArea.showFormForTask(theTaskPanel.getTaskId());
});Moreover, both first two approaches would have made it harder to "optimize" the drawing (painting only the areas that need change).
The current solution works nicely on these aspects. However it exhibits some erratic problems, such as:
- some tasks are blank rectangles when the planning panel is scrolled within a JScrollPane, whereas the correct painting comes back when the window is resized.
- sometimes the contextual tooltip shows another task's state
What I haven't considered until that day is developping a custom LayoutManager. I naivley think this might correct the painting problems or at least isolate it, as it would separate the positionning and the "edition" codes (the custom PlanningPanel contains methods to add a task, create IDs, handle drop points,... and is a fairly big intimidating class.
Indeed it seems this separation would be the main advantage of the custom LayoutManager.
The painting code (filling rectangles, switching colors), is mostly separated already, in TaskPanel and ResultPanel.
--> I am correct so far? Any other alternative? Any argument pro/against the custom LayoutManager approach?*
In particular, is it worth the trouble to devise a custom Layoutmanager that has only two use cases?
Edited by: jduprez on May 28, 2009 11:24 AM

Thank you for following up (and forgiving my interference in your own thread).
However I disagree with most of your arguments.
What you described seems to fit with the Model-View-Controller pattern with some nice OOD thrown in :).Sorry, I don't understand this sentence.
1) Constraint objects may be over-engineering the problemDesigning Constraint as Adapters may be a bit far-fetched, right, but I think designing Constraints helps in making the layout reusable (remember, the layout would be used to represent two sets of entities whose classes have no inheritance relationship).
2) Use a Grid Layout if that makes life easier, otherwise use a custom layout. I mentioned GridLayout about vertically stacking "lines" of tasks, but a GridLayout sure doesn't fit putting task widgets of different width (duration) on a horizontal timeline.
i think it may be more clean to simply override the size methods (min, max pref size, etc.) that the layout manager will call and calculate the desired size there (or have them call a method that does it and return that.) This way, each object knows how to provide its desired size instead of relying on some other [constraint] object to provide it.Thank you for this suggestion. This is an interesting point of view, I'll think more about it, but on first read it doesn't seem to fit for several reasons.
- this assumes the object has all the information necessary to compute its, say, preferred size. That's not the case out of the box: there is this "scale factor", that currently is known by the container, and there's also the constraint that a task with results is drawn thinner so that the result icons fit underneath. You couldn't guess those constraints, and admittedly I could rework my TaskPanel so that it receives the missing info
- I think it would go contrary to what a LayoutManager generally does. Think about GridLayout: each child component has no clue as to how big it will render. And the GridLayout silently ignores all desired (min/max/pref'd) sizes. The LayoutManager has all the info (the list of children, their desired sizes, additional constraints, and the layout-specific rules) and arbitrates between desired sizes, which are no more than suggestions.
- In particular, I don't se what it brings to split "how big am I" and "where do I go" across two classes, especially since in my case both will essentially convert times or durations into numbers of pixels.
- Eventually, I have two situations, with in particular two "duration-dependant widgets" (TaskDefinitionPanel and TaskExecutionPanel). Reusing the same layout logic (duration/width conversion included) forces them to share some code (be it to delegate to a common class).
To summarize, put the "How big am I?" code in the over-ridden size methods, and the "where do I go?" code in the layout manager.I understand you refer to my specific situation (because this maxim, although it sounds well, is not a correct description of how standard LayoutManagers work). Thank you for the refreshing point of view, but I think I'll keep the size code out of the widget classes (they already contain the painting and event-handling logic).
Thank you anyway. Regards.
J.

How to get HTML form name for use in Portal Form's custom layout?

I want to add a date selector to a Portal Form but the NAME attribute of the FORM HTML tag is dynamic.
To add a calendar icon that opens a date selector, I add the following tags to the custom layout after the date form field:
<img src="/images/calendar.gif" height="16" width="16" border="0">
The <form field name> is static, but the <form name> appears to be dynamic (e.g. WWVM3115, WWVM3116, WWVM3117, ...).
The custom layout uses substitution variables for the form fields and labels. Is there a substitution variable for the form name?

Here's the javascript function someone recommended several years ago (on an oracle portal forum) that I've used successfully to reference fields in non-portlet portal forms:
function findItem(pFieldName) {
var vFormElements = document.forms[0].elements;
for(var i = 0; i < vFormElements.length; i++) {
if (vFormElements.name.indexOf("."+pFieldName+".") > -1) return i;
document.write(i);
return -1;
You can then reference the portal form field name using the column/field name only:
document.forms[0].elements[(findItem('COLUMN_NAME_HERE'))]

Custom Layout for Web Dynpro Proxy page

Hey all
I have a requirement to display 4-5 Web Dynpro for ABAP iViews on a page.
I have the option of using the standard PRT page to display these iViews for which I can create a custom layout using com.sap.portal.layouts.default.par and the simple JSP layout file in it.
However, they should really be on a Web Dynpro Proxy page but custom layouts created using above component wont work.
In the document [Integrating Web Dynpro and SAP NetWeaver Portal|https://www.sdn.sap.com/irj/scn/index?rid=/library/uuid/0c7b2f25-0c01-0010-f2a2-f8a65a9dcad9] it says -
Within the SAP NetWeaver 04s release it is not possible to define application specific page layouts for Web Dynpro pages. Within the SAP NetWeaver 07 release this will be possible. Layouts for Web Dynpro page are implemented then as Web Dynpro components implementing a special ILayout Web Dynpro component interface.
Has this been released as yet?
Anyone find the APIs or workaround for this?
Cheers

I have the same question, but can't find any good solutions for this.
For standard portal applications you can use com.sap.portal.design.layouts and modify layouts via JSP. But all webdynpro proxy pages are using their own layout.
I'd like to change that layout too.
Anyone?
Cheers,
Noel
I am using NW 701

I built a website for a customer using HTML only, so it would work on everything, but some of the text numbers are not clear on the ipad. It works perfectly on all the other browsers.

I built a website for a customer using HTML only, so it would work on any browser, and it works perfectly on everything except ipad safari. I'm loosing information with most of my text numbers - instead of being black they are displaying a 'ghost' image (white) of the numbers.
Is this a memory issue, or cache issue, or something else? I've downloaded iCab and the site works perfectly with it.
Also wondering if I can manually reload/refresh web pages in iPad Safari.
Since most people with iPads will use Safari rather than iCab, I have to tweak this site to work in Safari.

Detecting phone numbers and making them clickable is a feature of the browser, and rebuilding your web-site links will not make any difference. Its done when the page is shown in the browser, not when the page is created.
According to the Safari iOS developers guide, you can turn these data detectors off using this code:
<meta name = "format-detection" content = "telephone=no">
http://developer.apple.com/library/ios/#featuredarticles/iPhoneURLScheme_Referen ce/Articles/PhoneLinks.html

Custom Report layout Using FOP

I am using FOP as report server to print my apex regions as PDF. How can i print a report with custom layout. Plz provide me a starting point.

I want to make a report withe the parent and child hirerechy. e.g
parent data line 1
parent data lie 2
parent data line 3
child No.1 data
childe no. 2 data
Child No. 3 data
In case I print this report using the standard layout. It prints in one table withe the parent repeating for each child. I want to also inculde some things in the header and footer like company logo and signature.
thanks,

How to force a Custom Layout in the links sent by e-mail ?

Hi everyone,
For customizing the final user´s view for Discussion Groups,
I created a custom Layout Set "myDiscussionGroupsContributor"
that references a custom Collection List Renderer
"myDiscussionGroupWithoutTopicsContributorCollectionListRenderer"
that references a custom Command "my_join_discussion_thread_contributor"
that has a custom Layout Set assigned "mySingleDiscExplorerContributor".
When accessing the discussions via the final users it works fine
(I´ve already corrected the "Back" link problem acording thread
problem with discussion group contributor iview)
The problem is that when I send a discussion via e-mail
to another user using the "send to" command,
the received link opens the discussion using the default
"DiscussionGroupsContributor", in fact, the e-mail´s HTML code
contains the property "rndLayoutSet=SingleDiscExplorerContributor"
as noted in the following href element:
href="http://myportal:50000/irj/servlet/prt/portal/prtroot/
com.sap.km.cm.navigation/discussiongroups/
80b935d9-90a8-2810-17a6-c88c15fd350b/
324e1175-98a8-2810-16a2-ee1c1f9c54bc.dsc?
StartUri=/discussiongroups/80b935d9-90a8-2810-17a6-c88c15fd350b/
324e1175-98a8-2810-16a2-ee1c1f9c54bc.dsc&
rndLayoutSet=SingleDiscExplorerContributor&scHeight=300&
scWidth=220&scPostListWidth=500" target=_blank
The same happens with the link in the subscriptions list.
Does anybody know how to set the layout in these links ?

Hi all,
I solved the problem, so here I post the steps for the solution I found.
1) Modify the Object Type Definitions:
In the CM Repository there is a folder root > etc > oth.
There you have to change the LayoutSet settings in the following files
(I don´t know if it is necessary to modify all of them):
     - discussion_post.oth
     - discussion_topic.oth
     - discussion.oth
     - discussiongroups_items.oth
     - discussionPostType.oth
     - discussionType.oth
     - dscGroupsCollType.oth
     - dscGroupsItemsType.oth
2) Then you have to reload de OTH settings:
In the Content Management configuration (System Administration >
System Configuration > Content Management)
go to User Interface > Debugging Settings and edit the configuration.
Add your user id to "UI Superusers" then enable
"Enable Rendering Information" and save.
Then go to a KM and clic on "Rendering Information"
(If the link doesn´t appear, refresh your window).
A new window opens, clic in "OTH-Overview"
and then in the new window click on "Reload".
Finally close all popup windows and go to the
Debugging Settings again to disable the checkbox
"Enable Rendering Information"
For further information you can read:
http://help.sap.com/saphelp_nw04/helpdata/en/02/e4e25538f7274eb08b317751f2f04b/frameset.htm
and
http://help.sap.com/saphelp_nw04/helpdata/en/f4/2c6b2089cc784bb384a7ea058de50d/frameset.htm
I hope someone find this thread useful.
Daniel Sacco

How to migrate Stellent 7.5.1 custom layout component to OCS 10gR3

Hi,
I am in the process of upgrading stellent 7.5.1 to OCS 10gR3. There is a custom layout component in 7.5.1 wanted to find out how can I migrate the layout component. As probably there are changes in 10gR3 so want to find out how to migrate the custom layout component and any changes required before migrating to 10gR3.
Thanks.

Hi
am putting out the steps needed for upgrading an existing CS instance from version 7.5.1 to 10gR3. Its basically a 2 step process where we use Configuration Migration Utility to migrate the CS structure and Archiver to migrate the existing contents. The steps are as follows :
1. Install a new CS 10gR3 instance on the server and configure it as per the install guide.
2. Verify that the basic functionalities for the newly installed instance is working fine by doing some simple tests like checkin ,checkout , update etc. Then upgrade the CS to the latest patchset level which can be downloaded from http://updates.oracle.com/download/6907073.html.
3. Install the latest version of Configuration Migration Utility component (which is found in the same uprgade patch set ) on both the 10gR3 CS (target) instance and the 7.5.1 CS (source).Enable them on both the CS instances and restart the same.
4. Run the Configuration Migration Utility on the source CS and download the CMU Bundle created on it.
5. Upload the CMU Bundle created in previous step to the Target CS and import the configurations from that.Verify that the CMU process is completed successfully on the Target CS instance.
6. Create a new archiver instance on the Source CS and export all the contents in that.
7. Open the Archiver Applet for the target CS instance and then Point the collections to the collections.hda of the source CS instance so that we can import the contents. Start the Import process on target server.
8. Once the CMU and Archiver Process are completed then your 10gR3 CS would be an exact replica of the Source 7.5.1 Instance.
You may also go through System Migration Guide to get more understanding on the Migration / Upgrade processes.
Hope this helps
Thanks
Srinath

How to create a table-like layout using Iterator?

I want to render several items in a table format using an iterator. Can anyone guide me on how to line up the different columns, like in a table?
I cannot use the built in table because I want to change the display later using javascript and the af:table component does not work with that.
The table will be in a panelsplitter element. The code I have right now:
<af:iterator id="i1"
                   value="#{bindings.DenormPlanLine1.collectionModel}"
                   var="row"
                   rows="#{bindings.DenormPlanLine1.rangeSize}">
                    <af:panelGroupLayout id="pg1" layout="horizontal"
                                         inlineStyle="width:800.0px;">
                      <f:facet name="separator">
                        <af:spacer width="5" height="1" />
                      </f:facet>
                      <af:outputText value="#{row.StartDate}" styleClass="sDate"/>
                      <af:outputText value="#{row.FinishDate}" styleClass="fDate"/>
                      <af:outputText value="#{row.DenormWbsLevel}" styleClass="level"/>
                      <af:outputText value="#{row.DisplaySequence}" styleClass="dSequence"/>
                      <af:outputText value="#{row.ElementVersionId}" styleClass="elVersionId"/>
                      <af:outputText value="#{row.TaskType}" styleClass="taskType"/>
                      <af:outputText value="#{row.PercentComplete/100}" styleClass="percent">
                        <af:convertNumber type="percent" />
                      </af:outputText>
                    </af:panelGroupLayout>
                    <af:spacer width="100%" />
                    </af:iterator>

User, please tell us your Jdev version!
Check out this sample http://andrejusb.blogspot.de/2011/05/oracle-adf-11g-custom-table-pagination.html
Timo

NEW Design Layout Using Omnipotlet...?

Hi All,
Is it possible to build a "Customized Design Layout" using OmniPortlet...?
How can i achieve this in OracleAS Portal V 10.1.4...?
Please help me
Regards,
Kalyan Chandra

You can do this using the HTML layout of omniportlet and please have a look at the following link to get more details:-
http://download-east.oracle.com/docs/cd/B14099_19/portal.1014/b14135/pdg_op_ex.htm#CHDEBHCF
-- Guneet

Custom layout with DVT

Dear All,
I want to use dvt features (drag and drop,....) with my custom layout. It seems that dvt deals with specific hierarchy with specific class(style classes) but actually i didn't find any example or documentation.
Here is my custom layout:
<netuix:markup>
          <netuix:layout markupType="Layout" markupName="homePageTempLayout"
     title="Home Page Template Layout" presentationId="online-sidebar" presentationClass="grid"
     description="This layout has a right column and 2 rows on the left hand"
     htmlLayoutUri="/framework/markup/layout/homePageTemplate.html.txt"
     iconUri="/framework/markup/layout/twoby.gif" thumbnailUri="/framework/markup/layout/twoby.gif"
     type="homePageTempLayout" skeletonUri="/framework/markup/layout/homePageTemplate.jsp">
               <netuix:placeholder markupType="Placeholder"
                    markupName="homePageTempLayout_heroSpace" title="heroSpace" usingFlow="true"
                    flow="vertical" description="heroSpace placeholder with horizontal flow">
               </netuix:placeholder>
               <netuix:placeholder markupType="Placeholder"
                    markupName="homePageTempLayout_upperModules" title="upperModules" usingFlow="true"
                    description="Upper Modules placeholder" flow="horizontal">
               </netuix:placeholder>
               <netuix:placeholder markupType="Placeholder"
                    markupName="homePageTempLayout_accordion" title="accordion" usingFlow="false"
                    description="Accordion placeholder" width="230px">
               </netuix:placeholder>
               <netuix:placeholder markupType="Placeholder"
                    markupName="homePageTempLayout_lowerModules" title="lowerModules" usingFlow="true"
                    description="Lower Modules placeholder" flow="horizontal" width="720">
               </netuix:placeholder>
          </netuix:layout>
     </netuix:markup>
and homePageTemplate.jsp:
<jsp:root version="2.0" xmlns:jsp="http://java.sun.com/JSP/Page"
     xmlns:c="http://java.sun.com/jsp/jstl/core"
     xmlns:skeleton="http://www.bea.com/servers/portal/tags/netuix/skeleton">
     <jsp:directive.page session="false" />
     <jsp:directive.page isELIgnored="false" />
     <skeleton:context type="layoutpc">
          <skeleton:control name="table" presentationContext="${layoutpc}"
               class="wlp-bighorn-layout" cellspacing="0" cellpadding="0"
               width="950px">
               <c:set var="ph" value="${layoutpc.placeholders}" />
               <c:set var="heroSpace" value="${ph[0]}" />
               <c:set var="upperModules" value="${ph[1]}" />
               <c:set var="accordion" value="${ph[2]}" />
               <c:set var="lowerModules" value="${ph[3]}" />
               <tr>
                    <td colspan="2" width="${heroSpace.width}" class="heroSpace"><skeleton:child
                         presentationContext="${heroSpace}" /></td>
               </tr>
               <tr>
                    <td valign="top" width="${upperModules.width}" class="centerColRow1"><skeleton:child
                         presentationContext="${upperModules}" /></td>
                    <td valign="top" width="${accordion.width}" rowspan="2" ><div class="threeColumn"> <div class="mod3ColSidebar ${layoutpc.presentationId}">
<div class="modBodyWrap clearfix">
<div class="modCopy"><skeleton:child
                         presentationContext="${accordion}"/>
                         </div></div><div class="modFooter"><hr/></div></div></div></td>
               </tr>
               <tr>
                    <td valign="top" width="${lowerModules.width}"><div class="centerColBottom"><skeleton:child
                         presentationContext="${lowerModules}" /></div></td>
               </tr>
          </skeleton:control>
     </skeleton:context>
</jsp:root>
I tried to use div instead of tables but i don't know the required hierarchy or classes, can anyone help me in that please?
Thanks.

Hi,
As long as your layout conforms with the bighorn family of layouts you should be ok. In other words if the DISC apis work as expected dvt dnd should also work.

Custom Layout Template

Hi, created a custom layout par file base on the com.sap.portal.layouts.default.par which uses two tabs.
Each of the tabs has a title e.g. my details or my reports. Example of the HTMLB code is below
<hbj:textView id="mytabText1" encode="false">
<% mytabText1.setText(tabText1);%>
</hbj:textView>
The portalapp.xml has also been created as such with a reference to the tab title
<property name="tabText1" value="Tab 1">
<property name="personalization" value="dialog"/>
<property name="inheritance" value="non-final"/>
<property name="type" value="String"/>
<property name="plainDescription" value="Tab 1"/>
<property name="longDescription" value="The first tab text"/>
</property>
To display the custom page layout, I create a new page template and base my page on that template, which works. However to change the title of the tab requires me to change the template. What I would like to do is inherit the title or description of the iViews which populate the page into the tab titles. Thanks for any help in advance. Brian

You can write a liitle javascript. Look at the generated html code. Find Tab's name id.
document.getElementById('Tabsid').value = document.title;

Have lost the canvas and the custom layout option is greyed out (no longer possible to click on).

how can we re-trieve?
have tried to re-open and customise but keep getting the above.
using FCP 7.0.3

iditinjersualem wrote:
how can we re-trieve?
Have you closed the Canvas? Have you gone to the menu Window > Canvas to toggle it on?
If so and it has not appeared, have you moved the Canvas so that it is hidden, or mostly off screen? Type Control - U to reposition all windows in their standard position.
Is the timeline missing as well? If so go to the menu File > New > Sequence and create a new sequence. Does it reappear then?
If all this does not help, then your preferences may have become corrupt and you many need to trash them. Go to:
http://www.digitalrebellion.com/prefman/
and download Prefernce Manager (free) to reset your preferences.
iditinjersualem wrote:
have tried to re-open and customise but keep getting the above.
The Custom layouts will appear greyed out until you create one first. From the FCP manual:
More info at:
http://documentation.apple.com/en/finalcutpro/usermanual/index.html#chapter=10%2 6section=3%26tasks=true
Again, if you are following this procedure and it is not working, try trashing your preferences.
MtD

Custom Layout Controllers

Hi Experts,
Could any body tell me how to create custom Layout Controllers for the Layout sets.
Right now wer are using GridListLayoutController which is with two screen areas
Now we need to add one more screen that means we need to create three screen ares Layout controller.
So please help me how to achive this.
Thanks
Mukesh

I found the problem or at least part of it, somehow my .layout file is not being updated after deploying my application, anyway the documentation says that .html.txt is used at workspace studio and the administration console to show how the portal would look like, and that file is updated, so it must work ok... is'n it?

Custom layout using html

Similar Messages

Maybe you are looking for