AEM Forms-werkruimtecomponenten integreren in webtoepassingen integrating-aem-forms-workspace-components-in-web-applications

CAUTION
AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

U kunt de AEM Forms-werkruimte gebruiken componenten in uw eigen webtoepassing. 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 wordt opnieuw gebruikt UserInfo, FilterList, en TaskListin een webportal.

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

  2. Een pad maken /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:

    code language-none
    require(['initializer','runtime/util/usersession'],
        function(initializer, UserSession) {
            UserSession.initialize(
                function() {
                    // Render all the global components
                    initializer.initGlobal();
                });
        });
    
  6. Een knooppunt onder /content op naam maken sampleApplication en type nt:unstructured. In de eigenschappen van dit knooppunt voegt u sling:resourceType van het type String en value sampleApplication. Voeg in de lijst Toegangsbeheer van dit knooppunt een item toe voor PERM_WORKSPACE_USER jcr:lezenrechten toestaan. Ook in de lijst Toegangsbeheer van /apps/sampleApplication een item toevoegen voor PERM_WORKSPACE_USER jcr:lezenrechten toestaan.

  7. In /apps/sampleApplication/wscomponents/js/registry.js paden bijwerken van /lc/libs/ws/ tot /lc/apps/sampleApplication/wscomponents/ voor sjabloonwaarden.

  8. In uw portal kunt u JSP-bestand op /apps/sampleApplication/GET.jspvoegt u de volgende code toe om de vereiste componenten in het portaal op te nemen.

    code language-as3
    <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.

    note note
    NOTE
    Elke component wordt toegevoegd aan de componenttag (met klassecomponent) tijdens het renderen. Zorg ervoor dat de homepage deze tags bevat. Zie de html.jsp bestand van de AEM Forms-werkruimte voor meer informatie over deze basisturing-tags.
  9. Als u de componenten wilt aanpassen, kunt u de bestaande weergaven voor de vereiste component als volgt uitbreiden:

    code language-as3
    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 de achtergrondkleur te wijzigen in /apps/sampleApplication/wscomponents/css/style.css als volgt:

    code language-as3
    body {
        font-family: "Myriad pro", Arial;
        background: #000;    //This was origianlly #CCC
        position: relative;
        margin: 0 auto;
    }
    
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da