Extension du lien général pour l’éditeur d’expérience / Blogs / Perficient

Les modes éditeur de contenu et éditeur d’expérience peuvent sembler similaires à première vue, mais ils fonctionnent avec des commandes différentes. En termes plus simples, même s’ils se ressemblent, les outils et fonctions qu’ils utilisent ne sont pas les mêmes, ce qui peut être source de confusion pour ceux qui travaillent avec eux. Nous avons déjà vu la partie éditeur de contenu dans le Extension du lien général pour l’éditeur de contenu article. Par conséquent, dans cet article, nous allons explorer comment nous pouvons utiliser le processus d’extension du lien général pour le mode éditeur d’expérience dans Sitecore 10.2.

Afin d’activer la fonctionnalité « Lien téléphonique » en mode Éditeur d’expérience, nous devons suivre les étapes spécifiées.

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. Mettre à jour le lien d’édition – Boutons WebEdit Cliquez sur le contrôle

1. Choisissez le type de champ « Lien général » et ouvrez-le pour plus d’options.
2. Vous pouvez localiser le dossier « WebEdit Buttons » et l’ouvrir pour afficher des options supplémentaires.
3. Sélectionnez le bouton WebEdit « Modifier le lien » et modifiez la propriété de contrôle « Click » en « webedit:editextendedlink ».

Note: Il a été initialement défini comme « webedit:editlink » 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.

3. Ajouter la classe EditExtendedLink.cs

Ensuite, nous devons créer la classe « EditExtendedLink.cs », qui sera utilisée pour charger la page de conception personnalisée où une propriété de contrôle « Lien téléphonique » supplémentaire sera ajoutée.

La classe « EditExtendedLink.cs » est créée en héritant du fichier de classe « EditLink.cs » existant. Dans Sitecore 10.2, si vous extrayez « Sitecore.ExperienceEditor.dll », vous localiserez cette classe particulière dans l’espace de noms « Sitecore.Shell.Applications.WebEdit.Commands ». Copiez l’intégralité du code de la classe « EditLink.cs » et collez-le dans la classe créée « EditExtendedLink.cs », et mettez à jour la méthode « Run » avec le code suivant.

protected static void Run(ClientPipelineArgs args)
{
   //Code snippet from the "EditLink.cs" class
   if (args.IsPostBack)
   {
      //Code snippet from the "EditLink.cs" class
   }
   else
   {
      UrlString urlString = new UrlString(Context.Site.XmlControlPage);
      //urlString["xmlcontrol"] = "GeneralLink"; //Original code in the "EditLink.cs" class
      urlString["xmlcontrol"] = "ExtendedGeneralLink";  //To make it compatible with the extended general link controls, you just have to modify this single line of code.

      new UrlHandle()
      {
         ["va"] = new XmlValue(args.Parameters["fieldValue"], "link").ToString()
      }.Add(urlString);
      string parameter2 = args.Parameters["language"];
      urlString.Append("la", parameter2);
      urlString.Append("ro", field.Source);
      Context.ClientPage.ClientResponse.ShowModalDialog(urlString.ToString(), "550", "650", string.Empty, true);
      args.WaitForPostBack();
   }
}

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

4. Ajouter un fichier de correctif de configuration

Dans le « Extension du lien général pour l’éditeur de contenu« , nous avons établi un fichier de correctif de configuration pour configurer et lier la source de contrôle. Dans ce fichier de correctif, nous avons la possibilité d’inclure une source « commande » pour la classe « EditExtendedLink.cs ».

Note : Si vous préférez, vous avez la possibilité de générer un fichier de correctif distinct.

<?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>
      <commands>
         <command name="webedit:editextendedlink" type="Fieldtypes.ExtendedGeneralLink.EditExtendedLink, Fieldtypes" />
      </commands>
    </sitecore>
</configuration>

Vous pouvez trouver le code complet du fichier de correctif de configuration sur le GitHub -Fieldtypes.ExtendedGeneralLink.Patch.config lien.

5. Ajouter le fichier de conception ExtendedGeneralLink.xml

