SAP ALV Tree 정리 - 1 ( 데이터에 따른 노드 설정 )

# ALV Tree이란?

---

# SAP ALV Tree는 트리 구조 데이터를 시각화하는 데 필요한 기능이다. ALV Tree는 계층적인 데이터를 구조를 시각화하고 관리할 수 있도록 확장된 형태이다. 

 

(예시) Sap alv Tree

 

#. 계층 구조 표현 : 트리 노드를 통해 루트-자식-리프 관계를 시각화한다. 

- 루트 노드 : 최상위 노드.

- 자식 노드 : 루트 또는 상위 노드에 연결된 하위 노드.

- 리프 노드 : 자식 노드가 없는 말단 노드 

 

 

# 이번 예제는 더블클릭 시 해당 정보들이 들어갈 수 있게 만드는 ALV Tree이다.

 

# 또한, 정적으로 노드 설정하는 것이 아닌 데이터에 따라서 노드를 넣는 글이기 때문에 참고하자. 

 

 

# 사전 작업?

---

# 데이터가 몇 단계로 나뉘는지 체크를 해주어야 한다.

# 데이터 단계마다 텍스트를 넣을 건지, 아이콘을 넣을 건지 등 스펙을 구성해야 한다.  

# 이벤트 설정이 있는지, 노드 더블클릭인지, 아이템 더블클릭인지도 체크 해야 한다. 

 

# 루트 노드 : SFLIGHT에 해당하는 항공사 ID( Carrid )

# 자식 노드 : 항공사 연결 편( Connid )

 # 리프 노드 : 항공편

 

 

# ALV Tree 과정?

---

1. Custom Container or Docking Contaniner 생성 및 Grid 연결

2. ALV 필드 카탈로그 생성

3. ALV Tree 헤더 설정 

4. ALV Tree 객체 생성 

5. ALV Tree 이벤트 처리 

6. 데이터 설정 ( 이건 다음 글에서 정리하겠다 )

7. ALV에 데이터 Call 보내기 

 

 

# Screen Layout

---

 

 

# TOP 

---

DATA:
  G_CONTAINER TYPE REF TO CL_GUI_CUSTOM_CONTAINER,
  G_TREE TYPE REF TO CL_GUI_ALV_TREE.

 

 

# Process Before Output

---

 

# 01. Custom Container or Docking Contaniner 생성 및 Grid 연결

  IF G_TREE IS INITIAL.

    CREATE OBJECT G_CONTAINER
      EXPORTING
        CONTAINER_NAME = 'TREE'.


    CREATE OBJECT G_TREE
      EXPORTING
        PARENT              = G_CONTAINER
        NODE_SELECTION_MODE = CL_GUI_LIST_TREE=>NODE_SEL_MODE_SINGLE
        ITEM_SELECTION      = ''
        NO_HTML_HEADER      = 'X'
        NO_TOOLBAR          = ''.


  ENDIF.

 

- NO_HTML_HEADER : TOP-OF-PAGE처럼 활성화 / 비활성화 

- NO_TOOLBAR : Toolbar 활성화 / 비활성화

 

# 02. ALV Tree 필드 카탈로그 생성 #

    " 필드카탈로그 "
    CALL FUNCTION 'LVC_FIELDCATALOG_MERGE'
      EXPORTING
        I_STRUCTURE_NAME = 'SFLIGHT'
      CHANGING
        CT_FIELDCAT      = GT_FIELDCAT[].

 

# 03. ALV Tree 헤더 설정 # 

    " 헤더 설정 "
    DATA
      L_HIERARCHY_HEADER TYPE TREEV_HHDR.

    L_HIERARCHY_HEADER-HEADING = 'Airline ID'.
    L_HIERARCHY_HEADER-TOOLTIP = 'Airline Info'.
    L_HIERARCHY_HEADER-WIDTH = 35.
    L_HIERARCHY_HEADER-WIDTH_PIX = ''.

- HEADING : 타이틀 설정

- TOOLTIP : Quick View 설정 

- WIDTH : 길이 설정

 

