Picture "loading_ani.gif" for loading a page

In the sap example page htmlb_samples/default.htm and then the chart example. When the user is waiting for the page, a loading_ani.gif is shown in the background of the page. How can I use this option?

Regards,

Jens

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Accepted Solutions (0)

Answers (3)

Here is how I extended the protectDoubleSubmit element to show this loading_ani.gif:

tmp_string = ``.

pds_title = `Bitte warten...`.

pds_text = `<div style='background-color:#ffffff; padding-top:11px'><img id='PDS_image' src=common/loading/loading_ani.gif' height='32' width='32' align='absmiddle'> Ihre Anfrage wird bearbeitet</div>`.

<bsp:findAndReplace
  find="<br>"
  replace="<%= tmp_string %>">
<xhtmlb:protectDoubleSubmit
  timer = "0"
  title = "<%= pds_title %>"
  text  = "<%= pds_text %>" />
</bsp:findAndReplace>

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hello Maximilian,

for what is the tmp_string? Must be a command-line tmp_string in the coding or/and must be a coding-line <br> in the page. When a code <br> is found, it would be replaced with tmp_string, but in tmp_string is nothing.

Regards,

Jens

Hello Craig Cmehil,

thanks for your coding, but I don´t know, what I must do with the coding. I made a new page with the coding and build a new js file with the last 6 or 7 lines of the coding. And what must I do now? Sorry, but I don´t understand it.

Regards,

Jens

Hi Jens,

I just use the bsp:findAndReplace element to replace '<br>' with '', an empty string, just as you said. This is because the protectDoubleSubmit element hast this <br> tag in its content when being rendered, to display the text within the box not at the very top but somehow in the middle.

Now that I'm placing an image there, I don't need this <br> (it would only mess up my display), my alignment is done by 'align="absmiddle"' in the image-tag.

You can try to use my code without replacing <br> with '', and see how it looks, maybe that will help you to understand.

Jens, I would suggest you try Max's method for now and when you have more time please look at the BSP Application "itsm" in SE80 and read the default.htm and readme.txt files. Those will explain more about the method I used.

Very nice work Max!!

It's just a small enhancement, nothing big or new like your code (which I didn't test yet).

But for the user it's a nice eye-catcher that can "cover" a slow connection by drawing attention to the image instead of making the user think about waiting 1-2 seconds all the time

My code is what SAP gives us in the "itsm" BSP application for dealing with SSO and cookies and all that and it works on startup not during loading.

What you did works great for processing!!

Hi Max, this is what I have done in my system. The Craig's solution is good but We are more Lazy! hehehehe

PD: Jens, copy paste Max solution... it is better for you if you dont know about java script

Regards

Ariel

Hi Max,

sorrrrrrrrrrrrry, but it does´t works in my page.

This is the code:


<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<%@extension name="bsp" prefix="bsp" %>
<%@extension name="xhtmlb" prefix="xhtmlb" %>
<htmlb:content id               = "tests"
               design           = "DESIGN2003"
               controlRendering = "sap" >
  <htmlb:page title=".:: Title ::." >
    <htmlb:form>
      <%-- -------------------------------------- --%>
      <%
  tmp_string = ``.
  pds_title = `Bitte warten...`.
  CONCATENATE `<div style='background-color:#FFFFFF; padding-top:11px'>`
  `<img id='PDS_image' src='../loading_ani.gif' height='32' width='32' align='absmiddle'>`
  `Ihre Anfrage wird bearbeitet</div>`
  into pds_text.
      %>
      <bsp:findAndReplace find    = "<br>"
                          replace = "<%= tmp_string %>" >
        <xhtmlb:protectDoubleSubmit timer = "0"
                                    title = "<%= pds_title %>"
                                    text  = "<%= pds_text %>" />
      </bsp:findAndReplace>
    </htmlb:form>
  </htmlb:page>
</htmlb:content>

I got an white page and nothing else, I thought the gif is shown in the middle, with the text.

I have an WebAS 6.20 with Support packages 46.

Regards,

Jens

6.20 with SP 46 is ok, running the same here ...

But it's quite clear why your page is white - you got no content to display in there.

Quick recap on how protectDoubleSubmit works:

This element is intended to be used in BSP pages that contain form elements.

