Integrera AEM Forms-arbetsytekomponenter i webbprogram integrating-aem-forms-workspace-components-in-web-applications

Du kan använda arbetsytan i AEM Forms komponenter i ditt eget webbprogram. I följande exempelimplementering används komponenter från ett dev-paket för AEM Forms-arbetsytan som är installerat på en CRX™-instans för att skapa ett webbprogram. Anpassa lösningen nedan efter dina specifika behov. Exempelimplementeringen återanvänds UserInfo, FilterListoch TaskList-komponenter i en webbportal.

  1. Logga in i CRXDE Lite-miljön på https://'[server]:[port]'/lc/crx/de/. Kontrollera att du har ett AEM Forms Workspace-dev-paket installerat.

  2. Skapa en bana /apps/sampleApplication/wscomponents.

  3. Kopiera css, bilder, js/libs, js/runtime och js/registry.js

    • från /libs/ws
    • till /apps/sampleApplication/wscomponents.
  4. Skapa en demomain.js-fil i mappen /apps/sampleApplication/wscomponents/js. Kopiera kod från /libs/ws/js/main.js till demomain.js.

  5. I demomain.js tar du bort koden för att initiera Router och lägger till följande kod:

    code language-javascript
    require(['initializer','runtime/util/usersession'],
        function(initializer, UserSession) {
            UserSession.initialize(
                function() {
                    // Render all the global components
                    initializer.initGlobal();
                });
        });
    
  6. Skapa en nod under /content efter namn sampleApplication och text nt:unstructured. Lägg till sling:resourceType av typen String och value sampleApplication. Lägg till en post för i åtkomstkontrollistan för den här noden PERM_WORKSPACE_USER tillåt jcr:läsbehörighet. I åtkomstkontrollistan för /apps/sampleApplication lägg till en post för PERM_WORKSPACE_USER tillåt jcr:läsbehörighet.

  7. I /apps/sampleApplication/wscomponents/js/registry.js uppdatera sökvägar från /lc/libs/ws/ till /lc/apps/sampleApplication/wscomponents/ för mallvärden.

  8. På portalstartsidan finns JSP-filen på /apps/sampleApplication/GET.jsplägger du till följande kod för att inkludera de nödvändiga komponenterna i portalen.

    code language-jsp
    <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>
    

    Inkludera även de CSS-filer som krävs för AEM Forms arbetsytekomponenter.

    note note
    NOTE
    Varje komponent läggs till i komponenttaggen (med klasskomponent) vid återgivningen. Kontrollera att din hemsida innehåller dessa taggar. Se html.jsp fil med AEM Forms arbetsyta för att få mer information om dessa grundläggande kontrolltaggar.
  9. Om du vill anpassa komponenterna kan du utöka de befintliga vyerna för den önskade komponenten enligt följande:

    code language-javascript
    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. Ändra portalens CSS för att konfigurera layout, placering och format för de nödvändiga komponenterna på portalen. Du vill till exempel att bakgrundsfärgen ska vara svart för den här portalen så att komponenten userInfo visas korrekt. Du kan göra detta genom att ändra bakgrundsfärgen i /apps/sampleApplication/wscomponents/css/style.css enligt följande:

    code language-css
    body {
        font-family: "Myriad pro", Arial;
        background: #000;    //This was origianlly #CCC
        position: relative;
        margin: 0 auto;
    }
    
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2