Skip to Content

Developing web applications, despite all the available technologies, isn’t always that easy. The main factor of success or failure is the end user. One needs to make a web application that covers all the possible events that might occur. That consists of tasks like input help, repertories, input validation, navigation and of course saving of data. However, there are also less obvious tasks like foreseeing that a user doesn’t necessary follow the supposed way of entering data. As a web developer, you need to capture these kinds of odds.

One of the things we need to tackle is the user leaving the application, or screen, and losing data by doing so. This can be prevented though in rather simple ways. You will see different possibilities in this web log.

Are  you included?

Within the Web Dynpro environment, there is the so-called Work Protect Mode to prevent unsaved data or otherwise called ‘dirty state’.

This WPM can run in three modes:

    • No protection
    • The application decides whether the application has unsaved data. This is the default mode.
    • The application and the HTML Client check the application state

More info and examples can be found in this help .

If you don’t have a Web Dynpro application,  you can use the state management techniques, explained in an earlier Enemy of the state. Originally,  it was designed to clear up all the state info of a stateful application when  one left the application. However, one can easily rebuild this principle for  data loss prevention. You only need to use the same technique that I am going  to explain next.

If you don’t have Web Dynpro or a statefull application, or want to check things on page level instead of at application level, there is also a minimal code solution for this.

All you need to do is to put this JavaScript in to the head section of every page

   var needToConfirm = false;
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    if (needToConfirm)
      {
      return "Changes will be lost if you don’t click on the ‘Save’-button";
      }
  }

 

I would recommend putting this code in a separate file, which you retrieve in the head section of your HTML.


You can store it as a MIME type, but this method has it drawbacks. The source is not editable unless you download it, edit in an external application and upload it again.  A better method is to save it as a BSP page instead.

Furthermore you can opt to save the head section code in a BSP include if the code remains the same over the pages.

* *

Are  you sure? Are  you changed?<br>
            It could be tuned even finer if you like.  Let’s say, you want to warn the user when the value entered is different from  the original value. <br>
            To give an example:<br>
            A user sees a value A for a field and  changes it to B. He reconsiders his entry and fills in value A again, in other  words the original value. As such, nothing is changed, so you don’t want to  warn the user since nothing as such has been changed when you compare the value  to the original value.<br>
            This can also be achieved in a simple way  too.<br>
          All you need to do is to call a function  that compares the new value with the original value.</p>
          <pre>
   <input type=”text” value=”<%=some_value%>”  name=”a_field_name” onChange=”is_changed(‘<%=some_value%>’,this.value)”></pre>
          <p>You give two parameters to the function:</p>
          <ol start=”1″ type=”1″>
            <li>The original value that is provided as standard value. This one       comes from an ABAP variable too. </li>
            <li>The new value that can be retrieved via this.value</li>
          </ol>
          <p>The function itself</p>
          <pre>
   <script  type=”text/javascript”>
             function is_changed(ori_val, new_val)
             {
             if (ori_val != new_val)
               needToConfirm  = true;
             }
   </script></pre>
          <p> </p>
          <p>Are  you concluded?

As you can see, you can make sure that the end user (and ultimately you yourself) don’t lose any entered data by leaving the application or page inadvertently. All this can be done with very little effort.

To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

  1. Alessandro Guarneri
    Nice one, very accurate.
    I’ve been forced to write something similar in the past with BSP, mainly because my webapp users came from SAPGui and claimed the same functionalities 😐
    Your weblog summarize and simplify the whole story.

    Alex

    (0) 
  2. Vision ONE Pires
    Hi Eddy.
    First, congratulations for the explanation, very clear.
    Can I use this function with button, in the onClick?

    Thanks.

    Regards.
    Fábio P. Copetti (Brazil) – BI-One
    SAP-SEM

    (0) 
    1. Eddy De Clercq Post author
      Hi,

      The purpose of these scripts is to see if a inputfield has been changed. Buttons don’t change at such. If you want intervene that things are not  saved or checked when clicking on a certain button, you might want to look at the other web log:
      Why do you leave me this way?

      Eddy

      (0) 
  3. Tatvagna Shah
    Hi Eddy,

    Very Very helpful…!! Just a confirmation…!

    Similar to onChange for inputField, is the change event for Dropdownlistbox onSelect.

    Thanks,
    Tatvagna.

    (0) 
  4. Richard Palotai
    Hi!

    Thanks for the blog.

    Does anyone know such a solution for a BSP page integrated into Portal?
    I would like to have such a feature for my BSP, so when the user clicks outside the BSP page within the Portal, the user should be asked about to leave the BSP page and let the portal navigate away or just cancel the whole navigation action.

    BR
    Richard Palotai

    (0) 
  5. Joshua Dell
    Hi Eddy, thanks for this. I have managed to incorporate this into Portal/BSP. However, when I click ‘Cancel’ after the prompt, the icon ‘Loading’ is shown, but doesn’t return back to the previous screen.

    However, if I close the window, and prompted with the message box,a nd click Cancel, it works fine.

    Do you have any idea why?

    Many thanks – few years late 🙂

    (0) 
    1. Joshua Dell
      Just to add: This is integrated under Portal, so my application is listed under Portal. If I click on another item in the Portal, the pop-up appears, but when click Cancel to stay on the page, the ‘Loading’ animation as you would usually get in Portal persists.
      (0) 
          1. Brian Titard
            I did look at it, but don’t think it really applies to my situation.  I am using Java application and it works fine if I test the iView from the content manager, but not when I run the application through the role and part of the portal desktop.
            (0) 

Leave a Reply