AEM Forms-werkruimtecomponenten integreren in webtoepassingen

U kunt de werkruimte van AEM Forms componenten in uw eigen Webtoepassing gebruiken. De volgende voorbeeldimplementatie gebruikt componenten van een AEM Forms-werkruimtendev-pakket dat op een CRX™-instantie is geïnstalleerd om een webtoepassing te maken. Pas de onderstaande oplossing aan uw specifieke behoeften aan. De voorbeeldimplementatie gebruikt UserInfo, FilterList, en TaskListcomponenten binnen een Webportaal opnieuw.

  1. Log in in CRXDE Lite-omgeving op https://[server]:[port]/lc/crx/de/. Zorg ervoor dat u een AEM Forms-ontwikkelpakket voor werkruimten hebt geïnstalleerd.

  2. Maak een pad /apps/sampleApplication/wscomponents.

  3. CSS, afbeeldingen, js/libs, js/runtime en js/registry.js kopiëren

    • Van /libs/ws
    • tot /apps/sampleApplication/wscomponents.

  4. Maak een bestand demomain.js in de map /apps/sampleApplication/wscomponents/js. Kopieer code van /libs/ws/js/main.js naar demomain.js.

  5. In demomain.js, verwijder de code om Router te initialiseren en de volgende code toe te voegen:

    require(['initializer','runtime/util/usersession'],
    function(initializer, UserSession) {
        UserSession.initialize(
            function() {
                // Render all the global components
                initializer.initGlobal();
            });
    });

  6. Maak een knooppunt onder /content op naam sampleApplication en typ nt:unstructured. Voeg in de eigenschappen van dit knooppunt sling:resourceType van het type String en value sampleApplication toe. Voeg in de lijst Toegangsbeheer van dit knooppunt een item voor PERM_WORKSPACE_USER toe waardoor jcr:read-bevoegdheden zijn toegestaan. Voeg in de lijst Toegangsbeheer van /apps/sampleApplication ook een item voor PERM_WORKSPACE_USER toe, zodat jcr:read-rechten zijn toegestaan.

  7. Werk in /apps/sampleApplication/wscomponents/js/registry.js paden bij van /lc/libs/ws/ naar /lc/apps/sampleApplication/wscomponents/ voor sjabloonwaarden.

  8. In uw portalstartpagina JSP- dossier bij /apps/sampleApplication/GET.jsp, voeg de volgende code toe om de vereiste componenten binnen het portaal te omvatten.

    <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>

    Neem ook de CSS-bestanden op die vereist zijn voor de AEM Forms-werkruimtecomponenten.

    OPMERKING

    Elke component wordt toegevoegd aan de componenttag (met klassecomponent) tijdens het renderen. Zorg ervoor dat de homepage deze tags bevat. Zie het html.jsp dossier van de werkruimte van AEM Forms om meer over deze markeringen van de basiscontrole te weten te komen.

  9. Als u de componenten wilt aanpassen, kunt u de bestaande weergaven voor de vereiste component als volgt uitbreiden:

    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. Wijzig portaal CSS om de lay-out, het plaatsen, en de stijl van de vereiste componenten op uw portaal te vormen. U wilt bijvoorbeeld de achtergrondkleur zwart houden voor dit portaal om de component userInfo goed te kunnen bekijken. U kunt dit doen door achtergrondkleur in /apps/sampleApplication/wscomponents/css/style.css als volgt te veranderen:

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

Op deze pagina