In this recipe, we will see how we can display data in the form of a navigation list. The navigation list is similar to a tree. However, the nodes appear in expanded form when displayed and may not be compressed. The entire navigation list may be expanded and compressed (however, not the data nodes within it).
We assume that we have an internal DATA_TAB table comprising of three fields, department, pernr, and sname, containing the department name, employee number, and the employee names respectively in sorted order according to the department name.
We will now see the steps required to create a navigation list:
- We will first create the context node related to the navigation list in the component controller. We create a context node by the name
NAVLIST.
- The Init Lead Selection field must be set to
No(since, in this case, we do not require lead selection and its initialization). The Singleton property of the node must be set asNo. The Cardinality field is set as0..n. - We then add three attributes to the context node
NAVLIST, namelyDISPLAYED_ TEXT,PERNR, andIF_SELECTEDbased on the typeSTRING,PERSNO, andWDY_BOOLEAN, respectively. - We then add a recursive node to the
NAVLISTcontext node and name itNAVLISTREC. Right-click on theNAVLISTcontext node and from the context menu that appears, navigate to Create | Recursive Node.
- We then drag-and-drop the context node
NAVLISTfrom the component controller to the relevant view controller (define the mapping). - Next, we will create the navigation list UI element on the Web Dynpro view. Right-click on the ROOTUIELEMENTCONTAINER option from the right pane of the layout editor and choose the context menu option Create Element. Enter
Navigationin the ID field and choose the type NavigationList in the pop up that appears.
- Right-click on the NAVIGATION node in the right pane of the layout editor and choose the insert header option from the context menu that appears. This will add the EXPANDABLETITLE header to the navigation list.
- Enter the text
Department Wise Listin the title property.
- For the defined navigation list, we will set the itemSource property as the
MAIN.NAVLISTcontext node defined earlier. For the itemText property, we set the value as theDISPLAYEDTEXTattribute of the context node.
- Once this is done, we will see the navigation list added in our layout editor, as shown in the following screenshot:
- The next step is to write the code for populating the context node with the appropriate department data that is to be shown in the navigation list.
- Appropriate variables are first defined for the navigation list node (
NODE_NAVLIST) and the navigation list recursive context node (RECNODE). - Also
ELEMENT_NAVLISTis defined as a reference to a context element using interfaceIF_WD_CONTEXT_ELEMENT.
- The next step is to write the code for populating the data within the navigation list. We run a loop at the
DATA_TABinternal table that contains data of the department and the personnel number and names. - At the beginning of a new department, we use the
AT NEW DEPARTMENTstatement to add data to the context nodeNAVLIST. - The
GET_CHILD_NODEmethod is called to get a reference to theNAVLISTcontext node; the reference is stored in theNODE_NAVLISTnavigation list node. TheNAVLISTstructure is assigned the department name. TheIS_SELECTABLEproperty is kept asfalse. - The
BIND_STRUCTUREnode is then used to add the department name to theNAVLISTcontext node element collection. The reference to the added element is returned and stored inELEMENT_NAVLIST. TheGET_CHILD_NODEmethod is then called to get the reference to theNAVLISTRECrecursion node for the element referred to by theELEMENT_NAVLISTvariable (this reference is stored inRECNODE) to be used later. - Outside the
AT .. ENDATblock is the area that is executed for all rows in the data internal tableDATA_TAB. This area pertains to the employee data (employee name and employee). We use theNAVLISTstructure in this block. - We assigned the value
ABAP_TRUEand the name and employee number to theIS_SELECTABLEproperty to be displayed in theDISPLAYED_TEXTfield. TheBIND_STRUCTUREnode is then used for adding the employee data to theNAVLISTRECrecursive node using theRECNODEreference variable.
We first created a NAVLIST context node containing a NAVLISTREC recursion node. We then inserted a navigation list UI element on the view layout. Appropriate binding between the navigation list UI element and the context nodes was defined. In the code, we formed the higher nodes in the navigation list displaying departments (at the beginning of a new department within the data table DATA_TAB). We then added child nodes (to the department nodes) displaying the employee names and number contained within the department.
The employee names within the department are selectable but may not be compressed (the IS_SELECTABLE property is set to TRUE in the code). This navigation list is displayed as shown in the following screenshot:
We can further enhance the application by activating the selection feature of the selectable nodes, that is, displaying the details of an employee selected on the user's screen. For this, we first need to enter a suitable name in the Onselect property of the navigation list in the layout editor. Then double-click in order to write the code. The GET_CHILD_NODE method will be called when a particular selectable row is clicked by the user. The handler method will be called when the SELECT event is raised.
This handler method contains one parameter, WDEVENT. In order to determine which employee number and name has been selected, we will add a new parameter, SEL_NODE, having type IF_WD_CONTEXT_ELEMENT. We then need to call the GET_STATIC_ATTRIBUTES method for the SEL_NODE parameter in order to retrieve the details of the selected node (including the employee number pernr).