CS Student’s SAP&Tech Journey✨

[SAP] ABAP Subscreen (5) Tabstrip Control로 화면 전환 구현하기 본문

SAP/서브스크린 Subscreen

[SAP] ABAP Subscreen (5) Tabstrip Control로 화면 전환 구현하기

인포마틱 2025. 3. 21. 20:33

SAP 다이얼로그 프로그래밍에서 하나의 화면에서 여러 UI 구성요소를 보여주기 위해 Subscreen을 활용하는 것은 매우 일반적인 방식입니다.


특히 사용자가 탭(Tab)을 눌러서 화면을 전환하는 방식, 즉 Tabstrip Control을 사용하는 경우, 다양한 데이터를 하나의 논리적 화면 안에서 깔끔하게 표현할 수 있어 UI 구성에 자주 활용됩니다.

이번 글에서는 SAP에서 제공하는 Tabstrip Control을 사용하는 방법 두 가지를 소개합니다.

 


 

❓ Tabstrip Control이란?

Tabstrip은 여러 개의 Subscreen을 하나의 영역에서 전환해가며 보여주는 컨트롤 요소입니다.
하나의 메인 스크린 내에서 사용자가 선택한 탭에 따라 다른 Subscreen을 불러와서 화면을 구성합니다.

 

Tabstrip 예시 이미지

 

  • Current Tab: 현재 선택된 탭 이름
  • Pushbutton Tabs: 각 탭 버튼
  • Subscreen Area: 탭이 전환되면 이 영역의 내용이 바뀜

 

 

📌 Tabstrip 구현 방식 두 가지

방식 설명 특징
CASE 1 Fct Type을 P로 설정 구현이 간단하지만 PAI를 타지 않음
CASE 2 일반 Normal 방식 실무에서 더 많이 사용됨, OK_CODE로 제어

 

 


🎯 CASE 1 – Tabstrip (Fct Type = P 방식)

✅ 장점

  • 구현이 간단하고 직관적임
  • 버튼 클릭 시 PAI를 타지 않기 때문에 코드 구조가 간단함

⚠️ 단점

  • 각 Subscreen을 CALL SUBSCREEN으로 모두 호출해야 함
  • 화면 클릭 시 새로운 데이터 로딩이 필요하다면 PAI를 타야 하므로 유연성이 떨어짐

 

▶ 변수 선언 (XXXXXTOP)

* Tab Strips 변수 선언
CONTROLS MY_TAB TYPE TABSTRIP.

 

▶ Tabstrip Layout 설정 (메인 화면 Screen 100)

 

▶ Tab 속성 설정 - TAB 이름은 변수 선언할 때 사용했던 이름으로 설정

 

▶ Tab 속성 설정 - TAB1 Connection 버튼 (Subscreen Area - SUB1)

Fct Code 탭 클릭 시 발생하는 코드
Fct Type P 로 설정
Ref Field Subscreen Area와 연결

 

✔️ Subscreen Area를 안에 그려줍니다.

 

▶ Tab 속성 설정 - TAB2 Airline 버튼 (Subscreen Area - SUB2)

 

✔️ Subscreen Area를 안에 그려줍니다.

 

▶ Subscreen 연결

PROCESS BEFORE OUTPUT.
  MODULE status_0100.
  CALL SUBSCREEN SUB1 INCLUDING SY-CPROG '0101'.
  CALL SUBSCREEN SUB2 INCLUDING SY-CPROG '0102'.
  
PROCESS AFTER INPUT.
  CALL SUBSCREEN SUB1.
  CALL SUBSCREEN SUB2.
  MODULE user_command_0100.

 

▶ 최종 확인

탭이 생성된 것을 확인할 수 있습니다. 다만, 아직 데이터 조회는 불가능합니다.

 


🎯 CASE 2 – Tabstrip (Normal 방식)

 

✅ 특징

  • 각 탭을 누르면 PAI → PBO를 타면서 화면이 전환됨
  • Subscreen 하나만 공유하고, 탭에 따라 해당 화면만 교체
  • 실무에서 더 많이 사용하는 방식

 

▶ Tab 속성 설정 - TAB 이름은 변수 선언할 때 사용했던 이름으로 설정

 

▶ Tab 속성 설정 - TAB1 Connection 버튼 (Subscreen Area - SUB1)

 

▶ Tab 속성 설정 - TAB2 Airline 버튼 (Subscreen Area - SUB1)

📌 TAB1과 같은 Subscreen Area를 사용합니다.

 

▶ 변수 선언 (XXXXXTOP)

* Tab Strips 변수 선언
DATA GV_DYNNR TYPE SY-DYNNR.

 

▶Subscreen 설정 로직 (XXXXXO01) PBO ✔️ ACTIVETAB 선택 시, 어떤 화면을 띄워줄지에 대한 로직

PROCESS BEFORE OUTPUT.
  MODULE status_0100.
  MODULE FILL_DYNNR.
MODULE fill_dynnr OUTPUT.
  CASE MY_TAB-ACTIVETAB.
    WHEN 'TAB1'.
      GV_DYNNR = '0101'.
    WHEN 'TAB2'.
      GV_DYNNR = '0102'.
    WHEN OTHERS.
      MY_TAB-ACTIVETAB = 'TAB2'. " 디폴트 설정
      GV_DYNNR = '0102'.
  ENDCASE.
ENDMODULE.

탭 클릭 시마다 GV_DYNNR 값이 바뀌고, 그에 따라 Subscreen이 전환됨

 

Subscreen 설정 로직 (XXXXXI01) PAI  ✔️ 사용자의 탭 선택 처리

MODULE user_command_0100 INPUT.
  CASE ok_code.
  
    WHEN 'TAB1' OR 'TAB2'. " PAI 로직 추가
      MY_TAB-ACTIVETAB = ok_code.
      
    WHEN 'DISP'.
       PERFORM GET_INFO.
    WHEN 'BACK' OR 'EXIT'. "
      LEAVE PROGRAM.
  ENDCASE.


ENDMODULE.

 

 Subscreen 호출

PROCESS BEFORE OUTPUT.
  MODULE status_0100.
  MODULE FILL_DYNNR.
    CALL SUBSCREEN SUB1 INCLUDING SY-CPROG GV_DYNNR. " 설정

 

▶ 최종 확인!