Pour générer le fichier de conception « ExtendedGeneralLink.xml », nous avons utilisé le fichier de conception « GeneralLink.xml » existant comme base. Copiez tout le contenu de « GeneralLink.xml » et collez-le dans « ExtendedGeneralLink.xml », apportez les modifications nécessaires pour intégrer la fonctionnalité « Telephone Link » dans le mode Experience Editor.

Chemin : « /sitecore/shell/Applications/Dialogs/GeneralLink/ » emplacement du fichier d’origine « GeneralLink.xml ».

Pour inclure le fichier de conception « ExtendedGeneralLink.xml », suivez 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é « ExtendedGeneralLink » dans la hiérarchie de dossiers mentionnée précédemment.
3. Créez un fichier nommé « ExtendedGeneralLink.xml » dans le dossier « ExtendedGeneralLink ».
4. Une fois que vous avez inclus le fichier « ExtendedGeneralLink.xml », le chemin du fichier doit être « /sitecore/shell/Applications/Dialogs/ExtendedGeneralLink/ExtendedGeneralLink.xml ».
5. Clique sur le GitHub – ExtendedGeneralLink.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.

Note: Pour une meilleure pratique, dupliquez les fichiers « GeneralLink.css & GeneralLink.js » et renommez-les en « ExtendedGeneralLink.css & ExtendedGeneralLink.js ». Par la suite, positionnez ces fichiers dupliqués dans le répertoire où se trouve le fichier « ExtendedGeneralLink.xml ».

6. Ajouter la classe ExtendedGeneralLinkForm.cs

Créez la classe « ExtendedGeneralLinkForm.cs », qui sert de code derrière le fichier de conception « ExtendedGeneralLink.xml ».

La classe « ExtendedGeneralLinkForm.cs » est créée en héritant du fichier de classe « LinkForm.cs » existant. Dans Sitecore 10.2, si vous extrayez « Sitecore.Client.dll », vous localiserez cette classe particulière dans l’espace de noms « Sitecore.Shell.Applications.Dialogs ». Ici, vous obtiendrez une référence sur la façon dont « LinkForm » est utilisé.

Mais, ici, nous avons étendu la fonctionnalité de « General Link », pour cette raison, vérifiez la classe « GeneralLinkForm.cs » présente dans le même « Sitecore.Client.dll et dans le « Sitecore.Shell.Applications.Dialogs.GeneralLink ». espace de noms.

Une fois, nous copions et collons tout le code de la classe « GeneralLinkForm.cs » dans la classe « ExtendedGeneralLinkForm.cs ». Ensuite, il est nécessaire d’inclure les modifications essentielles dans le fichier « ExtendedGeneralLinkForm.cs » pour implémenter la fonctionnalité de lien « Téléphone » dans le mode Experience Editor de Sitecore.

namespace Fieldtypes.ExtendedGeneralLink
{
    public class ExtendedGeneralLinkForm : LinkForm
    {
        //Important code snippet from the "GeneralLinkForm.cs" class
        
        protected override void OnOK(object sender, EventArgs args)
        {
            //Code snippet from the "GeneralLinkForm.cs" class
            bool flag;
            switch (this.CurrentMode)
            {
                //Code snippet from the "GeneralLinkForm.cs" class
                case "tel":
                   flag = SetTelephoneLinkAttributes(packet);
                   break;
                //Code snippet from the "GeneralLinkForm.cs" class
            }
            //Code snippet from the "GeneralLinkForm.cs" class    
        }
    
        //Code snippet from the "GeneralLinkForm.cs" class
    
        private void SetTelephoneLinkControls()
        {
           if (this.LinkType == "tel" && string.IsNullOrEmpty(((Control)this.Url).Value))
           {
              ((Control)this.TelephoneToLink).Value = this.LinkAttributes["url"].Replace("tel:", "");
           }

           ExtendedGeneralLinkForm.ShowContainingRow((Control)this.TelephoneToContainer);
           this.SectionHeader.Text = Translate.Text("Specify the Telephone, e.g. 9006662121");
        }
    
        //Code snippet from the "GeneralLinkForm.cs" class
    
