Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@Auggie_2345

Fiori(SAP UI5)でSalesOrderListを作ってみよう！

Last updated at Posted at 2020-12-08

1:概要

この記事は SAP Advent Calendar 2020 の12/9分の記事として執筆しています。
SAP社の次世代のUI/UXであるSAP Fioriがリリースされて歳月が経ちましたが、未だに多くの導入現場では従来型のSAP GUIの中でのABAPによるアドオン開発が行われています。
しかし今後は、SAP Fioriによるアドオン開発が主流となってくるとみています。
なぜなら、FioriではSAP GUIでは実現できない以下のメリットがあるためです。

  • 様々なSaaSやWebアプリケーションをAPI経由で連結し、統合されたデータソースにアクセス可能
  • アクセスするデバイスを問わない。ブラウザ経由であれば、タブレットやスマホからでもアクセス可能

この記事では、SalesOrderList(受注レポート)を、Fioriで開発する方法について解説します。

2:前提

SAP Cloud Platformのアカウントが必要です。
開発環境はローカルでも良いが本記事では、SAP Business Application Studioを使います。

3:完成したプログラム

ezgif-7-1ac8bb6b9a3e.gif

3:詳細手順

3-1:SAP Cloud PlatformのFree Trial Account作成

下記を参考にSAP Cloud Platformのアカウントを登録します。
【参考手順】
https://developers.sap.com/tutorials/hcp-create-trial-account.html

後の手順と合わせるために、下記のリージョンの選択においては、チュートリアルに合わせてEurope(Frankfurt) - AWSを選択するのがお勧めです。

image.png

3-2:SAP Business Application の有効化

下記を参考に、SAP Business ApplicationをSubscribedの状態にします。

【参考手順】
https://developers.sap.com/tutorials/appstudio-onboarding.html

image.png

3-3:SAP Gateway Demo Serverの登録

SAPのODataを扱うためのデモ環境である、SAP Gateway Demo Server(ES5)の登録をします。

【参考手順】
https://developers.sap.com/tutorials/gateway-demo-signup.html
https://developers.sap.com/tutorials/cp-portal-cloud-foundry-gateway-connection.html

ぱっと見SAP GUIと同じでTCODEを入れればなんでもできそうな気がしますが、以下のようなことはできません。

  • SE38でABAP開発をする
  • VA01で受注登録をする
  • SE11でTableを作成する

あくまでODataを抽出するためのテスト用の環境と言う事のようです。

登録ができたらODataが取得できるか確認してみましょう。
ブラウザの別タブを開けて下記のURIを入力します。

https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata

下記のようなデータが取得できていればOKです。
image.png

metadataの読み方や、ODataの値の取得方法については、下記のリンクを参照。
https://qiita.com/Auggie_2345/items/adeb74b09d9d54a8f865

3-4:Dev Spaceの作成

Dev Space(Fiori開発のためにセットアップされた開発環境)の作成を行います。
以下の手順通りに操作してください。

【参考手順】
https://developers.sap.com/tutorials/appstudio-devspace-fiori-create.html

ちなみにこのDevSpaceですが、実体はDebianのインスタンスとなっている模様です。
下記のコマンドで確認してみましょう。
ツールバーからTerminal>New Terminalを選択します。

image.png

ターミナルが立ち上がるので、次のコマンドでOSのバージョン確認が可能です。

user: user $ cat /etc/os-release
PRETTY_NAME="Debian GNU/Linux 10 (buster)"
NAME="Debian GNU/Linux"
VERSION_ID="10"
VERSION="10 (buster)"
VERSION_CODENAME=buster
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"

3-5:Fioriアプリケーションをプロジェクトテンプレートから作成

【特記事項】
てっとりばやくアプリケーションを動かしたい場合は、下記の方法でGitからCloneし、手順3-5-1~3-6はスキップしても良い。
https://qiita.com/Auggie_2345/items/ae6b8084bbc000d52342

テンプレートからFioriアプリケーションを作成し、一からビューやコントローラーを作成したい場合は以下手順3-5-1~3-6を行う。

【参考手順】
https://developers.sap.com/tutorials/sapui5-101-create-project.html

3-5-1:Create project from template

Welcome画面から、Create project from templateを選択します。

image.png

