이 글은 자재문서 테이블(흔히 MSEG, MKPF)에 커스텀 필드를 추가하는 방법을 알려드리고자 한다.

S4H 1511 부터 MSEG와 MKPF 는 기존 테이블 대신 MATDOC 에 데이터가 저장되는데

물론 ABAP 티어에서는 기존 테이블명을 사용해도 아래와 같이 리다이렉트 되기 때문에

MSEG -> NSDM_V_MSEG

MKPF -> NSDM_V_MKPF

예전과 동일한 결과를 볼 수는 있다.

이말은 즉  'MSEG와 MKPF를 수정하는 방식은 더이상 정답이 아니란 이야기다.

만약 독자들이 처한 상황이 S4H 업그레이드라면 이야기가 조금더 복잡해지는데 여기서 이 문제는 다루지 않는다.

그렇다면 자재문서 테이블에 커스텀 필드를 어떻게 추가해야 제대로 하는 걸까?

1. MATDOC에 필드를 추가한다.

2. CDS View를 고친다.

3. 순서대로 Active 한다. 순서 틀리면 덤프 대잔치나니까 조심해야만 한다!

그림으로 설명하자면...

이걸 BAPI 에서 제대로 쓰시려면 추가 작업이 필요하다.

어렵지 않죠?

앞으로 기존 ERP에서 S4H로 전환하게 되면 자재문서 뿐만 이런 문제가 여러군데서 생길것이다.

하지만 이 방법을 잘 응용하면 해쳐나가 실 수 있을것이라 생각된다.

/SHCM/RH_SYNC_BUPA_EMPL_SINGLE : S/4HANA BUPA 동기화

/SHCM/RH_SYNC_BUPA_FROM_EMPL  :  S/4HANA BUPA 동기화

SAP LT

CDS View를 재활용하여 CDS view를 만들때에는 association을 이용하여 만들어주어야 한다.

@AbapCatalog.sqlViewName: 'ZQMCV_SQLV_0001'

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@ClientDependent: true

@EndUserText.label: 'MCHBH cds view test'

define view ZQMCV_0001Z as 

select from nsdm_e_mchbh as hbh

association [1] to nsdm_e_mchb as hb

    on hb.matnr = hbh.matnr

   and hb.werks = hbh.werks

   and hb.lgort = hbh.lgort

   and hb.charg = hbh.charg

{    

    key hbh.matnr,

    key hbh.werks,

    key hbh.lgort,

    key hbh.charg,

    key concat(hbh.lfgja, hbh.lfmon) as h_yearmon,

    concat(hb.lfgja,  hb.lfmon)  as yearmon,

    hbh.clabs as h_CLABS,

    hbh.cumlm as h_CUMLM,

    hbh.cinsm as h_CINSM,

    hbh.ceinm as h_CEINM,

    hbh.cspem as h_CSPEM,

    hbh.cretm as h_CRETM,

    hb.clabs,

    hb.cumlm,

    hb.cinsm,

    hb.ceinm,

    hb.cspem,

    hb.cretm

} 

4개의 cds view를 이용하여 max h_yearmon의 값을 한꺼번에 가져오는 CDS view 생성

=======================================================================

** MCHB와 MCHBH의 data join

@AbapCatalog.sqlViewName: 'ycds_ass_trest01'

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: 'cds association test'

define view yass_cds_test01_01 as 

select from nsdm_e_mchbh as hbh

association [1] to nsdm_e_mchb as hb

    on hb.matnr = hbh.matnr

   and hb.werks = hbh.werks

   and hb.lgort = hbh.lgort

   and hb.charg = hbh.charg 

   {

    key hbh.matnr,

    key hbh.werks,

    key hbh.lgort,

    key hbh.charg,

    key concat(hbh.lfgja, hbh.lfmon) as h_yearmon,

    concat(hb.lfgja,  hb.lfmon)  as yearmon,

    hbh.clabs as h_CLABS,

    hbh.cumlm as h_CUMLM,

    hbh.cinsm as h_CINSM,

    hbh.ceinm as h_CEINM,

    hbh.cspem as h_CSPEM,

    hbh.cretm as h_CRETM,

    hb.clabs,

    hb.cumlm,

    hb.cinsm,

    hb.ceinm,

    hb.cspem,

    hb.cretm

}  

=======================================================================

** MCHBH의 hbh.lfgja, hbh.lfmon concat

