AEM Forms-werkruimtecomponenten integreren in webtoepassingen integrating-aem-forms-workspace-components-in-web-applications
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 TaskList
in een webportal.
-
Aanmelden bij CRXDE Lite-omgeving
https://[server]:[port]/lc/crx/de/
. Zorg ervoor dat u een AEM Forms-ontwikkelpakket voor werkruimten hebt geïnstalleerd. -
Een pad maken
/apps/sampleApplication/wscomponents
. -
CSS, afbeeldingen, js/libs, js/runtime en js/registry.js kopiëren
- Van
/libs/ws
- tot
/apps/sampleApplication/wscomponents
.
- Van
-
Maak een bestand demomain.js in de map /apps/sampleApplication/wscomponents/js. Kopieer code van /libs/ws/js/main.js naar demomain.js.
-
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(); }); });
-
Een knooppunt onder /content op naam maken
sampleApplication
en typent:unstructured
. In de eigenschappen van dit knooppunt voegt usling:resourceType
van het type String en valuesampleApplication
. Voeg in de lijst Toegangsbeheer van dit knooppunt een item toe voorPERM_WORKSPACE_USER
jcr:lezenrechten toestaan. Ook in de lijst Toegangsbeheer van/apps/sampleApplication
een item toevoegen voorPERM_WORKSPACE_USER
jcr:lezenrechten toestaan. -
In
/apps/sampleApplication/wscomponents/js/registry.js
paden bijwerken van/lc/libs/ws/
tot/lc/apps/sampleApplication/wscomponents/
voor sjabloonwaarden. -
In uw portal kunt u JSP-bestand op
/apps/sampleApplication/GET.jsp
voegt 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. -
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; });
-
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; }