ALV tabla con gráficos de negocios (WebDynpro para ABAP)

Por Swarna Ramya R, Wipro

En uno de mis escenarios, tengo que mostrar los detalles de los empleados en una tabla con los gráficos de negocios. Los detalles de los empleados contienen la unidad de organización que está trabajando, porcentaje de asignación, fecha de inicio y Fecha final. Podemos lograr esto con el ALV.

Procedimiento:

1. Crear un componente con WebDynpro ZWA_ALV_BUSINESS_GRAPH nombre.

2. Pulse Intro.

3. En el controlador de componentes, Ir a la pestaña(tab) Context, haga clic derecho al CONTEXT y seleccione Crear > Node.

4. Dar el nombre de nodo como EMPLOYEE con cardinalidad 0 .. n y Prensione Enter.

5. Crear cuatro atributos dentro de ese nodo mediante un clic derecho del EMPLOYEE y seleccione Crear > Atribute.

6. Los atributos son del siguiente tipo.

ZZORGEH - ORGEH ZZ_PER_ASSG - ZZASSG BEGDA - SYDATUM ENDDA - SYDATUM

7. Ir a la vista CONTEXT, arrastrar y soltar el nodo EMPLOYEE en la vista CONTEXT.

8. A continuación, haga clic derecho en el CONTEXT y seleccione Crear > Atributo.

9. Dar Nombre del atributo como EMP_NO con tipo CHAR8 y pulse Enter.

10. En la pestaña(tab) Layout de la vista, haga clic en el ROOTUIELEMENTCONTAINER e insertar elemento. Se abrirá un Pop-Up para la creación de un elemento.

11. Escriba Label en el campo Name y seleccione Label como Tipo y pulse Enter.

12. Crear otro elemento con el nombre INPUT y seleccione el tipo InputField y pulse Enter.

13. En las Propiedades de Label, selecciona INPUT para el campo labelfor y digite ‘Enter The Employee Number’en el campo de TEXT.

14. Crear un contexto de enlace para el INPUT haciendo clic en el botón en la parte derecha de la propiedad VALUE. Se abrirá una ventana emergente con el elemento de contexto. Seleccione el atributo EMP_NO y pulseEnter.

15. Crear otro elemento haciendo clic derecho en ROOTUIELEMENTCONTAINER e insertar el elemento. Se abrirá un Pop-Up para la creación.

16. Introduzca BUTTON en el campo Name y seleccione Button como Tipo y pulse Enter.

17. A continuación, crear una acción para el evento OnAction del botón haciendo clic. Crear acción, y a continuación, dar el nombre de Acción GET_EMPLOYEE_DETAILS y pulse Enter.

18. Crear otro elemento de la interfaz con el nombre VIEW y de tipo seleccione ViewContainerUIElement.

19. Ir a la pestaña(tab) Outbound Plugs en la vista, y ingrese TO_ALV_TABLE en Plug Name.

20. Ir al componente ZWA_ALV_BUSINESS_GRAPH y haga doble clic. En la pestaña(tab) “Used Component”, declarar el componente de ALV, como se muestra a continuación y pulseEnter.

21. Ahora ve a la vista MAIN, en la pestaña Properties haga clic en el botón Create Controller Usage, como se muestra a continuación.

22. Se abrirá una pantalla con entradas en Component Use. Seleccione el Component Use con el controlador de interfaz de ALV, como se muestra a continuación. Pulse Enter.

23. Se mostrará la siguiente vista en la pestaña Properties.

24. Luego vaya ZWA_ALV_BUSINESS_GRA del Window. A continuación, Haga clic derecho la vista y seleccione Embed View.

25. Se abrirá un Pop-up para la vista Insertar.

26. Haga clic en F4, colocando el cursor en el campo “ View to Be Embedded”.

27. Se abrirá una pantalla para seleccionar una vista. Seleccione EMPTYVIEW y pulse Enter.

28. Los valores serán colocados al Insertar una vista. A continuación, pulse Enter.

29. Una vez más, hacer click a la derecha en la vista y seleccione Embed View.

30. Se abrirá un Pop-up para la vista Insertar.

