ステップ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の結果の確認

新しく表示されるようになったプロパティを確認するには: