이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
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/

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/06/03/adaptation-in-web-dynpro-abap-in-depth-analysis/

 

* 번역자의 의견 *
주의!! 스크롤의 압박이 있습니다. FPM의 원리를 알고 싶은 분만 읽어 보세요.
이 글은 SAP의 공식 입장이 아니라 David Fernandez Castro 개인의 분석입니다.
adaptation(각색), enhancement(강화), configuration(구성), customization(맞춤)은 번역하지 않고 단어 그대로 사용하였습니다.
personalization은 주로 개인화로 번역하였습니다.


 

Adaptation in Web Dynpro ABAP – In-depth analysis

June 3, 2014 

 

소개

웹딘프로아밥 adaptation은 웹딘프로아밥의 핵심 개념중 하나이고 FPM(Floorplan Manager)의 초석을 이루는 기술입니다. 최근 SAP의 UI 가이드라인에 따르면, FPM은 비지니스 어플리케이션의 UI 개발에 사용할 추천 기술입니다. 웹딘프로아밥 컴포넌트와 어플리케이션에 대한 adaptation은 웹딘프로아밥 컨피규레이션 프레임워크로써 제공됩니다.

이 글은 웹딘프로아밥 adaptation 개념에 대해 기술적 관점에서 매우 상세하게 분석해 보겠습니다. 설명에 사용되는 기술 용어들이 매우 유사한 의미를 가지지만 미묘한 차이가 있다는 것을 파악해야 합니다. 예를 들어 adaptation, configuration, customization, personalization은 동의어라고 할 수 있을 정도로 비슷한 단어 이지만 여기에서는 매우 다른 개념을 가지고 있다는 점을 염두해 두세요.

Adaptation의 계층구조와 각 계층

웹딘프로아밥 컨피규레이션 프레임워크라는 이름과는 다르게 단지 컨피규레이션만이 아니라 adaptation을 합니다. 웹딘프로아밥 adaptation 은 2가지 방식으로 분류합니다. 한가지 방식은, 계층 구조로 3개의 계층를 가집니다: configuration, customization, personalization(개인화); 그리고 다른 방식은, 2 종류로 분류하는데 built-in adaptation 과 component-defined adaptation 입니다.

WDA Configuration Framework matrix.jpg

그림 1. Adaptation의 계층구조와 built-in/component-defined 데이터 표현

위 그림은 잘알려진 웹딘프로아밥 adaptation 게층구조 표현입니다. 세로방향으로 3개의 계층 나뉘어져 있습니다. 각 계층에서 내부에 가로방향으로 2개의 종류가 있습니다. Customization은 개인화의 관리자모드(administrator personalization)라고 불리기도 합니다.

관리 주체

일반적으로 configuration 데이터는 개발자가, customization 데이터는 시스템 관리자가, 개인화 데이터는 각 사용자가 관리합니다. 여기서 개발자란 S_DEVELOP 권한이 있는 사람을 뜻하고, 관리자란 S_WDR_P13N 권한이 있는 사람을 뜻합니다.

데이터 적용 우선순위

개인화 데이터가 가장 높은 우선순위를 가집니다. 그 다음이 customization 데이터 그리고 다음이 configuration 데이터 입니다. 다른 말로 하자면 configuration 데이터가 기본으로 적용되지만 customization 데이터로 덮어써질 수 있고 개인화 데이터가 이 모든걸 덮어쓰고 최후에 적용될 수 있습니다. 하지만 예외적으로 configuration 이나 customization 에서 최종(final) 표시된 데이터는 더 높은 우선순위 데이터가 있더라도 변경 되지 않고 적용됩니다.

데이터 적용 범위

The scope of adaptation data is different for each adaptation data layer. The configuration data applies to the whole system, the customization data depends on the system client, and the personalization data depends on the user.

Built-in adaptation 데이터 와 component-defined adaptation 데이터

built-in adaptation 데이터는 웹딘프로아밥 컨피규레이션 프레임워크에 의해 직접 제공되는 데이터 입니다. 각 컴포넌트의 구현에 관계없이 모든 웹딘프로 컴포넌트에 동일하게 적용됩니다. 이것은 일반적인 adaptation으로 볼 수 있습니다. 기본적으로 UI 엘리먼트의 속성(보임/숨김, 텍스트 등)을 변경할 하는 것이라고 보면 됩니다.

그리고 또다른 종류의 adaptation 데이터가 있습니다. 바로 각 컴포넌트 별로 다르게 적용되는 component-defined adaptation 데이터 입니다. 이것을 정의하려면 WDA 컴포넌트에 컨피규레이션 컨트롤러를 만들어야 합니다. 컨피규레이션 컨트롤러에 어떤 데이터를 adaptation 해야 하는지 어트리뷰트를 정의합니다. 일반적이지 않고 각 컴포넌트 구현에 따라서 다른 데이터 구조를 가집니다.

adaptation 데이터 인스턴스 개념

콘크리트 adaptation, 이것은 공식 용어는 아니지만 쉽게 설명하기 위해 사용합니다. 콘크리트 adaptation 데이터는 하나의 웹딘프로아밥 컴포넌트 인스턴스를 위해 존재하는 adaptation 으로 3 계층을 포함합니다. 하나의 configuration 데이터 인스턴스, 클라이언트별로 여러개의 customization 데이터 인스턴스, 사용자별로 여러개의 개인화 데이터 인스턴스가 있습니다. 그림 1에서 설명한 내용을 대입하여 각 계층별로 맞춰보시기 바랍니다.

Adaptation hierarchy - Multiple instances.jpg

그림 2. adaptation 데이터 인스턴스 개념

그림 2에서는 하나의 configuration 데이터 인스턴스(system), 여러 customization 데이터 인스턴스(clients), 여러 개인화 데이터 인스턴스(users)를 보여줍니다. 하지만 실행시에는 웹딘프로아밥 컨피규레이션 프레임워크가 하나의 customization 데이터 인스턴스와 하나의 개인화 데이터 인스턴스만 선택할 것입니다. 선택과정은 나중에 다시 설명하겠습니다.

웹딘프로아밥 컴포넌트에 대한 adaptation - 컴포넌트 컨피규레이션

웹딘프로 아밥 컴포넌트는 웹딘프로아밥 컨피규레이션 프레임워크를 사용하여 adaptation 할 수 있습니다. 하나의 컴포넌트에 대해 여러개의 adaptation 인스턴스를 만들 수 있습니다. adaptation 데이터 인스턴스는 컴포넌트 컨피규레이션 이라는 곳에 저장됩니다. 이름 떄문에 의미가 햇갈릴 수 있으니 주의하세요. 컴포넌트 컨피규레이션은 단지 configuration만 저장하는게 아니라 adaptation 전체를 저장합니다. 각각의 컴포넌트 컨피규레이션은 각자 유일한 컨피규레이션 아이디를 가지고 있습니다.

