소개

보통 스탠다드 컴포넌트의 UI 엘리먼트 속성을 수정하려면, 해당 컴포넌트로 이동하여 enhancement를 해서 레이아웃의 UI 엘리먼트 속성을 수정(엘리먼트를 삭제하고 새로 엘리먼트를 추가하는 방법으로)하거나 또는 WDDOMODIFYVIEW 메소드에 pre/post-exit을 만들어서 속성 변경하는 코드를 넣는 방법이 있습니다.

스탠다드 컴포넌트에 enhancement를 작성하는 방법 대신 (가끔 enhancement를 원하지 않는 고객이 있지요) BAdI - WD_BADI_DOMODIFYVIEW 가 있습니다. 

이 글에서는 예제를 통해 스탠다드 컴포넌트에 enhancement 없이 UI 엘리먼트 속성을 동적 변경하여 보겠습니다.

진행

간단한 스탠다드 웹딘프로아밥 컴포넌트를 하나 선택합니다. 예를 들어 항공편 목록 프로그램입니다.

Depart.City를 입력하지 못하도록 하고 싶습니다.

보통은 해당 WDA 컴포넌트로 가서 enhancement를 하고 UI 엘리먼트는 삭제하거나 또는 WDDOMODIFYVIEW메소드에 post-exit을 만들고 코딩으로 UI 엘리먼트를 숨기도록 합니다.

이번에는 스탠다드 컴포넌트에 enhancement 없이, 전혀 스탠다드를 건드리지 않고 해보겠습니다. 방법은 바로 BAdI – WD_BADI_DOMODIFYVIEW 구현을 만드는 것입니다.

** WD_BADI_DOMODIFYVIEW 는 필터가 있는 바디 입니다. 필터 COMPONENT_NAME 과 VIEW_NAME 이 있습니다. 바디 구현을 만들때 이 필터에 해당 스탠다드 프로그램 값을 입력하여 만들겠습니다.

컴포넌트와 뷰의 이름을 찾아보겠습니다. ( 화면에서 오른쪽 버튼 클릭 -> 기술정보):

UI 엘리먼트의 ID를 찾아 보겠습니다: 기술정보 -> view and View Elements 탭:

또는, 티코드 SE80에서 웹딘프로 컴포넌트를 열어서 UI 엘리먼트 ID를 찾을 수 있습니다.

구현

티코드 SE18 로 이동하여 BAdI를 열어주세요.

해당 컴포넌트에 대해 (필터값 확인) 이미 구현된 것이 있는지 확인합니다. 없으면 구현을 하나 만들어 주세요. Implementations에서 마우스 오른쪽 버튼을 누르고 생성을 선택합니다.

Enhancement Implementation 과 설명을 입력하고 OK를 클릭합니다.

BAdI implementation name 과 설명을 입력하고 Implementation Class도 입력합니다.

이제 필터 값을 입력하겠습니다. (어느 컴포넌트와 뷰에 적용할 것인지).

주의: 만약 필터를 만들지 않으면, 모든 웹딘프로 어플리케이션을 대상으로 실행됩니다.(게다가 실행중 덤프가 발생할 수도 있습니다.).

마지막으로, 메소드 IF_WD_BADI_DOMODIFYVIEW~WDDOMODIFYVIEW 에 코딩을 합니다.

아래 코드를 입력하세요.

METHOD if_wd_badi_domodifyview~wddomodifyview.

     DATA lr_ui_elem TYPE REF TO cl_wd_uielement.

     IF first_time = abap_true.

*     Hide Depart.City Label

       lr_ui_elem ?= view->get_element( 'CITYFROM_LABEL_1_CP' ).

       lr_ui_elem->set_visible( cl_wd_uielement=>e_visible–none ).

*     Hide Depart.City Input

       lr_ui_elem ?= view->get_element( 'CITYFROM_INPUTFIELD_1_CP' ).

       lr_ui_elem->set_visible( cl_wd_uielement=>e_visible–none ).

     ENDIF.

  ENDMETHOD.

