トランザクションマネージャー:レイアウト:UI 効果

オーストラリアセールスカスタマーリレーションシップマネジメント

Release

australia

ft:locale

ja-JP

ft:publication_title

オーストラリアセールスカスタマーリレーションシップマネジメント

ft:clusterId

omgmt

bundleId

omgmt

workflow

Customer and Industry

トランザクションマネージャー:レイアウト:UI 効果

リリースバージョン: Australia

更新日 2026年03月12日

所要時間：10分

UI エフェクトを YAML または JSON でプログラミングしてボタンに機能を追加する方法について説明します。

トランザクションマネージャーでは、UI エフェクトはボタンに機能を追加するレイアウト要素です。ユーザーは、 CPQ が確立した UI 効果をカスタマイズできます。ただし、ユーザーはイベントと同じように新しい UI エフェクトを作成することはできません。

UI エフェクトとイベントが同じボタン上にある場合、UI エフェクトはイベントの実行後に実行されます。

例:リストを開く

たとえば、UI エフェクトを使用して、トランザクションに追加できる製品の検索可能なリストを開くボタンを有効にすることができます。レイアウトに記述する方法は次のとおりです。

      ...
      {
        "type": "button",
        "event": "productSearch",
        "label": "Add Products",
        "uiEffect": {
          "type": "productSearch",
          "target": "slideout"
        },
        "columnOrder": 6,
        "variableName": "productSearch"
      },
      ...

このボタンは、結果の UI に次のように表示されます。

製品を追加

UI エフェクトのプログラミング

UI エフェクトは、パラメーターの組み合わせによって定義されます。すべての UI エフェクトにはタイプがあり、一部にはターゲット、場所、またはオプションがある場合があります。

各パラメーターに設定可能な値は以下のとおりです。

type: url、 anchor、 productSearch、 lineDetail、 reconfigure、 addFavorite、 manageFavorites、 refreshSession、 showTier
target: inline、 tab、 window、 modal、 slideout、 lineDrawer、 fullScreen
location:[URL または要素 ID]
options: [タイプによって異なる]

タイプの分析

url には URL 形式の場所が必要です。ボタンを押すと、ユーザーは特定のターゲット (インライン、タブ、ウィンドウ、モーダル iframe、またはスライドアウト iframe) を経由して URL に移動します。中括弧を使用すると、アドミニストレーターはフィールド値を URL に動的に渡すことができます。一般的なユースケースは、出力ドキュメントに値を渡したり、Salesforce でレコードページを開いたりすることです。
anchor では、レイアウトの要素 ID として場所が必要です。ボタンを押すと、要素にフォーカスするかスクロールします。関連する親要素は、タブまたはアコーディオン構造で開きます。ターゲットはインラインである必要があります。
productSearch は、ターゲットの製品カタログをスライドアウトまたはモーダルウィンドウで開きます。変数名は必須です。UI 効果は gridHeaderButtons 要素に追加する必要があります。次のオプションがあります。
- 製品リストを表示: products : true (表示)、 false (非表示)
- お気に入りリストを表示: favorites - true (表示)、false (非表示)
- ボタンの配置場所: actionLocation - footer、 header、またはその両方
  - 指定しない場合、デフォルトで footer になります
  - ボタンには、[キャンセル]、[行を追加]、[構成]、[構成の完了] があります
次のコードでは、製品を表示し、お気に入りを非表示にし、ヘッダーにのみボタンを配置します。
```
...
"options": {
  "products": true,
  "favorites": false,
  "actionLocation": header
},
...
```
lineDetail は行レベルのボタンにする必要があります。ボタンを押すと、ターゲットにライン詳細レイアウト (modal、 slideout、または lineDrawer) が開きます。
exportLines ヘッダーレベルのボタンに配置する必要があります。ボタンを押すと、取引明細が CSV ファイルにエクスポートされます。
reconfigure 行レベルまたはヘッダーレベルのボタンに配置できます。ボタンがヘッダーレベルの場合は、行を選択する必要があります。reconfigureタイプは、ターゲット (modal、slideout、または lineDrawer) の構成を開きます。reconfigureには、ボタンの場所を定義するオプションが含まれています。詳細については、上記の productSearch を参照してください。
addFavorites 行レベルのボタンまたはヘッダーレベルのボタンに配置できます。ボタンがヘッダーレベルの場合は、行を選択する必要があります。 addFavorites ウィンドウが開き、選択内容からお気に入りを説明して作成します。他のプロパティはサポートされていません。
注:
お気に入りを共有するには、テナント設定を有効にする必要があります。お気に入りの共有を有効にするには、サポートチケットを送信します。
manageFavorites 指定されたターゲット (modal、 slideout、または inline) でお気に入りマネージャーを開きます。
refreshSession セッションが変更されたかどうかを確認します。その場合、 refreshSession は sessionId を更新し、変更を結合します。
showTiertarget = fullScreen および location = lineItems の場合、品目グリッドが全画面表示されます。showTierどの階層でも機能しますが、この機能の目的上、場所には品目の階層変数名を入力する必要があります。

