コードファーストの JSS アプリにマニフェスト定義を追加する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
コンポーネントをスキャフォールディングするときに、スクリプトを変更して機能を削除していない場合、JSS は新しいコンポーネントのマニフェスト定義を自動的に作成します。ただし、コンポーネント ファイルを作成するだけの場合は、Manifest API インスタンス メソッドを使用してマニフェスト アイテムに追加できます。また、Manifest API インスタンス メソッドを使用して、新しいルート タイプやその他のタイプのアイテムを登録することもできます。
これらのメソッドは、sitecore/definitions/
ディレクトリにあるマニフェスト定義ファイルで使用します。ファイル名は、*.sitecore.[js|ts]
の規則に従う必要があります。アスタリスクは、SearchBox.sitecore.js
などのコンポーネント名、または placeholders.sitecore.js
などのアイテム タイプを表します。
Manifest API インスタンス メソッド
Manifest API は、登録用に次のインスタンス メソッドを提供します。
-
addComponent(...components: component[])
- JSS アプリ コンポーネント定義を登録します。 -
addContent(...contents: content[])
-
addRoute(...routes: route[])
- アプリ ルート データ定義を追加します。 -
addRouteType(...routeTypes: template[])
- ルートに Sitecore テンプレート タイプを追加します。 -
addTemplate(...templates: template[])
-
addPlaceholder(...templates: template[])
- マニフェストにプレースホルダー定義を追加します。
マニフェスト オブジェクト
Manifest API インスタンス メソッドを使用してマニフェスト定義を追加するには、定義が次のスキーマと一致する必要があります。
JS 型付けを理解するエディター (VS Code など) を使用すると、エディター内の型情報にアクセスできます。これには、役立つ注釈が含まれます。
コンポーネント
{
id: string:optional,
name: string:required,
displayName: string:optional,
fields: fields:optional,
params: params:optional,
placeholders: placeholders:optional, // placeholders exposed by rendering
allowedPlaceholders: array[string]:optional, // placeholders component is allowed in (normally inferred by route data)
displayFieldEditorButton: boolean:optional = true,
fieldEditorFields: array[string]:optional = all fields, // field names
customExperienceButtons: array[string]:optional, // names or IDs
insertOptions: array[string]:optional, // template names or IDs
graphQLQuery: string:optional, // see GraphQL integrated documentation
// note: while these use the same structure as a route, they do not use placeholders and are not mapped as routes.
// This enables adding child items to the datasource.
children: array[route]
}
displayFieldEditorButton
プロパティと fieldEditorFields
プロパティを使用すると、Sitecore エクスペリエンス エディターのコンポーネントに自動的に追加されるフィールド エディター ボタンの動作を制御できます。このボタンをを使用すると、すべてのコンポーネント データをポップアップ フォーム インターフェイスで編集できます。既定では、すべてのコンポーネントにボタンが表示され、すべてのコンポーネント フィールドが編集可能です。これが目的の動作である場合は、これらのプロパティを指定する必要はありません。
コンテンツ
コンテンツ データはルート データと同じスキーマを使用します。ただし、placeholders
プロパティは効果がないため、通常は使用されません。
フィールド
type
プロパティには、使用可能な CommonFieldTypes 値のいずれかを使用することを推奨します。
{
name: string:required,
type: string|CommonFieldTypes:required,
displayName: string:optional,
required: bool:optional, // whether the field must have a value entered
validationPattern: string:optional, // regular expression (C#) to determine value validity
validationMessage: string:optional, // message shown when validationPattern fails
standardValue: string:optional, // the default value this field gets when a content editor creates a new item using it
section: string:optional, // Sitecore template section name
source: string:optional, // Sitecore template field source (field-type specific)
sortOrder: int:optional, // Template field sort order. Defaults to order defined in JSON.
storage: string:optional, // Sitecore field storage: versioned (default), unversioned, shared (DO NOT CHANGE AFTER IMPORTED)
id: string:optional
}
CommonFieldTypes
{
SingleLineText: 'Single-Line Text',
MultiLineText: 'Multi-Line Text',
RichText: 'Rich Text',
ContentList: 'Treelist',
ItemLink: 'Droptree',
GeneralLink: 'General Link',
Image: 'Image',
File: 'File',
Number: 'Number',
Checkbox: 'Checkbox',
Date: 'Date',
DateTime: 'Datetime',
}
カスタム Sitecore フィールド タイプまたは CommonFieldTypes
列挙にないその他のタイプの場合は、Sitecore のフィールド タイプ名の文字列 (つまり、Single-Line Text
) を渡すことができます。VS Code などの型注釈をサポートするエディターでは、この列挙型に対してオート コンプリートが提供されます。
パラメーター
{
name: string:required
}
プレースホルダー
{
name: string:required,
displayName: string:optional
}
プレースホルダー
{
placeholderName: array[component]:optional,
// additional placeholder key/values can be added
}
ルート
{
id: string:optional,
name: string:required,
displayName: string:optional,
template: string:optional, // note: this is optional in yaml/json as its defaulted before adding to manifest
fields: fields:optional,
children: array[route]:optional,
placeholders: placeholders:optional,
insertOptions: array[string]:optional,
}
テンプレート
{
name: string:required,
displayName: string:optional,
inherits: array[string]:optional, // names of JSS template(s) to inherit from, OR Sitecore item GUIDs for non-JSS templates
fields: array[field]:optional,
icon: string:optional, // e.g. People/16x16/alarmclock.png
defaultWorkflow: string:optional // e.g. /sitecore/system/Workflows/Sample Workflow
}
フィールド
{
fieldName: object[fieldName] = field:required
// additional field key/values can be added, see the following
}
パラメーター
{
paramName: array[string]:required,
// additional param key/values can be added
// note: all param values are provided to the component as strings,
// even if the defined value is a number/boolean value.
}
imageFieldValue
画像フィールドの値は、field
が画像タイプの場合に使用されます。通常のフィールドに比べて追加のプロパティがあります。
{
id: string:optional,
src: string:required, // src of image. Should be under /sitecore/media on the JSS app.
alt: string:required,
displayName: string:optional, // media item display name
title: string:optional, // media item field
keywords: string:optional, // media item field
description: string:optional, // media item field
width: int:optional,
height: int:optional,
class: string:optional // rendered image CSS class
}
linkFieldValue
リンク フィールドの値は、field
がリンク タイプの場合に使用されます。通常のフィールドに比べて追加のプロパティがあります。
{
href: string:required,
text: string:optional, // link body text
class: string:optional, // rendered <a> css class
target: string:optional, // target attribute e.g. _blank
title: string:optional // title attribute of <a>
}
multilistFieldValue
Sitecore マルチリスト フィールドを定義するには、マルチ リストで選択されたアイテム定義を (配列として) 指定するか、ID 参照を使用して共有コンテンツ エリアで定義されたアイテム (または明示的な GUID を使用して Sitecore のアプリ以外のアイテムを参照) を取得します。
// definition using an array of content items (routes without placeholders)
[route]:required
// complete example including the top level fields (YAML):
fields:
multilistFieldName:
- name: Option1
fields:
title:
value: Hello
- name: Option2
# ...
// or define it using ID references to shared content items (also YAML):
fields:
multilistFieldName:
- id: option-1
- id: option-2
# ...
日付フィールド値の処理
マニフェスト内の日付フィールドの値は、ISO 8601形式の文字列を使用してフォーマットされます (例: 2012-04-23T18:25:43.511Z
)。
これは JavaScript の日付形式であり、Sitecore が日付フィールドの値を内部にする方法とは異なります。Sitecore 形式の日付は機能しません。
マニフェスト定義の例
JSS アプリケーションを作成すると、アプリには既にいくつかのマニフェスト定義があります。最も一般的なマニフェスト定義は、アプリのインポート時に Sitecore にプレースホルダーとコンポーネントを登録するためのものですが、フィールドをルートに追加するなど、他のユース ケースにもマニフェスト定義を使用できます。
プレースホルダー
マニフェストでプレースホルダーを明示的に定義するかどうかは任意です。ルートによって参照されるプレースホルダー名は、マニフェストによって自動的に認識されます。ただし、プレースホルダーを明示的に登録すると、プレースホルダーの表示名を設定して、コンテンツ エディターが appname-content-leftside-upsidedown-2
よりも分かりやすいものを表示できるようにすることができます。
明示的なプレースホルダー定義は、/sitecore/definitions/placeholders.sitecore.js
ファイル内の行です。名前の中の .sitecore
は必須です。
例:
import { addPlaceholder } from '@sitecore-jss/sitecore-jss-dev-tools';
export default (manifest) => {
addPlaceholder(manifest,
{ name: 'appname-main', displayName: 'Main' },
{ name: 'appname-content', displayName: 'Content' });
};
コンポーネント
JSS が Sitecore 内にコンポーネントを登録し、必要なコンテンツを提供するための適切なインフラストラクチャを提供できるように、ルートに追加される各フロントエンド コンポーネントを定義する必要があります。
コンポーネント定義は通常、/sitecore/definitions/components/<ComponentName>.sitecore.{js|ts}
に保存されます。例:
/*
NOTE: if you use an editor, such as VS Code, that reads typing data from imported libraries, you will receive code completion hints for the manifest definitions.
*/
import { addComponent } from '@sitecore-jss/sitecore-jss-dev-tools';
export default (manifest) => {
addComponent(manifest, {
// this name must match the name that is used to add the component to routes,
// and the name used when the component JS implementation is registered to the componentFactory
name: 'ConnectedPage',
// you can use a friendly name for the component to be nice to your authors
displayName: 'Connected Page',
// define the content fields, and their data types, that are needed for the component
fields: [
{ name: 'title', type: manifest.fieldTypes.singleLineText },
{ name: 'text', type: manifest.fieldTypes.richText },
{ name: 'logoImage', type: manifest.fieldTypes.image },
],
});
};
名前の中の .sitecore
は必須です。
CLI コマンド jss scaffold <ComponentName>
を使用してコンポーネントを作成すると、サンプル アプリケーションでスキャフォールディング スクリプトが使用可能な場合は、コンポーネントとマニフェスト定義が生成されます。