저장하고 활성화 합니다.

실행 결과

어플리케이션을 실행합니다. Depart.City의 레이블과 입력 필드가 숨겨진 것을 확인할 수 있습니다!.

결론

예제를 통해 간단히 살펴보았습니다. 서치핼프를 추가/변경 할 수도 있습니다. 레이블을 변경할 수 있습니다. 특정 UI 엘리먼트를 활성화/비활성화 할 수도 있습니다. 이런 일들을 스탠다드 enhancement 없이 단지 필터 값을 가진 BAdI를 구현하여 달성 할 수 있습니다.

자세한 코딩 방법에 대해서는 다음 글을 참고하세요: Auto Align UI Elements Dynamically in Web Dynpro ABAP

그리고, 동일한 필터에 대해 여러 구현을 만드는 것도 가능합니다.

제한사항

위 방법으로 UI 엘리먼트를 만들고 액션을 지정하는것 까지는 가능합니다.(예: 입력 필드/버튼) 그러나 액션에 대한 On_Action 메소드는 여기서 만들 수 없습니다. 그런 경우는 스탠다드 컴포넌트에 enhancement를 해야 합니다.

소개

이 문서는 UI 테마 디자이너로 웹딘프로아밥 테마를 만드는 방법을 설명합니다.

UI 테마 디자이너는 웹브라우저에서 실행됩니다. 스탠다드 테마를 복사하여 자신만의 테마를 만들고 수정할 수 있습니다.

준비물

넷위버 7.4 미만 버전에서는 UI Add-on for Netweaver 1.0 SP04 이상 버전을 추가 설치해야 합니다.

넷위버 7.4 SP04 버전 이상인 경우, UI 테마 디자이너는 이미 설치 되어 있습니다.

단계별 진행

예제로 간단한 웹딘프로아밥 어플리케이션을 하나 선택하였습니다. 여기에 배경 그림을 변경하는 데모를 보여드리겠습니다.

위 어플리케이션입니다. 이제 UI 테마 디자이너로 테마 변경을 해보겠습니다.

시작

UI 테마 디자이너를 실행하기 위해서는 티코드 /UI5/THEME_DESIGNER를 실행합니다.

또는, 웹 브라우저에서 아래 주소를 입력해도 됩니다:

https://<server>:<port>/sap/bc/theming/theme-designer?sap-client=<client>

테마 디자이너를 실행하기 전에 다음의 ICF 노드를 활성해 해야 합니다. 티코드 SICF를 실행합니다. 아래의 ICF 노드를 (활성화 하지 않았다면) 활성해 해주세요.

경로: default_host -> SAP -> BC -> ui5_ui5 -> SAP 에서 아래 노드를 활성화:

• ARSRVC_SUITE_PB
• ARSRVC_SPB_ADMN
• ARSRVC_LPD_C

경로: default_host -> SAP -> Public -> BC 에서 아래 노드를 활성화:

• ui2
• ui5_ui5

혹시나 활성화 하지 않더라도 UI 테마 디자이너를 실행하면 활성화 여부를 체크하여 활성화 할지 물어 봅니다.

실행

이제 티코드 /UI5/THEME_DESIGNER를 실행합니다.

웹브라우저에서 테마 디자이너가 실행됩니다. 사용가능한 (스탠다드와 커스텀 테마 모두) 테마 목록이 나타납니다.

테마를 선택합니다. 복사하여 수정할 기본이 될 테마를 선택하는 것입니다. Open을 클릭합니다.

테마 수정 화면으로 이동합니다. 화면에 나타난 Target Content를 입력해야 합니다.

테마를 적용할 웹딘프로 어플리케이션의 URL을 복사하여 Target Content의 application link 에 입력합니다.

application link에 url을 입력하고 description에 설명을 입력하고 Add를 클릭합니다.

테마 디자이너가 해당 어플리케이션을 미리보기 영역에 보여줍니다. 테마를 수정하면 미리보기에 바로 반영되어 확인할 수 있습니다.

이제 Quick 모드로 배경 그림를 추가하여 테마를 수정해 보겠습니다. 아래 그림처럼 Background Image 옆에 있는 버튼을 누릅니다:

팝업 창이 뜹니다. 파일 추가 아이콘을 누르거나 PC에서 파일을 드래그하여 드랍합니다:

그림을 추가하면 작은 미리보기가 나타납니다. 그림을 선택하고 OK를 클릭합니다.

미리보기에 테마 변경사항이 바로 반영 됩니다:

테마 디자이너는 'Expert' 모드를 지원합니다. Quick 보다 더 많은 옵션이 제공 됩니다. 글꼴, 글 색상, 테두리, 넓이, 스타일 등을 쉽게 변경 할 수 있습니다.

예를들어 글 색상을 변경하고 싶다면, sapTextColor 옆에 있는 아이콘 버튼을 눌러 보세요:

색상을 쉽게 선택할 수 있고 변경 사항은 즉시 미리보기에 적용됩니다:

변경된 파라미터는 굵게 표시됩니다. 변경사항을 취소하는 방법은 파라미터 이름 옆에 표시된 세팅 아이콘을 누르고 'Reset to Original'을 선택하면 취소 됩니다.

여기에는 필터 기능도 있습니다. 테마 파라미터를 색상, 그림, 글꼴 등을 기준으로 필터링 할 수 있습니다,

필터에 직접 글자를 입력할 수도 있습니다:

테마 디자이너에서는 직접 css를 입력할 수 있도록 CSS 탭을 제공합니다.

미리보기에는 변경전(Original) 과 변경후(Preview)를 쉽게 바꿔가며 볼 수 있습니다.

변경이 끝났으면 이제 저장을 해보겠습니다. 테마 메뉴에서 'Save & Build'를 선택합니다.

새로 저장할 테마 ID와 설명을 입력하고 Publish를 클릭합니다.

이제 새로운 테마가 생성되어 사용할 준비가 되었습니다.

완료

테마를 테스트 해보겠습니다. 파라미터 sap-theme=<your_theme> 를 URL 에 추가하여 웹딘프로 어플리케이션을 실행합니다.

또는, 어플리케이션의 파라미터탭에서 WDTHEMEROOT 파라미터를 선택하고 테마이름을(myTheme)  value 에 입력해도 됩니다.

우리가 만든 테마가 (배경 그림 변경) 적용된 웹딘프로 어플리케이션이 실행 됩니다.

이 테마는 당연히 다른 어플리케이션에도 적용할 수 있습니다. 아래 그림은 스탠다드 어플리케이션(비행 목록)을 실행하여 테마를 적용해 보았습니다.

결론

UI 테마 디자이너로 큰 노력 들이지 않고 쉽게 테마를 만들고 수정할 수 있습니다. 웹딘프로아밥, FPM, SAPUI5, NWBC, 포탈 모두에 적용되는 일관성 있는 테마를 만들 수 있습니다.

참고:

UI Theme Designer – User Interface Add-On for SAP NetWeaver – SAP Library

SAP 도움말 센터는 특정 어플리케이션에 대한 관련 정보를 회사의 입장에서 도움말 형태로 제공하는 기능입니다. 우선 도움말 센터 기능을 활성화 해야 하고 그후 사용자는 어플리케이션에서 도움말을 실행 하면 도움말 센터가 표시 됩니다. SAP에 의해 제공되는 스탠다드 도움말이 기본 링크로 제공됩니다. 회사 입장에서 도움말을 추가로 (예를 들어 Learning Content, Worth Knowing…) 제공 할 수 있습니다. 도움말 센터 관련 IMG 세팅을 통해서 특정 어플리케이션에 간단히 링크를 추가 할 수 있습니다.

이 문서에서는 예제로 SRM 7.02 포탈에 있는 쇼핑 카트와 구매 오더 어플리케이션에 각 어플리케이션별 링크를 추가해 보겠습니다.

