Integrieren von AEM Forms Workspace-Komponenten in Web-Anwendungen integrating-aem-forms-workspace-components-in-web-applications

Melden Sie sich in der CRXDE Lite-Umgebung unter https://'[server]:[port]'/lc/crx/de/ an. Stellen Sie sicher, dass AEM Forms Workpace Dev-Paket installiert ist.

Erstellen Sie einen Pfad /apps/sampleApplication/wscomponents.

Kopieren Sie CSS, Bilder, js/libs, js/runtime und js/registry.js

• von /libs/ws
• zu /apps/sampleApplication/wscomponents.

Erstellen Sie eine Datei „demomain.js“ im Ordner /apps/sampleApplication/wscomponents/js. Kopieren Sie den Code aus /libs/ws/js/main.js in „demomain.js“.

Entfernen Sie in „demomain.js“ den Code zum Initialisieren des Routers und fügen Sie den folgenden Code hinzu:

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

Erstellen Sie einen Knoten unter „/content“ mit dem Namen sampleApplication und dem Typ nt:unstructured. Fügen Sie in den Eigenschaften dieses Knotens sling:resourceType vom Typ String und dem Wert sampleApplication hinzu. Fügen Sie der Zugriffsteuerungsliste dieses Knotens den Eintrag PERM_WORKSPACE_USER hinzu, um jcr:read-Zugriff zuzulassen. Fügen Sie außerdem in der Zugriffssteuerungsliste von /apps/sampleApplication einen Eintrag für PERM_WORKSPACE_USER hinzu, der „jcr:read privileges“ erlaubt.

Aktualisieren Sie in /apps/sampleApplication/wscomponents/js/registry.js die Pfade /lc/libs/ws/ zu /lc/apps/sampleApplication/wscomponents/ für die Vorlagenwerte.

Fügen Sie in die JSP-Datei Ihrer Portal-Startseite unter /apps/sampleApplication/GET.jsp den folgenden Code ein, um die erforderlichen Komponenten innerhalb des Portals aufzunehmen.

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

Schließen Sie auch die CSS-Dateien ein, die für die AEM Forms Workspace-Komponenten erforderlich sind.

Um die Komponenten anzupassen, können Sie die vorhandenen Ansichten für die erforderliche Komponente wie folgt erweitern:

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;
});

Ändern Sie das Portal-CSS, um das Layout, die Positionierung und den Stil der erforderlichen Komponenten im Portal zu konfigurieren. Sie möchten beispielsweise die Hintergrundfarbe für dieses Portal schwarz halten, um die Komponente „userInfo“ gut sichtbar darzustellen. Sie können dies tun, indem Sie die Hintergrundfarbe in /apps/sampleApplication/wscomponents/css/style.css wie folgt ändern:

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