웹딘프로아밥 컴포넌트는 여러개의 adaptation 인스턴스를 가질수 있기 때문에, 여러개의 컴포넌트 컨피규레이션에 의해 adaptation 될 수 있습니다. 반대 방향을 살펴보면 하나의 컴포넌트 컨피규레이션은 오직 하나의 adaptation 인스턴스 즉 하나의 웹딘프로아밥 컴포넌트만 가질 수 있습니다.

일반적으로 웹딘프로아밥 컴포넌트 adaptation 과정을 보면 개발자가 컴포넌트 컨피규레이션을 만드는 것으로 시작합니다. 그러나 이것만이 유일한 경우는 아닙니다. 컴포넌트 컨피규레이션이 암시적(implicitly)으로 시스템에 의해 자동 생성 되는 경우도 있습니다. 이렇게 두가지 경우로 구분할수 있습니다:

  • 명시적 컴포넌트 컨피규레이션, 이것은 TADIR 오브젝트 입니다. 보통 개발 오브젝트 처럼 아밥 저장소에 저장되고 CTS할 수 있습니다. 개발자가 아밥 워크벤치(SE80)에서 개발합니다. Z로 시작하는 컨피규레이션 아아디를 입력해야 합니다. 인스턴스가 한번 만들어지면 모든 adaptation 데이터(configuration 데이터, customization 데이터, 개인화 데이터)를 관리합니다.
  • 암시적 또는 이름없는 컴포넌트 컨피규레이션, 이것은 저장소에 저장되는 오브젝트가 아닙니다. 필요에 따라 웹딘프로아밥 컨피규레이션 프레임워크가 암시적으로 만들어냅니다. 컨피규레이션 아이디는 숫자와 알파벳을 혼용하여 자동으로 생성됩니다. 여기에는 configuration 데이터나 component-defined adaptation 데이터는 들어 있지 않습니다. 오직 built-in customization 데이터 와 built-in 개인화 데이터만 들어 있습니다. 웹딘프로 컨피규레이션 프레임워크는 웹딘프로아밥 어플리케이션과 컴포넌트 인스턴스/ 재사용에 대한 여러 조합에 각각 필요한 이름없는 컨피규레이션을 만들어 냅니다. 조합을 결정하는 자세한 과정은 아래에 다시 설명하겠습니다.

컴포넌트 컨피큐레이션 오브젝트에서 adaptation 데이터 관리

컴포넌트 컨피규레이션 오브젝트에서 adaptation 데이터 인스턴스는 추가되거나 변경될 수 있습니다. 각 계층에 따라 관리 방법이 다릅니다:

  • Configuration 데이터, 컨피큐레이션 에디터를 사용해서 명시적 컴포넌트 컨피규레이션을 관리 할 수 있습니다. 시작하는 방법은 스탠다드 웹딘프로아밥 어플리케이션 CONFIGURE_COMPONENT(컴포넌트는 WDR_CFGE_EDITOR)을 실행하면 됩니다. 물론, 개발시에 이렇게 해야하고 실행시에는 관리가 불가능 합니다. 예외로 실행시 관리하는 유일한 것은 바로 컨피규레이션 에디터 자체를 실행할때 입니다.
  • Customization 데이터, 커스터마이즈 에디터를 사용하여 관리합니다. 시작하는 방법은 스탠다드 웹딘프로아밥 어플리케이션 CUSTOMIZE_COMPONENT(컴포넌트는 WDR_CFGE_EDITOR)을 실행하면 됩니다. 물론, 개발시에 이렇게 해야합니다.  실행시에는 관리하는 방법도 있습니다. 바로 URL 파라미터 sap-config-mode=x 를 주어서 관리자 모드로 실행하는 것입니다. customization 데이터가 적용되는 범위는 오직 그 하나의 클라이언트라는 점을 주의하세요.
  • 개인화 데이터, 오직 실행시에만 관리할 수 있습니다. 그리고 개인화 비활성화 옵션을 사용하지 않아야 합니다. 각 사용자는 자신의 개인화 데이터만 관리할 수 있습니다. 데이터 자체가 개인에게 속한것이라 할 수 있습니다. 실행시 웹딘프로아밥 컨피큐레이션 프레임워크는 built-in 개인화 데이터만 관리합니다. 그러므로 component-defined 개인화 데이터를 관리하고 싶다면 개발 단계에서 미리 사용자가 개인화 관리를 할 수 있도록 해주어야 합니다. 개인화 비활성화 옵션은 웹딘프로아밥 어플리케이션 파라미터 WDDISABLEUSERPERSONALIZATION로 조정합니다.

아래 표를 통해 정리해 보았습니다.

 

ADAPTATION

MATRIX

Configuration Customization

개인화(Personalization)

Built-in

실행시: 불가.



개발시: CONFIGURE_COMPONENT 어플리케이션을 실행하여 관리. 명시적 컴포넌트 컨피규레이션만 가능.


실행시: 관리자 모드로 실행하면 마우스 오른쪽 버튼을 눌러 나온 메뉴로 들어갈 수 있음.



개발시: CUSTOMIZE_COMPONENT 어플리케이션을 실행하여 관리. 명시적 컴포넌트 컨피규레이션만 가능.




실행시: 실행중 마우스 오른쪽 버튼을 눌러 나온 메뉴로 들어갈 수 있음. 관리자모드가 아닐것. WDDISABLEUSERPERSONALIZATION 파라미터를 사용하지 않을것.





개발시: 불가.
Component-defined

실행시: 불가 (FPM은 가능).





개발시: CONFIGURE_COMPONENT 어플리케이션을 실행하여 관리. 명시적 컴포넌트 컨피규레이션만 가능.


실행시: 관리자 모드로 실행하면 마우스 오른쪽 버튼을 눌러 나온 메뉴로 들어갈 수 있음.



개발시: CUSTOMIZE_COMPONENT 어플리케이션을 실행하여 관리. 명시적 컴포넌트 컨피규레이션만 가능.


실행시: 불가. 개발 단계에서 미리 사용자가 개인화 관리를 할 수 있도록 해주어야 함.





개발시: 불가.

 

어플리케이션 컨피규레이션 오브젝트

어플리케이션 컨피규레이션 오브젝트는 adaptation 스키마에서 매우 중요합니다. 이것은 아밥 워크벤치에서 만듭니다. 항상 하나의 웹딘프로아밥 어플리케이션에 연결됩니다. 각 웹딘프로아밥 어플리케이션은 여러개의 어플리케이션 컨피규레이션이 연결될 수 있습니다. 어플리케이션 컨피규레이션 오브젝트는 TADIR 테이블에 타입 WDCA 오브젝트로 저장됩니다. 각각의 어플리케이션 컨피규레이션은 각자 유일한 컨피규레이션 아이디를 가지고 있습니다.