아래의 단계를 따라 진행합니다.

단계 1: "쇼핑 카트"와 "구매 오더"에 대해 각각 웹딘프로 어플리케이션 기술 정보가 필요합니다.

1. SRM 포탈 홈 페이지 –> Shop –> 마우스 오른쪽 버튼 –> 기술 정보

                 Webdynpro Application Name: /SAPSRM/WDA_L_FPM_GAF

             2. SRM 포탈 홈 페이지 –> Purchasing –> Display Purchase Order –> 마우스 오른쪽 버튼 –> 기술 정보

                 Webdynpro Application name: /SAPSRM/WDA_L_FPM_OIF

단계 2: 도움말 센터에서 어플리케이션별 링크를 생성하겠습니다.

            티코드SPRO –> SAP NetWeaver –> Knowledge Management –> 도움말 센터 –>

                              도움말 센터 컨텐트 중앙 관리

            도움말 센터 컨텐트 관리 가 실행됩니다. 아래 조건을 입력합니다.

            Category: Learning Content

           Link Type: Web Page

           Language: EN

            Application Type: Web Dynpro Application

             검색 버튼을 누릅니다.

            이제 "Create Link to…" 버튼을 누르고 "Web page"를 선택한 후 "Link Text" 에 제목을 입력합니다.

            "Link Target" 에는 웹딘프로 어플리케이션 "/SAPSRM/WDA_L_FPM_GAF"를 입력합니다.

            아래 그림을 참고하세요.

           저장 버튼을 누릅니다. 이제 구매 오더에 대한 내용도 같은 방식으로 입력합니다.

           Webdynpro Application: /SAPSRM/WDA_L_FPM_OIF

단계 3: 운영 서버에 전송하기 위해 CTS를 생성하겠습니다.

            "Transport Link" 버튼을 누릅니다. CTS 정보를 입력합니다.

단계 4: 도움말 센터가 잘 적용되었는지 테스트 합니다.

          쇼핑 카트: SRM 포탈 홈페이지 -> Shop 으로 이동 합니다.

          도움말 센터 버튼을 클릭하면 쇼핑 카트와 관련된 웹 페이지 URL이 도움말 센터 팝업 윈도우에 표시됩니다.

         구매 오더: SRM 포탈 홈페이지 -> Purchasing -> Display Purchase Order 로 이동 합니다.

        도움말 센터 버튼을 클릭하면 구매 오더와 관련된 웹 페이지 URL이 도움말 센터 팝업 윈도우에 표시됩니다. 

관련 링크:

Help Center for Web Dynpro ABAP Applications – Using the Help Center for SAP Business Suite Applications – SAP Library

다른 서버의 웹딘프로 어플리케이션 간에 동일한 테마를 공유하는 방법은 여러가지가 있습니다. 예를 들어 포탈, ECC, CRM, BW 시스템이 있다고 가정합시다. 동일한 테마가 모든 서버에 있거나, 그중 하나의 서버(주로 포탈)에 테마가 있고 나머지 서버들은 파라미터를 지정해서 테마를 지정하거나, 포탈의 테마를 사용하도록 어플리케이션에 지정하는 방법 등이 있습니다.

1)     동일한 포탈 테마를 포탈과 웹딘프로 어플리케이션에 적용.

이 방법은 모든 포탈내 네비게이션과 웹딘프로 어플리케이션이 동일한 테마를 사용합니다.

테마 자체는 포탈에서 관리합니다. 어플리케이션은 아래에 설명하는 방법을 통해 포탈 테마를 사용하도록 설정합니다.

a) 새로운 테마를 포탈에서 만들 수 있습니다. 테마 디자이너 툴이 System Administration-> Portal Display 메뉴에 있습니다.

b) 포탈 아이뷰의 속성 중 'Hand over Portal Stylesheet'에 체크를 하여 웹딘프로 어플리케이션에 테마를 전달 할 수 있도록 세팅합니다.

