Champs Sitecore JavaScript personnalisés – Perficient Blogs

Introduction

Les champs personnalisés sont un outil puissant pour étendre les fonctionnalités et améliorer la facilité d’utilisation. Cet article explore la création, l’organisation et la mise en œuvre de Javascript Champs Sitecore avec une iframe. En utilisant un iframe pour charger un document HTML séparé, vous pouvez contenir proprement tous les fichiers CSS, JavaScript et HTML nécessaires. Nous allons parcourir les étapes de mise en place d’un tel champ à l’aide de cette technique et discuter des avantages et des considérations de l’approche.

Bien que je ne montre pas le code complet, il est possible d’avoir quelque chose d’aussi joli et fonctionnel directement dans votre source de données !

Il s’agit d’un outil visuel pour générer une syntaxe qui spécifie le format d’une grille. Seul, construire correctement le tableau de nombres serait déroutant et difficile. Avec l’iframe, c’est facile, intuitif et simple à entretenir.

Travail de terrain Sitecore personnalisé

Éliminons la structure de base de la façon dont cela fonctionnera. Afin de créer un champ personnalisé dans Sitecore, vous devrez étendre la classe C# du champ de texte sur une seule ligne. Cela nous permet d’ajouter notre hack iframe. Une fois que vous avez étendu la classe de champ de texte à une seule ligne, créez un nouveau type de données dans la base de données principale de Sitecore. Cela vous permettra d’utiliser votre champ personnalisé dans l’éditeur de contenu et de spécifier sur quels modèles il doit être disponible. Si vous utilisez un outil de sérialisation comme Unicorn ou TDS, vous devrez inclure votre champ personnalisé dans le processus de sérialisation. Cela garantit que votre champ se déploie correctement dans tous les environnements. Je ne montre que la classe étendue, consulter la documentation si vous avez des questions à ce sujet en général.

Étendre la classe C#

namespace Project.Place.This.Goes
{
    public class GridMakerTextInput : Sitecore.Shell.Applications.ContentEditor.Text
    {
        protected override void DoRender(HtmlTextWriter output)
        {
            string uniqueID = Guid.NewGuid().ToString();
            WriteSitecoreElement(output, uniqueID);
            WriteIframe(output, uniqueID);
        }

        private void WriteSitecoreElement(HtmlTextWriter output, string uniqueID)
        {
            
            var htmlFormat = "<div class=\"input-cont\"><input " + ControlAttributes + " data-uid=\"" + uniqueID + "\"/><button class=\"grid-buttons\" id=\"" + uniqueID + "\">Copy Array</button></div>";
            output.Write(htmlFormat);
        }

        private void WriteIframe(HtmlTextWriter output, string uniqueID)
        {
            output.Write("<iframe id=\"frame" + uniqueID + "\" src=\"/sitecore/shell/Controls/your-folder/grid.html\"></iframe>");
        }
    }
}

DoRender doit être écrasé, les autres méthodes sont des abstractions pour aider à la lisibilité. Il convient de noter que les ControlAttributes doivent être ajoutés à un élément d’entrée. C’est le comportement par défaut pour un champ de texte à une seule ligne. Les éléments data-uid, unique ID et button sont supplémentaires et nous permettent d’interagir avec l’iframe. L’identifiant unique est important pour plusieurs raisons, d’abord et avant tout pour autoriser plusieurs champs Grid Maker sur un modèle. De plus, JavaScript utilise les identifiants pour accéder aux iframes, aux boutons et aux éléments d’entrée.

Créer un type de champ personnalisé

Allez dans la base de données principale, dupliquez le champ de texte sur une seule ligne et faites-le pointer vers la classe étendue. Une fois terminé, le type de données ressemble à ceci :

Intégration JavaScript

