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 de CRXDE Lite à l’adresse 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 saisissez nt:unstructured. Dans les propriétés de ce noeud, ajoutez sling:resourceType de type Chaîne et 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 la liste de contrôle d’accès de /apps/sampleApplication, ajoutez une entrée pour PERM_WORKSPACE_USER autorisant des privilèges jcr:read.

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

  8. Dans le fichier JSP de la page d’accueil de votre 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" src="/lc/apps/sampleApplication/wscomponents/js/libs/require/require.js"></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