Sap-ui5-theming
SAP UI5-テーマ
UIテーマデザイナは、SAPが提供するテーマテンプレートの1つを変更することでテーマを開発できるブラウザベースのツールです。
例-カラースキームを変更したり、会社のロゴを追加したりできます。 このツールは、設計中にテーマのライブプレビューを提供します。
企業のブランディングを適用し、SAP UIテクノロジーで構築されたアプリケーションに注目してください。 UIテーマデザイナーは、クロステーマシナリオ用のブラウザーベースのツールです。 SAPが提供するテーマテンプレートの1つを変更することにより、コーポレートアイデンティティテーマを簡単に構築できます。 たとえば、配色を変更したり、会社のロゴを追加したりできます。 このツールは、開発者、ビジュアルデザイナー、管理者など、さまざまなユーザーグループを対象としています。
サポートされているプラットフォーム
- ABAPとしてのSAP NetWeaver(UIアドオン1.0 SP4経由)
- SAP NetWeaver Portal(7.30 SP10以降のバージョン)
- SAP HANAクラウド(計画中)
- SAP NetWeaver Portal(7.02予定)
主な機能と利点
- ブラウザベースのグラフィカルWYSIWYGエディタ-テーマパラメータの値を変更し、選択したプレビューページの視覚化にどのように影響するかをすぐに確認します。
- 組み込みのプレビューページ-組み込みのプレビューページを選択して、カスタムテーマがアプリケーションに適用されたときの外観を確認します-
- アプリケーションのプレビュー(例:注文承認、SAP Fioriラウンチパッド)
- プレビューの制御
- テーマの異なるレベル-
- クイックテーマ(基本的なクロステクノロジーのテーマ設定)
- エキスパートテーマ(テクノロジー固有のテーマ設定)
- 手動のLESSまたはCSS編集
- 再利用のためのカラーパレット-企業のブランディングを定義する主要な色の値を持つパラメータのセットを指定します。
- クロステクノロジーテーマ-さまざまなSAP UIクライアントおよびテクノロジーに適用される一貫したテーマを作成します-
- SAPUI5標準ライブラリ(SAP FioriアプリケーションおよびSAP Fiori Launchpadを含む)
- 統合レンダリングテクノロジー(Web Dynpro ABAPやFloorplan Managerなど)
- SAP NetWeaver Business Client
SAP UI Client | UI parts can be themed |
---|---|
Web Dynpro ABAP |
You can theme applications that do not use the following UI elements:
SAP NetWeaver 7.0 EHP2以降のWeb Dynpro ABAPアプリケーションのUIテーマデザイナで作成されたテーマのみを使用できます。 |
Floorplan Manager for Web Dynpro ABAP (FPM) | You can theme applications that do not use HTMLIslands or Chart UIBBs |
SAPUI5 | You can theme SAP Standard libraries. Custom SAPUI5 libraries cannot be themed |
SAP NetWeaver Business Client (NWBC) |
NWBC for Desktop (4.0 or higher): You can theme NWBC shell and overview pages (index page, new tab page, service map). NWBC for HTML(3.6):サービスマップのテーマを設定できます。 シェルをテーマにすることはできません。 |
SAP Fioriでテーマデザイナーを呼び出す方法
ステップ1 *-SAP Fioriフロントエンドサーバーにログインします。 *T-Code:Theme Designer を使用するか、次のスクリーンショットに示すようにショートカットを使用してログインできます。
- ステップ2 *-ログインすると、テーマデザイナ用にSAPが提供するすべてのデフォルトテンプレートが用意されます。 デフォルトのテーマを選択して、「開く」をクリックします。
- ステップ3 *-Fioriラウンチパッドリンクとアプリケーションの名前を入力し、[追加]をクリックします。
- ステップ4 *-画面パネルの右側から、色、フォント、画像、その他のプロパティを選択できます。 次のスクリーンショットに示すように、色を編集できます。
画像:/sap_ui5/images/custom_blue_crystal.jpg [カスタムブルークリスタル]画像:/sap_ui5/images/preview.jpg [プレビュー]
- ステップ5 *-テーマを保存するには、次のスクリーンショットに示すように、保存アイコンをクリックします。 保存オプションとビルドオプションもあります。
[保存してビルド]をクリックすると、保存が開始され、完了すると、確認メッセージ[保存してビルドが完了しました]が表示されます。
- ステップ6 *-このカスタムテーマのリンクを取得するには、次のスクリーンショットに示すようにTコードを使用します-
- ステップ7 *-作成したテーマを選択し、[情報]タブをクリックします。
- ステップ8 *-Ctrl + Yを使用して画面からURLをコピーし、これを書き留めます。
サポートされているテーマ
これらはUI5に同梱されているデフォルトのテーマです-
- ブルークリスタル
- ゴールドリフレクション
- モバイルビジュアル識別
- ハイコントラストブラック
チャートタイプ
sap.viz.ui5チャートライブラリには、ビジネスデータを表すために使用できるさまざまなチャートタイプがあります。 以下は、列、バブル、ライン、パイなどのいくつかのCVOMチャートタイプです。
画像:/sap_ui5/images/chart_types.jpg [グラフの種類]画像:/sap_ui5/images/cvom_charts.jpg [CVOMグラフ]