Fixed Rows/Columns in Web Interfaces

[Former Member]

We are implementing web based BPS-applications for different customers integrating the BPS interfaces into SAP Enterprise Portal. One of the main problems when using web interfaces is that you're not able to fix leading colums/rows in a way that the user only scrolls through the data cells of a layout.

Does anyone know of a way to fix leading colums or rows in BPS-Web Interfaces (either using pure HTML or Excel web component)?

HTML: When using Web Interfaces I would suggest that you have to work with frames. Has anyone done this and can provide a code example?

Excel OWC: Excel-based layouts work well with fixed rows/colums in SAP GUI. But as far as I know the Excel web component doesn't support this feature.

Thorsten

[Former Member]

I'm having a minor problem in terms of implementing this solution.

I can get the first column to freeze ok, but when I click a planning field in the scrolling part to input a value, the contents of the fixed column is switched from being the normal fixed values to the contents of the of the scroll screen content.Ie. mouse click to a plan column throws the right screen content to the left.

Can anyone suggest a solution for this ?

BR,

Henri

[gregor_kolck]

There are so many replies under this topic from people interested in the example (by Olaf Fischer?)

- Has anybody the link or name of the How-To-Paper?

- Has anybody a link to the Code?

- Could anybody paste code under this topic if not too long?

Last option: Could anybody send code and/or paper to kolck.gregor@guj.de ?

Best wishes

Gregor

[olaf_fischer]

Dear all,

I have received a whole bunch of questions on when the improved version will be available. It took some time - sorry for that but I am quite confident that the current approach offers a much higher performance than the previous ones.

Many thanks to those who contributed to the current solution. Really thanks a lot for the work.

This is how the current solution works: the layout table is copied four times and rearranged ending up with the same structure as before but with scroll bars for the data area. This will lead to an increased start up time but fast scrolling once it is done.

<b>For the first impression:</b>

Check out the two sample web interfaces with and without freezing of columns

<b>Implementation steps:</b>

1) jsInitScrollingLayout - Should be the first html text node on the page.

2) jsExecScrollingLayout - Should be the last html text node on the page.

3) The page property "Arrangement in Table Form" must be false

insert it at the end of your page and list the layout names that should be converted. In addition the size has to be specified. The rest is done by the script.

<b>Limitations currently known:</b>

1) Select fields, radiobuttons, etc are not supported in the frozen columns

2) Alignment between the frozen header and frozen body could be off by a few pixels (I'd appreciate any ideas you have for this issue).

3) Display of header is not supported.

For download follow the link <a href="https://sapmats-de.sap-ag.de/download/download.cgi?id=WEJDT0MZ18U0W5NXAQJU92HI46IH82UZYO7X84BH8RZ7T1V00M">https://sapmats-de.sap-ag.de/download/download.cgi?id=WEJDT0MZ18U0W5NXAQJU92HI46IH82UZYO7X84BH8RZ7T1V00M</a>

Please note that you should test the solution carefully as you use it at your own risk.

All the best, Olaf Fischer

[Former Member]

Hi Olaf,

Thanks for posting this solution. It will be of great help. I´m wandering if you can just help me in one point:

I'm just having one question :

- In 3rd step of implementation, I'm just not understanding what to do after setting property "Arrangement in Table Form" to false. How to I indicate the layouts that should be converted ?

Thank you very much ?

[Former Member]

Hi Olaf,

Thanks for posting this solution. It will be of great help. I´m wandering if you can just help me in one point:

I'm just having one question :

- In 3rd step of implementation, I'm just not understanding what to do after setting property "Arrangement in Table Form" to false. How to I indicate the layouts that should be converted ?

Thank you very much !

[olaf_fischer]

Dear Ferreira,

select the page element in the tree and search through the properties - there you will find the property mentioned above.

To specify the layout name: search in the source code for a line like

<b>buildScrollLayout("Keys_Only", 375, 900);</b>.

Replace the name "Keys_Only" by you own layout name.

Regards, Olaf

