Extension du lien général pour l’éditeur de contenu / les blogs / Perficient

Dans Sitecore, le type de champ Lien général est un champ polyvalent qui permet aux auteurs de contenu de créer des liens vers des ressources internes ou externes. Le champ Lien général fournit une interface conviviale permettant aux auteurs de sélectionner et de configurer les liens. Outre les fonctionnalités clés répertoriées ci-dessous, je souhaitais également utiliser « Lien téléphonique », tous deux dans les modes d’édition « Contenu et expérience ». Dans cet article, nous allons explorer comment utiliser le processus d’extension du lien général pour le mode éditeur de contenu dans Sitecore 10.2.

Les principales fonctionnalités du type de champ Lien général incluent :

• Lien interne
• Lien média
• lien externe
• Ancre
• Mail
• Javascript

Une liaison téléphonique est principalement utilisée pour afficher un numéro de téléphone de manière à permettre aux utilisateurs mobiles d’appeler facilement en appuyant dessus. Dans l’exemple ci-dessous, la balise d’ancrage a l’attribut « href », et lorsque « href » contient « tel : », les utilisateurs peuvent simplement cliquer pour lancer un appel vers le numéro spécifié.

  <a class="telephone" title="Call us" href="https://blogs.perficient.com/2024/02/07/extending-general-link-for-content-editor-mode/tel:1234567890">Call us</a>

Pour implémenter la fonctionnalité « Lien téléphonique » dans le type de champ « Lien général », nous devons apporter des modifications garantissant qu’elle fonctionne correctement dans les modes d’édition répertoriés ci-dessous dans Sitecore.

• Éditeur de contenu
• Éditeur d’expérience

Afin d’activer la fonctionnalité « Lien téléphonique » en mode Éditeur de contenu, nous devons suivre les étapes spécifiées ci-dessous.

1. Accédez au type de champ de lien général

Accédez à la base de données principale et localisez le type de champ « Lien général » sous le chemin « /sitecore/system/Field types/Link Types/General Link ».

2. Ajouter un élément de menu téléphonique

Créez un élément de menu « Téléphone » dans le dossier « Menu » du lien général. Utilisez le modèle d’élément de menu, qui se trouve sur le chemin suivant pour créer cet élément de menu « Téléphone ».

Menu Item Template Path : "/sitecore/templates/System/Menus/Menu item"

3. Élément du menu Téléphone – Ajouter la configuration requise

Une fois l’élément de menu « Téléphone » créé, attribuez les valeurs de configuration nécessaires aux champs respectifs.

1. Afficher un nom: Ajoutez « Insérer un téléphone » dans le champ du nom d’affichage.
2. Message: Ajoutez « contentlink:telephonelink(id=$Target) » dans le champ du message, car il sera utilisé pour générer le formulaire « Lien téléphonique » lors du rendu.

4. Mettre à jour la propriété générale de contrôle de lien

Choisissez le type de champ Lien général et modifiez la propriété « Contrôle » en « content:ExtendedLink ».

Note: Il a été initialement défini comme « content:Link », et maintenant nous l’étendons en incorporant le code nécessaire pour le « Lien téléphonique ». C’est pourquoi nous utiliserons les mots-clés étendus.

5. Ajouter la classe ExtendedLink.cs

Ensuite, nous devons créer la classe « ExtendedLink.cs », qui utilisera le message handle. La valeur du champ « Message » mentionné à l’étape 3, point numéro deux, doit correspondre à l’instruction switch case de la méthode « HandleMessage » de la classe « ExtendedLink.cs », comme indiqué ci-dessous.

string name = message.Name;
switch (name)
{
    case "contentlink:telephonelink":
    {
       //This will find the TelephoneLink control and open the dialog box
       var urlString = new UrlString(UIUtil.GetUri("control:TelephoneLink")); 
       this.Insert(urlString.ToString(), new NameValueCollection { { "height", "335" } });
       break;
    }
    default:
    {
      return;
    }
}