        private bool SetTelephoneLinkAttributes(Packet packet)
        {
            Assert.ArgumentNotNull((object)packet, nameof(packet));
            var tel = GetTelephone();
            if (tel == "__Canceled")
            {
               SheerResponse.Alert("The telephone number is invalid.");
               return false;
            }

            LinkForm.SetAttribute(packet, "url", tel ?? string.Empty);
            LinkForm.SetAttribute(packet, "anchor", string.Empty);
            return true;
        }
    
        private string GetTelephone()
        {
            var value = ((Control)this.TelephoneToLink).Value;
            var str = value;
            if (str.Length > 0)
            {
                if (str.IndexOf(":", StringComparison.InvariantCulture) >= 0)
                {
                   str = str.Substring(str.IndexOf(":", StringComparison.InvariantCulture) + 1);
                }

                if (!new Regex(@"^(?:\(?)(?<AreaCode>\d{3})(?:[\).\s]?)(?<Prefix>\d{3})(?:[-\.\s]?)(?<Suffix>\d{4})(?!\d)", RegexOptions.IgnoreCase).IsMatch(str))
                {
                     return "__Canceled";
                }
            }

            if (value.Length > 0 && value.IndexOf(":", StringComparison.InvariantCulture) < 0)
            {
               value = string.Concat("tel:", value);
            }

            return value;
        }
        
        //Code snippet from the "GeneralLinkForm.cs" class
        
        private void SetModeSpecificControls()
        {
             //Code snippet from the "GeneralLinkForm.cs" class
             ExtendedGeneralLinkForm.HideContainingRow((Control)this.TelephoneToContainer);
             //Code snippet from the "GeneralLinkForm.cs" class
             switch (this.CurrentMode)
             {
                 //Code snippet from the "GeneralLinkForm.cs" class
                 case "tel":
                     SetTelephoneLinkControls();
                     break;
                 //Code snippet from the "GeneralLinkForm.cs" class
             }

             //Code snippet from the "GeneralLinkForm.cs" class
        }
        
        private void UpdateMediaPreview(Item item)
        {
             //Code snippet from the "GeneralLinkForm.cs" class
             MediaUrlBuilderOptions thumbnailOptions = MediaUrlBuilderOptions.GetThumbnailOptions(GetMediaItem(item));
             //Code snippet from the "GeneralLinkForm.cs" class
             this.MediaPreview.InnerHtml = "<img src=\"" + MediaManager.GetMediaUrl(GetMediaItem(item), thumbnailOptions) + "\" width=\"96px\" height=\"96px\" border=\"0\" alt=\"\" />";
        }

        private MediaItem GetMediaItem(Item item)
        {
            return item;
        }
    }
}

Clique sur le « GitHub – ExtendedGeneralLinkForm.cs» pour accéder à la logique de code détaillée nécessaire à l’implémentation de la classe « ExtendedGeneralLinkForm.cs ».

Une fois toutes les modifications ajoutées, n’oubliez pas de nettoyer et de reconstruire la solution.

7. Résultat final – Éditeur d’expérience

Lors de l’ajout d’un composant qui utilise le type de champ « Lien général », choisissez son champ « Lien général » via le mode éditeur d’expérience.

Cliquez sur le bouton « Modifier » comme mentionné dans l’image ci-dessous.

Ensuite, la boîte de dialogue « Insérer un lien » apparaîtra, dans laquelle vous pourrez localiser l’option d’ajout d’un lien « Téléphone » ainsi que ses propriétés nécessaires.

Conclusion

Lors de l’extension du type de champ Lien général dans Sitecore, il est crucial de prendre en compte les modes éditeur de contenu et d’expérience. En apportant des modifications spécifiques aux fichiers de correctifs de configuration, aux fichiers de conception et aux fichiers de code, nous pouvons introduire de nouvelles fonctionnalités, telles que le lien « Téléphone », garantissant une expérience transparente aux créateurs de contenu et aux utilisateurs naviguant sur le site en mode Éditeur d’expérience. Ces modifications nous permettent d’améliorer la fonctionnalité du type de champ Lien général et de l’adapter à nos besoins spécifiques au sein de la plateforme Sitecore.

Bon apprentissage!