Casi di utilizzo: creare pagine di panoramica

Nell'esempio seguente verranno create applicazioni Web di tipo panoramica per visualizzare tutte le applicazioni Web nel database. Configura i seguenti elementi:

Creazione di un'applicazione Web a pagina singola

  1. Crea una singola applicazione Web Page e disabilita le transizioni e le transizioni in uscita alla pagina successiva.

  2. Modifica del titolo della pagina.

    Questo titolo verrà visualizzato nell'intestazione della panoramica e nella panoramica dell'applicazione Web.

  3. Nelle proprietà dell'applicazione Web, modificare il rendering dell'applicazione selezionando il modello Single-page Web application.

  4. Apri l'attività Page dell'applicazione Web e apri un elenco (Static element > List).

  5. Nella scheda Data dell’elenco, selezionare il tipo di documento Web applications e le colonne di output Label , Creation date e Type of application.

  6. Nella sottoscheda Filter , crea il seguente filtro come mostrato di seguito per visualizzare solo le applicazioni Web ed escludere i modelli dalla visualizzazione.

  7. Chiudi la finestra di configurazione della pagina e fai clic su Preview.

    Viene visualizzato l'elenco delle applicazioni Web disponibili nel database.

Aggiunta di un filtro a una cartella

In una panoramica, puoi scegliere di accedere ai dati a seconda della posizione nella struttura di Adobe Campaign. Questo è un filtro su una cartella. Applica il seguente processo per aggiungerlo alla panoramica.

  1. Posizionare il cursore sul nodo Page dell'applicazione Web e aggiungere un elemento Select folder (Advanced controls > Select folder).

  2. Nella finestra Storage che viene visualizzata, fai clic sul collegamento Edit variables .

  3. Modifica l’etichetta della variabile in base alle tue esigenze.

  4. Modifica il nome della variabile con il valore folder .

    NOTA

    Il nome della variabile deve corrispondere al nome dell’elemento collegato alla cartella (definito nello schema), ovvero cartella in questo caso. È necessario riutilizzare questo nome quando si fa riferimento alla tabella.

  5. Applica il tipo XML alla variabile.

  6. Seleziona l’interazione Refresh page .

  7. Posiziona il cursore sull’elenco e nella scheda Advanced fai riferimento alla variabile creata in precedenza nella scheda Folder filter XPath dell’elenco. È necessario utilizzare il nome dell’elemento interessato dal collegamento alla cartella, ovvero cartella.

    NOTA

    In questa fase, l'applicazione Web non è nel relativo contesto applicativo, pertanto il filtro non può essere testato sulla cartella.

Aggiunta di un pulsante per configurare una nuova applicazione Web

  1. Posiziona il cursore sull’elemento Page e aggiungi un collegamento (Static elements > Link).

  2. Modifica l’etichetta del collegamento in quanto verrà visualizzata sul pulsante nella panoramica.

    Nel nostro esempio, l'etichetta è New.

  3. Inserisci il seguente URL nel campo URL: xtk://open/?schema=nms:webApp&form=nms:newWebApp.

    NOTA

    nms: webAppcoincidente con lo schema dell'applicazione Web.

    nms: newWebAppcoincidente con la nuova procedura guidata di creazione dell'applicazione Web.

  4. Scegli di visualizzare l’URL nella stessa finestra.

  5. Aggiungi l'icona dell'applicazione Web nel campo immagine: /nms/img/webApp.png.

    Questa icona verrà visualizzata sul pulsante New .

  6. Immetti button nel campo Style .

    Questo stile è indicato nel modello Single-page Web application selezionato in precedenza.

Aggiunta di dettagli a un elenco

