Intégration des composants de l’espace de travail AEM Forms dans des applications Web

Vous pouvez utiliser les composants de l’espace de travail AEM Forms dans votre propre application Web. L’exemple d’implémentation suivant utilise des composants d’un paquet de développement d’espace de travail AEM Forms installé sur une instance CRX™ pour créer une application Web. Personnalisez la solution ci-dessous en fonction de vos besoins. L’exemple d’implémentation réutilise les composants UserInfo, FilterList et TaskListdans un portail Web.

  1. Connectez-vous à l’environnement CRXDE Lite à https://'[server]:[port]'/lc/crx/de/. Assurez-vous que vous avez installé un package de développement d’espace de travail AEM Forms.

  2. Créez un chemin /apps/sampleApplication/wscomponents.

  3. Copiez css, images, js/libs, js/runtime et js/registry.js

    • de /libs/ws
    • vers /apps/sampleApplication/wscomponents.
  4. Créez un fichier demomain.js dans le dossier /apps/sampleApplication/wscomponents/js. Copiez le code de /libs/ws/js/main.js dans demomain.js.

  5. Dans demomain.js, supprimez le code pour initialiser le routeur et ajoutez le code suivant :

    require(['initializer','runtime/util/usersession'],
        function(initializer, UserSession) {
            UserSession.initialize(
                function() {
                    // Render all the global components
                    initializer.initGlobal();
                });
        });
    
  6. Créez un noeud sous /content par nom sampleApplication et tapez nt:unstructured. Dans les propriétés de ce noeud, ajoutez sling:resourceType de type String et la valeur sampleApplication. Dans la liste de contrôle d’accès de ce nœud, ajoutez une entrée pour PERM_WORKSPACE_USER autorisant des privilèges jcr:read. En outre, dans l'Contrôle d'accès Liste de /apps/sampleApplication, ajoutez une entrée pour PERM_WORKSPACE_USER autorisant les privilèges jcr:read.

  7. Dans /apps/sampleApplication/wscomponents/js/registry.js, mettez à jour les chemins d'accès de /lc/libs/ws/ à /lc/apps/sampleApplication/wscomponents/ pour les valeurs de modèle.

  8. Dans le fichier JSP de votre page d'accueil de portail à l’adresse /apps/sampleApplication/GET.jsp, ajoutez le code suivant pour inclure les composants requis dans le portail.

    <script data-main="/lc/apps/sampleApplication/wscomponents/js/demomain?lang=fr" src="/lc/apps/sampleApplication/wscomponents/js/libs/require/require.js?lang=fr"></script>
    <div class="UserInfoView gcomponent" data-name="userinfo"></div>
    <div class="filterListView gcomponent" data-name="filterlist"></div>
    <div class="taskListView gcomponent" data-name="tasklist"></div>
    

    Incluez également les fichiers CSS requis pour les composants d’espace de travail AEM Forms.

    REMARQUE

    Chaque composant est ajouté à la balise du composant (ayant la classe gcomponent) pendant le rendu. Assurez-vous que votre page d’accueil contient ces balises. Voir le fichier html.jsp de l’espace de travail AEM Forms pour en savoir plus sur les balises de contrôle de base.

  9. Pour personnaliser les composants, agrandissez les vues existantes pour le composant requis comme suit :

    define([
        ‘jquery’,
        ‘underscore’,
        ‘backbone’,
        ‘runtime/views/userinfo'],
        function($, _, Backbone, UserInfo){
            var demoUserInfo = UserInfo.extend({
                //override the functions to customize the functionality
                render: function() {
                    UserInfo.prototype.render.call(this); // call the render function of the super class
                    …
                    //other tasks
                    …
                }
            });
            return demoUserInfo;
    });
    
  10. Modifiez le portail CSS pour configurer la mise en page, le positionnement et le style des composants souhaités sur votre portail. Par exemple, vous souhaitez garder la couleur d’arrière-plan en noir pour ce portail pour afficher correctement le composant userInfo. Pour ce faire, modifiez la couleur d’arrière-plan dans /apps/sampleApplication/wscomponents/css/style.css comme suit :

    body {
        font-family: "Myriad pro", Arial;
        background: #000;    //This was origianlly #CCC
        position: relative;
        margin: 0 auto;
    }
    

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now