[Former Member]

Thanks Olaf,

That was the missing item for solving my problem.

I didn´t found the link for awarding you points on this...

Best regards,

Ricardo

[olaf_fischer]

Dear Ferreira, just select the radio button with problem solved. Regards, Olaf

[Former Member]

Hello Everyone,

I am trying to use this functionality. But I am kinda stuck on where I should insert jsInitScrollingLayout in the web application. I inserted a text node and cud not find a place to enter this code and I am not able to see the code on the page properties. If anyone can provide an idiot's guide on how to use this solution, it would be really great.

Thanks...

[Former Member]

Olaf,

Thanks a ton for this javascript and ur inputs. It worked very well. But I need to make a modification so that I freeze the lead columns and the first data column.

Danny

[olaf_fischer]

Dear Danny,

search for the following source code piece:

<i> var ref = document.getElementById(idSrcTab + '-1-' + col.toString() + "-cell");

while (ref){

if (ref.className != c_lead_head) break;

col = col + ref.colSpan;

new_cell = ref.cloneNode(true);

new_cell.style.width = ref.clientWidth;

new_cell.style.height= ref.clientHeight;

tabHdrLft.rows[0].appendChild(new_cell);

ref = document.getElementById(idSrcTab + '-1-' + col.toString() + "-cell");

}

widthFrozen = ref.offsetLeft;</i>

If you need to add an additional data column the ref has to reference to the next cell. How to achive: before widthFrozen = ... insert

col = col + ref.colSpan;

ref = document.getElementById(idSrcTab + '-1-' + col.toString() + "-cell");

Regards, Olaf

[Former Member]

Olaf,

Thanks for ur input. On inserting the code you sent me, it basically moved the frozen column but the frozen header got messed up. The new added frozen column description did not show up. I think it is because the javascript refers the characteristics w/SAPBEXchaText class and keyfigures w/SAPBEXstdData class. Frozen header loops thru SAPBEXchaText and becoz of which the header row got messed up. I inserted the code below at the same line u advised me to and everything looks fine..

col = col + ref.colSpan;

new_cell = ref.cloneNode(true);

new_cell.style.width = ref.clientWidth;

new_cell.style.height= ref.clientHeight;

tabHdrLft.rows[0].appendChild(new_cell);

ref = document.getElementById(idSrcTab + '-1-' + col.toString() + "-cell");

Also when I created the web application w/option to insert new records to be added, I click on the button to add new rows, but cannot get the handle to change the no of rows from the default value of 1 to 20. Can you shed some light on it please?

Thanks,

Danny

[Former Member]

Olaf,

I am having an issue with Javascript for freezing panes. When I click on an editable column, it columns gets shifted and the behavior is very wierd. Do you see this on your end?

D

[Former Member]

Hi all,

seems the download has been expired,could anyone send the file or the how to paper to me? my email:wscwj@21cn.com.

thank all.

[Former Member]

this link is not available anymore.

Can you send this to me?

dan.lafon@us.fujitsu.com

will awards points of course!

Txs,

Dan

[olaf_fischer]

Dear all,

the current version has been published in BWExpert. Please use the following link

<a href="http://www.bwexpert.com/archive/Volume_05_(2007)/Issue_04_(April)/V5I4A3.cfm?session=">http://www.bwexpert.com/</a>

All the best,

Olaf Fischer

[Former Member]

Thanks for the reply but I assume you need a paid subscription to get to your 'solution'?

Also, does your 'solution' work for NW2004s Integrated Planning?

Txs,

Dan

[olaf_fischer]

Dear Dan, you are right - this is only for BPS. Regards, Olaf

[Former Member]

Olaf,

I tried implementing ur prev solution and as I have mentioned earlier in this forum, it behaved kinda weird when clicking on editable cells as it shifted few columns back and forth. Did you ahve this issue at your end and if yes, does the new solution on BW expert, take care of it??

Thanks,

Danny

[Former Member]

Does anyone have access to the code mentioned by Olaf in this post? It would be ideal if this could be reposted.

If anyone has it could you please send it to rosspaulrobinson@hotmail.com.

[Former Member]

Hi,

Please send me the Code . I am looking for the solution from a long time. my Mail

sathya_bw@yahoo.com

Thanks

Sathya

[Former Member]

Dear Olaf,

I would like to use your solution. Please send me the active link/ zip file.

My email address is: g7kiran@gmail.com

Thanks,

Kiran

[Former Member]

I am trying to make sense of all the conversation on this topic, but alas I am totally lost. I am not more of a functional consultant (do not know where to include all the HTML and JAVA that are proposed). I need to be able to give users this “freeze panes” functionality urgently on the web-input screens. If anyone can offer me the “idiots guide” to do this I’d be delighted.

[Former Member]

Hi all. I have implemented this and I have 2 issues.

1) when i go to the layout, it appears and it looks like it should work. However my screen does not respond. I cannot scroll or click any other buttons.

2) performance. It takes a very long time for my layout to appear. It is not a lot of data. Only 15 or 20 lines by 20 columns.

M.

Message was edited by: Michael Svolos

[Former Member]

Hi Guys

I tried to implement the how to document for freezing the panes on the HTML layout but when I implemented the layout is not appearing. I am just seeing the blank space in place of layout. The functionality of having freeze panes in the web is very critical for us to have given the size of our layouts. So any help in this area is greatly appreciated.

Thanks,

Raj.

[Former Member]

Hi Raj,

This is from Olafs message above. It fixed the same issue for me.

Hints about layouts invisibility:

The example contains a rule to automatically adjust the width of a layout according to the browser window. Unfortunatly this doesn't work in some cases (see post of Marino - arrangemant in table form) with a resulting width zero - nothing is shown.

To come around this insert the line 'divWidth = 800;'

directly after the comment '// insert div section around the layout body and seperate footer table'

[Former Member]

Thanks for your help.

We have applied the solution fo freeze panes on the web HTML layouts but the performance of the layout is very slow, please let me know if you have any suggustions for performance.

Thanks,

Raj.

[tom_peng]

Olaf, thank you very much for posting a solution. However, we tried it in our 3.5 BW-BPS system and could not get it to work. Our web layout does NOT use the Excel web component -- it is strictly HTML. After implementing your solution, all we see is a grey block where the layout should be. We are using IE 6.0. Any ideas what the problem might be? Anybody else with success using this solution?

Thanks,

Tom

[olaf_fischer]

Dear Thomas,

I have added a test html page to the zip file that contains a simple example using the same techniques as the provided code for web interfaces.

Please try this simple page first to check if your current browser installation supports the techniques used.

Here is the new link (valid for the next 100 days):

http://sapmats-de.sap-ag.de/download/download.cgi?id=SYACC77Q1K474W1ZZO1YKPB5FOX152005UN4IQI7IXPAKQN...

Best regards, Olaf

[Former Member]

Hi Olaf,

Nice one...!

I have created a similar solution for locking columns/rows in the HTML web pages (using the relativity concept of cells), but these little javascripts are 'killing' the performance of the page.

I have noticed that installing your solution has the same 'bad performance' effect on the page. Do you know any tricks or concepts in order to improve page performance when using javascripts.....?

Thanks,

Rael

[Former Member]

Hi,

I'm using BW 3.5 (Support Pk 11) and we seem to be having a similar problem to Thomas, in that the layouts are not appearing (or are appearing as grey blocks) after following Olaf's instructions. When I load the test HTML page provided by Olaf this functionality works fine, so it can't be a browser problem.

I've tried setting the layouts to ALV from BPS0 and also have played with the layout settings in BPS_WB, again no help there. The web pages are using the new design.

In the file 'freezelayoutscript' it is mentioned that this functionality requires additional style sheets to work. I think this may be the problem, and if so what are they and how are they installed?

If anyone has any ideas, please let me know.

Message was edited by: Marinos Tsiplakis

Hi Again,

