DokumentationAEM 6.5Användarhandbok

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

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Administratör
  • Användare
  • Utvecklare

Du kan använda AEM Forms komponenter på arbetsytan 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änder UserInfo, FilterList och 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 sökväg /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 med namnet sampleApplication och skriv nt:unstructured. Lägg till sling:resourceType av typen String och värdet sampleApplication i egenskaperna för den här noden. I åtkomstkontrollistan för den här noden lägger du till en post för PERM_WORKSPACE_USER som tillåter jcr:read-behörighet. I åtkomstkontrollistan för /apps/sampleApplication lägger du till en post för PERM_WORKSPACE_USER som tillåter jcr:read-behörighet.

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

  8. Lägg till följande kod i JSP-filen på din portalhemsida på /apps/sampleApplication/GET.jsp 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 filen html.jsp på arbetsytan i AEM Forms om du vill veta mer om de här grundläggande kontrolltaggarna.

  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