어플리케이션 컨피규레이션 오브젝트는 어떤 컴포넌트 컨피규레이션 오브젝트가 adaptation 되어야 하는지를 어플리케이션 관점에서 전체적으로 보는 지도 같은 존재 입니다. 어플리케이션에 속한 모든 컴포넌트에 대해서 컴포넌트 컨피규레이션을 지정할 필요는 없습니다. 명시적으로 지정하지 않은 경우는 웹딘프로아밥 컨피규레이션 프레임워크에 의해 이름없는 컴포넌트 컨피규레이션으로 인식하여 자동으로 관리합니다.

웹딘프로아밥 어플리케이션이 실행될때마다 특정 어플리케이션 컨피규레이션을 지정하여 실행하거나 명시적으로 지정하지 않은 경우 이름없는 어플리케이션 컨피규레이션이 자동으로 붙습니다. 두번째 경우라면, 어플리케이션에 속한 각 웹딘프로아밥 컴포넌트는 이름없는 컴포넌트 컨피규레이션 정책을 따릅니다. 반대로 어플리케이션 컨피규레이션을 지정하여 실행하면 각 컴포넌트에 어떤 컴포넌트 컨피규레이션을 사용하는지 알 수가 있습니다.

컴포넌트 컨피규레이션과 어플리케이션 컨피규레이션 둘은 FPM을 이루는 기반입니다. FPM을 사용하므로써 개발 기술이 웹딘프로아밥 컴포넌트를 전체 개발하는 방식에서 스탠다드 웹딘프로아밥 컴포넌트(FPM 컴포넌트)를 단지 adaptation 하는 형태로 개발 방식의 변경이 있습니다.

권장하는건 아니지만 컴포넌트 컨피규레이션 아이디와 어플리케이션 컨피규레이션 아이디를 동일하게 만들 수도 있습니다.

웹딘프로아밥 어플리케이션을 실행할때 2가지 방법으로 어플리케이션 컨피규레이션을 지정할 수 있습니다:

  • URL 파라미터 SAP-WD-CONFIGID 로 어플리케이션 컨피규레이션 아이디를 전달합니다. 컨피규레이션 아이디가 올바르다면 해당 어플리케이션 컨피규레이션이 지정됩니다. 올바르지 않다면 어플리케이션 컨피규레이션을 지정하지 않고 어플리케이션이 시작됩니다.
  • 만약 URL에 SAP-WD-CONFIG 파라미터가 없다면, 프레임워크는 웹딘프로아밥 어플리케이션 파라미터 WDCONFIGURATIONID를 확인합니다. WDCONFIGURATIONID에 값이 있고 그 컨피규레이션 아이디가 올바르다면 해당 어플리케이션 컨피규레이션이 지정됩니다. 올바르지 않다면 어플리케이션 컨피규레이션을 지정하지 않고 어플리케이션이 시작됩니다.

어플리케이션 컨피규레이션 오브젝트 정의는 테이블 WDY_CONFIG_APPL 에 저장됩니다.

실행시 동적으로 컴포넌트 컨피규레이션을 적용하는 방법

개발시에는 어플리케이션 컨피규레이션에서만 컴포넌트 컨피규레이션을 지정할 수 있습니다. 동적으로 컴포넌트 컨피규레이션을 변경해야 한다고 가정해 봅시다. 이런경우 어플리케이션 컨피규레이션은 적절한 컴포넌트 컨피규레이션을 동적으로 지정할 수 없습니다. 그러나 아밥 코드를 이용하여 실행중에 컴포넌트 컨피규레이션을 지정할 수 있는 방법이 있습니다. 사실 FPM 프레임워크가 UIBB(User Interface Building Block)를 지정할때 이 메소드를 사용합니다. (컨피규레이션 아이디는 개발시 미리 adaptation 데이터로 입력해 두긴 하지만 실행시 그 정보를 기반으로 변경합니다).

아래 코드를 WDDOINIT 메소드에 넣으면 컴포넌트 컨피규레이션을 실행중에 변경할 수 있습니다:

 

METHOD wddoinit .

   DATA lif_api        TYPE REF TO if_wd_component.

   DATA lif_adaptation TYPE REF TO if_wd_personalization.

   DATA ls_config      TYPE wdy_config_key.

   lif_api = wd_this->wd_get_api( ).

   lif_adaptation = lif_api->get_personalization_manager( ).

   CLEAR ls_config.

   ls_config–config_id = 'ZWD_DFC_1_COMP_CONFIG_2'.

   lif_adaptation->load_config_by_key( ls_config ).

ENDMETHOD.

 

위 예제 코드에서 컴포넌트 컨피규레이션으로 ZWD_DFC_1_COMP_CONFIG_2을 지정하였습니다.

adaptation 데이터를 CTS 전송하는 방법

CTS 가능한지와 주의사항은 각 계층별로 각각 다릅니다. 개인화 데이터는 전송할 수 없습니다. customization 데이터는 customizing request로 전송합니다. configuration 데이터는 workbench request로 전송합니다.

adaptation 데이터의 전송에는 테이블 WDY_CONF_USER, WDY_CONF_USERT, WDY_CONF_USERT2, WDY_CONF_UDEF를 포함합니다. 어플리케이션 컨피규레이션은 workbench request로 전송하고 내용은 WDY_CONFIG_APPL 테이블에 있습니다.

실행시 adaptation 데이터를 결정하는 과정

실행시 웹딘프로아밥 컨피규레이션 프레임워크는 adaptation 데이터를 결정하고 각 웹딘프로아밥 컴포넌트 인스턴스에 적용합니다. 그림 3 처럼 3단계 과정이 있습니다.

 

Adaptation data determination runtime process.jpg

그림 3. 각 웹딘프로아밥 컴포넌트 인스턴스에 대해 실행시 adaptation 데이터를 결정하는 과정

 

첫번째 단계에서는 웹딘프로아밥 컨피규레이션 프레임워크는 adaptation 데이터를 가져와야할 컨피규레이션 아이디를 읽어 옵니다. 다음 두번째 단계에서는 클라이언트와 사용자를 고려하여 필요한 모든 adaptation 데이터를 가져옵니다. 마지막으로 세번째 단계에서는 각 계층의 adaptation 데이터를 병합하여 최종 adaptation 데이터를 만들어 냅니다. 각 단계의 상세 설명은 아래에 더 있습니다. 이 모든것은 웹딘프로아밥 컴포넌트 하나의 입장에서 설명하는 것입니다.

단계 1: 컴포넌트 컨피규레이션 오브젝트를 가져옴