Welcome画面が無い、あるいは×ボタンで消してしまった場合、View>Find Commandを選択。
image.png

表示されたボックスでweと入力し、WelcomePageを選択する。
image.png

3-5-2:Select Template and Target Location

Business Application StudioでテンプレートからFioriを開発する場合、次の選択肢がある。

  • SAP Fiori Elements Application
    アプリケーション全体をテンプレートから作成。
    今回は触れませんがFioriElementについて学びたい方は書きを参照。
    https://developers.sap.com/group.fiori-tools-odata-v4-incident.html

  • SAP Fiori Free Style Project
    UI5のフレームワークをテンプレートから作成し、ビューやコントローラーなどのファイルはフリースタイルで作成。

今回は、SAP Fiori Free Style Projectを選択してNextを押下する。

※残りは、いじった事ないのでわかりません。

image.png

3-5-3:Target Running Environment

次のように選択してNextを押下

項目 選択
Select the target running environment Cloud Foundry
Select the template you want to use* SAPUI5 Application

image.png

3-5-4:Project Name

SalesOrderと入力してNextを押下

3-5-5:HTML 5 Application Runtime

下記のように選択してNext

image.png

3-5-6:Basic Attributes

下記のように選択してNext

image.png

3-5-7:View Name

下記のように選択してNext
image.png

3-5-8:Consume Services

下記のように選択してNext
image.png

画面右下のOpen in New Workshopを選択。
image.png

WebIDEが再起動する。
ファイル群が作成されている事を確認する。

image.png

ここで、DevSpaceがDestination(ES5)からデータを取得できているか確認します。
Terminal>New Terminalを選択。
image.png

こちらのコマンドで値が取れていれば成功

curl -v -i "ES5.dest/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet?%24top=1"

user: FioriDemo $ curl -v -i "ES5.dest/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet?%24top=1"
* Expire in 0 ms for 6 (transfer 0x558c66349f50)
* Uses proxy env variable no_proxy == 'localhost,127.0.0.1,github.com,.github.com,.npmjs.org,.yarnpkg.com,npm.sap.com,.maven.apache.org'
* Uses proxy env variable http_proxy == 'http://127.0.0.1:8887'
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Expire in 200 ms for 4 (transfer 0x558c66349f50)
* Connected to 127.0.0.1 (127.0.0.1) port 8887 (#0)
> GET http://ES5.dest/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet?%24top=1 HTTP/1.1
> Host: ES5.dest
> User-Agent: curl/7.64.0
> Accept: */*
> Proxy-Connection: Keep-Alive
> 
< HTTP/1.1 200 OK
HTTP/1.1 200 OK
< Cache-Control: no-store, no-cache
Cache-Control: no-store, no-cache
< Content-Type: application/atom+xml;type=feed; charset=utf-8
Content-Type: application/atom+xml;type=feed; charset=utf-8
< Dataserviceversion: 2.0
Dataserviceversion: 2.0
< Date: Sun, 22 Nov 2020 12:38:30 GMT
Date: Sun, 22 Nov 2020 12:38:30 GMT
< Sap-Metadata-Last-Modified: Sat, 02 Mar 2019 03:01:29 GMT
Sap-Metadata-Last-Modified: Sat, 02 Mar 2019 03:01:29 GMT
< Sap-Processing-Info: ODataBEP=,crp=,st=,MedCacheHub=Table,MedCacheBEP=SHM,codeployed=X,softstate=
Sap-Processing-Info: ODataBEP=,crp=,st=,MedCacheHub=Table,MedCacheBEP=SHM,codeployed=X,softstate=
< Set-Cookie: 

(Omission)

< Strict-Transport-Security: max-age=31536000; includeSubDomains; preload;
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload;
< Vary: Accept-Encoding
Vary: Accept-Encoding
< X-Frame-Options: SAMEORIGIN
X-Frame-Options: SAMEORIGIN
< X-Request-Id: 1bd54f39-2edf-46d2-522e-2051569546b0
X-Request-Id: 1bd54f39-2edf-46d2-522e-2051569546b0
< X-Vcap-Request-Id: 1bd54f39-2edf-46d2-522e-2051569546b0
X-Vcap-Request-Id: 1bd54f39-2edf-46d2-522e-2051569546b0
< Transfer-Encoding: chunked
Transfer-Encoding: chunked

< 
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xml:base="https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/"><id>https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet</id><title type="text">BusinessPartnerSet</title><updated>2020-11-22T12:38:30Z</updated><author><name/></author><link href="BusinessPartnerSet" rel="self" title="BusinessPartnerSet"/><entry m:etag="W/&quot;datetime'2020-11-22T03%3A01%3A17.0000000'&quot;"><id>https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet('0100000000')</id><title type="text">BusinessPartnerSet('0100000000')</title><updated>2020-11-22T12:38:30Z</updated><category term="GWSAMPLE_BASIC.BusinessPartner" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/><link href="BusinessPartnerSet('0100000000')" rel="edit" title="BusinessPartner"/><link href="BusinessPartnerSet('0100000000')/ToSalesOrders" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/ToSalesOrders" type="application/atom+xml;type=feed" title="ToSalesOrders"/><link href="BusinessPartnerSet('0100000000')/ToContacts" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/ToContacts" type="application/atom+xml;type=feed" title="ToContacts"/><link href="BusinessPartnerSet('0100000000')/ToProducts" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/ToProducts" type="application/atom+xml;type=feed" title="ToProducts"/><content type="application/xml"><m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices"><d:Address m:type="GWSAMPLE_BASIC.CT_Address"><d:City>Walldorf</d:City><d:PostalCode>69190</d:PostalCode><d:Street>Dietmar-Hopp-Allee</d:Street><d:Building>16</d:Building><d:Country>DE</d:Country><d:AddressType>02</d:AddressType></d:Address><d:BusinessPartnerID>01* Connection #0 to host 127.0.0.1 left intact
00000000</d:BusinessPartnerID><d:CompanyName>SAP</d:CompanyName><d:WebAddress>http://www.sap.com</d:WebAddress><d:EmailAddress>do.not.reply@sap.com</d:EmailAddress><d:PhoneNumber>0622734567</d:PhoneNumber><d:FaxNumber>0622734004</d:FaxNumber><d:LegalForm>SE</d:LegalForm><d:CurrencyCode>EUR</d:CurrencyCode><d:BusinessPartnerRole>01</d:BusinessPartnerRole><d:CreatedAt>2020-11-22T03:01:17.0000000</d:CreatedAt><d:ChangedAt>2020-11-22T03:01:17.0000000</d:ChangedAt></m:properties></content></entry></feed>

値が取れていなければ、SAP Gateway Demo Server(ES5)にログインし直す。

3-6:View/Routes/Target/Controllerの作成

【参考】
https://developers.sap.com/tutorials/appstudio-fioriapps-create.html

webapp>webapp>viewにファイルを作成する。

image.png

ファイル名はList.view.xmlとする。
image.png

以下のURLのソースをList.view.xmlに貼り付ける。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/view/List.view.xml

同様にファイルDetail.view.xmlを作成する。

image.png

Detail.view.xmlに以下のURLのソースを貼り付ける。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/view/Detail.view.xml

以下のURLのソースをwebapp>webapp>view.App.view.xmlにコピーする。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/view/App.view.xml

webapp>webapp>controllerにList.controller.jsを作成する。
image.png

以下のURLのソースをList.controller.jsにコピーする。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/controller/List.controller.js

webapp>webapp>controllerにDetail.controller.jsを作成する。
image.png

以下のURLのソースをDetail.controller.jsにコピーする。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/controller/Detail.controller.js

webapp>webapp>manifest.jsonを開く。
image.png
以下のURLのソースをmanifest.jsonにコピーする。
https://github.com/Auggie9010/fiori_salesorder_list/blob/master/webapp/webapp/manifest.json

3-7:Run Configuration/プログラムの実行

下記を参考にプログラムを実行します。
【参考手順】
https://developers.sap.com/tutorials/sapui5-101-create-project.html

もしこんな感じでデータが取れなかった場合、ES5に再度ログインすれば良い。
image.png

MetadataのURLを叩いて、ES5のIDPWで認証する。
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata

image.png

3-8:プログラムのデプロイ

以下のチュートリアルを参照。
https://developers.sap.com/tutorials/appstudio-fioriapps-mta-build-deploy.html

4:参考

FioriもといUI5の文法についてはこちらのリンクを参照してください。
https://sapui5.hana.ondemand.com/

以上。

6
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?