Clique sur le GitHub – ExtendedLink.cs lien pour accéder au code détaillé.

La classe « ExtendedLink.cs » est créée en héritant du fichier de classe « Link.cs » existant. Dans Sitecore 10.2, si vous extrayez « Sitecore.Kernel.dll », vous localiserez cette classe particulière dans l’espace de noms « Sitecore.Shell.Applications.ContentEditor ».

6. Ajouter le fichier de conception TelephoneLink.xml

Créez un fichier nommé « TelephoneLink.xml » en suivant les étapes décrites ci-dessous.

1. Accédez au chemin « /sitecore/shell/Applications/Dialogs » dans les solutions de votre projet, s’il existe. Sinon, créez la hiérarchie des dossiers.
2. Créez un dossier nommé « TéléphoneLink » dans la hiérarchie de dossiers mentionnée précédemment.
3. Créez un fichier nommé « TelephoneLink.xml » dans le dossier « TelephoneLink ».
4. Une fois que vous avez inclus le fichier « TelephoneLink.xml », le chemin du fichier doit être « /sitecore/shell/Applications/Dialogs/TelephoneLink/TelephoneLink.xml ».
5. Clique sur le GitHub – TelephoneLink.xml lien pour accéder à la structure HTML détaillée nécessaire à la boîte de dialogue « Téléphone » en mode Éditeur de contenu.

7. Ajouter la classe TelephoneLinkForm.cs

Créez la classe « TelephoneLinkForm.cs », qui sert de code derrière le fichier de conception « TelephoneLink.xml ». Accédez à la logique de code détaillée nécessaire à l’implémentation de la classe « TelephoneLinkForm.cs » en cliquant sur le bouton GitHub – TelephoneLinkForm.cs lien.

8. Ajouter la classe de rendu ExtendedGeneralLinkRender.cs

Pour gérer la Liaison Téléphonique, il est nécessaire de créer la classe Render. Pour ce faire, générez la classe « ExtendedGeneralLinkRender.cs ». Accédez au code détaillé de cette classe en cliquant sur le GitHub – ExtendedGeneralLinkRender.cs lien.

9. Ajouter un fichier de correctif de configuration

Créez un fichier de correctif de configuration pour configurer et connecter la source de contrôle.

<?xml version="1.0"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/" xmlns:set="http://www.sitecore.net/xmlconfig/set/" xmlns:role="http://www.sitecore.net/xmlconfig/role/">
    <sitecore>
        <controlSources>
            <source mode="on" namespace="Fieldtypes.ExtendedGeneralLink" assembly="Fieldtypes" prefix="content"/>
        </controlSources>
        <pipelines>
            <renderField>
                <processor patch:before="*[@type="Sitecore.Pipelines.RenderField.GetLinkFieldValue, Sitecore.Kernel"]" type="Fieldtypes.ExtendedGeneralLink.ExtendedGeneralLinkRender, Fieldtypes" />
            </renderField>
        </pipelines>
    </sitecore>
</configuration>

10. Résultat final – Éditeur de contenu

Lors de l’ajout d’un composant qui utilise le type de champ « Lien général », choisissez sa source de données via le mode éditeur de contenu. Ici, vous trouverez le lien « Insérer un téléphone ».

Sélectionnez le lien « Insérer un téléphone », puis une boîte de dialogue intitulée « Insérer un lien téléphonique » apparaîtra. Grâce à cette boîte de dialogue, vous pouvez saisir le « Numéro de téléphone » et ses détails de base.

Conclusion

L’extension des fonctionnalités du lien général dans Sitecore constitue une personnalisation précieuse, offrant une expérience utilisateur plus personnalisée et plus efficace pour répondre aux besoins spécifiques du projet. Dans ce blog, nous avons approfondi le processus d’extension du lien général pour le mode éditeur de contenu. Dans le prochain blog intitulé «Extension du lien général pour le mode Éditeur d’expérience dans Sitecore », nous explorerons comment étendre le lien général spécifiquement pour le mode éditeur d’expérience.

Bon apprentissage!