If you compare a web browser with the classical SAP gui, you will notice this one difference in handling: After clicking on a button in the SAP gui, you are not able to click anywhere else or alter the input until the next screen has finished loading and the gui is ready again.

The page in the web browser is being displayed up to the moment that the browser starts receiving response packets from the web server ... which means that from the time of user action (form button submit) to the display being updated, that is the time-span that web developers fear the most, because the user can click the button again (hence sending another requets to the server), or do something else we don't want him to do.

htmlb:protectDoubleSubmit can help avoid this behaviour by "disabling" the interactive elements in a browser-style way: just place another element above all others and make it transparent ... therefore after this element is being displayed, it is on top of all others, and so if the user tries to click on a button again, he just clicks our transparent element, maybe wondering why the button does not respond to his click ...

So, you will only notice protectDoubleSubmit, if you have some form elements in your page, and when you submit the form in which protectDoubleSubmit is placed, the protection-layer will come into play and "cover" all other elements.

Hope this explanation was understandable

Just try it with your own page or some example pages, submit a form by clicking a submit button, and as soon as the protectDoubleSubmit-layer appears, try clicking some other button - it won't work

Cheers,

Max

Hello Max,

many thanks for the good discription. Now it works, but I have one more question. The parameter time is standing for what? And from where have you this informations? In sap documentation is standing nearly nothing.

Regards,

Jens

Time is the amount of seconds (or millisecond, I don't remember exactly) that lies between the user action and the appearance of the protection-layer - so you can control this layer, maybe you just want it to appear if the next server response takes more than a certain number of seconds, and not at every submit.

Where do I have this information from:

partly from SDN here, partly from just playing around with the system

You will have to get used to that, as there were (and hopefully will be) new features added every SP, but documentation lacks behind. But we can still experiment around with the new possibilites, trying out and debugging into new pieces of code does not only reveal nice functionality but also helps to improve your overall understanding of the BSP technology.

Hi Max,

thanks.

This works, when I press a button in a form. What can I do, when I press a link in the navigation and the user must wait, until the page is built.

Regards,

Jens

Jens, the protectDoubleSubmit should fire whenever OnInputProcessing takes too long. If your menu link in the navigation goes to another page then you have to have the protectDoubleSubmit on that page as well.

But you also may have to come back to my solution because the loading of the page does not always activate the protectDoubleSubmit.

Talking about acivating protectDoubleSubmit also on clicking on links ... it sure is possible, will have to look into this ... at the moment I don't have a single "normal" link on my site, every interaction is a form submit, so I haven't dealt with this before.

I will keep you updated on how this can be done (should turn out to be a few lines of javascript ...).

Max

Max,

Think about this for a second.

It won't be possible, once you click a link you are now loading a whole new page and leaving the other. The protectDoubleSubmit is bound to the page. You would have to develop a way to load the page into memory (pre-load) and show the graphic while the preload is running.

For that I would suggest what I posted first.

Of course it's possible, we just have to separate what we are talking about.

Your solution is a pre-loading way - not depending on where the request is fired, as soon as the page gets requested, you send the pre-load page to the browser to display it while the actual content is prepared.

(correct me if I'm wrong there)

protectDoubleSubmit is working on the other side of the page/application - as soon as you submit a form, the - let's call it "protection-layer" - which is already present in the source code of the current page, is being displayed, and then the new page is requested.

Here it does not matter if the requested target is the same application, another page, or a totally different URL.

Only issue with protectDoubleSubmit is that without modification it will only work for submitting a form that includes this element ... and that's where my plan plugs in - add some javascript code to regular non-form-submitting links to activate the protection-layer here as well.

But that protection layer exisits and if you load a new page you would loose that. That new page has to fully render before you can active a layer otherwise the layer does not exist. This would work for example if you had an IFRAME on your page and link active the protection layer on the page and each page that loaded in the IFRAME had a command that would do a


parent.document.getElementById('protectlayer').visible = 'false'

or something like that but then you have a single URL for your app and everything loading in a IFRAME.

You have be intrigued with your idea but I see no possible way for it to work.....

Of course you loose that, I'm only talking about the submit-side of the browser, not the receiving end.

protectDoubleSubmit is acting PAI-like, as soon as the new page starts getting submitted the old content (including this layer) is lost - so what I meant is not to re-invent protectDoubleSubmit, but only activate it also on non-form submits ... just because of its name, it only "protects from double submits", and once the new page is starting to get displayed, the old is gone, so protection in this sense is not needed anymore (until a new submit that is).

Correct me if I am wrong Max but wasn't the question how to do this when the user selects a link and goes to a new page?

Ok, I think I finally got behind our misunderstandings now

>>This works, when I press a button in a form. What can I do, when I press a link in the navigation and the user must wait, until the page is built.<<

> Correct me if I am wrong Max but wasn't the question

> how to do this when the user selects a link and goes

> to a new page?

Obviously you set the focus on "new page", which for itself would sure mean a different page/application, therefore requiring your solution.

I did highlight the difference between clicking on a form element (using form submit) compared to a regular link ... and what can be done using protectDoubleSubmit, extending its purpose to work for links as well.

Hope you got me now

> Ok, I think I finally got behind our

> misunderstandings now

> I did highlight the difference between clicking on a

> form element (using form submit) compared to a

> regular link ... and what can be done using

> protectDoubleSubmit, extending its purpose to work

> for links as well.

You'll need to clarify again because I just don't see protectDoubleSubmit working for a new page when you press a link as the protectDoubleSubmit is not rendered yet on the new page. Even if you do show it on your current page the protectDoubleSubmit will run for a point then the new page will start rendering and there will be no fancy displaying of something while the user waits.

> Hope you got me now

Sorry, maybe I'm just having a and can't see clearly right now

Ok, getting closer ...

protectDoubleSubmit is not about displaying some nice picture (well, at least not in first place, that is).

Its main purpose is to prevent the user from sending an additional request to the web server after he has already sent the first one -> protection from Double Submit.

So as soon as the new page starts rendering, there is no chance the user can click on another submit element or link anymore ...

Yes but as soon as the new page starts rendering which happens so quickly the protectDoubleSubmit layer is then gone anyway and there is nothing showing the user that the new page is loading other than the browser and the original question was how to show that "loading_ani.gif" file when the page loads.

ok, pointing back at the original question, it was about loading a page ...

but it also stated htmlb_samples/default.htm as an example, and halfway through the thread Jens tried protectDoubleSubmit and mentioned it did work for form buttons but not for links - so from this point on I was focusing on that

Ach soooooooo!

Ok you win wonder if Jens is even reading all this we are writing?

So we have to stop brabbling about this now ...? 😛

We were starting to become like "Waldorf and Stettler", discussing the same all over again, without achieving much ...

"babbling" us? no way.

Ok but you have a point let's wait and see if Jens comes back to us.

Life can be easy though. Instead of using direct links or submit buttons, use the call to a javascript function. This function does all the same things AND opens a popup html page that you've defined with a msg and/or gif.

This popup will be killed as the next page is loaded (onload) or when the current page is left (window.onunload).

One can do stuff with cross browser

Craig / Maximilian

Nice Thread, But I guess you lost jens there !! . So do we have closure ?

protectdoublesubmit can not handle html <a href> links or can it ???

Max

I must say that I kind of share Craig's view on the preloader. It simply beats me how one could control the code on some other link that does not have a protectDoubleSubmit as the top most element. None the less your's was a simple and clean solution thanks for the insight...

Hi Vinod,

the key is to "catch" the user event of clicking on a link. Somehow you have to call the javascript function and trigger the protectDoubleSubmit. If you do not get this functionality with a pre-designed HTMLB (or similar) element, you have to take care of this manually.

Max

I am trying to upload a picture from the SAP BSP I am using the code that you have posted.But its giving like LIterals more than one line not permitted.

What should I do .

Could you please help me out.

With Cheers

Suneetha

Jens, I dont know what you want to do... If you want to do the same that in SAP samples use this long code...

<xhtmlb:protectDoubleSubmit timer="1"/>

Hehehe

Regards

Ariel

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

I actually just added that graphic into a new BSP application not more than 30 seconds before I read this.

I use it with the the session.htm page after setting up the whole SSO for my application.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi Craig Cmehil,

and how did you do this?

With "<xhtmlb:protectDoubleSubmit timer="1"/>

" i got nothing.

I mean, the SAP example BSP-Applikation "htmlb_samples" and then the default.htm. When you press the link Chart.htm on the right side, you can see the loading gif

"loading_ani.gif". How did they do this?

Regards,

Jens

Jens,

tomorrow I will look this samples and tell you how to show this .gif.

The code I show you must be with the XHTMLB extension TAG. If not probably will not work. Then this tag is to prevent the user to continue using the page after a FORM submittion. Just put this tag AFTER the FORM tag (htmlb:form?)

If this beautiful popup doesnt like you.. just wait for tomorrow...

Cheers

Ariel

Here is the code for the session.htm I use and I set session.htm as the inital page for my BSP Application.


<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>

<% " Copy this page into your BSP application, and change line below.
   " This page should always used be as entry point into application.

   DATA: target_page               TYPE STRING VALUE 'index.htm'.
   DATA: do_not_delete_sso2_cookie TYPE XFELD  VALUE SPACE.

   " Comment: In ie, when the browser is closed, the new popup window is
   " still executed, before complete shutdown. This allows us to still close
   " the session in the backend. With NN, when the browser is closed, it
   " is gone for ever. So no session cleanup. This is feature/bug of one
   " browser or the other browser.
 %>

<html>

<script language="JavaScript">

<%
   DATA: guid TYPE GUID_32.
   CALL FUNCTION 'GUID_CREATE' IMPORTING ev_guid_32 = guid.
 %>
var frame_A = "<%=guid %>_A";
var frame_B = "<%=guid %>_B";

function Loader(name)
{
    doc=window.frames[name].document;
    doc.writeln('<html><body onLoad="JavaScript:document.f.submit();">');
    doc.writeln('<form id="f" name="f" target="<%=guid %>_A" method="POST" action="<%=target_page %>">');
    <%  DATA: ffs TYPE tihttpnvp, ff  TYPE  ihttpnvp.
        request->get_form_fields( changing fields = ffs ).
        DELETE ffs WHERE name cs '~'.
        LOOP AT ffs INTO ff.
     %>
          doc.writeln('<input type="hidden" name="<%=ff-name %>" value="<%=ff-value %>">');
    <%ENDLOOP. %>
    <%@ include file = "loading.js" %>
    doc.writeln('</form></body></html>');
    doc.close();
    <%=runtime->GET_DOMAIN_RELAX_SCRIPT( )  %>}

function exitBSPApplication(newTargetUrl)
{<% if runtime->session_manager->is_running = 0.  %>
  <%CLASS cl_bsp_login_application DEFINITION LOAD. %>
  var url  = "<%=CL_BSP_LOGIN_APPLICATION=>GET_SESSIONEXIT_URL( page = page ) %>";
  <%IF do_not_delete_sso2_cookie IS NOT INITIAL. %>
      url += "&bsp_do_not_delete_sso2_cookie=X";
  <%ENDIF. %>
  var prop = 'height=100,width=400,top='+(screen.height-100)/2+',left='+(screen.width-400)/2;
  var out = window.open(url,'_blank',prop);
 <%endif. %>
  document.getElementById("<%=guid %>_FRAMESET").onunload = null;

  if(newTargetUrl) window.setTimeout('{document.location.href="'+newTargetUrl+'";}', 750);
}

function frameLoaded(name)
{
}

</script>

<frameset id="<%=guid %>_FRAMESET" rows="*,0" onUnLoad="exitBSPApplication();" resize="no" framespacing="0" frameborder="0">
    <frame name="<%=guid %>_A" src="JavaScript:parent.Loader('<%=guid %>_A');" onload="frameLoaded('<%=guid %>_A');" >
    <noframes>This browser does not support frames.</noframes>
</frameset>

</html>

I modified the above to inlcude a js file


doc.writeln('<table border="0" width="100%" height="100%">');
doc.writeln('<tr>');
doc.writeln('<td align="CENTER" valign="MIDDLE">');

doc.writeln('<img src="ani/loading.gif" border="0"> ');
doc.writeln('<br> ');
doc.writeln('<span style="font-family:Arial,sans-serif;"><otr>Loading...</otr></span> ');

doc.writeln('</tr>');
doc.writeln('</table>');

If you read through the weblogs of Brian McKellar you will see more information on this process.

The protectDoubleSubmit is an excellent element to use however it takes place when the page does it's Event Handling to prevent the user from clicking submit more than once. But for the inital loading you will need something like what I put above.

Ask a Question

Top Q&A Solution Author

User

Count