실행시에 웹딘프로아밥 컨피규레이션 프레임워크는 실행중인 각 웹딘프로아밥 컴포넌트 인스턴스별로 어떤 컴포넌트 컨피규레이션이 필요한지 결정합니다. 각 웹딘프로아밥 컴포넌트 인스턴스별로 모든 adaptation 데이터는 지정된 컴포넌트 컨피규레이션에서 읽어오고 그 컴포넌트 컨피규레이션 이름으로 저장하고 관리합니다. 웹딘프로아밥 컨피규레이션 프레임워크는 사용할 컨피규레이션 아이디를 결정합니다. 컨피규레이션 아이디는 어플리케이션 컨피규레이션에 지정된 값을 사용하거나 실행중에 아밥 코드로 동적으로 지정될 수도 있습니다. 만약 컨피규레이션 아이디가 아무것도 지정되지 않았거나 유효하지 않은 아이디 값을 입력한 경우, 프레임워크는 이름없는 컴포넌트 컨피규레이션 결정을 합니다.

이름없는 컴포넌트 컨피규레이션 결정

실행시, 일부 웹딘프로아밥 컴포넌트 인스턴스는 유효하지 않은 컨피규레이션 아이디를 가지는 경우도 있습니다. 웹딘프로아밥 컨피큐레이션 프레임워크는 이런 경우 이름없는 컨포넌트 컨피규레이션 결정을 합니다. 컨피규레이션 아이디는 프레임워크에 의해 자동으로 생성됩니다. 웹딘프로아밥 어플리케이션 이름과 웹딘프로아밥 컴포넌트 인스턴스에 따라 해시 펑션을 적용하여 아이디 값을 결정합니다.

Determinación ID de configuración genérico_EN.jpg

그림 4. 이름없는 컴포넌트 컨피규레이션에서 컨피규레이션 아이디 결정

그림 4는 웹딘프로 어플리케이션 ZWD_APPL 와 웹딘프로 컴포넌트 ZWD_MAIN 으로 실행하는 경우를 예를들어 보여주고 있습니다. ZWD_MAIN은 2개의 컴포넌트를 사용합니다. 컴포넌트 ZWD_COMP1를 USAGE_1으로 사용하고 컴포넌트 ZWD_COMP2는 USAGE_2로 사용합니다. 웹딘프로아밥 어플리케이션 ZWD_APPL은 어플리케이션 컨피규레이션 지정 없이 실행하였습니다. 그리고 동적인 컴포넌트 컨피규레이션 적용 코드도 없습니다. 그러므로 웹딘프로아밥 컨피규레이션 프레임워크는 각 웹딘프로아밥 컴포넌트 인스턴스에 (메인 컴포넌트(ZWD_MAIN), USAGE_1 재사용(ZWD_COMP1), USAGE_2 재사용(ZWD_COMP2)) 대해 이름없는 컴포넌트 컨피규레이션 결정을 합니다. 앞서 설명했듯이 컨피규레이션 아이디는 숫자와 알파벳을 혼용하여 자동으로 결정됩니다. 각 컨피규레이션 아이디 결정 과정은 어플리케이션이 변경되거나 컴포넌트가 변경되어도 항상 동일합니다. 웹딘프로아밥 컴포넌트 이름은 영향이 없고 컴포넌트 사용 이름(USAGE_1 과 USAGE_2)이 영향을 줍니다. 이것은 만약 USAGE_1의 실제 웹딘프로아밥 컴포넌트가 변경되더라도 (예를들어 ZWD_COMP1 에서 ZWD_COMP_OTHER로) 컨피규레이션 아이디는 동일할 것을 의미합니다.

단계 2: adaptation 데이터 읽음

다음은 앞 단계에서 결정한 컴포넌트 컨피규레이션 오브젝트에서 adaptation 데이터를 읽어오는 것입니다. 여기서는 각 adaptation 계층별로 각각 데이터를 읽어 옵니다. configuration 데이터는 컴포넌트 컨피규레이션으로 부터 직접 읽어 올 수 있습니다. customization 데이터는 해당 어플리케이션이 실행중인 클라이언트에 따라 데이터를 가져옵니다. 마지막으로 개인화 데이터는 해당 어플리케이션을 실행중인 사용자 아이디 별로 데이터를 가져옵니다.

Determinación de adaptación en configuración de componente_EN.jpg

그림 5. 계층별 adaptation 데이터 읽음

 

그림 5는 콘크리트 웹딘프로아밥 컴포넌트에서 계층별 adaptation 데이터 읽는 과정을 예를 들어 보여주고 있습니다. 이 예에서는 N개의 클라이언트와 M개의 사용자가 있음을 가정했습니다. 그림에 강조된 화살표를 따라가 보면 클라이언트는 "Client 1" 과 사용자는 "User M-1" 입니다.

단계 3: 각 계층의 adaptation 데이터를 병합

마지막으로, 앞 단계에서 읽어온 데이터를 병합하여 최종 adaptation 데이터를 만들어 냅니다. 병합의 의미는 configuration 데이터, customization 데이터, 개인화 데이터를 합친다는 뜻입니다. 이 과정은 중요한 점은 적용 우선순위로 개인화 데이터가 가장 높은 우선순위를 가지고 있고 그다음 customization 데이터이고 가장 낮은 우선순위는 configuration 데이터 입니다. 우선순위에 따른 데이터 적용 결정 과정이  CSS (Cascading Style Sheet)의 그것과 매우 유사합니다.

Delta handling with CSS_EN.jpg

그림 6. 계층 adaptation 데이터 병합을 CSS와 비교

 

adaptation의 계층 구조 적용은 폭포같은 방법으로 높은 우선순위를 가진 계층이 상속받은 낮은 우선순위 계층의 데이터를 덮어쓰는 방식 입니다. 그리고 최종(final) 표시가 안된것만 이렇게 높은 우선순위가 낮은 우선순위 데이터를 덮어쓰는 방식이 적용됩니다.

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/06/03/adaptation-in-web-dynpro-abap-in-depth-analysis/

 

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/06/16/how-to-report-only-one-error-message-for-many-mandatory-fields-in-web-dynpro-abap/

 

How to Report only one error message for many mandatory fields in Web Dynpro ABAP

June 16, 2014

 

필수값 체크를 위해서 보통은 클래스 CL_WD_DYNAMIC_TOOL의 메소드 CHECK_MANDATORY_ATTR_ON_VIEW( )를 호출합니다.

 

Yes, 이건 잘 동작합니다. 하지만 동일한 에러 메시지 “모든 필수 입력 필드를 채우십시오”를 여러 필드에 대해 여러번 출력하는 문제가 있습니다. 예를들어 필드가 100개면 100개의 에러 메시지가 출력됩니다. 

 

원래 실행 결과:

 

err.JPG

필수값 체크 에러가 발생했네요. 필드 하나당 메시지 하나씩 입니다.

 

err1.JPG

 

 

엄청난 스크롤이 메시지 영역에 나타났습니다. 메시지가 지루하게 많습니다. 게다가 화면 윗부분에 자리를 많이 차지하고 있습니다.

 

그럼 어떻게 하면 좋을까요?

          여러 필드 필수값 체크에 에러메시지 하나만 표시하기를 원한다면...

 

