Este documento explica cómo crear una tabla con estructura de árbol en Web Dynpro usando la opción TreeByKeyTableColumn. Se detallan los pasos para definir los atributos necesarios en el nodo del contexto, añadir una columna maestra de tipo TreeByKeyTableColumn a la tabla y rellenar los datos de forma que se genere una estructura con varios niveles. Finalmente, se incluye un ejemplo de código para crear una tabla árbol con tres niveles de profundidad.

1. WD4A: Tabla Árbol (TreeByTableColumn)
En
el
artículo
anterior
comentamos
como
crear
una
tabla
con
el
UI
Element
Table
de
Web
Dynpro.
Existe
la
posibilidad
de
que
este
elemento
tenga
estructura
de
árbol.
Para
ello,
es
necesario
añadir
una
masterColumn
que
será
la
encargada
de
contraer
o
expandir
los
nodos.
Existen
dos
tipos
de
masterColumn:
§ TreeByKeyTableColumn
§ TreeByNestingTableColumn
En
este
artículo
se
muestran
los
pasos
de
cómo
crear
una
tabla
con
el
primer
tipo
de
columna
maestra.
TreeByKeyTableColumn
El
primer
paso
para
crear
una
tabla
árbol
es
como
el
de
cualquier
tabla,
crear
un
nodo
(cardinalidad
0…n
o
1…n)
en
el
contexto.
En
este
nodo,
a
parte
de
los
atributos
que
contienen
la
información
que
se
quiere
mostrar,
es
necesario
definir
los
siguientes:
§ ROW_KEY
(String):
La
clave
de
la
fila
§ PARENT_KEY
(String):
La
clave
de
la
fila
padre
§ EXPANDED
(WDY_BOOLEAN):
Para
controlar
si
la
fila
esta
expandida
o
no.
§ IS_LEAF
(WDY_BOOLEAN):
Para
indicar
si
la
fila
es
una
hoja
o
no.
§ NODE_CONTENT:
Este
atributo
es
opcional,
y
guardará
la
información
de
la
columna
maestra.
En
el
ejemplo
de
este
artículo,
tenemos
dos
atributos
a
mostrar,
por
lo
tanto
nuestro
nodo
del
contexto
quedará
de
la
siguiente
forma:
A
continuación,
se
crea
una
tabla
en
el
layout
y
añadimos
las
columnas
de
los
atributos
que
queremos
mostrar.
En
el
ejemplo
añadimos
dos
columnas
con
un
text_view como cell_editor
con
la
propiedad
text bindeada
a
los
atributos
“columna1”
y
“columna2”.

2. Una
vez
creada
la
tabla,
añadimos
una
masterColumn del tipo TreeByKeyTableColumn.
En
las
propiedades
de
esta
nueva
columna,
relacionamos
los
atributos
que
hemos
creado
con
anterioridad:
La
columna
maestra
también
puede
mostrar
datos
como
cualquier
columna,
añadiéndole
cualquier
tipo
de
cell_editor.
Lo
que
diferencia
esta
columna
es
que
siempre
estará
en
la
primera
posición,
y
que
dará
la
opción
de
contraer
o
expandir
los
nodos
de
la
tabla.
En
nuestro
caso,
añadimos
otro
text_view
relacionado
con
el
atributo
“NODE_CONTENT”
Con
estos
pasos
ya
tenemos
definida
la
tabla
en
el
layout.
Ahora,
a
la
hora
de
rellenar
el
nodo
del
contexto
que
hace
referencia
a
la
tabla,
será
necesario
que
estos
atributos
tengan
unos
valores
específicos,
además
de
los
datos
que
queremos
mostrar.
En
el
siguiente
método
se
tiene
un
ejemplo
de
cómo
crear
una
tabla
con
tres
niveles,
con
tres
hijos
por
nivel.
METHOD crear_arbol.
DATA lo_nd_tabla_arbol TYPE REF TO if_wd_context_node.
DATA lt_tabla_arbol TYPE wd_this->elements_tabla_arbol.
DATA ls_tabla_arbol LIKE LINE OF lt_tabla_arbol.
lo_nd_tabla_arbol = wd_context->get_child_node( name = wd_this->wdctx_tabla_arbol ).
DATA: lvl1_index TYPE string,
lvl2_index TYPE string,
lvl3_index TYPE string.
**Comenzamos el árbol
* NIVEL 1
DO 3 TIMES.
** Como clave de fila cogemos el numero de iteración

3. lvl1_index = sy-index.
CONDENSE lvl1_index.
** Datos para la masterColumn
ls_tabla_arbol-row_key = lvl1_index.
ls_tabla_arbol-parent_key = ''."Como es el nivel 1 no tiene padre
ls_tabla_arbol-is_leaf = abap_false."Como tiene hijos no es hoja
** Los datos a mostrar
ls_tabla_arbol-node_content = ls_tabla_arbol-row_key.
ls_tabla_arbol-columna1 = '1'.
ls_tabla_arbol-columna2 = 'Rama'.
** Añadimos la fila a la tabla
INSERT ls_tabla_arbol INTO TABLE lt_tabla_arbol.
* NIVEL 2
DO 3 TIMES.
** Como clave de fila cogemos la clave del padre y el numero de iteración
lvl2_index = sy-index.
CONDENSE lvl2_index.
CONCATENATE lvl1_index `.` lvl2_index INTO lvl2_index.
** Datos para la masterColumn
ls_tabla_arbol-row_key = lvl2_index.
ls_tabla_arbol-parent_key = lvl1_index."Clave del padre
ls_tabla_arbol-is_leaf = abap_false."Como tiene hijos no es hoja
** Los datos a mostrar
ls_tabla_arbol-node_content = ls_tabla_arbol-row_key.
ls_tabla_arbol-columna1 = '2'.
ls_tabla_arbol-columna2 = 'Rama'.
** Añadimos la fila a la tabla
INSERT ls_tabla_arbol INTO TABLE lt_tabla_arbol.
* NIVEL 3
DO 3 TIMES.
** Como clave de fila cogemos la clave de los padres y el numero de iteración
lvl3_index = sy-index.
CONDENSE lvl3_index.
CONCATENATE lvl2_index `.` lvl3_index INTO lvl3_index.
** Datos para la masterColumn
ls_tabla_arbol-row_key = lvl3_index.
ls_tabla_arbol-parent_key = lvl2_index."Clave del padre
ls_tabla_arbol-is_leaf = abap_true."Como no tiene hijos es hoja
** Los datos a mostrar
ls_tabla_arbol-node_content = ls_tabla_arbol-row_key.
ls_tabla_arbol-columna1 = '3'.
ls_tabla_arbol-columna2 = 'Hoja'.
** Añadimos la fila a la tabla
INSERT ls_tabla_arbol INTO TABLE lt_tabla_arbol.
ENDDO.
ENDDO.
ENDDO.
**Pasamos la tabla al contexto
lo_nd_tabla_arbol-
>bind_table( new_items = lt_tabla_arbol set_initial_elements = abap_true ).
ENDMETHOD.
Al
ejecutar
el
método
anterior,
y
con
el
layout
definido
como
se
ha
comentado
anteriormente,
al
abrir
la
aplicación
Web
Dynpro
el
resultado
será
una
tabla
como
la
de
la
siguiente
imagen.