Just realised the problem. In BPS_WB, for the Page component the "Arrangement in Table Form" needs to be set to FALSE.

[olaf_fischer]

Dear all,

thanks to all for the feedback about the scrolling solution.

Hints about layouts invisibility:

The example contains a rule to automatically adjust the width of a layout according to the browser window. Unfortunatly this doesn't work in some cases (see post of Marino - arrangemant in table form) with a resulting width zero - nothing is shown.

To come around this insert the line '<i>divWidth = 800;</i>'

directly after the comment '<i>// insert div section around the layout body and seperate footer table</i>'

The other topic is about performance for larger layouts. I have some ideas and work on that.

Best Regards, Olaf

[Former Member]

Hi Olaf,

Your last post mentioned that you were going to work on 'performance issues' for the locking scenario.....?

Even if you can't provide me with a solution, can you at least point me in the right direction to improve performance....? I will work on it myself (until you provide us mere earthlings with the ultimate solution to our problems)..

Thanks,

Rael

[Former Member]

Dear Olaf,

I would like to use your solution. Please send me the active link/ zip file.

My email address is: banerjee.sujoy@gmail.com

Thanks,

Sujoy

[Former Member]

Hi Olaf,

The link has expired. Can you please send it to me at ksquire@att.net? I would greatly appreciate it as we have been needing this for quite some time.

Thanks

Kory Squire

[Former Member]

Hi Olaf,

your solution for fixing columns/rows works so far. But a big problem is performance. In your posting you mentioned to have a few ideas about that issue and to work on that. How far did you get already? I need a solution necessarily. If you haven´t a solution already you can give me your hints and I will try to improve performance by myself.

Best regards,

Alex

[olaf_fischer]

Dear all,

as Mark mentioned I am working an a How to Paper for freezing pane (header and lead) which offers an almost footprintless solution - just include a style sheet section and one javascript section, that's all - no exit class etc.

What to to?

1. Insert a text component at the very beginning of the page and an other one at the very end (attribute html = true)

2. Insert the content of file freezeLayoutStyles.txt into the first text component.

3. Insert the content of file freezeLayoutScript.txt into the second text component.

That should be really all !!!

Prerequisites:

- Internet Explorer

- New Design as of Release BW3.5 (using the SAPBEx styles)

- The front end PC should not be too old

- The text files are located at (for the next 100days):

http://sapmats-de.sap-ag.de/download/download.cgi?id=KYWV2IXL9UWABTEI55GIPOF0ASQK7Z2FKBWN4URC5098ZU1...

Have fun ...

Best Regards, Olaf Fischer

[Former Member]

Hello,

Does anybody has the How to paper about Fixed Rows/Columns in Web interfaces?

I found one link (By Olaf Fischer) that was expired.

Thanks a lot!

Bueno

[Former Member]

Hi

I have zip file for the code which I can send it to your mail ID if you want but this solution is causing lot of performance issues and I am struggling with improving the performance with JavaScript person but no results. If performance is not improved this solution can not be used. I don't mean to hurt any body who has developed this but it would be great if we find any solution that works just like excel freeze panes on HTML layout. Because of issues with freeze panes we are not able to use HTML fret end which is very good looking.

I hope SAP fixes freeze panes, export to excel and sorting issues on the HTML layouts otherwise the functionality is there and it just can not be used for these small reasons.

Thanks,

Raj.

[Former Member]

Raj could you please send me on this email:

paraobueno@terra.com.br

This kind of function, every customer wants.

Thanks for your advice about performance too,

Regards,

Bueno

[Former Member]

sent it.

Thanks,

Raj.

[Former Member]

Hi,

The sapmat link has expired.

Could anyone repost the file to sapmats ?

Or send it to olivier.maghe@gmail.com ?

I haven't seen any published white paper yet.

Thanks very much in advance.

Olivier

[Former Member]

Hi Olaf,

Could you please send me the active link of your solution for fixing rows/columns.

Thanks!

Regards

Jocelyn

[Former Member]

Hi JW,

