Fermer

février 10, 2021

Comment créer un champ déroulant personnalisé dans Sitecore


Parfois, les types de champs déroulants prêts à l'emploi de Sitecore ne fournissent pas les fonctionnalités dont vous avez besoin. Vous souhaitez peut-être extraire des options d'une source de données externe. Vous souhaitez peut-être modifier l'apparence des options à l'auteur du contenu, mais stocker une valeur différente en tant que valeur brute. Vous voudrez peut-être même avoir une liste déroulante avec des options sélectionnables basées sur des valeurs de champ déjà sélectionnées sur le même élément. Cet article de blog vous montrera comment rendre ces scénarios possibles dans Sitecore avec un type de champ déroulant personnalisé.

Objectif final – Créer un menu déroulant personnalisé comme ci-dessous

Endresultdropdown

L'objectif final est de créer un menu déroulant qui fournit des options personnalisées à choisir. Les options masquent la valeur réelle qui sera stockée dans le champ. Par exemple, la sélection de Key1 dans la capture d'écran ci-dessus stockera Value1 comme valeur brute comme indiqué ci-dessous:

Realvaluedropdown

Cela permet aux auteurs de contenu de choisir parmi des options plus faciles à lire tout en conservant les données importantes dont le développeur a besoin.

Étape 1 – Écrivez votre logique personnalisée pour créer des options de liste déroulante

 namespace Foundation.Controls
{
    classe publique MyCustomDropdown: Sitecore.Web.UI.HtmlControls.Control
    {
        protected override void DoRender (sortie System.Web.UI.HtmlTextWriter)
        {
            var keyValuePairs = new List <KeyValuePair >
            {
                nouvelle KeyValuePair  ("Key1", "Value1"),
                nouvelle KeyValuePair  ("Key2", "Value2"),
                nouvelle KeyValuePair  ("Key3", "Value3"),
                nouvelle KeyValuePair  ("Key4", "Value4"),
                nouvelle KeyValuePair  ("Key5", "Value5"),
            };

            output.Write ("");

            foreach (var keyValuePair dans keyValuePairs)
            {
                if (keyValuePair.Value == Valeur)
                {
                    output.Write ($ "");
                }
                autre
                {
                    output.Write ($ "");
                }
            }

            output.Write ("");
        }

        protected override bool LoadPostData (valeur de chaîne)
        {
            if (valeur == null)
                retourner faux;
            if (this.GetViewStateString ("Valeur")! = valeur)
                Sitecore.Context.ClientPage.Modified = true;
            this.SetViewStateString ("Valeur", valeur);
            retourne vrai;
        }
    }
}

Vous devrez créer une classe qui hérite de la classe Control de Sitecore. À partir de cette classe, vous devrez remplacer deux méthodes: la méthode DoRender () et les méthodes LoadPostData () .

Sitecore - Understanding Development Approaches: A Sitecore Outlook [19659011] L'implémentation <strong> LoadPostData () </strong> ci-dessus garantit que l'option sélectionnée est stockée lors de l'enregistrement des modifications.</p><p> La méthode <strong> DoRender () </strong> est l'endroit où vous construirez les options sélectionnables pour les auteurs de contenu . Dans mon exemple ci-dessus, j'ai créé une liste de paires de valeurs clés avec des valeurs personnalisées. C'est ici que vous pouvez créer tout ce dont vous avez besoin. Vous créez les données que vous souhaitez présenter à l'auteur du contenu. Je recommande de créer des paires de valeurs clés car cela facilite grandement la maintenance de la liste. De plus, il vous permet de simplement copier le reste de mon code ci-dessus qui écrit réellement le <strong><select></strong> sur Sitecore. Le résultat final ici est d'écrire un élément HTML <strong><select></strong> contenant des éléments HTML <strong><option></strong> .</p><p> Dans mon exemple ci-dessus, je voulais stocker une valeur différente de celle présentée à l'auteur du contenu. La propriété <strong> value </strong> définie sur l'élément <strong><option></strong> est ce qui est réellement stocké lorsqu'une option est sélectionnée. Si vous voulez que la valeur stockée corresponde à la chaîne littérale présentée à l'auteur du contenu, associez la propriété <strong> value </strong> à la chaîne sortie (représentée par <strong> keyValuePair.Key </strong> ci-dessus).</p><p> Vous remarquerez que j'ai utilisé deux variables héritées de la classe Control: <strong> ControlAttributes </strong> et <strong> Value </strong>. <strong> ControlAttributes </strong> contient diverses informations telles que les événements de clic Javascript à exécuter lorsque vous cliquez sur le champ. Cela permet à la liste déroulante de s'ouvrir. La variable <strong> Value </strong> contient la valeur sélectionnée par l'auteur du contenu sélectionné. Lorsque vous écrivez vos options, vous devrez indiquer quelle valeur a été précédemment sélectionnée en ajoutant la propriété <strong> selected </strong> sur l'élément <strong><option></strong> qui est sélectionné.</p><div class=

Si vous voulez savoir quel élément cette liste déroulante est en cours d'interaction, vous pouvez récupérer l'élément sur lequel vous vous trouvez via la variable ControlAttributes . Utilisez le code ci-dessous pour ce faire:

 var myRegex = new Regex (@ " {(. *?) }");
var myCurrentItem = Sitecore.Context.ContentDatabase.GetItem (new ID (myRegex.Match (ControlAttributes) .Value));

Cela peut être utile car vous souhaiterez peut-être manipuler les options disponibles dans votre liste déroulante personnalisée en fonction d'autres valeurs sélectionnées sur

Étape 2 – Correctif dans votre nouvelle implémentation

Vous devrez indiquer à Sitecore où trouver les nouvelles implémentations Control dans votre solution.

Vous devrez spécifier l'espace de noms et l'assembly de l'emplacement de votre implémentation personnalisée. Vous devrez également spécifier un préfixe. Vous voudrez bien nommer ce préfixe, afin qu'il puisse être réutilisé pour désigner les contrôles personnalisés que vous avez créés.

Étape 3 – Créer un champ personnalisé Élément Sitecore dans Core

Dans l'éditeur de contenu de la base de données Core, naviguez à / sitecore / system / Types de champs / Types de listes . Dans ce dossier, insérez un nouvel élément basé sur le type de champ / sitecore / templates / System / Templates / Template . Ce que vous nommez cet élément sera le nom qui s'affiche lors de la sélection d'un type de champ pour un nouveau champ. Vous devrez ensuite remplir les champs de cet élément en fonction de l'endroit où vous avez implémenté votre implémentation Control personnalisée. Pour mon exemple, cela ressemble à ce qui suit:

Coredropdowndefinition

Conclusion

C'est tout ce que vous avez à faire pour configurer un champ déroulant personnalisé dans Sitecore! Il existe de nombreuses façons différentes d'en tirer parti pour présenter différentes données à vos auteurs de contenu. Laissez un commentaire si vous avez des questions sur la façon dont tout cela fonctionne!



Le meilleur outil 2023 pour ta croissance Instagram !



Source link