Passo 4: Visualizzare la nuova proprietà nel componente

Alla fine di questa sezione, sarà possibile immettere un valore per una nuova proprietà nel pannello Impostazioni e visualizzare la modifica del componente personalizzato per riflettere il nuovo valore. Gli aggiornamenti alla proprietà verranno inoltre salvati automaticamente con la pagina.

Nel file render.js è necessario aggiornare i due oggetti JavaScript nel componente:

  • SampleComponentViewModel

  • sampleComponentTemplate

Modificare render.js e aggiornare il componente SampleComponentViewModel per includere la nuova proprietà. Modificare questa proprietà:

self.showStoryLayout = ko.observable();

Usare questa proprietà in sostituzione della precedente:

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

Aggiornare SampleComponentViewModel per ottenere tutte le modifiche apportate ai valori. Modificare questa proprietà:

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

Usare questa proprietà in sostituzione della precedente:

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

Modificare sampleComponentTemplate per visualizzare la nuova proprietà. Modificare questa proprietà:

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

Usare questa proprietà in sostituzione della precedente:

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

Sincronizzare o caricare il componente nel server di Oracle Content Management.

Il componente è stato dunque modificato per visualizzare la nuova proprietà. A differenza del pannello Impostazioni, incorporato in un frame in linea nella pagina, poiché il componente viene inserito direttamente nella pagina, con l'aumentare delle dimensioni l'area disponibile aumenterà in modo automatico.

Controllare i risultati per il passo 4

Per visualizzare la nuova proprietà, effettuare le operazioni riportate di seguito.

  1. Aggiornare la pagina nel sito in modo che SiteBuilder possa selezionare le modifiche apportate al componente.

  2. Attivare la modalità Modifica per la pagina.

  3. Trascinare e rilasciare il componente sulla pagina.

  4. Visualizzare il pannello Impostazioni per il componente.

  5. Fare clic sul pulsante Impostazioni personalizzate.

  6. Modificare il banner dell'immagine impostandolo su Workspace.

    Il componente verrà aggiornato nella pagina con il testo Workspace al di sopra dell'immagine.

Continuare con l'argomento Passo 5: Registrare i trigger.