jQuery FrontEnd – Business Object Repository

The entry point of the application is bor.jsp getting a default struts2 action via convention plugin. It consists of two jQuery components: jsTree and UI Tabs.

jsTree
The business objects are represented as main tree nodes with their bapis as leaf nodes. The main nodes are loaded at startup via GETBOList servlet. Leaf nodes are only loaded when a main node gets selected via GetBAPIList servlet. Data for all nodes is loaded via ajax in a json format compatible with the jsTree component.

Example of the json format used:

{
   "objType":"BUS4003",
   "treeData":[
      {
            "state":null,"data":"FindDetail",
            "attributes":{"method":"FindDetail","type":"BUS4003"}
      },
      {
            "state":null,"data":"SaveReplica",
            "attributes":{"method":"SaveReplica","type":"BUS4003"}
      },
      {
            "state":null,"data":"Update",
            "attributes":{"method":"Update","type":"BUS4003"}
      }
   ]
}

data property is used by jsTree to render text for the current node. state property makes the difference between leaf and non-leaf nodes. attributes properties represent whatever custom data a node holds, in our case business object identified by object type and corresponding bapi identified by method name.

Besides providing the interaction for browsing/selecting business objects and their corresponding bapis, jsTree has another role: it dynamically updates the urls for the Detail and Documentation tabs from UI Tabs. It also reloads the current selected tab with the corresponding new url.

UI Tabs
Contains the Detail and Documentation tabs. Content is loaded via ajax under html format represented by several jsp pages: bapi_info.jsp, bo_info.jsp, generic_docs.jsp. The urls for these two tabs constantly changed based on current bo/bapi selection from jsTree.

The Detail tabs also serves as a place for displaying run-time errors like not being able to connect to the given abap stack.

Leave a Reply

Your email address will not be published. Required fields are marked *