Paso 9: Crear un título distinto para cada instancia del componente

Este paso explica cómo crear diferentes títulos para distintas instancias del componente.

Cuando suelte el componente en la página, se habrá percatado de que en el banner del componente se lee: A_Local_Component. Aunque esto es correcto si el usuario suelta solo uno de los componentes en la página, es posible que quiera crear títulos diferentes para que el usuario distinga las distintas instancias del componente.

Puede usar el SDK de Sites para actualizar el título del componente. En este paso, podrá actualizarlo basándose en la propiedad "imageBannerText".

Para actualizar el título, edite el archivo render.js y agregue el siguiente código al objeto SampleComponentViewModel:

self.updateDescription = ko.computed(function () {
  SitesSDK.setProperty('description', self.imageBannerText());
});

El cálculo de Knockout actualizará la descripción del componente siempre que el observable imageBannerText cambie.

Compruebe los resultados del paso 9

  1. Refresque la página del sitio para que el creador de sitios pueda seleccionar los cambios del componente.

  2. Cambie la página al modo de edición.

  3. Suelte el componente en la página.

  4. Abra el panel de configuración del componente.

  5. Haga clic en el botón Configuración personalizada.

  6. Cambie Image Banner a Workplace.

  7. Cierre el panel de configuración y sitúe el cursor sobre el componente para que aparezca el banner.

    Ahora debería mostrarse A_Local_Component Workplace.

Continúe con Paso 10: Usar componentes anidados con edición directa.