# 04. ALV Tree 객체 생성 # 

    " ALV Tree "
    CALL METHOD G_TREE->SET_TABLE_FOR_FIRST_DISPLAY
      EXPORTING
        IS_HIERARCHY_HEADER = L_HIERARCHY_HEADER
      CHANGING
        IT_OUTTAB           = GT_SFLIGHT[]
        IT_FIELDCATALOG     = GT_FIELDCAT[].

- 여기서 중요한 것은 GT_SFLIGHT( 인터널 테이블 )에 값이 들어가 있으면 안 된다. 

 

 

# 05. ALV Tree 이벤트 처리 #

# 노드 더블클릭 활성화 이벤트 처리

 

# 노드 활성화 이벤트 처리 

 

# F1 도움말 활성화 이벤트 처리

 

# 이벤트 설정

 

    " 더블 클릭 활성화 "
    LS_EVENT-EVENTID = CL_GUI_COLUMN_TREE=>EVENTID_NODE_DOUBLE_CLICK.
    LS_EVENT-APPL_EVENT = 'X'.
    APPEND LS_EVENT TO LT_EVENT.
    CLEAR
      LS_EVENT.

    " 노드를 확장할 때 데이터를 ALV에 로드하는 데 필요한 이벤트 "
    LS_EVENT-EVENTID = cl_gui_column_tree=>eventid_expand_no_children.
    LS_EVENT-APPL_EVENT = 'X'.
    APPEND LS_EVENT TO LT_EVENT.
    CLEAR
      LS_EVENT.

    " F1 도움말 활성화 "
    LS_EVENT-EVENTID = cl_gui_column_tree=>eventid_item_keypress.
    LS_EVENT-APPL_EVENT = 'X'.
    APPEND LS_EVENT TO LT_EVENT.
    CLEAR
      LS_EVENT.

    " 이벤트 설정 "
    CALL METHOD G_TREE->SET_REGISTERED_EVENTS
      EXPORTING
        EVENTS = LT_EVENT.

 

# Include P01 생성 

---

# 05 - 1. ALV  Tree Class 설정 #

# Include P01 생성 후 다음과 같이 로직 설정

CLASS LCL_TREE_EVENT_01 DEFINITION.
  PUBLIC SECTION.
    METHODS:
      HANDLE_NODE_DOUBLE_CLICK
        FOR EVENT NODE_DOUBLE_CLICK OF CL_GUI_ALV_TREE
        IMPORTING
          NODE_KEY.

ENDCLASS.                    "LCL_TREE_EVENT_01 DEFINITION"

CLASS LCL_TREE_EVENT_01 IMPLEMENTATION.

  METHOD  HANDLE_NODE_DOUBLE_CLICK.


  ENDMETHOD.                    "HANDLE_NODE_DOUBLE_CLICK"

ENDCLASS.                    "LCL_TREE_EVENT_01 IMPLEMENTATION"

DATA:
  G_EVENT_01 TYPE REF TO LCL_TREE_EVENT_01.

 

 

# 다시 돌아와서 Process Before Output 

---

# 05 - 2. SET HANDLER 설정 #

    " SET HANDLER 설정 "
    CREATE OBJECT G_EVENT_01.
    SET HANDLER G_EVENT_01->HANDLE_NODE_DOUBLE_CLICK FOR G_TREE.

 

 

# 06. 제일 중요한 해당 데이터 넣기 

---

데이터를 넣을 때에는 헤더 - 아이템 이런 식으로 넣어야 하기 때문에 중요하다.

 

# 이건 ALV Tree 2화에서 정리하겠다. #

---

 

 

# 07. ALV에 데이터 Call 보내기 

    " Send the data to the Frontend "
    CALL METHOD G_TREE->FRONTEND_UPDATE.

 

 

# 데이터 설정하는 방법은? 다음 편에서 보자.

---

 

2024.11.24 - [.ABAP/..ALV] - SAP ALV Tree 정리 - 2 ( 데이터에 따른 노드 설정 )

SAP ALV Tree 정리 - 2 ( 데이터에 따른 노드 설정 )

 

 

 

 

도움이 되셨으면 하단에 있는 광고 한번씩 눌러주세유!!