c) 웹딘프로의 어플리케이션 파라미터 'WDFORCEEXTERNALSTYLESHEET'에 'X'를 입력하여 포탈 테마를 사용하도록 합니다.

2)    서로 다른 포탈 테마를 포탈과 웹딘프로 어플리케이션에 적용.

이 방법은 포탈내 네비게이션용으로 다른 테마를 사용하고 웹딘프로 어플리케이션용으로 다른 테마를 사용합니다. 서버에 상관없이 모든 웹딘프로 어플리케이션은 동일한 포탈 테마를 사용합니다. 테마는 포탈에서 관리합니다. 이 방법의 장점은 포탈이 웹딘프로와 다른 테마를 사용하지만 여러 서버에 걸쳐 모든 웹딘프로 어플리케이션은 동일한 테마를 사용하고 한 곳에서 그 테마를 관리한다는 점입니다.

테마는 각 로컬 시스템에 있지도 않고 포탈에서 암묵적으로 전달해 줄수도 없습니다. 그러므로 웹딘프로 어플리케이션의 파라미터 형태로 테마를 명시적으로 전달해 주어야 합니다.

a) 아이뷰 속성중 'Application Parameter'에 아래와 같은 형태로 입력합니다.

SAP-EP-THEMEROOT=<PORTAL_THEME_ROOT_PATH>

테마 루트 경로는 아래 규칙에 따라 만들어 집니다:

https://<hostname>:<port>/irj/portalapps/com.sap.portal.design.portaldesigndata/themes/portal/<THEME_ID>

b) 아이뷰 속성중 'Hand over Portal Stylesheet'를 끕니다. 웹딘프로 어플리케이션 파라미터중 'WDFORCEEXTERNALSTYLESHEET'도 끕니다.

3)     ECC 서버의 테마를 CRM/BW 등의 웹딘프로 어플리케이션에도 적용.

앞의 두 방법과 이 방법의 가장 큰 차이점은 테마를 포탈이 아니라 ECC에서 관리한다는 점입니다. 티코드 '/UI5/THEME_DESIGNER' 와 '/UI5/THEME_TOOL' 로 테마를 관리합니다.

여기서는 포탈이 없습니다. 웹딘프로 어플리케이션의 테마는 WDTHEMEROOT 파라미터로 지정합니다. 테마 아이디는 THEME_ID@THEME_ROOT_ID 포맷으로 입력합니다.

테마 루트 경로는 티코드 '/UI5/THEME_TOOL'에서 INFO 버튼을 눌러서 확인 할 수 있습니다.

예를 들어 테마 루트 경로는 이렇게 보입니다.

개요

웹딘프로아밥을 하다보면 가끔 SAP의 다른 기능이나 티코드를 호출해야 하는 경우가 생깁니다. 예전(웹딘프로아밥이 아닌)에는 모든것이 아밥으로 끝나는 것이고 사용자들은 SAP GUI로 접속해서 사용하고 있는 상태였습니다. 이때는 간단하죠. 그냥 필요한 기능이나 티코드를 호출하면 됩니다. SAP GUI가 새 세션을 열어서 실행시켜 줍니다.

이제 환경이 변했습니다. UI 개발에 여러가지 기술이 사용되고 있고, 이런 여러 기술 사이를 왔다갔다 이동하는 비지니스 프로세스가 발생하고 있습니다.

좋은 소식은 이런 경우 NWBC가 프레임워크 역할을 한다는 점입니다. NWBC를 사용하면 SAP의 여러 기능에 따라 각자 웹 브라우저를 여러개 띄우는게 아니라  하나의 어플리케이션으로 통합 관리됩니다.

이번 예제에서는 간단히 웹딘프로아밥 어플리케이션을 하나 만들어 보겠습니다. 이 어플리케이션은 판매 오더 번호를 입력받아서 SAP GUI의 티코드 VA03을 호출하는 예제입니다.

준비물

SAP ERP System

Netweaver Business Client (설치 후 실행)

웹딘프로아밥에 대한 기본지식

작동 원리?