Pour héberger le code HTML, CSS et JavaScript de votre champ personnalisé, créez un nouveau dossier sous le répertoire sitecore/shell/controls. Cela vous permettra d’accéder facilement aux fichiers nécessaires à partir de l’attribut iframe src. Dans votre classe C# étendue, vous pouvez utiliser la classe HTMLTextWriter pour écrire le code HTML de votre élément iframe. L’attribut src de l’iframe doit pointer vers l’emplacement du fichier HTML que vous avez créé. Dans la classe étendue ci-dessus, c’est cette ligne :

output.Write("<iframe id=\"frame" + uniqueID + "\" src=\"/sitecore/shell/Controls/your-folder/grid.html\"></iframe>");

La structure du dossier ressemble à ceci :

/ sitecore
--- / shell
------ / controls
--------- / your-folder
------------ / grid.js
------------ / grid.html
------------ / grid.css
------------ / general.css

Le general.css est injecté dans la tête par le JavaScript et est responsable du changement de style de l’entrée et du bouton. Tout ce qui se trouve à l’intérieur de l’iframe est contrôlé par le grid.css. Le fichier HTML contiendra le code HTML dont vous avez besoin pour votre champ personnalisé et doit référencer les styles et Javascript comme ceci :

<body>

    <head>
        <link href="https://blogs.perficient.com/2023/01/12/custom-javascript-sitecore-fields/./grid.css" rel="stylesheet">
    </head>
    <div id='main'>
        . . .
    </div>
</body>

<script src="./grid.js"></script>

Réglage fin de JavaScript

Il y a quelques problèmes avec le lancement de votre propre html et JavaScript sur la page. Je vous recommande de vous assurer que les problèmes suivants n’affectent pas votre propre implémentation, mais s’ils le font, les correctifs sont simples.

Bouton Soumettre

L’un des boutons utilisés existe en dehors de l’iframe. Appelez preventDefault() sur le bouton lorsqu’il est cliqué. Le comportement par défaut soumet la page entière en tant que demande de publication, et Sitecore génère une erreur si cela se produit.

allButtons[i].addEventListener("click", (e) => {
     e.preventDefault();
}

allButtons dans ce cas serait initialisé en interrogeant la classe ‘grid-buttons’ que nous avons donnée au bouton étendu.

Prestation de même origine

Depuis l’iframe et le document parent sont sur la même origine (c’est-à-dire qu’ils sont hébergés sur le même domaine), vous pouvez accéder au document parent depuis l’iframe à l’aide de JavaScript. Cela vous permettra de récupérer les données générées à partir de l’iframe et de les placer dans le champ de texte sur une seule ligne. Accédez à l’iframe comme suit :

let frame = parent.document.querySelector("#frame" + uid);

Suivi des boutons statiques

Si le Javascript va écouter n’importe quel élément en dehors de l’iframe, cet élément sera accessible par chaque iframe JavaScript placé sur le même modèle. Trois champs étendus égalent alors trois auditeurs. Pour éliminer cela, ajoutez un attribut au bouton, initialement défini sur false, qui est défini sur true lors de l’ajout d’un écouteur. Vérifiez simplement cet attribut lorsque vous essayez d’ajouter un écouteur.

if (allButtons[i].dataset.listener != 'true') {
        allButtons[i].dataset.listener="true";
        allButtons[i].addEventListener("click", (e) => {
. . .

Si vous souhaitez injecter une balise pour les styles dans l’élément head comme je l’ai fait, vous devrez en outre déclarer une classe statique avec un booléen et vérifier l’état de la classe avant d’injecter le lien. Sinon vous finirez par injecter autant de liens qu’il y a de champs.

Fermeture

L’utilisation d’un iframe pour héberger votre champ Sitecore JavaScript personnalisé vous permet de tirer parti de la puissance et de la flexibilité de JavaScript tout en le gardant contenu et facile à entretenir. Bien que cette approche puisse être un hack, elle est rapide et facile, et relativement simple à maintenir et à modifier. Par exemple, la modification directe du JavaScript dans le dossier hébergé élimine le temps de compilation et de génération. De plus, si vous souhaitez implémenter de nombreux champs personnalisés à l’aide de cette technique, vous pouvez créer des structures et des processus pour faciliter leur maintenance et leur mise à jour.