Etape 11 : prise en charge de différentes présentations

Cette étape consiste à passer en revue les présentations qui permettent à l'utilisateur de modifier la façon dont le composant est affiché.

Un composant personnalisé peut prendre en charge autant de présentations que souhaité pour permettre à l'utilisateur de faire son choix. Chacune de ces présentations modifie la façon dont le composant personnalisé est affiché. Les présentations sont une autre extension des données d'inscription.

Pour passer en revue les trois présentations prises en charge dans l'exemple de code, consultez l'entrée "componentLayouts" dans le fichier appinfo.json.

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

Si vous affichez le panneau des paramètres pour le composant personnalisé, vous verrez une option vous permettant de passer d'une présentation à l'autre. Pour activer votre composant afin qu'il réagisse à la modification de sélection, le fichier render.js comprend du code permettant d'obtenir la valeur actuellement sélectionnée et d'écouter les modifications apportées à cette valeur.

Modifiez le fichier render.js et observez l'objet SampleComponentViewModel.

• Vous y verrez un élément observable layout, référencé dans le modèle :

  self.layout = ko.observable();

• Vous verrez également une fonction de mise à jour permettant de gérer les modifications de cette valeur :

      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);

• Le code d'initialisation obtient la valeur d'origine de la présentation et appelle la fonction de mise à jour :

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

  Le processus d'écoute de modification de propriété vérifie les modifications apportées à cette propriété et appelle la fonction de mise à jour :

  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));

  Enfin, l'objet de modèle sampleComponentTemplate contient du code permettant de refléter les modifications dans cette valeur :

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

En résumé, ces modifications vous permettent de sélectionner votre présentation dans le panneau des paramètres et de garantir un composant à jour.