해결 방법:

 

 

  • 메소드 CHECK_MANDATORY_ATTR_ON_VIEW 호출시 메시지를 표시하지 않도록 파라미터 DISPLAY_MESSAGES = ABAP_FALSE 을 입력합니다.
  • 메시지는 인터널 테이블 lt_messages에 넣어 둡니다.
  • lt_messages에는 메시지 외에도 필수값 체크에 에러가 난 컨텍스트 엘리먼트와 어트리뷰트 정보가 들어 있습니다.
  • 각 컨텍스트 엘리먼트 별로 어트리뷰트 목록을 모아서 lt_attributes에 넣습니다.
  • IF_WD_MESSAGE_MANAGER의 메소드 REPORT_ELEMENT_ERROR_MESSAGE( )를 사용하여 각 컨텍스트 엘리먼트 별로 하나의 에러 메시지를 표시하도록 합니다.

 

이 해결 방법이 좋아 보입니다.

 

뷰의 WDDOBEFOREACTION( ) 메소드에 아래 코드를 입력해 주세요..

 

주의: 메시지는 컨텍스트 엘리먼트 별로 하나씩 표시 됩니다. 즉 뷰에 컨텍스트 노드가 여러개라면, 여러개의 메시지가 컨텍스트 엘리먼트 별로 하나씩 표시 됩니다.

 

WDDOBEFOREACTION( )
METHOD wddobeforeaction .

  DATA lo_api_controller            TYPE REF TO if_wd_view_controller.

  DATA lo_action                       TYPE REF TO if_wd_action.

  DATA lo_message_manager     TYPE REF TO if_wd_message_manager.

  DATA lt_attributes                   TYPE string_table.

  DATA lt_messages            TYPE cl_wd_dynamic_tool=>t_check_result_message_tab.

  DATA ls_messages            LIKE LINE OF lt_messages.

  lo_api_controller = wd_this->wd_get_api( ).

  lo_action = lo_api_controller->get_current_action( ).

  CALL METHOD lo_api_controller->get_message_manager

    RECEIVING

      message_manager = lo_message_manager.

  IF lo_action IS BOUND.

    CASE lo_action->name.

      WHEN 'CHECK_DATA'.

        cl_wd_dynamic_tool=>check_mandatory_attr_on_view(

          EXPORTING

        view_controller = lo_api_controller

        display_messages = abap_false

          IMPORTING

        messages = lt_messages ).

        CLEAR lt_attributes.

        “sort by context element,

        SORT lt_messages BY context_element.

        LOOP AT lt_messages INTO ls_messages.

          APPEND ls_messages-attribute_name TO lt_attributes.

          AT END OF context_element.

            ” if no attributes found for errors, skip error message

            IF lt_attributes[] IS INITIAL.

              CONTINUE.

            ENDIF.

            ”         report message

            CALL METHOD lo_message_manager->report_element_error_message

              EXPORTING

                message_text = 'Please fill all required fields'

                element      = ls_messages-context_element

                attributes   = lt_attributes.

     

           “Clear attributes list, for next context element

            CLEAR lt_attributes.

          ENDAT.

        ENDLOOP.

    ENDCASE.

  ENDIF.

ENDMETHOD.

 

실행 결과 - 1:

 

에러 메시지가 컨텍스트 엘리먼트 별로 하나씩 표시 됩니다

err2.JPG

실행 결과 - 2:

 

사용자가 영역 1 에 필수 값을 모두 입력하고 check data 버튼을 눌렀습니다,

err3.JPG

————————————-

이 글이 (컨텍스트 엘리먼트 별로) 메시지 하나만 출력하고자 하던 분들에게 도움이 되셨길 바랍니다.

 

그리고 모든 컨텍스트에 대해 메시지 하나만 표시하고 원하신다면 아래 글을 참고하세요.

 

How to Report one attribute error message for multiple fields in Web Dynpro ABAP

————————————

여러분의 소중한 피드백 / 제안 / 댓글 환영합니다.

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/06/16/how-to-report-only-one-error-message-for-many-mandatory-fields-in-web-dynpro-abap/

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/07/28/secure-transferring-of-parameters-between-wda-applications/

 

Secure transferring of parameters between WDA Applications

July 28, 2014

 

웹딘프로아밥 어플리케이션에서 다른 어플리케이션으로 사원 번호를 전달하기 위해서 엄청 안전한 방법이 필요했습니다.

URL 파라미터를 바로 사용할 수는 없습니다. 왜냐하면 누구나 그걸 고쳐서 다른 사람의 민감한 데이타를 볼 수 있기 때문이죠.

 

변수를 공유하는 방법이 아닌 완전히 독립적인 방법이여야 합니다.

 

 

해결 방법은 스탠다드 어플리케이션 HRESS_A_PERSINFO 에서 발견 할 수 있었습니다.
thanks to Bhaskar Tripathi's question
http://scn.sap.com/message/15249282

 

 

웹딘프로 컴포넌트 HRESS_C_PERNR_SELECTION 에는 어시스턴스 클래스 CL_HRESS_AS_PERNR_SELECTION가 있습니다.

 

값을 보내는 어플리케이션에서는 값을 메모리에 올리고 랜덤 아이디를 RV_MEM_ID로 받습니다.

 

CALL METHOD CL_HRESS_EMPLOYEE_SERVICES=>SET_PERNR_TO_MEMORY

   EXPORTING

     iv_pernr                  = lv_pernr

*     IV_DISP_CE_ASSIGTS_SCREEN =

*     IV_NON_EIC_MODE           =

   RECEIVING

     RV_MEM_ID                 = w_value

 

 

이 값을 활용하여 URL을 구성하고 두번째 어플리케이션에 전달합니다.

 

* Get the URL of the called application

  CALL METHOD cl_wd_utilities=>construct_wd_url

    EXPORTING

      application_name = 'ZBHRWD_INC_CRiteria_ESS'

    IMPORTING

      out_absolute_url = w_url.

*Attach the parameters and its value with the URL that

* have to be passed to the 2nd application

  CALL METHOD cl_http_server=>append_field_url

    EXPORTING

      name  = 'PERNR_MEM_ID'

      value = w_value

    CHANGING

      url   = w_url.

 

 

값을 받는 어플리케이션에서는 사원 번호를 메모리 아이디에서 가져옵니다.

 

wd_assist->get_pernr_from_memory(

           exporting

           iv_pernr_mem_id      = wd_comp_controller->gv_memid

           IMPORTING

            ev_pernr = lv_pernr ).

 

 

이렇게 하면 권한 검사를 할 필요도 없습니다.

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/07/28/secure-transferring-of-parameters-between-wda-applications/

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/08/08/drag-and-drop-in-web-dynpro-abap-alv/

 

Drag and Drop in Web Dynpro ABAP ALV

August 8, 2014 

 

