Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
2

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 1 year has passed since last update.

@FukuharaYohei(Fukuhara)

ローカルPCでのCAPとFiori elementsでの画面モックアップ作成

Last updated at Posted at 2022-12-22

仕事でモックアップ画面を作るので、CAPとFiori elementsを使って作ってみました。BTPにデプロイまではせず、ローカルPCで動くまでが記事の範囲です。
CAPやFioriの単語解説はせずに、作成手順を記載しています。
この記事は SAP Advent Calendar 2022 の12月23日分として執筆しています。

ここを参考に開発

環境

以下の環境で実施。インストールされていることが前提です。macOSで実施していますが、Windowsでも大きな差はないはずです。nvmはWindows向けがあるか調べていませんが、Node.jsのバージョン管理は必須ではないです。

種類 種類(小分類) バージョン 備考
デバイス MacbookPro 14(M1 Chip)
OS macOS 13.1(Ventura)
Node.jsバージョン管理 nvm 0.39.2
その他 Node.js v18.12.1
その他 npm 9.2.0
Node.jsパッケージ SAPUI5 CLI 2.14.17 npmでインストール
Node.jsパッケージ CDS dev kit 6.4.0
その他 CF CLI 8.4
IDE VS Code 1.74.1
VS Code Extension SAP CDS Language Support 6.4.0
VS Code Extension SAP Fiori tools - Extension Pack 1.8.3

手順

CAP

1. Project Folder 作成

適当にフォルダを作成。今回はtest-uiにします。

mkdir test-ui
cd test-ui

2. プロジェクト初期化

CAP CLIからcds initコマンドでプロジェクト初期化します。Project Setup and Layoutsに少し詳しく書かれています。

% cds init
Creating new cap project in current folder

Adding feature 'nodejs'... 
Done adding features

Find samples on https://github.com/SAP-samples/cloud-cap-samples
Learn about next steps at https://cap.cloud.sap

treeで作られたフォルダ・ファイルを確認。Default Project Layoutsにデフォルトのレイアウト記載あり。

% tree -al
.
├── .DS_Store
├── .cdsrc.json
├── .eslintrc
├── .gitignore
├── .vscode
│   ├── extensions.json
│   ├── launch.json
│   └── tasks.json
├── README.md
├── app
├── db
├── package.json
└── srv

3. Node.jsパッケージインストール

前ステップでpackage.json は以下のように作られています。

package.json
{
  "name": "test-ui",
  "version": "1.0.0",
  "description": "A simple CAP project.",
  "repository": "<Add your repository here>",
  "license": "UNLICENSED",
  "private": true,
  "dependencies": {
    "@sap/cds": "^6",
    "express": "^4"
  },
  "devDependencies": {
    "sqlite3": "^5.0.4"
  },
  "scripts": {
    "start": "cds run"
  }
}

npm installでNode.jsパッケージをインストール。

% npm install
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs

added 175 packages, and audited 176 packages in 10s

12 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm lsでpackage.jsonの中身がインストールできているかを確認。

% npm ls
test-ui@1.0.0 /Users/i348221/Documents/repositories/test-ui
├── @sap/cds@6.4.0
├── express@4.18.2
└── sqlite3@5.1.4

4. CAPサーバー起動

cds watchコマンドでCAPサーバーを起動。現時点では「何もないよ」と言われていますね。ターミナルはこの状態のままにしておきます。

% cds watch

 
cds serve all --with-mocks --in-memory? 
watching: cds,csn,csv,ts,mjs,cjs,js,json,properties,edmx,xml,env,css,gif,html,jpg,png,svg... 
live reload enabled for browsers 

        ___________________________

 

    No models found in db/,srv/,app/,schema,services.
    Waiting for some to arrive...

5. サンプルファイル作成

cds add samplesコマンドでサンプルのドメインモデルとデータとサービスを作ります。

% cds add samples
Adding feature(s) to project in current folder

Adding feature 'samples'... 
Done adding features

作成されたものを確認(node_modulesフォルダは邪魔なので除外)。以下の3つが作成されています。

  • db/data/my.bookshop-Books.csv
  • db/data-model.cds
  • srv/cat-service.cds
