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

[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 [email protected] ?

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:[email protected].

thank all.

[Former Member]

this link is not available anymore.

Can you send this to me?

[email protected]

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