SAP 사용자들의 오픈 커뮤니티

• 목록

목차 

 앞선 3개의 포스팅을 통해서 SAP Work Zone의 central Fiori Launchpad에 다양한 UI 기술의 Application을 등록하여 실행해봤습니다. 이후 2개의 포스팅을 통해 SAP 그리고 Non-SAP 시스템을 이용해 UI Integration Cards(이하 UI Card)를 생성하고 배포하는 방법과 배포한 UI Card를 SAP Work Zone의 작업 영역에 추가해보도록 하겠습니다.

1. UI Integration Cards

 SAP Work Zone의 가장 중요한 기능 중 하나는 UI Integration Cards(이하 UI Card)입니다. UI Card는 최종 사용자에게 직관적인 시각화 정보를 제공하여 의사결정에 도움을 줄 수 있습니다.

 UI Card는 사용 사례에 따라 앱, 대시보드 또는 HTML 페이지와 같은 호스트 환경에도 쉽게 포함될 수 있습니다. 또한 UI 렌더링을 위한 코드를 따로 작성할 필요 없이 manifest.json 구성으로만 카드 유형을 작업할 수 있기 때문에 프로그래밍 기술이 없는 사용자에게도 카드를 만들 수 있습니다.

 그리고 UI Card를 구성하는 번들을 zip 파일로 압축하여 SAP Work Zone의 Administrator Console에서 Card 섹션을 통해 배포하여 사용할 수 있습니다.

 이번 포스팅에서는 SAP Business Application Studio(이하 SAP BAS)를 사용하여 SAP S/4HANA 시스템에 있는 항공회사 정보로 OData를 통해서 Table Card를 만들어 보겠습니다.

2. SAP BAS에서 UI Card 생성

SAP BAS를 이용하면 SAP Work Zone에 배포할 수 있는 UI Card 템플릿을 선택할 수 있습니다.

Project의 상세정보를 입력하는 화면입니다.

Project Name : 프로젝트의 이름을 입력합니다.

Namespace: 프로젝트의 Namespace를 입력합니다.

Select a Card Sample : List, Table , Object 등등 여러개 Card Type 중 하나를 선택하면 Card의 예시 코드가 입력된 프로젝트를 생성할 수 있습니다.

Title : Application의 제목을 입력합니다.

Subtitle : Application의 부제목을 입력합니다.

Compatible with SAP Mobile Card : SAP Mobile 또한 지원할 것인지 선택할 수 있습니다. True 또는 False를 선택합니다.

 Finish를 눌러 카드를 생성하면 다음과 같이 임의의 데이터가 들어간 샘플코드가 작성되어있습니다. 필요에 따라 필요한 부분을 수정하면 됩니다.

{
	"_version": "1.15.0",
	"sap.app": {
...생략
		}
	},
	"sap.ui": {
		"technology": "UI5",
        "deviceTypes": {"desktop": true, "phone": true, "tablet": true},
		"icons": {
			"icon": "sap-icon://table-view"
		}
	},
	"sap.card": {
		"type": "Table",
        "designtime": "dt/configuration",
        "configuration": {
            "destinations": {
                "myDestination": {
                    "name": "istnsolrt"
                }
            }
        },
		"data": {
			"request": {
                "url" : "{{destinations.myDestination}}/<OData_URL>",
                "parameters": {
                    "$select": "carrid,carrname,currcode",
                    "$top": "10",
                    "$format": "json"
                },
                "withCredentials": "true"
            },
            "path": "/d/results"
		},
		"header": {
			"title": "항공회사 정보",
			"subTitle": "S/4HANA 시스템",
			"status": {
				"text": "10"
			}
		},
		"content": {
            "data": {
                "path" :"/d/results"
            },
			"row": {
				"columns": [{
						"title": "Product Name",
						"value": "{carrid}",
						"identifier": true
					},
					{
						"title": "Category",
						"value": "{carrname}"
					},
					{
						"title": "CurrencyCode",
						"value": "{currcode}"
					}
				]
			}
		}
	},
    "sap.platform.mobilecards": {
        "compatible": true
    }
}

 앞서 SAP Cloud Connector로 SAP S/4HANA와 SAP BTP를 연결하여 생성했던 Runtime Destination을 configuration에 destination을 설정하여 줍니다.

 manifest.json을 우클릭하여 UI Integration Card: Preview를 클릭하면 우측 화면에 Card Preview 영역이 생기면서 작성한 코드에 대해서 미리보기를 할 수 있습니다.

마찬가지로 UI Integration Card: Package를 누르면 UI Card 구성 번들을 압축한 zip 파일이 생성됩니다.

SAP Work Zone에 업로드 방식으로 배포하기 위해서 zip 파일을 다운로드 받습니다.

3. SAP Work Zone에 배포

 Administrator Console에 들어가서 Cards 항목을 클릭하면 배포된 UI Card 그리고 업로드 방식으로 배포할 수 있도록 하는 Upload Card 버튼이 보입니다. 버튼을 클릭하여 다운로드 받은 zip 파일을 업로드하여 UI Card를 배포합니다.

 배포가 성공적으로 되었다면 다음과 같이 우리가 만든 카드의 타일이 생성됩니다. 우측 상단의 스위치 버튼을 통해 활성화 및 비활성화를 시킬 수 있습니다.

 add Widget 버튼을 클릭하여 최하단에서 우리가 배포한 카드를 선택할 수 있습니다. UI Card를 추가한 후 최상단의 publish 버튼을 클릭하면 수정사항이 반영됩니다.

4. 마치며..

 우리가 배포한 UI Card를 My Workspace에 성공적으로 반영하였습니다. UI Card에는 여러 타입의 카드를 쉽게 만들 수 있습니다. 그만큼 최종사용자들에게 보여져야할 데이터가 어떤 유형의 카드에 바인딩되어야 유의미하고 직관적인지 충분한 고민이 이루어져야 합니다.

 이번 포스팅에서는 SAP 시스템과 연결하여 UI Card를 제작하였습니다. 다음 포스팅에서는 Non-SAP 시스템과 연결하여 UI Card 제작하여 SAP Work Zone 작업영역에 추가해보도록 하겠습니다.