Sie sehen sich Hilfeinhalte der folgenden Version an:

Sie können die AEM Forms Workspace Komponenten in Ihrer eigenen Webanwendung verwenden. In der folgenden Beispielimplementierung werden Komponenten aus einem AEM Forms Workspace-Dev-Paket verwendet, das auf einer CRX™-Instanz installiert ist, um eine Webanwendung zu erstellen. Passen Sie die unten gezeigte Lösung an Ihre spezifischen Anforderungen an. In der Beispielimplementierung werden die Komponenten UserInfo, FilterList und TaskList innerhalb eines Webportals wiederverwendet.

  1. Melden Sie sich unter http://[Server]:[Port]/lc/crx/de/ ei der CRXDE Lite-Umgebung an. Stellen Sie sicher, dass AEM Forms Workpace Dev-Paket installiert ist.

  2. Erstellen Sie einen Pfad: /apps/sampleApplication/wscomponents.

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

    • von /libs/ws
    • nach /apps/sampleApplication/wscomponents.
  4. Erstellen Sie im Ordner /apps/sampleApplication/wscomponents/js eine Datei mit dem Namen demomain.js. Kopieren Sie Code aus /libs/ws/js/main.js in demomain.js.

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

    require(['initializer','runtime/util/usersession'], 
        function(initializer, UserSession) { 
            UserSession.initialize( 
                function() { 
                    // Render all the global components
                    initializer.initGlobal();  
                }); 
        });
  6. Erstellen Sie unter „/content“ einen Knoten mit dem Namen sampleApplication und vom Typ nt:unstructured. Fügen Sie in den Eigenschaften dieses Knotens sling:resourceType des Typs Zeichenfolge und den Wert sampleApplication hinzu. Fügen Sie der Zugriffsteuerungsliste dieses Knotens den Eintrag PERM_WORKSPACE_USER hinzu, um jcr:read-Zugriff zuzulassen. Fügen Sie in der Zugriffsteuerungsliste von /apps/sampleApplication den Eintrag PERM_WORKSPACE_USER hinzu, um jcr:read-Zugriff zuzulassen.

  7. Aktualisieren Sie in/apps/sampleApplication/wscomponents/js/registry.js die Pfade /lc/libs/ws/ und ändern Sie sie dazu in /lc/apps/sampleApplication/wscomponents/ für Vorlagenwerte.

  8. Fügen Sie in der JSP-Datei Ihrer Portalstartseite unter /apps/sampleApplication/GET.jsp den folgenden Code hinzu, um die erforderlichen Komponenten innerhalb des Portals einzuschließen.

    <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 außerdem die CSS-Dateien ein, die für die AEM Forms Workspace-Komponenten erforderlich sind.

    Hinweis:

    Beim render-Prozess wird jede Komponente dem Komponenten-Tag (der Klasse gcomponent) hinzugefügt. Stellen Sie sicher, dass Ihre Startseite die betreffenden Tags enthält. Weitere Informationen zu diesen Basissteuerungstags finden Sie in der Datei von AEM Forms Workspace html.jsp.

  9. 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; 
    });
  10. Ändern Sie das Portal-CSS, um das Layout, die Positionierung und den Stil der erforderlichen Komponenten im Portal zu konfigurieren. Beispiel: Sie möchten die Hintergrundfarbe Schwarz in diesem Portal behalten, um die Komponente userInfo gut sichtbar darzustellen. Dazu ändern Sie wie folgt die Hintergrundfarbe in /apps/sampleApplication/wscomponents/css/style.css:

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

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie