Step 4: Display the New Property in the Component

At the end of this section, you will be able to enter a value for a new property in the Settings panel and see the custom component change to reflect the new value. Updates to the property will also automatically be saved for you with the page.

In the render.js file, you must update two JavaScript objects in the component:

• SampleComponentViewModel

• sampleComponentTemplate

Edit render.js and update the SampleComponentViewModel component to include the new property. Change this property:

self.showStoryLayout = ko.observable();

Use this instead:

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

Update SampleComponentViewModel to get any change in values. Change this property:

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

Use this instead:

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

Change sampleComponentTemplate to display the new property. Change this property:

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

Use this instead:

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

Sync or upload the component to the Oracle Content Management server.

You've now altered the component to display the new property. Unlike the Settings panel that is embedded in an inline frame on the page, because the component is inserted directly into the page, as it grows in size the area available to it will automatically increase.

Check the Results for Step 4

To see the new property displayed:

1. Refresh your page in your site to Site Builder can pick up changes to the component.

2. Take the page into Edit mode.

3. Drag and drop your component onto the page.

4. Bring up the Settings panel against your component.

5. Click the Custom Settings button.

6. Change Image Banner to Workspace.

   You will see the component update on the page to Worksapce appear above the image.

Continue to Step 5: Register Triggers.