@AbapCatalog.sqlViewName: 'ycds_ass_trest02'

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: 'cds association test 2'

define view yass_cds_test01_02 as 

select  

    key hbh.matnr,

    key hbh.werks,

    key hbh.lgort,

    key hbh.charg,    

    concat(hbh.lfgja, hbh.lfmon) as h_yearmon

from nsdm_e_mchbh as hbh

group by hbh.matnr,

    hbh.werks,

    hbh.lgort,

    hbh.charg,

    hbh.lfgja, hbh.lfmon

========================================================================

** MCHBH의 max h_yearmon data table

@AbapCatalog.sqlViewName: 'ycds_ass_trest04'

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: 'cds association test 4'

define view yass_cds_test01_04 as

select   

    key hbh.matnr,

    key hbh.werks,

    key hbh.lgort,

    key hbh.charg,    

    max(h_yearmon) as h_yearmon

from yass_cds_test01_02 as hbh

group by hbh.matnr,

    hbh.werks,

    hbh.lgort,

    hbh.charg 

=======================================================================

** MCHB와 MCHBH 중 h_yearmon 값이 max 인 데이타 select

@AbapCatalog.sqlViewName: 'ycds_ass_trest03'

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: 'cds association test 3'

define view yass_cds_test01_03 as 

select from yass_cds_test01_01 as hbh

   inner join yass_cds_test01_04 as hbm

    on hbh.matnr = hbm.matnr

   and hbh.werks = hbm.werks

   and hbh.lgort = hbm.lgort

   and hbh.charg = hbm.charg 

   and hbh.h_yearmon = hbm.h_yearmon {

    key hbh.matnr,

    key hbh.werks,

    key hbh.lgort,

    key hbh.charg,

    key hbm.h_yearmon,

    hbh.yearmon,

    hbh.h_CLABS,

    hbh.h_CUMLM,

    hbh.h_CINSM,

    hbh.h_CEINM,

    hbh.h_CSPEM,

    hbh.h_CRETM,

    hbh.clabs,

    hbh.cumlm,

    hbh.cinsm,

    hbh.ceinm,

    hbh.cspem,

    hbh.cretm

}

Performance Guidelines for ABAP Development on the SAP HANA Database

https://blogs.sap.com/2013/03/24/performance-guidelines-for-abap-development-on-the-sap-hana-database/

SAP HANA SQLScript Reference

https://help.sap.com/viewer/de2486ee947e43e684d39702027f8a94/2.0.01/en-US/28f2d64d4fab4e789ee0070be418419d.html

Step 6: Modules

SAPUI5에서 자원은 종종 "모듈"이라고 합니다. 이 단계에서는 지난 연습의 alert을 sap.m 라이브러리의 적절한 "Message Toast"로 바꿉니다. 필요한 모듈을 비동기적으로 로드 할 수 있습니다.

You can view and download all files in the Explored app in the Demo Kit at Walkthrough - Step 6.

sap.ui.define([
   "sap/ui/core/mvc/Controller",
   "sap/m/MessageToast"
], function (Controller, MessageToast) {
   "use strict";
   return Controller.extend("sap.ui.demo.wt.controller.App", {
      onShowHello : function () {
         MessageToast.show("Hello World");
      }
   });
});

필요한 모듈의 배열을 sap.m.MessageToast의 정규 경로로 확장합니다. Controller와 MessageToast 모듈이 모두 로드되면 콜백 함수가 호출되고 함수에 전달된 매개 변수에 액세스하여 두 객체를 모두 사용할 수 있습니다.

이 비동기 모듈 정의 (AMD) 구문을 사용하면 모듈 로딩을 코드 실행과 명확하게 구분할 수 있으며 응용 프로그램의 성능이 크게 향상됩니다. 브라우저는 코드가 실행되기 전에 리소스가 로드되는 시기와 방법을 결정할 수 있습니다.

Conventions

- Global namespace를 정의하려면 컨트롤러 및 다른 모든 JavaScript 모듈에 sap.ui.define을 사용하십시오. 네임 스페이스를 사용하면 응용 프로그램 전체에서 객체를 처리 할 수 ​​있습니다.

- 비동기적 Loading 종속성(asynchronously loading dependencies)을 위하여 namespace 선언하지 않고 sap.ui.require를 사용하십시오. 예를 들어 실행만하면 되지만 다른 코드에서 호출 될 필요는 없습니다.

- 네임 스페이스가없는 function parameter의 이름을 로드하려면 artifact의 이름을 사용하십시오.

Step 5: Controllers

이 단계에서는 텍스트를 버튼으로 대체하고 버튼을 누르면 "Hello World" 메시지가 표시됩니다. 버튼의 프레스 이벤트 처리는 view 의 컨트롤러에서 구현됩니다.

아래의 site Demo Kit에서 여기서 작성하는 응용 프로그램의 모든 파일을 보고 다운로드 할 수 있습니다. 

Walkthrough - Step 5.

<mvc:View
   controllerName="sap.ui.demo.wt.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press="onShowHello"/>
</mvc:View>

controller 에 대한 참조를 추가하고 text control 을 텍스트 "Say Hello"가 있는 button으로 바꿉니다. 이 버튼은 누를 때 onShowHello 라는 이름의 event handller function을 트리거합니다. 또한 뷰에 연결된 컨트롤러의 이름을 지정하고 뷰의 controllerName 특성을 설정하여 onShowHello 함수를 보유해야합니다.

view는 명시적으로 할당된 controller 를 반드시 필요로하지는 않습니다. view에 정보만 표시하고 추가 기능이 필요하지 않은 경우 controller를 만들 필요가 없습니다. 

controller 가 지정되면 view가 로드 된 후 인스턴스화됩니다.

webapp/controller/App.controller.js (New)

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("", {
   });
});

우리는 폴더 webapp / controller 와 새로운 파일 App.controller.js 를 만듭니다. 지금은 필요한 모듈을 관리하는 코드를 무시합니다. 이 부분은 다음 단계에서 설명 할 것입니다.

sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("sap.ui.demo.wt.controller.App", {
      onShowHello : function () {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});

SAPUI5 core의 Controller 객체를 확장하여 응용 프로그램 controller를 자체 파일에 정의합니다. 처음에는 alert을 표시하여 button의 press event를 처리하는 onShowHello라는 단일 함수만 보유합니다.

Conventions

* controller 이름은 대문자로 표기됩니다.

* controller는 관련 view와 동일한 이름을 사용합니다 (1 : 1 관계가있는 경우)

* event handller 앞에는 "on" 이라는 접두어가 붙습니다.

* controller 파일 이름은 항상 * .controller.js 로 끝납니다.

Step 4: XML Views

우리의 모든 UI를 index.html 파일에 넣으면 곧 설정이 엉망이 될 것이고, 그렇게되면 우리에게 꽤 많은 작업이 있을 것입니다. 

이제는 sap.m.Text 컨트롤을 전용 뷰에 배치하여 첫 번째 모듈화를 수행해 보겠습니다. 

SAPUI5는 multiple view type (XML, HTML, JavaScript)을 지원합니다. 

우리는 가장 가독성이 높은 코드를 생성하고, 뷰 선언을 컨트롤러 로직과 분리가 되도록 XML을 선택합니다. 

그러나 우리의 UI의 모습은 바뀌지 않을 것입니다.

Preview

Coding

아래의 site Demo Kit에서 여기서 작성하는 응용 프로그램의 모든 파일을 보고 다운로드 할 수 있습니다. 

Walkthrough - Step 4.

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
</mvc:View>

우리는 app 폴더에 새로운 view 폴더를 만들고, view 폴더 안에 XML 뷰를 위한 새로운 파일을 생성합니다. 

XML 구조의 루트 노드가 view 입니다. 여기서는 대부분의 UI 자산(assets)을 가지고 있는 기본 namespace sap.m을 참조합니다. 

SAPUI5 view 와 다른 모든 MVC (Model-View-Controller) 자산(assets)이을 가지고 있는 alias mvc를 사용하여 추가 sap.ui.core.mvc 네임 스페이스를 정의합니다.

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World"/>
</mvc:View>

뷰 태그 안에는 text 컨트롤의 선언적 정의를 이전 단계와 동일한 속성으로 추가합니다. 

XML tag는 control에 매핑되고 속성은 control의 속성에 매핑됩니다.

XML tag => control

XML 속성 => control 속성

SAPUI5에서 각 control에는 자체 ID가 있습니다. 위의 XML view에서 ID 속성을 지정하지 않았으므로 SAPUI5 런타임은 자체 ID를 생성하고 이를 control에 추가합니다. 

그러나 control을 쉽게 식별 할 수 있도록 control의 ID를 명시적으로 설정하는 것이 좋습니다.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_belize"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async"
         data-sap-ui-resourceroots='{
            "sap.ui.demo.wt": "./"
         }' >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
            sap.ui.xmlview({
               viewName : "sap.ui.demo.wt.view.App"
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

data-sap-ui-resourceroots 는 sap.ui.demo.wt namespace의 리소스가 index.html 과 같은 폴더("./")에 있다는 것을 SAPUI5 코어에 알립니다. 

예를 들어, SAP Fiori launchpad에서 실행되는 앱에 필요합니다.

sap.m.Text control 의 인스턴스를 새 App XML view로 바꿉니다. 

이 view가 SAPUI5의 factory function에 의해 생성되어서 view가 올바르게 구성되었으며 고객이 확장(extend) 할 수 있는지 확인합니다. 

이 자원을 고유하게 식별하기 위해 viewName 앞에 sap.ui.demo.wt.view namespace 접두어가 붙습니다.

Step 3: Controls

이제 HTML 본문의 "Hello World"텍스트를 SAPUI5 컨트롤 sap.m.Text로 대체하여, 첫 번째 작은 UI를 Build 할 차례입니다. 처음에는 JavaScript control interface 를 사용하여 UI를 설정하고 control instance를 HTML 본문에 배치합니다.

Preview

아래의 site Demo Kit에서 여기서 작성하는 응용 프로그램의 모든 파일을 보고 다운로드 할 수 있습니다. 

Walkthrough - Step 3.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_belize"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async" >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
            new sap.m.Text({
               text : "Hello World"
            }).placeAt("content");
         });
      </script>
   </head>
   <body class="sapUiBody" id="content">
   </body>
