コンテキストに基づいて表示されるモジュール プロパティのコンフィギュレーション
この記事では、モジュール プロパティを構成して、他の構成プロパティのコンテキスト値に基づいて表示または非表示にする方法について説明します。
モジュールの定義ファイルには、複数のモジュール構成プロパティを定義できます。 ただし、一部のプロパティ フィールドの関係は、モジュールの他のプロパティ フィールドに対して設定されている値に依存する場合があります。 モジュールを構成するページ エディターに表示されるフィールドの数を最小限に抑えるために、関係を持たないプロパティ フィールドは非表示にする必要があります。 この動作は、複雑さや混乱を引き起こす可能性を減らすのに役立ちます。
モジュールは条件付きスキーマを使用して、Commerce サイト ビルダーのモジュール プロパティ ウィンドウで、他のプロパティ フィールドの値に基づいてプロパティ フィールドを表示または非表示にするルールを定義できます。 たとえば、モジュールレイアウトには 2 つのレイアウトを許可するレイアウト プロパティがあり、1 つはテキスト形式で、もう 1 つはテキストと画像が豊富です。 この場合、モジュール デザイナーはページ エディターでモジュールを構成するときに、コンテキストに適したプロパティ フィールド (レイアウト) だけがサイト ビルダーに表示される必要がある場合があります。
コンテキストに基づいて、プロパティ フィールドを条件付きスキーマの dependentSchemas プロパティを使用するモジュール定義およびモジュール定義の拡張機能ファイルでサポートされています。 2 種類の条件付きスキーマがサポートされています: スキーマの依存関係およびプロパティの依存関係。
スキーマの相互関係
スキーマの依存関係を使用して、コンフィギュレーション プロパティに対して特定の値が選択されている場合、スキーマを変更する必要があるという申告ができます。 oneOf プロパティは dependentSchemas プロパティとともに使用され、特定の構成値に適用される構成プロパティの一覧を申告します。
スキーマの相互関係の例
モジュール定義ファイルの次の例に示すように、レイアウトプロパティが plainTextOnly に設定される場合、featureText プロパティが表示される必要があります。 または、レイアウトプロパティが richTextWithImage に設定される場合、featureRichText、featureImage、および imageAlignment プロパティが表示される必要があります (ただし、featureText プロパティは表示される必要がありません)。
{
"$type": "contentModule",
"friendlyName": "Configuration visibility",
"name": "config-visibility",
"description": "Configuration visibility test module",
"categories": ["config-visibility"],
"tags": [""],
"dataActions": {
},
"config": {
"productTitle": {
"friendlyName": "Product title",
"description": "Product title.",
"type": "string"
}
},
"dependentSchemas": {
"productTitle": {
"properties": {
"subTitle" : {
"type": "string",
"friendlyName": "Product sub title",
"description": "Product sub title."
}
},
"required": ["productTitle"]
}
}
}
プロパティの依存関係
プロパティの依存関係を使用して、別の構成プロパティの値が存在する場合は、特定の構成プロパティが存在する必要があるという申告をすることができます。
プロパティの依存関係の例
次の例では、dependentSchemas プロパティは productTitle 値が入力されるたびに、subTitle 構成プロパティがサイト ビルダー内に表示されるよう指定します。
{
"$type": "contentModule",
"friendlyName": "Product Feature",
"name": "product-feature",
"description": "Feature module used to highlight a product.",
"config": {
"productTitle": {
"type": "string",
"friendlyName": "Product Title",
"description": "Product title."
}
},
"dependentSchemas": {
"productTitle": {
"properties": {
"subTitle" : {
"type": "string",
"friendlyName": "Product Sub Title",
"description": "Product sub title."
}
},
"required": ["productTitle"]
}
}
}
プロパティの上書きの競合の処理
dependentSchemas プロパティはモジュール定義ファイルとモジュール定義拡張機能の両方でサポートされているので、2 種類のファイル間に競合が発生する可能性があります。 モジュール定義拡張機能ファイルでブール値オーバーライドプロパティが true に設定されることで、特定の構成プロパティの上書きを有効にします。
次の例では、モジュール定義ファイルとオーバーライドプロパティを使用するモジュール定義拡張機能ファイルを示します。
モジュール定義ファイルの例
{
"$type": "contentModule",
"friendlyName": "Product Feature",
"name": "product-feature",
"description": "Feature module used to highlight a product.",
"config": {
"layout": {
"friendlyName": "Text Layout",
"description": "Sets the desired text output to be plain text or rich text with images.",
"type": "string",
"enum": {
"plainTextOnly": "Plain Text Only",
"richTextWithImage": "Rich Text With Image"
},
"default": "plainTextOnly",
"scope": "module",
"group": "Layout Properties"
}
}
}
{
"$type": "contentModule",
"friendlyName": "Configuration visibility",
"name": "config-visibility",
"description": "Configuration visibility test module",
"categories": ["config-visibility"],
"tags": [""],
"dataActions": {
},
"config": {
"layout": {
"friendlyName": "Text Layout",
"description": "Sets the desired text output to be plain text or rich text with images.",
"type": "string",
"enum": {
"plainTextOnly": "Plain Text Only",
"richTextOnly": "Rich Text Only",
"richTextWithImage": "Rich Text With Image"
},
"default": "plainTextOnly",
"override": true
}
}
}
モジュール定義拡張機能ファイルの例
{
"$type": "contentModule",
"friendlyName": "Configuration visibility",
"name": "config-visibility",
"description": "Configuration visibility test module",
"categories": ["config-visibility"],
"tags": [""],
"dataActions": {
},
"config": {
"productTitle": {
"friendlyName": "Product Title",
"description": "Product title.",
"type": "string"
},
"layout": {
"friendlyName": "Text Layout",
"description": "Sets the desired text output to be plain text or rich text with images.",
"type": "string",
"enum": {
"plainTextOnly": "Plain Text Only",
"richTextOnly": "Rich Text Only",
"richTextWithImage": "Rich Text With Image"
},
"default": "plainTextOnly",
"override": true
}
},
"dependentSchemas": {
"productTitle": {
"properties": {
"subTitle" : {
"type": "string",
"friendlyName": "Product Sub Title",
"description": "Product sub title."
}
},
"required": ["productTitle"]
},
"layout": {
"oneOf": [
{
"properties": {
"layout": {
"enum" : {
"plainTextOnly": "plainTextOnly"
}
},
"featureText" : {
"type": "string",
"friendlyName": "Feature Text",
"description": "Main text title to show in module."
}
}
},
{
"properties": {
"layout": {
"enum" : {
"richTextOnly": "richTextOnly"
}
},
"featureRichText" : {
"type": "richText",
"friendlyName": "Feature Text",
"description": "Main rich text to show in module."
}
}
},
{
"properties": {
"layout": {
"enum" : {
"richTextWithImage": "richTextWithImage"
}
},
"featureRichText" : {
"type": "richText",
"friendlyName": "Feature Text",
"description": "Main rich text to show in module."
},
"featureImage" : {
"type": "image",
"friendlyName": "Feature Title",
"description": "Image to show in module."
},
"imageAlignment": {
"friendlyName": "Image Alignment",
"description": "Sets the desired alignment of the image, either left or right on the text.",
"type": "string",
"enum": {
"left": "Left",
"right": "Right"
},
"default": "left"
}
}
}
]
}
}
}
競合の解決のシナリオ
次の表に、モジュール定義およびモジュール定義拡張機能ファイルでスキーマの依存関係を使用した場合の予想されるシナリオおよび結果の一覧を示します。
通常のシナリオ
| シナリオ | 予想される結果 |
|---|---|
| スキーマの依存関係は、モジュール定義ファイルでのみ使用されます。 スキーマ依存関係のプロパティとモジュール定義拡張機能ファイルの間に競合はありません。 | スキーマの依存関係が適用されます。 |
| スキーマの依存関係は、モジュール定義拡張機能ファイルでのみ使用されます。 スキーマ依存関係のプロパティとモジュール定義拡張機能ファイルの間に競合はありません。 | スキーマの依存関係が適用されます。 |
| スキーマの依存関係は、モジュール定義ファイルでのみ使用されます。 スキーマ依存関係のプロパティとモジュール定義拡張機能ファイルの間に競合があります。 たとえば、プロパティ A は、スキーマ依存関係を持わないモジュール定義ファイルとモジュール定義拡張機能ファイルのスキーマ依存関係の両方で申告されます。 | ビルド エラーが発生しています。 |
| 同じプロパティに対するスキーマの依存関係は、モジュール定義ファイルとモジュール定義拡張機能ファイルの両方で使用されます。 | モジュール定義ファイルが優先されます。 |
| 同じプロパティが、モジュール定義ファイルとモジュール定義拡張機能ファイルの両方で定義されています。 | モジュール定義ファイルが優先されます。 |
シナリオをオーバーライドする
| シナリオ | 予想される結果 |
|---|---|
| 同じプロパティが、モジュール定義ファイルとモジュール定義拡張機能ファイルの両方で定義されています。 オーバーライドプロパティがモジュール定義拡張機能ファイルでプロパティに設定されていないか、またはオーバーライドプロパティが false に設定されています。 | モジュール定義ファイルが優先されます。 |
| 同じプロパティに対するスキーマの依存関係は、モジュール定義ファイルとモジュール定義拡張機能ファイルの両方で使用されます。 オーバーライドプロパティは、モジュール定義拡張機能ファイルでプロパティに対して true に設定されています。 | モジュール定義拡張機能ファイルが優先されます。 |
| 同じプロパティに対するスキーマの依存関係は、モジュール定義ファイルとモジュール定義拡張機能ファイルの両方で使用されます。 オーバーライドプロパティがモジュール定義拡張機能ファイルでプロパティに設定されていないか、またはオーバーライドプロパティが false に設定されています。 | モジュール定義ファイルが優先されます。 |
| 同じプロパティは、モジュール定義ファイルとモジュール定義拡張機能ファイルのスキーマ依存関係の両方で定義されています。 オーバーライドプロパティは、モジュール定義拡張機能ファイルでプロパティに対して true に設定されています。 | モジュール定義拡張機能ファイルが優先されます。 |
| 同じプロパティは、モジュール定義ファイルとモジュール定義拡張機能ファイルのスキーマ依存関係の両方で定義されています。 オーバーライドプロパティがモジュール定義拡張機能ファイルでプロパティに設定されていないか、またはオーバーライドプロパティが false に設定されています。 | モジュール定義ファイルが優先されます。 |
| 同じプロパティが、モジュール定義ファイルとモジュール定義拡張機能ファイルの両方で定義されています。 オーバーライドプロパティは、モジュール定義拡張機能ファイルでプロパティに対して true に設定されています。 | モジュール定義拡張機能ファイルが優先されます。 |