Passo 11: Supportare layout diversi

In questo passo verranno esaminati i layout che consentono all'utente di modificare la modalità di visualizzazione del componente.

Un componente personalizzato è in grado di supportare tutti i layout che si desidera consentire all'utente di scegliere. Ognuno di questi layout modificherà le modalità di visualizzazione del componente personalizzato. I layout costituiscono un'altra estensione dei dati di registrazione.

Per esaminare i tre layout supportati nel codice di esempio, osservare la voce "componentLayouts" nel file appinfo.json:

    "componentLayouts": [
      {
        "name": "default",
        "displayName": "IMAGE_LEFT_LAYOUT"
      },
      {
        "name": "right",
        "displayName": "IMAGE_RIGHT_LAYOUT"
      },
      {
        "name": "top",
        "displayName": "IMAGE_TOP_LAYOUT"
      }
    ],

Se si richiama il pannello Impostazioni per il componente personalizzato, si vedrà un'opzione che consente di alternare i layout. Per fare in modo che il componente reagisca alla modifica nella selezione, il file render.js è stato dotato di codice che consente di ottenere il valore selezionato al momento e di rilevare le modifiche apportate a tale valore.

Modificare il file render.js e osservare l'oggetto SampleComponentViewModel.

• Esiste un elemento osservabile layout, al quale viene fatto riferimento nel modello:

  self.layout = ko.observable();

• Esiste una funzione di aggiornamento per gestire ogni modifica del valore:

      self.updateComponentLayout = $.proxy(function (componentLayout) {
        var layout = componentLayout ? componentLayout : 'default';
        self.layout(layout);
        self.alignImage(layout === 'right' ? 'right' : 'left');
        self.showTopLayout(layout === 'top');
        self.showStoryLayout(layout === 'default' || layout === 'right');
  
        self.componentLayoutInitialized(true);
      }, self);

• Il codice di inizializzazione recupera il valore originale per il layout e richiama la funzione di aggiornamento:

  SitesSDK.getProperty('componentLayout', self.updateComponentLayout);

  Il listener di modifica proprietà controlla le modifiche apportate a questa proprietà e richiama la funzione di aggiornamento:

  self.updateSettings = function (settings) {
    if (settings.property === 'componentLayout') {
      self.updateComponentLayout(settings.value);
    } else if (settings.property === 'customSettingsData') {
      self.updateCustomSettingsData(settings.value);
    }
  };
  
  SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));

  Infine l'oggetto modello sampleComponentTemplate contiene il codice che riflette le modifiche nel valore:

  '<!-- ko if: alignImage() === \'right\' -->' +

Insieme, queste modifiche consentono di selezionare il layout nel pannello Impostazioni e di ottenere l'aggiornamento del componente.