31. Haga clic en F4, colocando el cursor en el campo ‘View to Be Embedded’.

32. Seleccione ALV en Component Use con la vista TABLE en View/Interface y pulseEnter.

33. Los valores serán colocados en Embed a View. PulseEnter. (Nota: la vista vacía se coloca delante dentro de la vista es para ocultar la tabla de ALV al principio).

34. Haga clic derecho en TO_ALV_TABLE y seleccione Create Navigation Link.

35. Se abrirá un pop-up por elegir Destination for Navigation. Haga clic en F4 en el campo Dest.View.

36. Seleccione la tabla en la columna de la View / Interface view y pulse Enter.

37. Esto mostrará las entradas como se muestra a continuación. A continuación, pulse Enter.

38. Ahora ir a “Component usages” en el árbol de la izquierda y ampliar ALV y de doble clic en el INTERFACECONTROLLER_USAGE. Luego haz clic en el botón de Uso del controlador en la ventana del lado derecho.

39. Se abrirá una pantalla para seleccionar el Component Use Allí, seleccionar la COMPONENTCONTROLLER en el View / Controller. A continuación, pulse Enter.

40. Luego de arrastrar y soltar el nodo EMPLOYEE en el nodo DATA del CONTEXT INTERFACECONTROLLER.

41. Ir a la vista MAIN y haga clic en la pestaña(tab) Methods.

42. En el Método ONACTIONGET_EMPLOYEE_DETAILS, escribir la siguiente codificación.

ONACTIONGET_EMPLOYEE_DETAILS:

method ONACTIONGET_EMPLOYEE_DETAILS .

wd_this->fire_to_alv_table_plg( ). DATA lo_nd_employee TYPE REF TO if_wd_context_node. DATA lo_el_employee TYPE REF TO if_wd_context_element. DATA lt_employee TYPE wd_this->elements_employee. DATA ls_employee TYPE wd_this->element_employee.* navigate from <CONTEXT> to <EMPLOYEE> via lead selection lo_nd_employee = wd_context->get_child_node( name = wd_this->wdctx_employee ). DATA lo_el_context TYPE REF TO if_wd_context_element. DATA ls_context TYPE wd_this->element_context. DATA lv_emp_no LIKE ls_context-emp_no. DATA lv_num TYPE I.* get element via lead selection lo_el_context = wd_context->get_element( ).* get single attribute lo_el_context->get_attribute( EXPORTING name = `EMP_NO` IMPORTING value = lv_emp_no ).

SELECT ZZORGEH ZZ_PER_ASSG BEGDA ENDDA INTO CORRESPONDING FIELDS OF TABLE lt_employee FROM PA9027 WHERE PERNR EQ lv_emp_no AND ENDDA EQ '99991231'. DESCRIBE TABLE lt_employee LINES lv_num. lo_nd_employee->BIND_TABLE( lt_employee ). data lo_cmp_usage type ref to if_wd_component_usage. lo_cmp_usage = wd_this->wd_cpuse_alv( ). if lo_cmp_usage->has_active_component( ) is initial. lo_cmp_usage->create_component( ). endif. DATA lo_INTERFACECONTROLLER TYPE REF TO IWCI_SALV_WD_TABLE . lo_INTERFACECONTROLLER = wd_this->wd_cpifc_alv( ). DATA lo_value TYPE ref to cl_salv_wd_config_table. lo_value = lo_interfacecontroller->get_model( ). * Set Visible Row Count as 5 lo_value->if_salv_wd_table_settings~set_visible_row_count( lv_num ).* The Config Table Setting to Display Table & Business Graphics DATA: l_ref_config_table TYPE REF TO if_salv_wd_table_settings, l_display_as TYPE salv_wd_constant VALUE '02'. l_ref_config_table ?= lo_value. l_ref_config_table->set_display_as( value = l_display_as ). endmethod.

43. Guarde la aplicación y activar los componentes.

44. Crear la aplicaciones WebDynpro, guardar y probar la aplicación.

Salida:

1.Enterduce el número de empleado en el campo de entrada y haga clic en el botón “Get Details”.

2. La salida se mostrará como se muestra a continuación.