DocumentazioneAEM 6.5Guida utente

Integrazione dei componenti dell’area di lavoro di AEM Forms nelle applicazioni web integrating-aem-forms-workspace-components-in-web-applications

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Amministratore
  • Utente
  • Sviluppatore

Puoi utilizzare i componenti dell'area di lavoro AEM Forms nella tua applicazione Web. L’implementazione di esempio seguente utilizza i componenti di un pacchetto di sviluppo per l’area di lavoro di AEM Forms installato in un’istanza CRX™ per creare un’applicazione web. Personalizza la soluzione qui sotto in base alle tue esigenze specifiche. L'implementazione di esempio riutilizza UserInfo, FilterList e TaskList componenti all'interno di un portale Web.

  1. Accedere all'ambiente CRXDE Lite in https://'[server]:[port]'/lc/crx/de/. Verifica che sia installato un pacchetto di sviluppo per l’area di lavoro di AEM Forms.

  2. Creare un percorso /apps/sampleApplication/wscomponents.

  3. Copia css, immagini, js/libs, js/runtime e js/registry.js

    • da /libs/ws
    • a /apps/sampleApplication/wscomponents.

  4. Crea un file demo.js all’interno della cartella /apps/sampleApplication/wscomponents/js. Copia il codice da /libs/ws/js/main.js in demomain.js.

  5. In demo.js, rimuovi il codice per inizializzare il router e aggiungi il seguente codice:

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

  6. Creare un nodo in /content per nome sampleApplication e tipo nt:unstructured. Nelle proprietà di questo nodo aggiungere sling:resourceType di tipo String e valore sampleApplication. Nell'elenco di controllo di accesso di questo nodo aggiungere una voce per PERM_WORKSPACE_USER che consenta i privilegi jcr:read. Inoltre, nell'elenco di controllo di accesso di /apps/sampleApplication aggiungere una voce per PERM_WORKSPACE_USER che consenta i privilegi jcr:read.

  7. In /apps/sampleApplication/wscomponents/js/registry.js aggiornare i percorsi da /lc/libs/ws/ a /lc/apps/sampleApplication/wscomponents/ per i valori del modello.

  8. Nel file JSP della home page del portale in /apps/sampleApplication/GET.jsp, aggiungere il codice seguente per includere i componenti richiesti all'interno del portale.

    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>

    Includi anche i file CSS necessari per i componenti dell’area di lavoro di AEM Forms.

    note note
    NOTE
    Ogni componente viene aggiunto al tag componente (con class component) durante il rendering. Assicurati che la tua pagina principale contenga questi tag. Per ulteriori informazioni su questi tag di controllo di base, vedere il file html.jsp dell'area di lavoro di AEM Forms.

  9. Per personalizzare i componenti, potete estendere le viste esistenti per il componente richiesto nel modo seguente:

    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. Modifica il CSS portale per configurare il layout, il posizionamento e lo stile dei componenti richiesti sul portale. Ad esempio, se vuoi mantenere il colore di sfondo nero per questo portale, puoi visualizzare bene il componente UserInfo. Per eseguire questa operazione, modificare il colore di sfondo in /apps/sampleApplication/wscomponents/css/style.css nel modo seguente:

    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