</html>

대화 상자를 표시하기 위해 기본 JavaScript를 사용하는 대신 간단한 SAPUI5 control을 사용하려고합니다. control은 화면의 각 부분의 모양과 동작을 정의하는 데 사용됩니다.

위 예제에서 init event의 Callback 은 SAPUI5 text control을 인스턴스화 하는 곳입니다. 컨트롤 이름(sap.m.Text)에는 컨트롤 라이브러리 sap.m의 name space가 접두어로 붙어 있으며, 옵션은 JavaScript 객체를 사용하여 생성자에 전달됩니다. 우리가 제어 할 수 있도록 text 속성을 "Hello World"값으로 설정했습니다.

컨트롤의 생성자 호출을 문서 객체 모델 (DOM:Document Object Model)) 또는 다른 SAPUI5 컨트롤 인스턴스의 노드 안에 SAPUI5 컨트롤을 배치하는 데 사용되는 표준 메서드 인 placeAt에 연결합니다. DOM 노드의 ID를 인수로 전달합니다. 대상 노드로 HTML 문서의 body 태그를 사용하고 ID 내용을 제공합니다. sapUiBody 클래스는 SAPUI5 응용 프로그램을 표시하기위한 테마 종속 스타일을 추가합니다.

SAPUI5의 모든 컨트롤에는 고정 된 속성, 집계 및 구성 집합이 있습니다. 데모 키트의 Explored 앱에서 설명을 찾을 수 있습니다. 또한 각 컨트롤에는 API 참조에서 찾을 수있는 일련의 public function이 제공됩니다.

body에서 <p>"Hello World"<p>를 삭제하는 것을 잊지 마십시오.

Step 2: Bootstrap

SAPUI5를 사용하여 어떤 작업을 수행하려면 먼저 Load, Initialize 작업을 진행 해야합니다. SAPUI5 Load 및 Initialize Process를 bootstrapping 이라고합니다. 

아래 화면의 기능은 이 Bootstrap 이 종료되면 간단한 alert message("UI5 is ready")를 표시합니다.

Preview

Coding

아래의 site 데모 키트에서 여기서 작성하는 응용 프로그램의 모든 파일을보고 다운로드 할 수 있습니다. 

Walkthrough - Step 2.

<!DOCTYPE html>
<html>
   <head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
 	<title>Walkthrough</title>
      <script
         id="sap-ui-bootstrap"
         src="/resources/sap-ui-core.js" 
         data-sap-ui-theme="sap_belize"
         data-sap-ui-libs="sap.m"
         data-sap-ui-compatVersion="edge"
         data-sap-ui-preload="async" >
      </script>
      <script>
         sap.ui.getCore().attachInit(function () {
             alert("UI5 is ready");
         });
      </script>
   </head>
   <body>
      <p>Hello World</p>
   </body>
