Steg 3: Granska strukturen hos inställningarna för den lokala komponenten

I det här steget granskar vi strukturen hos de inställningar som anges för en lokal komponent.

I likhet med filen render.js i katalogen /assets, finns det en förhandsskapad settings.html-fil i samma katalog. Filen settings.html återger alla anpassade inställningsdata för komponenten. I standardimplementeringen finns det en enda egenskap, imageWidth, i anpassade inställningsdata.

Så här granskar du den lokala komponentens struktur:

1. Använd datorsynkroniseringsklienten för Oracle Content Management för att hitta komponenten och synkronisera den med filsystemet.

   Om du inte har datorsynkroniseringsklienten kan du välja komponenten på fliken Komponenter i webbgränssnittet för Oracle Content Management och borra ned för att se filerna.

2. Om du listar filerna under komponenten ser du följande filer:

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

Öppna filen settings.html under katalogen /assets och granska innehållet. Till skillnad från filen render.js, använder filen settings.html en iframe i panelen Inställningar i webbplatsverktyget, vilket är orsaken till att den även behöver åtkomst till stödfilerna för att återge korrekt inom iframen. Webbplatsverktyget behövs för hanteringen av webbplatsen, så att eventuella fel i JavaScript-koden kan isoleras från webbplatsverktyget. Det är därför som filen settings.html använder en iframe.

Följande är huvudområdena i filen settings.html:

• Knockout-mall för att återge panelen Inställningar.

  <!-- ko if: initialized() -->
  <div class="scs-component-settings">
    <div>
      <!-- Width -->
      <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
      <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
    </div>
  </div>
  <div data-bind="setSettingsHeight: true"></div>
  <!-- /ko -->

• Anpassad bindningshanterare för att justera höjden på iframen när panelen Inställningar har återgetts.

  ko.bindingHandlers.scsCompComponentImpl

• En Knockout ViewModel att tillämpa på Knockout-mallen.

  SettingsViewModel

Följande är huvudelementen i SettingsViewModel:

• Prenumerationer på komponentlivscykel.

• Komponentinitiering:

  • Kontrollera att komponenten inte återges förrän alla data har hämtats. Detta hanteras genom observerbara Knockout-element.

    self.initialized = ko.observable(false);

  • Kontrollera att vi inte försöker uppdatera data förrän vi är klara.

    self.saveData = false;

  • Hämta de ursprungliga värdena för alla egenskaper som krävs. Detta hanteras av återanrop för att hämta data.

        SitesSDK.getProperty('customSettingsData', function (data) {
          //update observable
          self.width(data.width);
    
          // note that viewModel is initialized and can start saving data
          self.initialized(true);
          self.saveData = true;
        });

• Spara alla egenskapsändringar i anpassade inställningsdata.

      self.save = ko.computed(function () {
        var saveconfig = {
          'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
        };
  
        // save data in page
        if (self.saveData) {
          SitesSDK.setProperty('customSettingsData', saveconfig);
        }
      }, self);

Om du vill lägga till en annan egenskap som du vill fånga krävs flera steg:

1. Uppdatera användargränssnittet för att visa det nya värdet.

2. Initiera värdet till det aktuella värde som finns lagrat mot komponenten.

3. Spara tillbaka alla ändringar av värdet till komponenten.

Om du vill lägga till en annan egenskap i den anpassade komponenten ska du göra följande ändringar i filen settings.html:

1. Lägg till ytterligare ett observerbart element för att hantera den nya egenskapen. Ändra den här koden:

   self.width = ko.observable();

   Använd den här koden istället:

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

2. Hämta ett eventuellt aktuellt värde för den nya egenskapen när inställningspanelen först visas. Ändra den här koden:

   self.width(data.width);

   Använd den här koden istället:

   self.width(data.width);
   self.imageBannerText(data.imageBannerText);

3. Spara alla eventuella ändringar i den här nya egenskapen. Ändra den här koden:

       'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

   Använd den här koden istället:

   'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
   'imageBannerText': self.imageBannerText()

4. Lägg till ett användargränssnitt för att visa det nya fältet. Ändra den här koden:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

   Använd den här koden istället:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
   
   <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
   <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

5. Synkronisera eller ladda upp filen settings.html.

Om du skulle köra det här nu skulle fältet visas. Storleken på panelen Inställningar ändras emellertid inte automatiskt. Eftersom du ökade storleken på panelen måste du även uppdatera registreringsposten i components.json till den nya storleken.

1. Ladda ned filen appinfo.json, som finns på samma nivå som katalogen assets/ för komponenten, och uppdatera inställningspanelens storlek. Ändra den här koden:

   "settingsHeight": 90,

   Använd den här koden istället:

   "settingsHeight": 160,

2. Synkronisera eller ladda upp filen appinfo.json.