Stap 4: De nieuwe eigenschap van de component weergeven

Aan het einde van deze sectie kunt u in het paneel 'Instellingen' een waarde invoeren voor een nieuwe eigenschap, waarna de aangepaste component wordt gewijzigd op basis van de nieuwe waarde. Wijzigingen van de eigenschap worden automatisch voor u bij de pagina opgeslagen.

In het bestand render.js moet u twee JavaScript-objecten van de component bijwerken:

  • SampleComponentViewModel

  • sampleComponentTemplate

Bewerk render.js en werk de component SampleComponentViewModel bij om de nieuwe eigenschap op te nemen. Wijzig deze eigenschap:

self.showStoryLayout = ko.observable();

Gebruik in plaats daarvan deze:

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

Werk SampleComponentViewModel bij om de waarden te wijzigen. Wijzig deze eigenschap:

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

Gebruik in plaats daarvan deze:

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

Wijzig sampleComponentTemplate om de nieuwe eigenschap weer te geven. Wijzig deze eigenschap:

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

Gebruik in plaats daarvan deze:

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

Synchroniseer of upload het bestand naar de server van Oracle Content Management.

De component is nu gewijzigd om de nieuwe eigenschap weer te gegeven. Anders dan bij het paneel 'Instellingen', dat in een inline-frame op de pagina wordt ingesloten, wordt het gebied dat voor de component beschikbaar is, automatisch groter wanneer de component groter wordt, omdat deze rechtstreeks in de pagina is ingevoegd.

Controleer de resultaten voor stap 4.

Ga als volgt te werk om de nieuwe eigenschap te bekijken:

  1. Vernieuw de pagina van uw site, zodat de sitebuilder wijzigingen in de component kan overnemen.

  2. Open de pagina in de bewerkmodus.

  3. Sleep de component naar de pagina.

  4. Open het paneel 'Instellingen' voor uw component.

  5. Klik op de knop Aangepaste instellingen.

  6. Wijzig Afbeeldingsbanner in Werkruimte.

    Op de pagina is de component boven de afbeelding gewijzigd in Werkruimte.

Doorgaan naar Stap 5: Triggers registreren.