Standard transaction CS03 with our new button

With a click on our new button the user can display the BOM as tree view:

Show video in full screen

The implementation is based on a generic HTML page that can be reused for any tree view. The appearance can be highly customized using CSS.

GuiXT Copy

// Display BOM ? 
if Q[transaction=CS03]
  
  // display button to open/close tree
  if V[bomTreeActive]
    PushButton	(toolbar)	"@JG\QClose BOM Tree@Close BOM Tree" _ 
      process="bomtree.txt"  
  else
    PushButton	(toolbar)	"@JG\QShow BOM Tree@Show BOM Tree"  _
      process="bomtree.txt"  
  endif
  
  // display tree view if activated
  if V[bomTreeActive]
    
    Box	(15,0)	(36,80)	"BOM Tree"
    WebView	(15.6,0)	(36,80.3)	"treeView.html"	_
      name="bomtree"  -transparent 
    
    // create new tree ? 
    // then call the JavaScript tree generation
    if V[bomTreeActive=C]
      CallJS <bomtree>.displayTree "bomTreeTable"  
      Set V[bomTreeActive] "X"  
    endif
  endif 
 
endif

The toolbar button calls the InputScript "bomtree.txt" to toggle the tree view:

InputScript bomtree.txt Copy

// toggle tree view

// tree view active? 
if V[bomTreeActive]

  // clear all treeviewvariables
  Clear V[bomTree*]
  
else

   // clear all treeviewvariables
  Clear V[bomTree*]
  
  // create BOM tree table
  Process bomTreeTable = bom_create_tree _
          "&F[Material]" "&F[Plant]"  "&F[BOM Usage]"   "&F[Valid From]" 

  // BOM found for the given material  
  if V[bomTreeTable]
    // set status "C"  for new tree view creation
    Set V[bomTreeActive] "C"
  endif
endif

Return

The BOM tree table is generated in the function "process_bom_create_tree". An SAP function module retrieves the BOM for the specified material, and the resulting data is transformed into a tree structure suitable for display.

GuiXT process_bom_create_tree.txt Copy

// create BOM tree
Parameter matnr   // material number
Parameter werks   // palnt
Parameter stlan   // BOM usage
Parameter datuv   // date


// Communication data for the BOM function module 

// structure for top material description
CreateStructure V[topmat] matnr maktx  

// table for BOM
CreateStructure V[stbrow] _
  stufe wegxx ttidx vwegx idnrk ojtxp menge meins
CreateTable V[stb] include=V[stbrow]


// further options for the BOM function module
Set V[capid] ""
Set V[mehrs] "X"

// read BOM
Call "CS_BOM_EXPL_MAT_V2" -currentUser -try _
  export.MTNRV="matnr" _
  export.WERKS="werks" _
  export.STLAN="stlan" _
  export.CAPID="capid" _
  export.MEHRS="mehrs" _
  export.DATUV="datuv" _
  import.TOPMAT="topmat" _
  import.STB="stb"

if not Q[ok]
  Message "E: &V[_rfcmessage]"
  Return 
endif


// create tree table
CreateStructure V[bomtreerow] _
  id _ 		// node id
  parentid _ 	// parent node id
  html _ 		// node text in THML format
  text _		// node text 
  tooltip _      // tooltip
  collapsed _    // X = collapsed node
  onclick        // if specifed, node becomes clickable
// the string isexecuted via guixt.input()   

CreateTable V[bomtreetable] include=V[bomtreerow]

// add root element
Set V[bomtreerow.id] "0:0"
Set V[bomtreerow.parentid] "" 
Set V[bomtreerow.html] "<b>&V[topmat.matnr] </b>"
Set V[bomtreerow.text] "&V[topmat.maktx]"
Set V[bomtreerow.tooltip] "Display material &V[topmat.matnr]"
Set V[bomtreerow.collapsed] ""
Set V[bomtreerow.onclick] _
  "U[matnr]:&V[topmat.matnr];OK:/OMM03,process=display_material.txt"
AppendRow V[bomtreerow] table=V[bomtreetable]


// add BOM elements
Set V[k] 1
label next

ReadRow V[stbrow] table=V[stb] index=&V[k]
if Q[ok]
  
  // Unique node id
  Set V[bomtreerow.id] "&V[stbrow.stufe]:&V[stbrow.wegxx]"
  
  // parent id
  Set V[parentstufe] &V[stbrow.stufe] - 1
  Set V[bomtreerow.parentid] "&V[parentstufe]:&V[stbrow.vwegx]"  
  
  // do not show decimal places 
  Set V[menge] &V[stbrow.menge] regex=",000$" regexReplace=""
  if Q[ok]
    Set V[stbrow.menge] &V[menge]
  endif 
  
  // materialnumber in Bold
  Set V[bomtreerow.html] "<b>&V[stbrow.idnrk] </b>" 
  
  // material text, needed quantity and unit
  Set V[bomtreerow.text] "&V[stbrow.ojtxp] (&V[stbrow.menge] &V[stbrow.meins])"
  
  // onclick string to callMM03 in new mode
  Set V[bomtreerow.onclick] 
    "U[matnr]:&V[stbrow.idnrk];OK:/OMM03,process=display_material.txt"
  
  // we display level 2 and above in collapsed mode
  if V[stbrow.stufe<2]
    Set V[bomtreerow.collapsed] ""
  else
    Set V[bomtreerow.collapsed] "X"
  endif
  
  AppendRow V[bomtreerow] table=V[bomtreetable]
  
  Set V[k] &V[k] + 1
  goto next
endif


// return tree table (structure and content)
Return V[bomtreetable]

The generic HTML page that can be reused for any tree view: