Loading Jquery Correctly into BSP Application

Sometimes, we might want to use jquery in our bsp applications to create some pretty views with animation. But if you couldn't load it correctly, it might be very annoying. Thanks to SAP's Automatic Delta Handling (ADH) in BSP applications, when the page loads We can load it multiple times unnecessarily and call respective functions multiple times, after you might end up with a messed up view. Here are some tips to use jquery correctly, to keep you out from these troubles.

  • First of all, we need a pyhsical path to our jquery library in our sap systems. To do that;

    • Download the latest jquery library: here.
    • Create a new BSP Application through transcation SE80.
    • Create a Subfolder under standart MIMEs folder.
    • Upload your library file
  • You may want to use your own javascript file to keep oftenly used functions. So whenever you want to use jquery, you just import this file, call predefined functions and you are ready. You don't need to write the same code under all of the BSPs that you use jquery in. You can import this JS file by following the previous method.  I call this JS file MainJS.js from now on. ?

    Here are some functions that helps us loading our javascript libraries including jquery.
    function isMyScriptLoaded(url) {
        var scripts = document.getElementsByTagName('script');
        for (var i = scripts.length; i--;) {
            if (scripts[i].src == url) return true;
        }
        return false;
    }
    
    function loadJavacript(url, callback) {
        if (!isMyScriptLoaded(url)) {
            var Script = document.createElement('script');
            Script.setAttribute('src', url);
            Script.setAttribute('type', 'text/javascript');
            Script.onload = callback;
            document.getElementsByTagName("head")[0].appendChild(Script);
        }
    }
    
    function loadJquery(callback) {
        var jquery = '{Path-to-your-jquery-library}';
        loadJavacript(jquery, callback);
    }

    We need to check if the library is already loaded into bsp file.

  • So let's have a look at that bsp application that we want to use jquery:

    <%@page language="abap" %>
    <%@extension name="thtmlb" prefix="thtmlb" %>
    <%@extension name="chtmlb" prefix="chtmlb" %>
    <%@extension name="bsp" prefix="bsp" %>
    
    <chtmlb:config mode = "RUNTIME"
                   xml  = "<%= controller->configuration_descr->get_config_data( ) %>" />
    
    <script type="text/javascript">
      
      var PathToMainJS = '{Path-to-your-MainJS}';
       
      var isLoaded;
      var scripts = document.getElementsByTagName('script');
        for (var i = scripts.length; i--;) {
              if (scripts[i].src == PathToMainJS ){
                isLoaded = true;
                break;
              }
        }
    
      if(!isLoaded){
            var Script = document.createElement('script');
            Script.setAttribute('src', PathToMainJS);
            Script.setAttribute('type', 'text/javascript');
            Script.onload = function () {
                              loadJquery(function(){ //TODO: Whatever you want to do after jquery is loaded }
                            };
      }
    
    </script>                                                 
    • Appearently, we need to load this MainJS file to load other javascript libraries:

      • Check the library is already loaded.
      • If it is not; create a script tag in html and set the attributes, respectively for you MainJS file.
      • Afther the loading is finish, call the function whic is in MainJS file and load the jquery library.

For the last thing, You need to disable ADH (Automatic Delta Handling) for your bsp application to run everything smoothly. To disable ADH you can check this wiki page and learn more.

So now, you can use jquery in this bsp without messing up the view itself.

 

ABOUT Volkan Kahyaoğlu

SAP CRM/ABAP Consultant. Worked on Web and Mobile Development by using ASP.NET MVC, Html, jQuery, Ajax, CSS and Android.

RELATED POSTS

COMMENTS

comments powered by Disqus