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

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2015/01/28/sharing-theme-between-abap-webdynpro-applications-on-different-systems/

 

Sharing theme between Abap Webdynpro applications on different systems

January 28, 2015 

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

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

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

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

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

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

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

T2.png

 

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>T3.png

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

 

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

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

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

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

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

                             T6.png

 

 

 

 

 

 

 

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2015/01/28/sharing-theme-between-abap-webdynpro-applications-on-different-systems/

+ Recent posts