Skip to Content

One problem of the HTMLB Tree is the limitation of nodes. SAP recommends to use this element with not more than 30-50 nodes. Actually it should be possible to load the opened Subtree via Ajax. It is possible, as the following Implementation shows.

Before we are going into the details, I would like to point out the limitations of this implementation. The following code should not be used in productive environment. The shown solution runs only on Microsoft Internet Explorer. On other Browser it may be run, on Firefox it does not run. Furthermore the following solution uses the rendering of SAP Sneak Preview NetWeaver 04s SP7. If the rendering is changed it could happen, that the solution does not run anymore.

But now we can start.

To demonstrate the solution I choosed the table SBOOK. This table contains more than 100.000 entries and every entry can be reached with this tree.

On the different levels we show the following data:

Level 1: Airlines (Table SCARR)

Level 2: Flight schedule (Table SPFLI)

Level 3: The days where a flight exist on the selected flight (Table SFLIGHT)

Level 4: The Alphabet to limit the shown passengers (I know, a very pragmatic solution)

Level 5: Single Flight Booking (SBOOK)

image

    // Global Variable for the Request-Object

    var req;

    var global_id;

    var form_id = ‘selection’;

    var tree_id = ‘myTree’;

    var global_node; //Save the Copy-Node

    function loadSubTree(id) {

     if (id != “”)

     {

       //setCursor(‘wait’);

       //Read level

       var level = document.getElementById(id+’-cnt-start’).level;

       if (req && (req.readyState == 2 || req.readyState == 3)) {

         req.abort();

         // abort a running request

       }

       global_id = id;

       loadXMLDoc(‘getTreeview.xml?id=’id‘&level=’+level);

     }

    }

    function loadXMLDoc(url) {

      if (window.XMLHttpRequest) {

         req = new XMLHttpRequest();

          req.onreadystatechange = processReqChange;

          // Send Request

          req.open(“GET”, url, true);

          req.send(null);

      } else if (window.ActiveXObject) {

          req = new ActiveXObject(“Microsoft.XMLHTTP”);

          req.onreadystatechange = processReqChange;

          // Send Request

          req.open(“GET”, url, true);

          req.send();

      }

    }

    function processReqChange() {

      // Check Status “4” (complete)

      if (req.readyState == 4) {

        // and Server HTTP-Statuscode 200

          if (req.status == 200) {

          // Insert SubTree

             insertSubTree();

             // Mauszeiger auf Normalzustand zuruecksetzen

             //setCursor(‘auto’);

          } else {

              alert(“Communication Error with Server:\n” +

                  req.statusText);

          }

      }

    }

    function insertSubTree() {

      var response;

      var nodeId;

      response = req.responseXML;

      var emptyNode;

      var treeid;

      var childid;

      var text;

      var clientclick;

      var status;

      global_node = null; //Refresh the copy-node

      if (response.getElementsByTagName(“tviewnode2”)[0].childNodes.length == 0){

        emptyNode = true;

        insertTreeChild(emptyNode, treeid, childid, text, clientclick, status);

      }

      else{

        var counter = 0;

          while(response.getElementsByTagName(“text”)[counter] != null){

            emptyNode = false;

            treeid = response.getElementsByTagName(“treeid”)[counter].firstChild.data;

            childid = response.getElementsByTagName(“childid”)[counter].firstChild.data;

            text = response.getElementsByTagName(“text”)[counter].firstChild.data;

            if (response.getElementsByTagName(“clientclick”)[counter].childNodes.length != 0){

              clientclick = response.getElementsByTagName(“clientclick”)[counter].firstChild.data;

            }

            else{

              clientclick = “”;

            }

            status = response.getElementsByTagName(“status”)[counter].firstChild.data;

            insertTreeChild(emptyNode, treeid, childid, text, clientclick, status);

            counter++;

        }

      }

    }

    function insertTreeChild(emptyNode, treeid, childid, text, clientclick, status) {

      //Copy parent and change it

      var pwNode;

      if (global_node == null){

        pwNode = document.getElementById(global_id).cloneNode(true);

        global_node = pwNode.cloneNode(true);

      }

      else{

        pwNode = global_node.cloneNode(true);

      }

      document.getElementById(global_id+’-child’).appendChild(pwNode);

      //Manipulate Styles, Classes …

      pwNode.status = ‘closed’;

      //Class

      var level = pwNode.className.substring(7,8);

      var newLevel = parseInt(level)+1;

      pwNode.className = ‘urTreNl’+newLevel;

      //paddingLeft

      var pLeft = parseInt(pwNode.style.paddingLeft);

      pLeft = pLeft + 10;

      pwNode.style.paddingLeft = pLeft+’px’;

      //Change Text

      var pwNodeText = pwNode.firstChild.firstChild.lastChild.firstChild;

      pwNodeText.parentNode.level = newLevel;

      if (emptyNode == true){

        nodeId = global_id+’NoEntry’;

        pwNodeText.nodeValue = ‘No Entrys’;

        pwNodeText.parentNode.id = nodeId+’-cnt-start’;

        clientclick = ”;

        status = ‘final’;

      }

      else{

        nodeId = treeid+childid;

        pwNode.id = nodeId;

        pwNodeText.nodeValue = text;

        pwNodeText.parentNode.id = nodeId+’-cnt-start’;

      }

      var global_idInt = global_id.substring(7, global_id.length);

      //Clientclick

      var onClickFunction = clientclick;

      var onClick = new Function(“”, onClickFunction);

      //pwNodeText.parentNode.setAttribute(‘onclick’, onClick); //to SP13

      pwNode.setAttribute(‘onclick’, onClick);  //from SP13

      //Image

      var pwNodeImg = pwNode.firstChild.firstChild.firstChild;

      if (status != ‘final’){

        pwNodeImg.className = ‘urTreExpClo’;

      }

      else{

        pwNodeImg.className = ‘urTreExpNc’;

      }

      onClickFunction = “sapUrMapi_Tree_toggle(tree_id,'”+nodeId+”‘);”;

      onClick = new Function(“”, onClickFunction);

      pwNodeImg.setAttribute(‘onclick’, onClick);

      pwNodeImg.setAttribute(‘id’, nodeId+’-exp’);

      //Create Inputfield

      var hInput = document.getElementById(‘T’+global_id).cloneNode(true);

      hInput.setAttribute(‘name’, ‘T’+nodeId);

      hInput.setAttribute(‘id’, ‘T’+nodeId);

      hInput.setAttribute(‘value’, ” “);

      document.getElementById(‘T’+global_id).parentNode.appendChild(hInput);

      //Create id-child

      var pwNodeChild = document.getElementById(global_id+’-child’).cloneNode(true);

      pwNodeChild.setAttribute(‘id’, nodeId+’-child’);

      while(pwNodeChild.hasChildNodes()){

        pwNodeChild.removeChild(pwNodeChild.firstChild);

      }

      document.getElementById(global_id+’-child’).appendChild(pwNodeChild);

    }

   

    • event handler for data retrieval

data: itab_scarr   type table of scarr,

      wa_scarr     like line of itab_scarr.

data: wa_treetable like line of treetable.

select * from scarr into table itab_scarr.

loop at itab_scarr into wa_scarr.

  wa_treetable-treeid = ‘myTree’.

  clear wa_treetable-parentid.

  wa_treetable-childid = wa_scarr-carrid.

  wa_treetable-text = wa_scarr-carrname.

  wa_treetable-tlevel = ’01’.

  wa_treetable-status = ‘closed’.

  wa_treetable-toggle = ‘ ‘.

  append wa_treetable to treetable.

endloop.

default.htm – Page Attributes

image

<br><br>
getTreeview.xml – Layout<br>
<textarea rows=”6″ cols=”80″>
<%@page language=”abap”%>
<?xml version=”1.0″?>
<%data: wa_xml like line of xml.
  loop at xml into wa_xml.%>
    <%=wa_xml%>
<%endloop.%>
</textarea>
<br>
<br>
getTreeview.xml – OnInitalization<br>
<textarea rows=”10″ cols=”80″>

  • event handler for data retrieval

data: treetable type tview2,

      wa_treetable like line of treetable.

data: wa_atanode      like line of treetable,

      wa_root_atanode like line of treetable.

data: i_output type string.

data: wa_xml like line of xml.

data: i_carrid     type s_carr_id,

      i_connid     type s_conn_id,

      i_fldate     type s_date.

case level.

  when ‘1’.

  • Read Flight schedule

    data: i_deptime(8) type c,

          i_arrtime(8) type c,

          itab_spfli type table of spfli,

          wa_spfli   like line of itab_spfli.

  • Get CARRID from ID

   i_carrid = id+6. “myTreeXX where XX = carrid

   select * from spfli into table itab_spfli where carrid = i_carrid.

   loop at itab_spfli into wa_spfli.

     wa_treetable-treeid = ‘myTree’.

     wa_treetable-parentid = id.

     concatenate wa_spfli-carrid

                 wa_spfli-connid

                 into wa_treetable-childid.

     call function ‘CONVERSION_EXIT_TIMLO_OUTPUT’

       exporting

         input         = wa_spfli-deptime

       importing

         output        = i_deptime.

     i_deptime = i_deptime(5).

     call function ‘CONVERSION_EXIT_TIMLO_OUTPUT’

       exporting

         input         = wa_spfli-arrtime

       importing

         output        = i_arrtime.

     i_arrtime = i_arrtime(5).

     concatenate ‘From:’

                 wa_spfli-cityfrom

                 ‘To:’

                 wa_spfli-cityto

                 ‘Depature:’

                 i_deptime

                 ‘Arrival:’

                 i_arrtime

                 into wa_treetable-text

                 separated by space.

     wa_treetable-tlevel = ’02’.

     wa_treetable-status = ‘closed’.

     wa_treetable-toggle = ‘ ‘.

     append wa_treetable to treetable.

   endloop.

  when ‘2’.

  • Read Flight schedule

    data: itab_sflight type table of sflight,

          wa_sflight   like line of itab_sflight.

  • Get carrid from ID

   i_carrid = id+6(2). “myTreeXX where XX = carrid

  • Get connid from ID

   i_connid = id+8. “myTreeXXYY where YY = connid

   select * from sflight into table itab_sflight

                    where carrid = i_carrid

                      and connid = i_connid.

   loop at itab_sflight into wa_sflight.

     wa_treetable-treeid = ‘myTree’.

     wa_treetable-parentid = id.

     concatenate wa_sflight-carrid

                 wa_sflight-connid

                 wa_sflight-fldate

                 into wa_treetable-childid.

     call function ‘CONVERT_DATE_TO_EXTERNAL’

       exporting

         date_internal = wa_sflight-fldate

       importing

         date_external = wa_treetable-text       .

     wa_treetable-tlevel = ’03’.

     wa_treetable-status = ‘closed’.

     wa_treetable-toggle = ‘ ‘.

     append wa_treetable to treetable.

   endloop.

  when ‘3’.

    data: i type int4.

    do.

     wa_treetable-treeid = ‘myTree’.

     wa_treetable-parentid = id.

     concatenate id+6(14)

                 sy-abcde+i(1)

                 into wa_treetable-childid.

     concatenate sy-abcde+i(1)

                 ‘…’

                 into wa_treetable-text       .

     wa_treetable-tlevel = ’04’.

     wa_treetable-status = ‘closed’.

     wa_treetable-toggle = ‘ ‘.

     append wa_treetable to treetable.

     i = i + 1.

     if i >= numofchar( sy-abcde ).

       exit.

     endif.

    enddo.

  when ‘4’.

  • Read Flight booking

    data: itab_sbook type table of sbook,

          wa_sbook   like line of itab_sbook,

          i_passname type s_passname.

  • Get carrid from ID

   i_carrid = id+6(2). “myTreeXX where XX = carrid

  • Get connid from ID

   i_connid = id+8(4). “myTreeXXYY where YY = connid

  • Get fldate from ID

   i_fldate = id+12(8). “myTreeXXYYZZZZZZZZ where ZZ = fldate

  • Get First Item of name

   concatenate id+20(1)

               ‘%’

               into i_passname.

   select * from sbook into table itab_sbook

                    where carrid = i_carrid

                      and connid = i_connid

                      and fldate = i_fldate

                      and passname like i_passname.

   loop at itab_sbook into wa_sbook.

     wa_treetable-treeid = ‘myTree’.

     wa_treetable-parentid = id.

     concatenate wa_sbook-carrid

                 wa_sbook-connid

                 wa_sbook-fldate

                 wa_sbook-bookid

                 into wa_treetable-childid.

     concatenate ‘Booking number:’

                 wa_sbook-bookid

                 wa_sbook-passname

                 into wa_treetable-text

                 separated by space.

     wa_treetable-tlevel = ’05’.

     wa_treetable-status = ‘final’.

     wa_treetable-toggle = ‘ ‘.

     concatenate ‘alert(“Booking number: “+”‘

                 wa_sbook-bookid

                 ‘”);’

                 into wa_treetable-clientclick.

     append wa_treetable to treetable.

   endloop.

endcase.

wa_xml = ‘

image

And here you can get the SAPLink-File

And here you can read the german version of this blog

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply