ステップ4: コンポーネントでの新規プロパティの表示

この項の終わりで、「設定」パネルで新規プロパティの値を入力し、カスタム・コンポーネントの変更内容を表示して新しい値を反映できるようになります。プロパティへの更新はページにも自動的に保存されます。

render.jsファイルで、コンポーネントで2つのJavaScriptオブジェクトを更新する必要があります。

render.jsを編集してSampleComponentViewModelコンポーネントを更新し、新規プロパティを含めます。次のプロパティを変更します:

self.showStoryLayout = ko.observable();

かわりに次を使用します:

self.showStoryLayout = ko.observable();
self.imageBannerText = ko.observable();

SampleComponentViewModelを取得して値の変更を取得します。次のプロパティを変更します:

self.imageWidth(customData && customData.width);

かわりに次を使用します:

self.imageWidth(customData && customData.width);
self.imageBannerText(customData && customData.imageBannerText);

sampleComponentTemplateを変更して、新規プロパティを表示します。次のプロパティを変更します:

'<div data-bind="text: \'image width is: \' + imageWidth()"></div>' +

かわりに次を使用します:

'<div data-bind="text: imageBannerText"></div>' +

コンポーネントをOracle Content Managementサーバーに同期またはアップロードします。

新規プロパティを表示するためにコンポーネントはすでに変更されています。ページのインライン・フレームに組み込まれている「設定」パネルと異なり、コンポーネントはページに直接挿入されるため、サイズが大きくなると、それに対して使用可能な領域は自動的に大きくなります。

ステップ4の結果の確認

表示された新規プロパティを確認するには:

サイト・ビルダーでコンポーネントへの変更内容を反映できるように、サイトでページをリフレッシュします。
ページを編集モードで取り込みます。
コンポーネントをページにドラッグ・アンド・ドロップします。
「設定」パネルをコンポーネントに対して開きます。
「カスタム設定」ボタンをクリックします。
Image BannerをWorkspaceに変更します。

ページにおけるWorksapceへのコンポーネントの更新がイメージの上に表示されます。