Etape 9 : création d'un titre distinct pour chaque instance du composant

Cette étape explique comment créer des titres distincts pour les diverses instances de votre composant.

Lorsque vous déplacez votre composant sur la page, vous pouvez remarquer que la bannière du composant indique A_Local_Component. Ce n'est pas un problème si l'utilisateur ne déplace qu'un seul composant sur la page. En revanche, il est utile de créer des titres distincts lorsque l'utilisateur doit pouvoir faire la différence entre les diverses instances de votre composant.

Vous pouvez utiliser le kit SDK Sites pour mettre à jour le titre du composant. Dans cette étape, vous mettrez le titre à jour en fonction de la propriété "imageBannerText".

Pour mettre à jour le titre, modifiez le fichier render.js et ajoutez le code suivant à votre objet SampleComponentViewModel :

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

Ce calcul Knockout met à jour la description de votre composant chaque fois que l'élément observable imageBannerText est modifié.

Vérification des résultats de l'étape 9

  1. Actualisez la page de votre site pour que le générateur de site puisse récupérer les modifications apportées au composant.

  2. Passez la page en mode de modification.

  3. Déplacez votre composant sur la page.

  4. Affichez le panneau des paramètres pour votre composant.

  5. Cliquez sur le bouton Paramètres personnalisés.

  6. Modifiez la bannière d'image sur Workplace.

  7. Fermez le panneau des paramètres et positionnez le curseur sur votre composant afin d'afficher la bannière.

    Vous devriez maintenant voir apparaître A_Local_Component Workplace.

Passez à Etape 10 : utilisation de composants imbriqués avec la modification incorporée.