Object-Based Navigation (OBN)을 이용하는게 핵심입니다. OBN은 역할(PFCG)에 있는데 오브젝트를 기능에 연결하는 방식입니다.

OBN이 호출되면 사용자의 역할에서 특정 기능을 찾아서 그 기능과 연결된 티코드(또는 다른 기능)를 실행합니다. 나중에 살펴보겠지만 OBN 은 사용자 역할에 아주 밀접하게 연결되어 있습니다. (NWBC도 그렇죠)

구현 시작

우선 웹딘프로아밥을 만들겠습니다. 판매 오더를 목록으로 보여주거나 해도 되지만 여기서는 간단히 입력 필드로 입력받고 실행 버튼을 하나 만듭니다:

매우 단순합니다. 판매 오더 번호를 넣을 입력 필드 하나와 실행 버튼 하나…

버튼의 액션 이벤트가 필요합니다:

코드는 이렇게 작성 하세요. (그림이라 죄송):

두부분으로 나눠서, 첫번째 부분은 화면에서 입력한 판매 오더 번호를 컨텍스트에서 읽어오는 코드 이고, 두번째 부분은 바로 OBN 호출 입니다:

IF_WD_PORTAL_INTEGRATION 인터페이스의 메소드를 실행해서 티코드를 호출합니다. 그런데 이상하게도 SAP 포탈이 없는데 됩니다 (대신 NWBC 환경에서 됩니다)!

4개 파라미터를 사용했습니다.:

OBJECT_TYPE:                    이것은 오브젝트의 타입입니다.

OBJECT_VALUE_NAME        이것은 티코드에 전달할 파라미터 이름입니다.

OBJECT_VALUE                   이것은 파라미터 값입니다.

OPERATION                         이것은 호출할 기능입니다.

위 코드를 잘 이해한 후 다음 구현을 진행하세요.

이제 역할을 만들어야 합니다(또는 있는걸 수정해도 됩니다):

티코드 PFCG로 이동하여 역할을 만듭니다:

역할은 루트 폴더와 하나의 하위 폴더로 구성하였습니다(NWBC는 최소 1레벨의 하위 폴더가 필요함). 그 아래에 첫번째 꼭지는 앞서 만든 웹딘프로아밥 어플리케이션 입니다.

두번째 꼭지는 판매 오더 조회 티코드 VA03 입니다. Other Node Details 버튼을 눌러서 OBN 부분이 보이도록 해주세요.

메소드 추가 버튼을 눌러서 OBN을 적용하겠습니다.

이번 예제에서는 오브젝트로 BOR 오브젝트를 사용하겠습니다. BUS2032 (SalesOrder)를 선택하고 메소드는 DISPLAY를 선택합니다.

다음은 파라미터 지정을 위한 화면입니다.

이것은 웹딘프로아밥에서 입력받은 값을 티코드로 전달하기 위한 파라미터 지정 작업입니다. 파라미터 아이디(첫 컬럼)에 들어갈 값은 해당 티코드에서의 화면 필드 이름 입니다(F1->기술정보).

두번째 컬럼에는 값이 들어 갑니다. 웹딘프로아밥에서 전달할 변수 이름을 갈매기 갈호로 묶어서 표시합니다.

주의: BOR 오브젝트는 단지 이름을 지정하기 위해 사용되었습니다. 여기서는 BOR 오브젝트 로직이 전혀 실행되지 않습니다. part 2 (역자주: 없음)에서 BOR 없이 하는 방법을 설명드리겠습니다…

이제 역할이 준비 되었습니다!

저장하고 사용자를 지정합니다.

NWBC를 시작해 주세요.

웹딘프로아밥 어플리케이션을 실행합니다.

판매 오더 번호를 입력하고 버튼을 누릅니다.

티코드 VA03이 SAP GUI로 호출 되었습니다. 이것은 web GUI가 아닙니다. NWBC안에서 웹딘프로아밥에서 SAP GUI로의 다른 기술간 전환이 이루어졌습니다.

