ブログ

はじめに

本記事では、SAPUI5で検索条件の保存などに利用することができる「バリアント機能」について紹介します。
複数のデータを表示するアプリケーション内で、同じような検索条件を繰り返し利用する場面は多いと思います。こうした場面で活用できるのがバリアント機能です。
バリアント機能を利用することで、Filter Barに入力した検索条件の保存・再利用が可能になり、作成した検索条件を他のユーザに共有することも可能です。
検索条件の保存機能が利用可能になることでユーザが毎回同じ検索条件を入力する手間を削減し、他のユーザに共有することでチーム内の検索条件を標準化することも可能です。

概要

「バリアント（Variant）」とは、SAPUI5内で検索を実行するために使用する検索条件やコントロールパラメータを保存する仕組みです。
保存されたデータは「ビュー（View）」と呼ばれ、ユーザはビューを使用することで検索条件やコントロールパラメータを保存して再利用することができます。

保存するビューには以下のようなオプションを設定することが可能です。

バリアントの比較

SAPUI5では以下のようなバリアント機能を利用することができます。

• sap.ui.comp.smartvariants.SmartVariantManagement
  （以下、「Smart Variant Management」）
• sap.ui.fl.variants.VariantManagement
• sap.m.VariantManagement

Smart Variant Managementやsap.ui.fl.variants.VariantManagementはSAPによって用意された場所に自動的にデータが保存されるため、複雑な実装なしで利用することができます。sap.m.VariantManagementは高度なカスタマイズが可能ですが、ビューデータの登録処理や保存先のデータベースを自身で用意する必要があります。

ここからは3つのバリアントそれぞれの実装時の注意点を解説していきます。

Smart Variant Managementについて（OData V2）

Smart Variant Managementは以下のスマートコントロールと組み合わせて利用することが可能です。

• Smart Filter Bar
• Smart Table
• Smart Chart

　など

設定手順 （Smart Variant Management）

①　Smart Variant Managementの実装
　今回使用するアプリケーションではSmart Filter BarとSmart Tableを使用しています。
　Smart Filter Barをview.xmlで定義し使用している場合は既にSmart Variant Managementの機能が組み込まれているため、新たにSmart Variant Managementを追加する必要はありません。

　　※SmartFilterBarやSmartTableの実装方法についてはこちらのブログで説明しています。
　　【SAP Fiori】SmartTableってどんなテーブル？実装付きで解説！

Smart Variant Managementの実装だけで基本的な機能を利用することは可能ですが、このままでは公開設定は利用することができません。

公開設定を利用して作成されたビューを他のユーザと共有したい場合は、「UI5 flexibility for key users」というサービスとアプリケーションを紐づける必要があります。

設定手順 （公開設定追加）

１．アプリケーションに新しいルートを追加
　対象のSAPUI5アプリケーションのxs-app.jsonに以下のルーティングを追加します。

{
	"source": "^/keyuser/(.*)$",
	"target": "$1",
	"service": "com.sap.ui.flex.cf.keyuser",
	"endpoint": "keyuser"
}

２．SAP BTPコックピットで「UI5 flexibility for key users」サービスを追加

　●　UI5 flexibility for key users とは
　主要ユーザによるUI Adaptation機能を利用できるサービスです。UI Adaptation機能を利用することで簡単にUIの変更が可能になります。

①　SAP BTP コックピットのEntitlements/Subaccount AssignmentsのAdd Serviceから「UI5 flexibility for key users」サービスを有効化

　有効化することで対象のサブアカウントから「UI5 flexibility for key users」サービスが作成可能になります。

②　マルチターゲットアーカイブを使用してインスタンスを作成
　mta.yamlに以下の記載を行い、対象のアプリケーションをデプロイすることで、
　インスタンスの作成とバインドを行います。

　・resourcesにサービスを追加

- name: ui5-flexibility-keyuser
  parameters:
    service-plan: free
    service: ui5-flexibility-keyuser
  type: org.cloudfoundry.managed-service

　・modulesにサービスを紐づけ

modules:
  requires:
    - name: ui5-flexibility-keyuser

上記の設定でデプロイを実行します。

③　SAP Build Work Zoneでキーユーザアダプテーションを有効化

　・SAP Build Work Zoneのサイト設定に遷移します。

　・キーユーザアダプテーションを有効にして保存します。

④　ユーザにUI5 flexibility for key usersサービスのロールである「FlexPublicViewEditor」を付与

以上の設定でアプリケーションでUI Adaptation機能が有効化され、Smart Variant Management に公開設定が追加されます。

sap.ui.fl.variants.VariantManagementについて（OData V4対応）

sap.ui.fl.variants.VariantManagementはSmart Variant Managementと同様にODataサービスとともに利用することが可能ですが、sap.ui.fl.variants.VariantManagementはOData V4に対応したsap.ui.mdcライブラリを使用することができます。
sap.ui.mdcライブラリもSmart Variant Managementで使用するsap.ui.compライブラリと同様にODataのメタデータを利用することで簡単にテーブルやフィルターバーを実装することが可能です。

sap.ui.fl.variants.VariantManagementによる検索条件の保存機能は以下のようなコントロールとともに利用することが可能です。

• sap.ui.mdc.FilterBar
• sap.ui.mdc.Table

　など

設定手順

１．view.xmlにsap.ui.fl.variants.VariantManagementを追加
view.xmlにはsap.ui.fl.variants.VariantManagementとsap.ui.mdcの実装が必要です。

<mvc:View
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m"
        xmlns:core="sap.ui.core"
        xmlns:f="sap.f"
        xmlns:smartTable="sap.ui.comp.smarttable"
        xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
        xmlns:mdc="sap.ui.mdc"
        xmlns:mdct="sap.ui.mdc.table"
        xmlns:vm="sap.ui.fl.variants"
        controllerName="sample.controller.Master"
        height="100%"
>
        <f:DynamicPage
                id="idDynamicPage"
                toggleHeaderOnTitleClick="false"
        >
                <f:title>
                        <f:DynamicPageTitle>
                                <f:heading>
                                        <Title text="Title" />
                                        <!-- VariantManagementを実装 -->
                                        <vm:VariantManagement id="idVariantManagement" for="idFilterBar, idMdcTable" />
                                </f:heading>
                        </f:DynamicPageTitle>
                </f:title>
                <f:header>
                        <f:DynamicPageHeader>
                                <f:content>
                                  　　　<!-- FIlterBarを実装（プロパティは省略しています） -->
                                        <mdc:FilterBar
                                                id="idFilterBar"
                                                showAdaptFiltersButton="true"
                                                showClearButton="false"
                                                p13nMode = "Item,Value"
                                        >

                                        </mdc:FilterBar>
                                </f:content>
                        </f:DynamicPageHeader>
                </f:header>
                <f:content>
                　　　　<!-- Tableを実装（プロパティは省略しています） -->
                        <mdc:Table
                                id="idMdcTable"
                        >
                        </mdc:Table>
                </f:content>
        </f:DynamicPage>
</mvc:View>

また、公開設定を利用するためにはSmart Variant Managementと同様に「UI5 Flexibility for key users」サービスの有効化と連携が必要になります。

※詳細についてはSmart Variant Managementの設定手順を参照

sap.m.VariantManagementについて

sap.m.VariantManagementの基本的な機能はSmart Variant Managementやsap.ui.fl.variants.VariantManagementと同じですが、データベースへの連携などを手動で実装する必要があります。

設定手順

１．view.xmlにsap.m.VariantManagementを追加

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  controllerName="sample.controller.Master"
  xmlns="sap.m"
  xmlns:f="sap.f"
  xmlns:fb="sap.ui.comp.filterbar"
  xmlns:core="sap.ui.core"
>
  <Shell
    id="idShell"
    appWidthLimited="false"
  >
    <App
      id="idApp"
      class="MK-300"
    >
      <pages>
	<f:DynamicPage
	  id="idDynamicPage"
	  headerExpanded="{/headerExpanded}"
	  toggleHeaderOnTitleClick="{/titleClickable}"
	>
	  <f:title>
	    <f:DynamicPageTitle>
		<f:heading>
		  <Title text="title" />
		</f:heading>
		<f:actions>
		  <ToolbarSpacer />
		</f:actions>
	    </f:DynamicPageTitle>
	  </f:title>
	  <f:header>
	    <f:DynamicPageHeader>
	      <f:content>
		<VariantManagement
		  creationAllowed="true"
		  popoverTitle="マイビュー"
		  showFooter="true"
		  showSaveAs="true"
		  supportApplyAutomatically="true"
		  supportContexts="false"
		  supportDefault="true"
		  supportFavorites="true"
		  supportPublic="true"
		  id="idVariantManagement"
		  save="onSaveVariants"
		  select="onSelectVariantManagement"
		  manage="onVariantManagement"
		  manageCancel="onVariantManageCancel"
		/>
		<fb:FilterBar
		  id="idFilterBar"
		  useToolbar="false"
		  search="onFilterBarSearch"
		  showFilterConfiguration="false"
		>
		  <!--　省略  -->
		</fb:FilterBar>
	      </f:content>
	    </f:DynamicPageHeader>
	  </f:header>
          <f:content>
	    <Table
	      id="idProductsTable"
	      sticky="HeaderToolbar,InfoToolbar,ColumnHeaders"
	      mode="SingleSelectLeft"
	      selectionChange="onProductsTableSelectionChange"
	      contextualWidth="Auto"
	      growing="true"
	      growingThreshold="100"
	      growingScrollToLoad="true"
	      items="{products>/Products}"
	    >
	      <!--　省略  -->
	    </Table>
	  </f:content>
	</f:DynamicPage>
      </pages>
    </App>
  </Shell>