소개

이 글은 웹딘프로아밥 ALV 사이에 드래그 앤 드랍 구현 방법을 설명합니다. ALV사이의 드래그 앤 드랍은 넷위버 702 이전까지는 지원하지 않습니다. 예제로 ALV 2개를 (하나는 드래그 소스이고 하나는 드랍 타켓 입니다) 만들고 한 ALV에서 다른 ALV로 드래그 앤 드랍을 실행해 보겠습니다.

 

준비물

SAP NetWeaver 700 Ehp2.

 


단계별 설명

단계 1: 웹딘프로 컴포넌트 만들기.

티코드 SE80으로 이동하여 웹딘프로 컴포넌트를 만듭니다.

1.JPG

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

2.JPG

 

단계 2: 컴포넌트 재사용

사용된 컴포넌트에 ALV_DRAG, ALV_DROP(하나는 드래그 소스이고 하나는 드랍 타겟) 2개의 ALV 컴포넌트 SALV_WD_TABLE를 입력합니다.

3.JPG

 

단계 3: 데이타 바인딩

컴포넌트 컨트롤러의 컨텍스트 탭으로 이동하여 노드 FLIGHT_DRAG(드래그 소스 ALV에서 표시할 데이타)를 만듭니다).

/wp-content/uploads/2014/08/4_516604.jpg

 

노드 네임을 입력하고 카디날리티 0..n으로 선택하고 OK를 클릭합니다.

/wp-content/uploads/2014/08/5_516605.jpg

 

어트리뷰트를 적당히 만들어 줍니다. (데모를 위해, 5개만 어트리뷰트만 만들어 봤습니다).

6.JPG

 

또한 다른 노드 FLIGHT_DROP(드랍 타겟 ALV에서 표시할 데이타)도 비슷하게 만들어 줍니다. 카디날리티 0..n으로 하고 어트리뷰트를 적당히 만들어 주세요.

7.JPG

 

단계 3: 레이아웃 디자인 (역자주: 단계 3이 중복되는건 원본 글부터 잘못된 것).

메인 뷰의 레이아웃 탭으로 이동합니다. ROOTUIELEMENTCONTAINER 아래에 엘리먼트를 추가 합니다.

/wp-content/uploads/2014/08/8_516614.jpg

 

ViewContainerUIELement를 하나 추가 합니다. (ALV1 의 자리).

9.JPG

 

또한 ViewContainerUIELement를 하나 더 추가합니다. (ALV2 의 자리).

10.JPG

 

메인 뷰의 컨텍스트 탭으로 이동합니다. 컴포넌트 컨트롤러 컨텍스트의 FLIGHT_DRAG 노드를 뷰 컨텍스트 쪽으로 드래그 앤 드랍 합니다.

11.JPG

또한 컴포넌트 컨트롤러 컨텍스트의 FLIGHT_DROP 노드도 뷰 컨텍스트 쪽으로 드래그 앤 드랍 합니다.

12.JPG

 

이제 뷰의 속성 탭으로 이동하여 Create Controller Usage 버튼을 클릭합니다.

/wp-content/uploads/2014/08/13_516625.jpg

ALV_DRAG의 인터페이스 컨트롤러를 추가 합니다.

14.JPG

또한 ALV_DROP의 인터페이스 컨트롤러도 추가 합니다.

16.JPG

단계 4: 메소드 선언과 구현.

뷰의 메소드 탭으로 이동하여 WDDOINIT 메소드에 아래 코드를 입력합니다.

 

WDDOINT
METHOD wddoinit .

  DATA: lo_nd_flight_drag TYPE REF TO if_wd_context_node,

        lo_nd_flight_drop TYPE REF TO if_wd_context_node,

        lt_flight_drag    TYPE wd_this->elements_flight_drag,

        lt_flight_drop    TYPE wd_this->elements_flight_drop.

  DATA: lr_usage          TYPE REF TO if_wd_component_usage,

        lr_component      TYPE REF TO iwci_salv_wd_table,

        lr_model          TYPE REF TO cl_salv_wd_config_table,

        lr_table_settings TYPE REF TO if_salv_wd_table_settings,

        lr_header         TYPE REF TO cl_salv_wd_header,

        lr_avl_drag       TYPE REF TO if_salv_wd_drag_and_drop,

        lr_avl_drop       TYPE REF TO if_salv_wd_drag_and_drop.

*Set Data to ALV Nodes

  lo_nd_flight_drag = wd_context->get_child_node( name = wd_this->wdctx_flight_drag ).

  SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE lt_flight_drag UP TO 10 ROWS.

  lo_nd_flight_drag->bind_table( new_items = lt_flight_drag ).

  lo_nd_flight_drop = wd_context->get_child_node( name = wd_this->wdctx_flight_drop ).

  SELECT * FROM sflight INTO CORRESPONDING FIELDS OF TABLE lt_flight_drop UP TO 4 ROWS.

  lo_nd_flight_drop->bind_table( new_items = lt_flight_drop ).

**Set ALV Drag Source and Drop Target Infos

*…get ALV DRAG component usage

  lr_usage =   wd_this->wd_cpuse_alv_drag( ).

  IF lr_usage->has_active_component( ) IS INITIAL.

    lr_usage->create_component( ).

  ENDIF.

*…get ALV DRAG component

  lr_component = wd_this->wd_cpifc_alv_drag( ).

* get ConfigurationModel from ALV DRAG Component

  lr_model = lr_component->get_model( ).

* Set Header for ALV Drag

  lr_table_settings ?= lr_model.

  lr_header = lr_table_settings->get_header( ).

  lr_header->set_text( 'ALV Drag Source' ).                  “#EC NOTEXT

  lr_avl_drag ?= lr_model.

* get ConfigurationModel from ALV DROP Component

  lr_usage =   wd_this->wd_cpuse_alv_drop( ).

  IF lr_usage->has_active_component( ) IS INITIAL.

    lr_usage->create_component( ).

  ENDIF.

  lr_component = wd_this->wd_cpifc_alv_drop( ).

  lr_model = lr_component->get_model( ).

* Set Header for ALV Drag

  lr_table_settings ?= lr_model.

  lr_header = lr_table_settings->get_header( ).

  lr_header->set_text( 'ALV Drop Target' ).                  “#EC NOTEXT

  lr_avl_drop ?= lr_model.

* *Drag Source Info

* Create alv as drag source

  lr_avl_drag->create_drag_source_info(

    EXPORTING

      data = 'ALV_DRAG'

      tags = 'alv1'

      enabled = abap_true ).

* Drop on Row Target Infos

  lr_avl_drop->set_drop_row_name_fieldname( 'CARRID' ). ” Column name

  lr_avl_drop->set_drop_row_name( ” ).

  lr_avl_drop->create_drop_row_target_info(

    EXPORTING

      id   = 'ALV_DROP'

      name = 'AA'            “Value

      tags = 'alv1'   

      enabled = abap_true ).

ENDMETHOD.

 

 

ALV_DROP 컴포넌트의 이벤트 ON_DROP에 대한 이벤트 핸들러(ON_DROP_CARRID)를 만듭니다.

17.JPG

 

아래 코드를 ON_DROP_CARRID 이벤트 핸들러 메소드에 입력합니다.

 

ON_DROP_CARRID
METHOD on_drop_carrid .

  DATA: lr_node_drag    TYPE REF TO if_wd_context_node,

        lr_element_drag TYPE REF TO if_wd_context_element,

        lr_node_drop    TYPE REF TO if_wd_context_node,

        lr_element_drop TYPE REF TO if_wd_context_element,

        ls_flight       TYPE wd_this->element_flight_drag.

*  Get the Data of ALV DRAG Source

  IF r_param->data = 'ALV_DRAG'.

   lr_node_drag    = wd_context->get_child_node( 'FLIGHT_DRAG' ).

    lr_element_drag = lr_node_drag->get_lead_selection( ).

    IF lr_element_drag IS BOUND.

      lr_element_drag->get_static_attributes(

      IMPORTING

        static_attributes = ls_flight ).

    ENDIF.

  ENDIF.

* Get Index of ALV DROP Target

  lr_node_drop    = wd_context->get_child_node( 'FLIGHT_DROP' ).

  lr_element_drop = lr_node_drop->get_element( index = r_param->row_index ).

  IF lr_element_drop IS BOUND.

*   Set the ALV DROP Target data from ALV DRAG Source

    lr_element_drop->set_static_attributes(

       static_attributes = ls_flight ).

  ENDIF.

ENDMETHOD.

 

단계 5: 데이타 매핑.

ALV_DRAG component usage의 인터페이스 컨트롤러로 이동하여 Create Controller Usage 버튼을 클릭합니다.

/wp-content/uploads/2014/08/18_516644.jpg

컴포넌트 컨트롤러를 선택합니다.

19.JPG

 

컴포넌트 컨트롤러 컨텍스트의 FLIGHT_DRAG 노드에서 Interface controller의 DATA 노드로 드래그 앤 드랍 합니다.

20.JPG

 

또한 ALV_DROP component usage의 인터페이스 컨트롤러로 이동하여 컴포넌트 컨트롤러 컨텍스트의 FLIGHT_DROP 노드에서 Interface controller의 DATA 노드로 매핑도 추가 합니다.

21.JPG

 

윈도우로 이동하여 VC1에서 마우스 오른쪽 버튼을 누른후 Embed View를 클릭합니다;

/wp-content/uploads/2014/08/22_516648.jpg

 

ALV_DRAG 컴포넌트의 TABLE 뷰를 선택합니다.

23.JPG

 

또한 ALV_DROP 컴포넌트의 TABLE 뷰도 VC2에 넣어 주세요.

 

이제 저장하고 활성화 합니다.

어플리케이션 만들기.

웹딘프로 어플리케이션을 만들고 저장 합니다.

/wp-content/uploads/2014/08/24_516650.jpg

설명을 입력하고 저장 버튼을 누릅니다.

25.JPG

 

웹딘프로 어플리케이션에서 마우스 오른쪽 버튼을 누르고 테스트를 선택합니다.

 

실행 결과:

두개의 ALV가 화면에 보입니다. (첫번째는 드래그 소스이고 두번째는 드랍 타겟입니다)

 

27.JPG

 

첫번째 ALV에서 드래그를 시작하여 두번째 ALV의 4번째 레코드 위치에 드랍 합니다.

28.JPG

 

/wp-content/uploads/2014/08/29_516657.jpg

드랍 하게 되면 해당 줄의 값이 수정된 것을 볼 수 있습니다.

 

30.JPG

 

결론

드래그 앤 드랍하는 간단한 예제를 데모로 보여드렸습니다. 값 수정이 아니라 레코드를 추가하거나 이동하는 구현도 할 수 있습니다. 그리고 ALV 말고 다른 UI 와의 드래그 앤 드랍도 가능합니다.

 

 

참고: Drag and Drop – Web Dynpro for ABAP – SAP Library

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/08/08/drag-and-drop-in-web-dynpro-abap-alv/

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/09/26/identify-changed-data-on-screen-in-web-dynpro-abap/

Identify changed data on screen in Web dynpro ABAP

September 26, 2014 

안녕하세요,

 

입력가능 필드가 있는데 여기에 사용자가 값을 변경하였는지 확인해야 하는 경우가 있습니다. 웹딘프로에서 화면에 연결된 데이타는 모두 컨텍스트에 저장된다는 것은 분명합니다. 변경여부를 파악하는데 코딩을 많이 하지 않고 간단히 알 수 있는 방법이 있습니다. 이 글에서 차근차근 그 방법을 알아보도록 하겠습니다.

 

예제 웹딘프로 컴포넌트에는 노드 하나 그아래 어트리뷰트 하나 있습니다.

이 어트리뷰트는 화면의 입력 필드에 바인딩할 것 입니다. 컨텍스트는 만들었으니 이제 화면 레이아웃을 만들어 보겠습니다.

Capture1.PNG

뷰의 레이아웃은 이렇게 생겼습니다.

Capture5.PNG

여기 있는 버튼을 누르면 입력 필드에 입력한 값이 변경 되었는지 검사하도록 하겠습니다. 이 버튼은 나중에 실제 "저장" 버튼이 될 수 도 있겠죠.

 

변경 여부를 확인하기 위해서 WDDOINIT에서 컨텍스트 변경 로그를 활성화 하겠습니다. 예제에서는 컴포넌트 컨트롤러에서 컨텍스트를 만들었기 때문에 이곳에 WDDOINIT 메소드에 코드를 입력하는 것입니다. 만약 다른 뷰에 컨텍스트를 만들었다면 뷰의 WDDOINIT 메소드에 코드를 입력하면 됩니다.

Capture2.PNG

컴포넌트 컨트롤러에 메소드 하나를 만듭니다. 이름은 "GET_CHANGE_LOG" 이고 아래 코드를 입력합니다. 이 메소드는 뷰에서 호출할 것입니다.

 

Capture3.PNG

Capture4.PNG

테이블 IT_LIST 에는 변경된 필드의 값이 담겨 있습니다.

아래는 테스트 결과입니다:

 

어플리케이션을 실행하고 값 입력 없이 버튼을 눌러 봅니다.

 

Capture7.PNG

인터널 테이블 IT_LIST 에는 아무것도 들어 있지 않습니다.

Capture6.PNG

이번에는 값을 아무거나 입력하고 버튼을 눌러 봅니다.

Capture9.PNG

이번에는 인터널 테이블에 변경된 필드의 값이 들어 있습니다.

Capture8.PNG

 

 

이 글이 도움이 되시길 바랍니다.

 