어떻게 이게 가능 할까요?

시스템은 SalesOrder라는 비지니스 오브젝트의 메소드 Display를 (SalesOrder.Display) 호출하라고 합니다. 로그인한 사용자의 역할에서 OBN에 지정된 SalesOrder.Display를 찾습니다.

우리가 만든 역할에서 해당 OBN을 찾았습니다. 역할에 지정된 티코드를 실행합니다. 그리고 파라미터로 판매 오더 번호를 VA03의 화면필드 VBAL-VBELN에 입력합니다.

트리 - 순차적(Sequential) 구현방법

트리 UI를 사용하면 컨텍스트에 구성된 계층구조를 시각화 할 수 있습니다.

트리 UI 엘리먼트는 2가지 구현 방법이 있습니다:

• 순차적(sequential) 구현방법: 재귀 노드가 필요 없습니다. 구현시 몇 단계(level)로 트리를 구성할지 결정 된 경우 사용합니다.
• 재귀적(recursive) 구현방법: 재귀 노드가 필요 합니다. 구현시 몇 단계(level)로 트리를 구성할지 모르는 상태로 실행시 단계(level)가 결정되는 경우 사용합니다.

웹딘프로 컴포넌트

순차적 구현방법에서는 재귀 노드가 필요하지 않습니다. 컨텍스트 노드 TREE를 뷰 컨트롤러에서 만듭니다. 카디널리티는 1..1이고 싱글턴입니다. 이 노드 아래에 노드 TREE_NODE를 만듭니다. 이 노드 TREE_NODE는 두개의 어트리뷰트를 가지고 있습니다. 이 노드 아래에 노드 TREE_LEAF를 만듭니다. 이 노드 TREE_LEAF는 한개의 어트리뷰트를 가지고 있습니다.

컨텍스트 구조

어트리뷰트 STUDENTNAME, VALUE, STUDENTINFO 는 모두 STRING 타입입니다. 노드 TREE_LEAF는 싱글턴이 아닙니다. 각 TREE_NODE의 엘리먼트마다 TREE_LEAF가 각자 독립적으로 존재해야 하기 때문에 싱글턴이 아닙니다. 어트리뷰트 STUDENTNAME는 학생 이름 저장합니다. 어트리뷰트 STUDENTINFO는 각 학생마다 여러 정보를 가지고 있습니다.

트리 UI 엘리먼트에서는 Node Type을 하위에 추가 할 수 있습니다. Node Type은 TreeItemType 과 TreeNodeType 두가지가 있습니다. 컨텍스트 어트리뷰트를 이곳에 연결해야 합니다.

Node Type을 하위에 추가

• TreeNodeType: 노드 - 안에 먼가를 담고 있음
• TreeItemType: 아이템 - 마지막 단계

뷰 레이아웃

트리 관련 UI 엘리먼트에 컨텍스트를 바인딩

노드 TREE_NODE는 서플라이 펑션을 통해서 값을 채웁니다.

주의: 만약 노드를 하나더 만들었다면(여기서는 2개뿐), 처음 2개 노드에 싱글턴에 체크하고 마지막하나는 싱글턴이 아닙니다.

노드 TREE_NODE의 서플라이 펑션 ( V_main = 뷰 이름 )

METHOD supply_tree_node.  ( V_main = View Name )

   DATA: ls_student TYPE if_v_main=>element_tree_node, 
lt_student LIKE TABLE OF ls_student.

ls_student-studentname = 'SathishKumar'.
ls_student-value = 'A'.
APPEND ls_student TO lt_student.
clear ls_student.

ls_student-studentname = 'Ravi'.
ls_student-value = 'B'.
APPEND ls_student TO lt_student.
clear ls_student.

ls_student-studentname = 'Vivek'.
ls_student-value = 'C'.
APPEND ls_student TO lt_student.
clear ls_student.

node->bind_table( lt_student ).

ENDMETHOD.

자식 노드 TREE_LEAF 역시 서플라이 펑션을 통해서 값을 채웁니다.

