개요

웹딘프로아밥을 하다보면 가끔 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