% tree -I node_modules
.
├── README.md
├── app
├── db
│   ├── data
│   │   └── my.bookshop-Books.csv
│   └── data-model.cds
├── package-lock.json
├── package.json
└── srv
    └── cat-service.cds

ドメインモデル(db/data-model.cds)

db/data-model.cds
namespace my.bookshop;

entity Books {
  key ID : Integer;
  title  : String;
  stock  : Integer;
}

データ(db/data/my.bookshop-Books.csv)

db/data/my.bookshop-Books.csv
ID;title;stock
1;Wuthering Heights;100
2;Jane Eyre;500

サービス(srv/cat-service.cds)

srv/cat-service.cds
using my.bookshop as my from '../db/data-model';

service CatalogService {
    @readonly entity Books as projection on my.Books;
}

6. ODataサービス確認

先程放置したcds watchコマンドのターミナルを見ます。2つのファイルがロードされていることがわかります。

[cds] - loaded model from 2 file(s):

  db/data-model.cds
  srv/cat-service.cds

[cds] - connect using bindings from: { registry: '~/.cds-services.json' }
[cds] - connect to db > sqlite { database: ':memory:' }
 > init from db/data/my.bookshop-Books.csv
/> successfully deployed to sqlite in-memory db

[cds] - serving CatalogService { path: '/catalog' }

[cds] - server listening on { url: 'http://localhost:4004' }
[cds] - launched at 2022/12/20 15:47:25, version: 6.4.0, in: 4.154s
[cds] - [ terminate with ^C ]

[cds] - GET /catalog/$metadata 
[cds] - GET /catalog/Books

ブラウザでhttp://localhost:4004で開いてみます。
image.png

ここからのリンクでメタデータやODataのEndpoint結果を参照できます。

$metadata

http://localhost:4004/catalog/$metadataでメタデータ参照。

/catalog/$metadata
<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx Version="4.0" xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx">
  <edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Capabilities.V1.xml">
    <edmx:Include Alias="Capabilities" Namespace="Org.OData.Capabilities.V1"/>
  </edmx:Reference>
  <edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/Common.xml">
    <edmx:Include Alias="Common" Namespace="com.sap.vocabularies.Common.v1"/>
  </edmx:Reference>
  <edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Core.V1.xml">
    <edmx:Include Alias="Core" Namespace="Org.OData.Core.V1"/>
  </edmx:Reference>
  <edmx:DataServices>
    <Schema Namespace="CatalogService" xmlns="http://docs.oasis-open.org/odata/ns/edm">
      <EntityContainer Name="EntityContainer">
        <EntitySet Name="Books" EntityType="CatalogService.Books"/>
      </EntityContainer>
      <EntityType Name="Books">
        <Key>
          <PropertyRef Name="ID"/>
        </Key>
        <Property Name="ID" Type="Edm.Int32" Nullable="false"/>
        <Property Name="title" Type="Edm.String"/>
        <Property Name="stock" Type="Edm.Int32"/>
      </EntityType>
      <Annotations Target="CatalogService.EntityContainer/Books">
        <Annotation Term="Capabilities.DeleteRestrictions">
          <Record Type="Capabilities.DeleteRestrictionsType">
            <PropertyValue Property="Deletable" Bool="false"/>
          </Record>
        </Annotation>
        <Annotation Term="Capabilities.InsertRestrictions">
          <Record Type="Capabilities.InsertRestrictionsType">
            <PropertyValue Property="Insertable" Bool="false"/>
          </Record>
        </Annotation>
        <Annotation Term="Capabilities.UpdateRestrictions">
          <Record Type="Capabilities.UpdateRestrictionsType">
            <PropertyValue Property="Updatable" Bool="false"/>
          </Record>
        </Annotation>
      </Annotations>
    </Schema>
  </edmx:DataServices>
</edmx:Edmx>

データ

CSVファイルdb/data/my.bookshop-Books.csvの内容がODataサービスとしてhttp://localhost:4004/catalog/Booksから取得できています。

/catalog/Books
{
    "@odata.context": "$metadata#Books",
    "value": [
        {
            "ID": 1,
            "title": "Wuthering Heights",
            "stock": 100
        },
        {
            "ID": 2,
            "title": "Jane Eyre",
            "stock": 500
        }
    ]
}