</mvc:View>

主な設定内容

■プロパティ

■イベント

注意点

※1　新規登録の「保存」ボタンと更新の「保存」ボタンは
　　　どちらも同じイベントが起動しますが、「overwrite」パラメータから判別することが可能です。

onSaveVariants: function (oEvent) {
  let parameters = oEvent.getParameters();
  console.log(parameters.overwrite); //trueの場合は「保存」、falseの場合は「名前を付けて保存」
},

※2　管理画面内の「保存」ボタン押下で起動するイベントは、
　　　パラメータから変更されたデータのキーを取得することが可能です。
　　　（設定が解除された際は検知されないため注意が必要です。※2025/07/16現在）

• renamed …ビュータイトル変更時
• deleted…削除時
• exe…自動実行チェックボックス有効化時
• fav…お気に入り登録時
• def…デフォルト設定時

onVariantManage: function (oEvent) {
  let paramaters = oEvent.getParameters();
  console.log(paramaters); 
  // タイトルに変更があった場合
  // {renamed:[key:"変更されたビューのキー",name:"変更されたタイトル"]}
}

２．データの追加方法

下記のような記述でVariantManagementにビューデータを追加することが可能です。
今回はVariantItem内のCustomDataに検索条件を保存しています。

let item = new sap.m.VariantItem(); //VariantManagementに追加するVariantItemを定義
item.setKey("key");　//キーを設定
item.setAuthor("Author"); //作成者を設定
item.setChangeable(true); //編集可否を設定
item.setRemove(true); //削除可否を設定
item.setRename(true); //タイトル変更可否を設定
item.setSharing(sap.m.SharingMode.Public); //公開またはプライベートを設定
item.setFavorite(true); //お気に入りを設定
item.setExecuteOnSelect(true); //自動実行を設定


let customData = new sap.ui.core.CustomData(); //VariantItemに紐づく検索条件の定義
customData.setKey("filterConditionKey"); //フィルター条件を設定する項目に紐づく一意のキー
customData.setValue("filterValue"); //保存された検索条件
item.addCustomData(customData); // VariantItemに検索条件の定義を追加

this.byId("idVariantManagement").addItem(item); //VariantManagementにアイテムを追加

this.byId("idVariantManagement").setDefaultKey("key"); //デフォルト設定されたアイテムのキーを登録
this.byId("idVariantManagement").setSelectedKey("key");　//VariantItemを選択させる

最後に

本記事では、SAPUI5アプリケーションで実装できるバリアント機能についてご紹介しました。
検索条件の保存機能の実装により、複雑な条件の組み合わせも保存することできるため、作業の効率化だけでなく手動入力による人為的なミスを防ぐ効果も期待できます。
バリアント機能を実装される際の助けになれば幸いです。
最後までご覧いただきありがとうございます。

参考

sap.ui.comp.smartvariants.SmartVariantManagement
sap.m.VariantManagement
sap.ui.fl.variants.VariantManagement
UI5 Flexibility for Key Users – Initial Setup
table with filter bar – Samples

投稿者プロフィール

蝦名 亮汰

2023年より新卒入社。
Vue.js、Java（SpringBoot）、 AWSを使用した開発を経験後、
現在はSAPを用いた開発案件でアプリ開発やサービス調査に取り組んでいます。
業務を通じて得た技術に関する記事を共有していきたいと思います。

最新の投稿

• SAP2025.07.30【SAP Fiori】OData V2 / V4対応！ SAPUI5 Variant Managementで検索条件を保存する方法について解説
• SAP2024.07.08【SAP BTP】SAP Cloud Logging Service実践編 その２：メトリクス監視してみよう
• AWS2024.03.07【AWS】Rclone × S3 Selectによるデータ取り込み自動化で効率的なデータ活用を実現！～S3 Select編～