現在、レイアウト JSON は検証されておらず、一部のプロパティの組み合わせはサポートされていません。サポートされていない組み合わせは、エラーを示さずに失敗する可能性があります。

暗黙的なイベント呼び出し

一部の UI エフェクトには、関連イベントの実行が含まれます。たとえば、 productSearch UI エフェクトまたは reconfigure UI エフェクトのいずれかをトリガーすると、 upsertLines イベントが実行されます。

アクセス条件

ユーザーが UI エフェクトにアクセスする機能は、イベントと同じ方法で制御することはできません。次のイベント設定に匹敵する設定はありません。

トランザクションマネージャー:レイアウト:UI 効果

ただし、UI エフェクトのアクセス条件は、トランザクション内のコンテキストまたは関連イベントによって変更できます。

UI エフェクトに暗黙的なイベントが関連付けられている場合、イベントのアクセス条件によってボタンのアクセス条件が決まり、UI エフェクトも決まります。したがって、アドミニストレーターが productSearch UI エフェクトをトリガーできる条件を制限する場合は、それらの制限を upsertLines イベントに追加できます。

reconfigure UI 効果を持つライングリッドのボタンは、構成できないラインでは非表示になります。ヘッダーレベルでは、選択したすべての明細が構成可能な場合にのみ有効になります。

イベントと UI エフェクトの両方がボタンに存在する場合、両方のアクセスは、個々のアクセス設定の共通部分によって決定されます。ボタンにアクセスできるようにするには、UI エフェクトとイベントの両方にアクセスできる必要があります。いずれかが無効または非表示になっている場合、ボタン全体が無効または非表示になります。

一般的なケース

製品検索 ( addLines UI エフェクトは upsertLines イベントを暗黙的に呼び出します):

JSON コードスニペット

{
  "type": "button",
  "variableName": "addLines",
  "label": "Add Lines",
  "uiEffect": {
    "type": "productSearch",
    "target": "slideout"
  }
}

YAML コードスニペット

type: button
variableName: addLines
label: Add Lines
uiEffect:
  type: productSearch
  target: slideout

明細行詳細ドロワー:

JSON コードスニペット

"lineLevelButtons": [
 {
   "icon": "settings",
   "label": "reconfig",
    "uiEffect": {
       "type": "lineDetail",
        "target": "lineDrawer"
      },
    "variableName": "reconfig"
  }

YAML コードスニペット

lineLevelButtons:
-icon: settings
 label: reconfig
 uiEffect:
   type: lineDetail
   target: lineDrawer
 variableName: reconfig

お気に入りを有効にした製品検索:

JSON コードスニペット

{
  "type": "button",
  "variableName": "addLines",
  "label": "Add Lines",
  "uiEffect": {
    "type": "productSearch",
    "target": "slideout"
    "options": {
      "products": true,
      "favorites": true,
    }
  }
}

YAML コードスニペット

type: button
variableName: addLines
label: Add Lines
uiEffect:
  type: productSearch
  target: slideout
  options:
    products: true
    favorites: true

新しいタブで URL リンクを開く:

JSON コードスニペット

{
  "columnorder": 1,
  "label": "Google it",
  "type": "event",
  "variableNane": "LinkToSite",
    "uieffect": {
        "type": "url",
        "target": "tab",
        "location": "https://google.com/search?q=I{txn.search}" 
    }
}

YAML コードスニペット

columnorder: 1
label: Google it
type: event
variableName: LinkToSite
uieffect:
  type: url
  target: tab
  location: "https://google.com/search?q=I{txn.search}"

セッションのリフレッシュ:

JSON コードスニペット

{
  "type": "button",
  "variableName": "Refresh",
  "label": "Refresh",
  "uiEffect": {
    "type": "refreshSession"
  }
}

YAML コードスニペット

type: button
variableName: Refresh
label: Refresh
uiEffect:
  type: refreshSession

再構成:

JSON コードスニペット

"lineLevelButtons": [
  {
     "icon": "settings",
     "label": "Reconfigure",
      "uiEffect": {
          "type": "reconfigure",
          "target": "modal"
       },
     "variableName": "reconfig"
  }

YAML コードスニペット

lineLevelButtons:
-icon: settings
 label: Reconfigure
 uiEffect:
   type: reconfigure
   target: modal
 variableName: reconfig

お気に入りに追加:

JSON コードスニペット

{
  "label": "Add To Favorites",
  "uiEffect": {
    "type": "addFavorite"
    },
  "variableName": "addFavorites"
}

YAML コードスニペット

label: Add To Favorites
uiEffect:
  type: addFavorite
variableName: addFavorites

お気に入りの管理:

JSON コードスニペット

{
  "label": "Manage Favorites",
  "uiEffect": {
    "type": "manageFavorites",
    "target": "modal"
    },
 "variableName": "manageFavorites"
}

YAML コードスニペット

label: Manage Favorites
uiEffect:
  type: manageFavorites
  target: slideout
variableName: manageFavorites

エクスポート行 YAML スニペット:

label: Export Lines
uiEffect:
  type: exportLines
variableName: exportLines