노드 TREE_LEAF의 서플라이 펑션

METHOD supply_tree_leaf.

   DATA: ls_student TYPE if_v_main=>element_tree_leaf,
lt_student LIKE TABLE OF ls_student.
DATA: lv_value TYPE string.

parent_element->get_attribute( EXPORTING name = 'VALUE' IMPORTING value = lv_value ).

CASE lv_value.

WHEN 'A'.

ls_student-studentinfo = 'Article – YES'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Exam – 5'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Academic year -II'.
APPEND ls_student TO lt_student.

WHEN 'B'.
ls_student-studentinfo = 'Article – NO'.
APPEND ls_student TO lt_student.

ls_student-studentinfo ='Academic year -I'.
APPEND ls_student TO lt_student.

WHEN OTHERS.

ls_student-studentinfo = 'Article – YES'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Exam – 3'.
APPEND ls_student TO lt_student.

ls_student-studentinfo = 'Academic year -IV'.
APPEND ls_student TO lt_student.

ENDCASE.

node->bind_table( lt_student ).

ENDMETHOD.

결과

이 문서는 웹딘프로아밥에서 파라미터를 전달하며 티코드를 호출하는 방법에 대해서 설명하고 있습니다.

예제를 통해서 판매 오더 변경 티코드 VA02를 호출하겠습니다. 웹딘프로아밥 어플리케이션에서 판매 오더 번호를 가져와서 파라미터로 넘깁니다. 그리고 VA02 티코드의 초기화면을 건너띄고 변경화면으로 직접 이동하도록 합니다.

• 웹딘프로 컴포넌트를 생성합니다.
• 메인 뷰에서 판매 오더 번호를 입력할 입력 필드를 하나 만들고 티코드를 호출할 버튼을 하나 만듭니다.
• 판매 오더 번호를 넘겨서 티코드를 호출할 버튼에 이벤트를 만듭니다.
• 버튼 이벤트에 아래 코드를 입력합니다:

METHOD onactionon_edit .

DATA lo_el_context            TYPE REF TO if_wd_context_element.
DATA ls_context                TYPE               wd_this->element_context.
DATA lv_vbeln                   LIKE                ls_context–vbeln.

DATA lo_window_manager TYPE REF TO if_wd_window_manager.
DATA lo_api_component    TYPE REF TO if_wd_component.
DATA lo_window               TYPE REF TO if_wd_window.

DATA lv_url                       TYPE        string.
DATA lv_host                    TYPE        string.
DATA lv_port                     TYPE string.

lo_el_context = wd_context->get_element(  ).

lo_api_component = wd_comp_controller->wd_get_api( ).
lo_window_manager = lo_api_component->get_window_manager( ).

lo_el_context->get_attribute(
EXPORTING
name =  `VBELN`
IMPORTING
value = lv_vbeln ).

* Call below method to get host and port

CLEAR : lv_host , lv_port.

cl_http_server=>if_http_server~get_location(
IMPORTING
host = lv_host
port = lv_port ).

* Creating URL

CONCATENATE       'http'
'://'
lv_host
':'
lv_port
'/sap/bc/gui/sap/its/webgui/?sap-client=&~transaction=*VA02%20VBAK-VBELN='
lv_vbeln
';DYNP_OKCODE=/00'
INTO lv_url.

*  calling the url which we created above as a popup

lo_window_manager->create_external_window(
EXPORTING
url = lv_url
RECEIVING
window = lo_window ).

lo_window->open( ).

ENDMETHOD.

• 실행하기 위해 웹딘프로아밥 어플리케이션을 만듭니다. 지금까지 개발한 것을 모두 활성화 시킨후 어플리케이션을 실행합니다. 판매 오더 번호를 입력하고 edit 버튼을 누르면 판매 오더 변경 화면이 웹브라우저 새창으로 뜹니다. 판매 오더 번호가 파라미터로 전달되고 초기화면은 건너띄고 변경화면으로 이동하였습니다.

– Gowtham