Paso 11: Soportar diferentes diseños

En este paso, revisaremos los diseños que permiten al usuario modificar cómo se visualiza el componente.

Un componente personalizado soporta los diseños que desea que el usuario pueda elegir. Cada uno de estos diseños alterará la forma en que se muestra el componente personalizado. Los diseños son otra extensión de los datos de registro.

Para revisar los tres diseños que soporta el código de ejemplo, revise la entrada "componentLayouts" en el archivo appinfo.json.

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

Si abre el panel de configuración del componente personalizado, verá una opción para cambiar diseños. Para que el componente reaccione a los cambios de esta selección, el archivo render.js tiene un código para obtener el valor seleccionado actualmente y recibir los cambios de este valor.

Edite el archivo render.js y observe el objeto SampleComponentViewModel.

• Hay un observable layout al que se hace referencia en la plantilla:

  self.layout = ko.observable();

• Hay una función de actualización para gestionar los cambios del valor:

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

• El código de inicialización extrae el valor original del diseño y llama a la función de actualización:

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

  El listener de cambio de propiedad comprueba los cambios de la propiedad y llama a la función de actualización:

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

  Por último, el objeto de plantilla sampleComponentTemplate tiene un código para reflejar cambios en este valor:

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

Todos estos cambios le permiten seleccionar el diseño en el panel de configuración y actualizar el componente.