감사합니다,

Shitanshu Sahai

"꾸준히 공부하고 젊은 감각을 유지합시다”

 

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/09/26/identify-changed-data-on-screen-in-web-dynpro-abap/

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/09/30/abap-webdynpro-table-to-excel/

ABAP WebDynpro Table to Excel

September 30, 2014 

웹딘프로아밥 테이블을 엑셀 파일로 변환하여 다운로드하는 깔끔한 방법입니다.
(다음 에러 없이: 'filename.xls'의 파일 형식 및 확장명이 일치하지 않습니다. 파일이 손상되었거나 안전하지 않을 수 있습니다. 데이터 원본을 신뢰하지 않는다면 파일을 열지 마세요. 그래도 파일을 여시겠습니까?).

 

 

아래 코드를 가진 메소드를 만드세요:


 

 

method wd_download_table_to_excel.
******************************************************************************************************************
*Purpose:  Accept any table and and sends to Excel from ABAP WebDynpro
******************************************************************************************************************
  data: lv_xstring type xstring.
  data: lv_mime_type type w3conttype.
  data: lv_mime_type_string type string.
  data: ref_data type ref to data.

  get reference of lt_tbl into ref_data.

  call function 'SDOK_MIMETYPE_GET'
    exporting
      extension = 'xlsx'
    importing
      mimetype  = lv_mime_type.

  lv_mime_type_string = lv_mime_type.

  cl_fdt_xl_spreadsheet=>if_fdt_doc_spreadsheet~create_document( exporting itab = ref_data iv_call_type = 1 columns = lt_column receiving xdocument = lv_xstring ).
  cl_wd_runtime_services=>attach_file_to_response( exporting i_filename = i_filename i_content = lv_xstring i_mime_type = lv_mime_type_string i_in_new_window = abap_false ).

endmethod.

 

/wp-content/uploads/2014/09/temp_553273.jpg

 

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/09/30/abap-webdynpro-table-to-excel/

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/10/18/dynamically-createmodify-ui-elements-of-standard-components-without-enhancing/

 

Dynamically Create/Modify UI elements of Standard components without Enhancing

October 18, 2014 

소개

 

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

 

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

 

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

 

진행

 

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

 

/wp-content/uploads/2014/10/1_566500.jpg

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

/wp-content/uploads/2014/10/4_566501.jpg

 

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

 

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

 

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

 

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

 

/wp-content/uploads/2014/10/2_566502.jpg

/wp-content/uploads/2014/10/3_566503.jpg

 

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

/wp-content/uploads/2014/10/5_566504.jpg

 

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

 

/wp-content/uploads/2014/10/6_566505.jpg

 

구현

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

/wp-content/uploads/2014/10/7_566506.jpg

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

/wp-content/uploads/2014/10/8_566507.jpg

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

/wp-content/uploads/2014/10/9_566508.jpg

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

/wp-content/uploads/2014/10/10_566509.jpg

 

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

/wp-content/uploads/2014/10/13_566510.jpg

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

 

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

/wp-content/uploads/2014/10/11_566511.jpg

 

아래 코드를 입력하세요.

 

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의 레이블과 입력 필드가 숨겨진 것을 확인할 수 있습니다!.

/wp-content/uploads/2014/10/14_566513.jpg

 

결론

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

 

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

 

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

 

제한사항

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

 

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/10/18/dynamically-createmodify-ui-elements-of-standard-components-without-enhancing/

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/10/24/ui-theme-designer-for-web-dynpro-abap/

 

UI Theme Designer for Web Dynpro ABAP

October 24, 2014 

소개


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


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


준비물

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


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



단계별 진행

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

/wp-content/uploads/2014/10/1_570383.jpg

위 어플리케이션입니다. 이제 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를 실행합니다.

 

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

/wp-content/uploads/2014/10/2_570461.jpg

 

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

/wp-content/uploads/2014/10/3_570462.jpg

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

 

/wp-content/uploads/2014/10/4_570463.jpg

 

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

/wp-content/uploads/2014/10/5_570464.jpg

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

/wp-content/uploads/2014/10/6_570465.jpg

 

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

/wp-content/uploads/2014/10/7_570466.jpg

 

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

/wp-content/uploads/2014/10/8_570473.jpg

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

/wp-content/uploads/2014/10/9_570474.jpg

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

/wp-content/uploads/2014/10/10_570479.jpg

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

/wp-content/uploads/2014/10/11_570480.jpg

 

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

/wp-content/uploads/2014/10/12_570481.jpg

 

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

/wp-content/uploads/2014/10/14_570485.jpg

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

/wp-content/uploads/2014/10/15_570486.jpg

 

 

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

/wp-content/uploads/2014/10/16_570487.jpg

 

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

/wp-content/uploads/2014/10/17_570450.jpg

 

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

/wp-content/uploads/2014/10/18_570494.jpg

 

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

/wp-content/uploads/2014/10/19_570496.jpg

 

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

/wp-content/uploads/2014/10/20_570507.jpg

 

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

/wp-content/uploads/2014/10/21_570508.jpg

 

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

/wp-content/uploads/2014/10/22_570512.jpg

 

 

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

/wp-content/uploads/2014/10/23_570513.jpg

 

 

완료

 

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

 

/wp-content/uploads/2014/10/27_570514.jpg

 

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

/wp-content/uploads/2014/10/25_570525.jpg

 

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

/wp-content/uploads/2014/10/28_570526.jpg

 

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

/wp-content/uploads/2014/10/26_570527.jpg

 

 

결론

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

참고:

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

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/10/24/ui-theme-designer-for-web-dynpro-abap/

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/12/15/creating-application-specific-web-page-links-in-help-center/

 

Creating Application Specific Web Page Links in Help Center

December 15, 2014 

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


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

 

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

 

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

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

                 Webdynpro Application Name: /SAPSRM/WDA_L_FPM_GAF


             /wp-content/uploads/2014/12/shop_608390.jpg


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

                 Webdynpro Application name: /SAPSRM/WDA_L_FPM_OIF


            PO_image.jpg

 

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

 

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

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

 

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

 

            Category: Learning Content

           Link Type: Web Page

           Language: EN

            Application Type: Web Dynpro Application

 

             검색 버튼을 누릅니다.

          Admin.jpg

 

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

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

            아래 그림을 참고하세요.


          Admin2.jpg

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

           Webdynpro Application: /SAPSRM/WDA_L_FPM_OIF

        /wp-content/uploads/2014/12/admin3_608400.jpg

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

 

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


           /wp-content/uploads/2014/12/admin4_608401.jpg


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

 

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

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

          /wp-content/uploads/2014/12/admin5_608414.jpg


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

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

          /wp-content/uploads/2014/12/admin6_608415.jpg

관련 링크:

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

 

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/12/15/creating-application-specific-web-page-links-in-help-center/

+ Recent posts