</html>

이 단계에서는 로컬 웹 서버에서 SAPUI5 framework를 Load 하고, 그리고 다음의 Configuration Option으로 Core Module을 Initialize 합니다.

- 첫 번째 <script> 태그의 src 속성은 브라우저에 SAPUI5 Core Library를 찾을 위치를 알려줍니다. 이것은 SAPUI5 런타임을 초기화하고, data-sap-ui-libs 속성에 지정된 라이브러리와 같은 추가 자원을 Load 합니다.

- thema : SAPUI5 컨트롤은 어러가지 다른 테마를 지원하며, 여기에서는 sap_belize를 기본 테마로 선택 하였습니다.

- 이 교재(Tutorial)에 필요한 UI Control이 포함된 UI Library sap.m을 지정합니다.

- SAPUI5의 최신 기능을 사용하기 위해 호환성 버전(compatibility version)을 "edge"로 정의합니다.

- 비동기(asynchronously) 적으로 실행되도록 "bootstrap" 프로세스를 구성합니다. 즉, 성능상의 이유로 백그라운드에서 SAPUI5 리소스를 동시에 로드 할 수 있습니다.

모든 Resource와 Library가 로드되면 SAPUI5 runtime은 Global init event 를 시작하여 라이브러리가 준비되었음을 알립니다. 이벤트가 발생한 후에 Application Logic을 트리거하기 위해서 이 이벤트를 수신하는 것이 좋습니다.

(It is a good practice to listen for this event in order to trigger your application logic only after the event has been fired.)

위 예제에서 sap.ui.getCore ()를 호출하여 SAPUI5 코어에 대한 참조를 얻고 Core에서 attachInit (...)를 호출하여 init 이벤트에 대한 익명 콜백 함수를 등록합니다. SAPUI5에서 이러한 종류의 콜백 함수는 종종 handlers, listener function 또는 단순히 listener 라고합니다. Core는 Singleton 이며 코드의 어느 곳에서나 액세스 할 수 있습니다.

익명의 콜백 함수는 SAPUI5의 bootstrap이 끝나고 native JavaScript alert 를 표시 할 때 실행됩니다.

sap-ui-core.js 파일에는 jQuery의 복사본이 포함되어 있습니다. 즉, 모든 jQuery 기능을 사용할 수 있습니다.

SAP UI5 Refrence Site

Step 1: Hello World!

Preview

Coding

아래의 site 데모 키트에서 여기서 작성하는 응용 프로그램의 모든 파일을보고 다운로드 할 수 있습니다. 

Walkthrough - Step 1.

webapp/index.html (New)

<!DOCTYPE html >
<html>
   <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta charset="utf-8">
      <title>Walkthrough</title>
   </head>
   <body>
      <p>Hello World</p>
   </body>
</html>

이 튜토리얼을 통해 만드는 모든 앱 소스를 포함하는 새 폴더 webapp를 만듭니다. 따라서이 폴더를 "App folder"라고합니다. => eclipse를 통해서 project를 만들게 되면 "WebContent" 라고 만들어진다.

이제 app 폴더에 index.html이라는 새로운 루트 HTML 파일을 만듭니다. HTML 문서는 기본적으로 Head와 Body의 두 섹션으로 구성됩니다. Head 부분은 브라우저에서 문서를 처리하는 데 사용됩니다. meta tag를 사용하여 브라우저의 동작에 영향을 미칠 수 있습니다.

이 경우 Microsoft Internet Explorer에 최신 rendering engine (edge)을 사용하고 document character set은 UTF-8이되도록 지시합니다. 우리는 또한 브라우저에 표시 될 Title을 앱에 제공 할 것입니다. Google의 하드 코딩 된 제목은 예를 들어 사용자의 언어로 제목을 표시하는 것과 같이 앱에 의해 무효화 될 수 있습니다.

body 부분은 페이지 레이아웃을 설명합니다. 여기서는 p 태그를 사용하여 "Hello World"를 표시합니다.

index.html 응용 프로그램의 루트 HTML 파일 이름을 지정하고 webapp 폴더에서 찾으십시오.