CSV レイアウトのアップロード
レイアウト仕様を含む CSV ファイルを作成してアップロードする方法について説明します。
レイアウトは詳細計画で定義されます。詳細計画に複数のレイアウトが定義されている場合、エンドユーザーは、購入側 UI の右上隅にある代替レイアウトボタンを使用してレイアウト間をローテーションします。
レイアウトは、レイアウトのすべての指示を含む CSV ファイルを介して定義されます。管理を容易にするために、アドミンはスプレッドシート (Google スプレッドシート、Microsoft Excel など) でレイアウトを作成し、CSV 形式にエクスポートすることをお勧めします。
レイアウトの作成と編集
対応する詳細計画管理ページからレイアウトにアクセスします。
- CPQ アドミンナビゲーションペインで、[詳細計画] (2) をクリックします。
- [レイアウト] タブ (3) をクリックします。
- アクセスする詳細計画の名前をクリックします。
新しいレイアウトを開始するには、[ レイアウトの作成] をクリックします。既存のレイアウトを編集するには、リスト内のレイアウトの名前をクリックします。
レイアウトウィザードでレイアウトを編集することもできます。詳細計画を再展開すると、新しい UI の変更がバイサイドに表示されます。
新しいレイアウトを開始すると、[新規レイアウト] ウィンドウが開きます。CSV ファイルをボックスにドロップするか、コンピューターからクリックして選択してインポートできます。(i) 参考用にサンプルレイアウトファイルをダウンロードすることもできます。(ii)
既存のレイアウトを編集する場合:
[ エクスポート] をクリックして、現在のレイアウトファイルをダウンロードします。(a)
[ 置換] (b) をクリックして、レイアウト CSV ファイルをインポートします。
[ 保存] (c) をクリックして、現在のレイアウトを編集したレイアウトに置き換えます。CSV ファイルのアップロードに失敗した場合、ファイルで見つかったすべてのエラーがエラーダイアログでアドミニストレーターに表示されます。
レイアウトの使用 CSV ファイルのアップロード
レイアウト CSV 形式の詳細については、次の 26 分間のビデオをご覧ください。
レイアウト CSV の使用方法の例については、次の 4 分間のビデオをご覧ください。
対応する HiTech レイアウト CSV ファイルをダウンロードします。
レイアウト CSV 形式
列見出しは小文字です。
タイプ列では、レイアウトコンポーネントを定義します。次の表は、この列の有効な値を示しています。
| タイプ値 | 説明 |
|---|---|
| tierDef | プロパティ:Pages、PagesWithLabels、PagesWithNavigation、ExpandableSection、Tab、TabWithNavigation、VerticalTab、VerticalTabWithNavigation、Accordion、AccordionWithNavigation |
| tier | |
| 列セット | |
| イメージ | |
| 製品リスト | |
| 製品リスト列 | |
| フィールド |
パス列の値形式は、要素の上書きソースラベルの配置を視覚的に示しますが、現在アプリケーションでは使用されていません。空のままにします。
ラベル は、層とフィールドの UI でエンドユーザーに表示するラベルを定義します。
variablename は、階層またはフィールドの一意の識別子を定義します。- 階層の場合、アドミニストレーターは個別の値を定義する必要があります。
- フィールドの場合は、フィールド変数名を入力します。
コンポーネント表示タイプ列は、フィールドの表示方法を定義します。次のタイプが利用可能です。
| フィールドタイプ | コンポーネントの表示タイプ |
|---|---|
| テキスト |
読み取り専用テキスト テキスト テキストエリア 日付 |
| ブーリアン |
ブーリアン ラジオ ラジオボタン |
| 番号 |
番号 スライダー NumberWithSubmit 読み取り専用テキスト ReadOnlyCurrency 書式設定された番号 |
| 選択リスト (単一選択) |
拡張ピックリスト 拡張された picklistDisplayOnly ピックリスト 読み取り専用ピックリスト ラジオ ラジオボタン 単一選択 picklistGrid 垂直ラジオ ビジュアルピッカー |
| 選択リスト (複数選択) |
MultiSelectExtended 選択リスト MultiSelectExtended ピックリスト表示専用 複数選択ピックリスト 複数選択 picklistGrid MultiSelectVisualPicker チェックボックス 垂直チェックボックス |
columnOrder は、列セット内のコンポーネントに関連しています。レスポンシブ UI の画面解像度に基づいてフィールドのソート順を指定するために使用されます。
クラス名 は、 CPQ で利用可能な事前定義されたクラスを参照するために使用されます。たとえば、画像を配置する場合、クラスはその画像の周囲のフィールドのフローを定義できます。これらのクラス名を className 列のレイアウト CSV ファイルに追加します。max-height コントロールと grid コントロールはブラウザーの幅とやり取りするため、各クラスを明確に試して、クラスがさまざまなブラウザー サイズにどのように応答するかを調べることをお勧めします。
| 効果 | 適用先 | サポートされているクラス | メモと例 |
|---|---|---|---|
| Grid | フィールド、画像 | topleft1col1row, topleft1col2row ...topleft1col6row |
topleft1col1row { grid-column: 1/2; } topleft1col2row { grid-column: 1/2; grid-row: 1/3; } topleft1col3row { grid-column: 1/2; grid-row: 1/4; } topleft1col4row { grid-column: 1/2; grid-row: 1/5; } topleft1col5row { grid-column: 1/2; grid-row: 1/6; } topleft1col6row { grid-column: 1/2; grid-row: 1/6; } |
| 左上2列1行、左上2列2行 ...左上 2 列 6 行 |
topleft2col1row { grid-column: 1/3; } topleft2col2row { grid-column: 1/3; grid-row: 1/3; } topleft2col3row { grid-column: 1/3; grid-row: 1/4; } topleft2col4row { grid-column: 1/3; grid-row: 1/5; } topleft2col5row { grid-column: 1/3; grid-row: 1/6; } topleft2col6row { grid-column: 1/3; grid-row: 1/6; } |
||
| topleft3col1row, topleft3col2row ...左上 3 列 6 行 |
topleft3col1row { grid-column: 1/4; } topleft3col2row { grid-column: 1/4; grid-row: 1/3; } topleft3col3row { grid-column: 1/4; grid-row: 1/4; } topleft3col4row { grid-column: 1/4; grid-row: 1/5; } topleft3col5row { grid-column: 1/4; grid-row: 1/6; } topleft3col6row { grid-column: 1/4; grid-row: 1/6; } |
||
| topright1col1row、topright1col2row ...topright1col6row |
topright1col1row { grid-column: -2/-1; } topright1col2row { grid-column: -2/-1; grid-row: 1/3; } topright1col3row { grid-column: -2/-1; grid-row: 1/4; } topright1col4row { grid-column: -2/-1; grid-row: 1/5; } topright1col5row { grid-column: -2/-1; grid-row: 1/6; } topright1col6row { grid-column: -2/-1; grid-row: 1/6; } |
||
| 高さ | フィールド | MH5、MH10、MH15 ...MH40 | 最大高さは5remから40remまで、5刻みで |
| 幅 | フィールド | w5, w10, w15 ... w40 | 最大幅は5remから40remまで、5刻みで |
| グリッド列幅 | フィールド | LC-15M-15MAX、LC-15M-20MAX、LC-15M-25MAX、LC-15M-30MAX | これらのクラスは、レイアウトグリッドの列の幅を設定します。
|
| 垂直に表示し、中央揃えにする | ピックリストフィールド | vertical-layout, align-center | デフォルト:水平 (レイアウトが垂直の場合、デフォルトは左) |
| フィールドラベルを非表示、フィールドオプションラベルを非表示 | 表示コンポーネント:拡張ピックリスト、MultiSelectExtended ピックリスト | hide-field-label、hide-field-option-label |
値列には、その行で参照される要素 (フィールドまたは製品リスト列) のプロパティを表す JSON 文字列が含まれています。
プレースホルダー を使用すると、アドミンは、エンドユーザーが値を入力するまでテキストフィールドに表示されるプレースホルダーテキストを定義できます。
画像を含むコンポーネント
画像を含む選択リスト表示コンポーネントの場合、オプションを無効にすると、画像はフェードします。アドミニストレーターは、この動作を上書きし、上 書きが無効になっている クラスをレイアウトの classname フィールドに適用することで、画像を強制的に正常に見せることができます。