이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/04/03/how-to-use-business-graphics-in-webdynpro-abap/

 

How to Use Business Graphics in Webdynpro Abap?

April 3, 2014 | 4 Views |

 

비지니스 그래픽 UI 엘리먼트

 

 

우선 티코드 SE11에서 테이블을 하나 만듭니다.

 

 

ZBG_DEMO

/wp-content/uploads/2014/04/tabl_strucvture_424779.png
    만든 테이블에 데이터를 좀 넣어 줍니다.

 

tbl2.PNG

 

 

웹딘프로

 

 

  • 웹딘프로 편집기로 이동하여 윈도우와 뷰를 하나씩 만듭니다(SE80).
  • 뷰 컨트롤러의 컨텍스트 탭에서 노드 ZBG_DEMO를 만들고 전체 필드를 추가합니다.
  • 뷰 컨트롤러의 레이아웃 탭에서 비지니스 그래픽 UI 엘리먼트를 추가합니다.

 

   

  1. 비지니스 그래픽 UI 엘리먼트의 속성 series source에 노드 ZBG_DEMO를 바인딩합니다.

 

bg1.PNG

 

 

 

  1. category를 하나 만들고 속성 description 과 tooltip 에 ZBG_DEMO노드의 TITLE을 바인딩 합니다.

 

category.PNG

 

step 3개를 추가합니다.
STEP1에서 속성 value 에 ZBG_DEMO노드의 VALUE1을 바인딩 합니다. 속성 ID , Label, Tooltip 을 그림처럼 입력합니다.

 

step1.PNG

 

STEP2에서 속성 value 에 ZBG_DEMO노드의 VALUE2을 바인딩 합니다. 속성 ID , Label, Tooltip 을 그림처럼 입력합니다.

 

step2.PNG

 

STEP3에서 속성 value 에 ZBG_DEMO노드의 VALUE3을 바인딩 합니다. 속성 ID , Label, Tooltip 을 그림처럼 입력합니다.

 

step3.PNG

 

 

 

 

 

 

코드

 

 

  • 뷰 컨트롤러의 wddoinit( ) 메소드에 아래 코드를 입력합니다.

 

 

 

    DATA lo_nd_zbg_demo TYPE REF TO if_wd_context_node.

    DATA lo_el_zbg_demo TYPE REF TO if_wd_context_element.

    DATA ls_zbg_demo TYPE wd_this->element_zbg_demo.

    DATA lt_zbg_demo TYPE wd_this->elements_zbg_demo.

    DATA wa_zbg_demo Like LINE OF lt_zbg_demo.
*   navigate from  to  via lead selection

    lo_nd_zbg_demo =

wd_context->get_child_node( name = wd_this>wdctx_zbg_demo ).

*   @TODO handle non existant child

   IF lo_nd_zbg_demo IS INITIAL.

   ENDIF.

*   get element via lead selection

    lo_el_zbg_demo = lo_nd_zbg_demo->get_element( ).
*   alternative access  via index
*   lo_el_zbg_demo = lo_nd_zbg_demo->get_element( index = 1 ).
*   @TODO handle not set lead selection

    IF lo_el_zbg_demo IS INITIAL.

    ENDIF.

   SELECT * from zbg_demo into CORRESPONDING FIELDS OF TABLE lt_zbg_demo.

   lo_nd_zbg_demo->bind_table( lt_zbg_demo ) .

 

 

******************************************************************************************************

  • 저장하고 활성화 합니다. 어플리케이션을 만들고 테스트합니다.

******************************************************************************************************

 

  • 만약 ALV도 표시하고 싶다면 아래 코드도 추가합니다.

 

 

*********************************alv code…
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.

********************************************
*
*
*•Get the ALV Modal and make the config changes
DATA lo_interfacecontroller TYPE REF TO iwci_salv_wd_table .

lo_interfacecontroller =   wd_this->wd_cpifc_alv( ).

  DATA lv_value TYPE REF TO cl_salv_wd_config_table.

  lv_value = lo_interfacecontroller->get_model(

   ).

*Set Visible Row Count as 5

  lv_value->if_salv_wd_table_settings~set_visible_row_count( ‘5’ ).

* *** set display as graphics with table

  lv_value->IF_SALV_WD_TABLE_SETTINGS~SET_DISPLAY_AS(‘2’).
*  lv_value->IF_SALV_WD_TABLE_SETTINGS~SET_DISPLAY_AS(’03’).

**********************************************************************

 

 

실행 결과 화면

bg_screen.PNG

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/04/03/how-to-use-business-graphics-in-webdynpro-abap/

 

+ Recent posts