Fiori preview

「Fiori preview」のリンクからhttp://localhost:4004/$fiori-preview/CatalogService/Books#preview-appを開けます。
さすがにデータは見えないようです。
image.png

Fiori elements

7. Fiori elements template を使ったUI生成

VS Codeのコマンドパレット(View → Command Palette or Shift + Command + P for macOS / Ctrl + Shift + P for Windows)から「Fiori: Open Application Generator.」を開きます。

7.1. Template Selection

以下の項目を入力して「NEXT」ボタンを押下。

  • Application Type: SAP Fiori elements
  • Which template do you want to use?: List Report Page

image.png

7.2. Data Source and Service Selection

データソースをLocal CAPにして、先程作成したOData Serviceを選択。
image.png

7.3. Entity Selection

Main EntityにBooksを選び、設問「Automatically add table columns to the list page and a section to the object page if none already exists?」にはNoにしておきます。
image.png

7.4. Project Attributes

スクリーンショットの内容を入力して「FINISH」ボタン押下。
image.png

VS Codeでこんな画面が自動で開きます。
image.png

7.5. 生成オブジェクト確認

UI系オブジェクトはappフォルダに生成されるので、カレントディレクトリをappに移動後、中身を確認します。

app % tree
.
├── services.cds
└── test-ui
    ├── README.md
    ├── annotations.cds
    ├── package.json
    ├── ui5.yaml
    └── webapp
        ├── Component.js
        ├── annotations
        │   └── annotation.xml
        ├── i18n
        │   └── i18n.properties
        ├── index.html
        ├── localService
        │   └── metadata.xml
        ├── manifest.json
        └── test
            ├── flpSandbox.html
            ├── integration
            │   ├── FirstJourney.js
            │   ├── opaTests.qunit.html
            │   ├── opaTests.qunit.js
            │   └── pages
            │       ├── BooksList.js
            │       └── BooksObjectPage.js
            ├── testsuite.qunit.html
            └── testsuite.qunit.js

cds watchコマンドのターミナルにappフォルダ以下の2つのファイルが認識されています。

[cds] - loaded model from 4 file(s):

  db/data-model.cds
  srv/cat-service.cds
  app/services.cds
  app/test-ui/annotations.cds

[cds] - connect using bindings from: { registry: '~/.cds-services.json' }
[cds] - connect to db > sqlite { database: ':memory:' }
 > init from db/data/my.bookshop-Books.csv
/> successfully deployed to sqlite in-memory db

[cds] - serving CatalogService { path: '/catalog' }

[cds] - server listening on { url: 'http://localhost:4004' }
[cds] - launched at 2022/12/20 18:08:36, version: 6.4.0, in: 503.481ms
[cds] - [ terminate with ^C ]

２つのファイルの中身を見てみます。

app/services.cds

using from './test-ui/annotations';
app/test-ui/annotations.cds
using CatalogService as service from '../../srv/cat-service';

8. Fiori画面確認

http://localhost:4004/の画面をリフレッシュすると「Web Applications」に作成したFioriへのリンクが追加されています。

image.png

リンク/test-ui/webapp/index.htmlからhttp://localhost:4004/test-ui/webapp/index.htmlを開きます。
この時点では、検索条件もなく検索をしても検索結果は出てきません。
image.png

9. UI Annotation追加

UI Annotationとして srvフォルダにcat-service-ui.cdsを以下のデータで新規作成。

srv/cat-service-ui.cds
annotate CatalogService.Books with {
    ID    @title: 'ID';
    title @title: 'Title';
    stock @title: 'Stock';
}

annotate CatalogService.Books with @(UI: {
    SelectionFields: [
        ID,
        title,
        stock
    ],
    LineItem       : [
        {Value: ID},
        {Value: title},
        {Value: stock},
    ]
});

http://localhost:4004/test-ui/webapp/index.htmlをリフレッシュすると検索条件が追加され、検索も可能な状態になりました。
image.png

後続

後続作業として、検索ヘルプ追加も調べました。

3
2
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
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?