SAPUI5-テーマ

UIテーマデザイナは、SAPが提供するテーマテンプレートの1つを変更することにより、テーマを開発できるブラウザベースのツールです。

Example−配色を変更したり、会社のロゴを追加したりできます。このツールは、デザイン中にテーマのライブプレビューを提供します。

コーポレートブランディングを適用し、SAPUIテクノロジーで構築されたアプリケーションを検討します。UIテーマデザイナーは、クロステーマシナリオ用のブラウザーベースのツールです。SAPが提供するテーマテンプレートの1つを変更することにより、コーポレートアイデンティティテーマを簡単に構築するために使用します。たとえば、配色を変更したり、会社のロゴを追加したりできます。このツールは、開発者、ビジュアルデザイナー、管理者など、さまざまなユーザーグループを対象としています。

サポートされているプラ​​ットフォーム

  • ABAPとしてのSAPNetWeaver(UIアドオン1.0 SP4経由)
  • SAP NetWeaver Portal(7.30 SP10以降のバージョン)
  • SAP HANA Cloud(計画中)
  • SAP NetWeaver Portal(7.02予定)

主な機能と利点

  • Browser-based, graphical WYSIWYG editor −テーマパラメータの値を変更し、選択したプレビューページの視覚化にどのように影響するかをすぐに確認します。

  • Built-in preview pages −組み込みのプレビューページを選択して、カスタムテーマをアプリケーションに適用したときにどのように表示されるかを確認します。

    • アプリケーションのプレビュー(例:発注書の承認、SAP Fiori Launchpad)

    • コントロールプレビュー

  • Different levels of theming

    • クイックテーマ(基本的なクロステクノロジーテーマ設定)

    • エキスパートテーマ(テクノロジー固有のテーマ設定)

    • 手動のLESSまたはCSS編集

  • Color palette for reuse −コーポレートブランディングを定義する主要な色の値を使用して、一連のパラメーターを指定します。

  • Cross-technology theming −さまざまなSAP UIクライアントおよびテクノロジーに適用される1つの一貫したテーマを作成します−

    • SAPUI5標準ライブラリ(SAPFioriアプリケーションおよびSAPFiori Launchpadを含む)

    • 統合レンダリングテクノロジ(Web DynproABAPやFloorplanManagerなど)

    • SAP NetWeaver Business Client

SAPUIクライアント UIパーツにテーマを設定できます
Web Dynpro ABAP

次のUI要素を使用しないアプリケーションにテーマを設定できます。

  • HTMLIsland
  • HTMLContainer
  • Chart
  • FlashIsland
  • SilverlightIsland
  • BusinessGraphics

SAP NetWeaver 7.0 EHP2以降、Web DynproABAPアプリケーションのUIテーマデザイナで作成されたテーマのみを利用することができます。

Web Dynpro ABAP(FPM)のフロアプランマネージャ HTMLIslandsまたはChartUIBBを使用しないアプリケーションにテーマを設定できます
SAPUI5 SAP標準ライブラリにテーマを設定できます。カスタムSAPUI5ライブラリにテーマを設定することはできません
SAP NetWeaverビジネスクライアント(NWBC)

NWBC for Desktop(4.0以降):NWBCシェルと概要ページ(インデックスページ、新しいタブページ、サービスマップ)にテーマを設定できます。

NWBC for HTML(3.6):サービスマップにテーマを設定できます。シェルにテーマを設定することはできません。

SAP Fioriでテーマデザイナを呼び出す方法は?

Step 1− SAPFioriフロントエンドサーバーにログインします。使用できますT-Code: Theme Designer または、次のスクリーンショットに示すようにショートカットを使用してログインします。

Step 2−ログインすると、SAP for ThemeDesignerが提供するすべてのデフォルトテンプレートが表示されます。デフォルトのテーマを選択し、[開く]をクリックします。

Step 3 − Fiori Launchpadリンクとアプリケーションの名前を入力し、[追加]をクリックします。

Step 4−画面パネルの右側から、色、フォント、画像、その他のプロパティを選択できます。次のスクリーンショットに示すように、色を編集できます。

Step 5−テーマを保存するには、次のスクリーンショットに示すように[保存]アイコンをクリックします。保存およびビルドオプションのオプションもあります。

[保存してビルド]をクリックすると、保存が開始され、完了すると、確認メッセージ([保存してビルドが完了しました])が表示されます。

Step 6 −このカスタムテーマのリンクを取得するには、次のスクリーンショットに示すようにTコードを使用します−

Step 7 −作成したテーマを選択し、[情報]タブをクリックします。

Step 8 − Ctrl + Yを使用して画面からURLをコピーし、これをメモします。

サポートされているテーマ

これらは、UI5に付属しているデフォルトのテーマです-

  • ブルークリスタル
  • ゴールドリフレクション
  • モバイルビジュアル識別
  • ハイコントラストブラック

チャートタイプ

sap.viz.ui5チャートライブラリには、ビジネスデータを表すために使用できるさまざまなチャートタイプがあります。以下は、いくつかのCVOMチャートタイプです-列、バブル、線、円など。