Quando configuri un elenco nella panoramica, puoi scegliere di visualizzare ulteriori dettagli per ogni voce nell’elenco.

  1. Posiziona il cursore sull’elemento elenco creato in precedenza.

  2. Nella scheda General , seleziona la modalità di visualizzazione Columns and additional detail nell’elenco a discesa.

  3. Nella scheda Data , aggiungi la colonna Primary key , Internal name e Description e seleziona l’opzione Hidden field per ciascuna di esse.

    In questo modo, queste informazioni saranno visibili solo nei dettagli di ogni voce.

  4. Nella scheda Additional detail , aggiungi il seguente codice:

    <div class="detailBox">
      <div class="actionBox">
        <span class="action"><img src="/xtk/img/fileEdit.png?lang=it"/><a title="Open" class="linkAction" href="xtk://open/?schema=nms:webApp&form=nms:webApp&pk=
        <%=webApp.id%>">Open...</a></span>
        <% 
        if( webApp.@appType == 1 ) { //survey
        %>
        <span class="action"><img src="/xtk/img/report.png?lang=it"/><a target="_blank" title="Reports" class="linkAction" href="/xtk/report.jssp?_context=selection&+++++++++_schema=nms%3AwebApp&_selection=%3C%25%3DwebApp.%40id%25%3E+++++++++&__sessiontoken=%3C%25%3Ddocument.controller.getSessionToken%28&lang=it)%>">Reports</a></span>
        <% 
        } 
        %>
      </div>
      <div>
        Internal name: <%= webApp.@internalName %>
      </div>
      <%
      if( webApp.desc != "" )
      {
      %>
      <div>
        Description: <%= webApp.desc %>
      </div>
      <% 
      } 
      %>
    </div>
    
NOTA

L'aggiornamento delle librerie JavaScript richiede cinque minuti sul server. È possibile riavviare il server per evitare di attendere questo ritardo.

Filtro e aggiornamento dell'elenco

In questa sezione verrà creato un filtro per la visualizzazione della panoramica delle applicazioni Web create da un operatore specifico. Questo filtro viene creato con un editor di collegamenti. Dopo aver selezionato un operatore, aggiorna l’elenco per applicare il filtro; questo richiede la creazione di un collegamento di aggiornamento.

Questi due elementi verranno raggruppati nello stesso contenitore per essere raggruppati graficamente nella panoramica.

  1. Posiziona il cursore sull’elemento Page e seleziona Container > Standard.

  2. Imposta il numero di colonne su 2, in modo che l'editor dei collegamenti e il collegamento siano gli uni accanto agli altri.

    Per informazioni sul layout degli elementi, consulta questa sezione.

  3. Applica dottedFilter.

    Questo stile è indicato nel modello Single-page Web applicatio n selezionato in precedenza.

  1. Posiziona il cursore sul contenitore creato durante lo stadio precedente e inserisci un editor di collegamenti tramite il menu Advanced controls .

  2. Nella finestra di archiviazione che si apre automaticamente, selezionare l'opzione Variables, quindi fare clic sul collegamento Edit variables e creare una variabile XML per filtrare i dati.

  3. Modifica l’etichetta.

    Nella panoramica verrà visualizzato accanto al campo Filter .

  4. Scegliere la tabella Operatore come schema di applicazione.

  5. Posiziona il cursore sull’elemento elenco e crea un filtro tramite la scheda Data > Filter :

    • Espressione: chiave esterna del collegamento "Creato da"
    • Operatore: è uguale a
    • Valore: Variabili (variabili)
    • Se: '$(var2/@id)'!=''

ATTENZIONE

L’utente dell’applicazione Web deve essere un operatore identificato con i diritti Adobe Campaign appropriati per accedere alle informazioni. Questo tipo di configurazione non funzionerà per le applicazioni Web anonime.

  1. Posiziona il cursore sul contenitore e inserisci un Link tramite il menu Static elements.

  2. Modifica l’etichetta.

  3. Seleziona Refresh data in a list.

  4. Aggiungi l’elenco creato in precedenza.

  5. Aggiungi l’icona di aggiornamento sul campo Image : /xtk/img/refresh.png.

  6. Utilizzando le frecce di ordinamento, riorganizzare i vari elementi dell'applicazione Web come mostrato di seguito.

L'applicazione Web è ora configurata. Puoi fare clic sulla scheda Preview per visualizzarla in anteprima.

In questa pagina

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now