the described modification only works for web interfaces based on Microsoft Office Web Component (OWC). So you have to select Excel for all layouts in your web interface.

Regards

Thorsten

[Former Member]

Hi Thorsten

Did you het this done based on HTML or Excel component? If you can send the detail information to sem_bps2000@yahoo.com, I would be veru much appreciated.

Thanks,

[Former Member]

It seems like the topic of fixed rows/colums is quite interesting for a lot of BPS-applications.

We finaly came to the following solution:

1. Modifying each web interface by using the freezepanes-method might work, but we wanted a flexible solution giving the user the opportunity to freeze whatever cell he likes.

2. So we decided to modify the template BPS uses to create new business server pages from web interface builder (BSP "SEM_UPWB"). We added two buttons: the first one freezes the cell the user selected, the second one removes the freeze.

3. Now whenever a new BSP is generated, the two buttons are added automaticaly.

Here's the code we used for the modification:

<img onclick="javascript:layout_sheet.ActiveWindow.FreezePanes = true"

title="Zeilen/Spalten fixieren"

class="bpsBtnIcn"

src="../PUBLIC/BC/Icons/s_brdins.gif">

<img onclick="javascript:layout_sheet.ActiveWindow.FreezePanes = false"

title="Fixierung aufheben"

class="bpsBtnIcn"

src="../PUBLIC/BC/Icons/s_brdout.gif">

<!-- Ende Modifikation -->

Just insert the code into the Object "Layout2.htm" of BSP "SEM_UPWB" after line 492 ("...src="../PUBLIC/BC/Icons/s_f_ehlp.gif"><%endif. %>") and activate the BSP.

If you have problems adding the modification, contact me. I can also supply a short word document (only in german) describing the steps.

Regards

Thorsten

[Former Member]

Hello Thorsten,

simply GREAT

That was exactlky what I was looking for.

The next step would be have the possibility to de/activate the functionality.. .just in case some user

Great job.

Best regards

Yannick

[Former Member]

Hi Thorsten,

You can use freeze panes in the web interface.

You have to freeze panes (window - freeze pane) in the third screen of your planning layout in BPS0.

The freeze pane will then be active in the web if you use the office web component.

Thanks for your points if this helped you,

Filip

[former_member93896]

Hello Thorsten,

HTML layouts do not provide this functionality. The best you can do is use styles to format them so they fit on screen.

Excel layout however can be set to fixed columns/rows. Make the change to the layout in BPS0. On the third screen of the layout builder, select "publish to web" (button above the layout).

Regards

Marc

SAP NetWeaver RIG

[Former Member]

Hello Marc,

we have the same problem. Either the layout Key columns are to numerous or to big or the physical screen of the planners computer is too small.

I mean It should be possible using javascript and the OWC to fix the layout! Is there any built in javascript/or not to fix the column view?

Best regards

Yannick

[Former Member]

Hi,

Please check out the below link:

http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

This could help you to identify the HTML changes needed, to ge the scrolling. If it worked let me know. I am yet to use this one.

HTH,

Regards,

Nataraj.

[Former Member]

Hello Nataraj,

can you please send the .csv file to this email-address:

yannick.sigwalt@de.bosch.com

I have some trouble with the firewall

Best regards

Yannick

[Former Member]

Hi,

Sent the files to you. If it worked let me know, I am in the process of finalizing this approach.

regards,

Nataraj.

[former_member93896]

Hello everyone,

here's an update on the topic. The SAP NetWeaver RIG is working on a how-to paper to address the issue. We are currently testing and will publish the paper shortly. I will make an announcement in this group.

Regards

Marc

SAP NetWeaver RIG

[Former Member]

Dear Marc / Dear All,

Any improvement or updation on this requirement , as we require the same options now as we are not able to freeze the header as we do it in excel. This is creating lot of problem for the planners (BPS-Web)to identify the row/column they are into to do manual planning.

Regards

Jerry

Edited by: jerry raj on Dec 19, 2011 9:24 AM