Esercitazione: Applicare regole ai campi del modulo adattivo

06-apply-rules-to-adaptive-form_main

Questa esercitazione è un passaggio della serie Crea il tuo primo modulo adattivo . Adobe consiglia di seguire le serie in sequenza cronologica per comprendere, eseguire e illustrare il caso d’uso completo dell’esercitazione.

Informazioni sull'esercitazione

Puoi utilizzare le regole per aggiungere interattività, logica di business e convalide avanzate a un modulo adattivo. I moduli adattivi dispongono di un editor di regole integrato. L’editor di regole fornisce una funzionalità di trascinamento della selezione, simile alle visite guidate. Il metodo di trascinamento della selezione è il metodo più veloce e facile per creare regole. L'editor di regole fornisce anche una finestra di codice per gli utenti interessati a testare le proprie capacità di codifica o a portare le regole al livello successivo.

Per ulteriori informazioni sull'editor di regole, consulta Editor di regole Forms adattive.

Al termine dell’esercitazione, imparerai a creare regole per:

  • Richiamare un servizio Form Data Model per recuperare i dati dal database
  • Richiamare un servizio Form Data Model per aggiungere dati al database
  • Esegui un controllo di convalida e visualizza messaggi di errore

Le immagini GIF interattive alla fine di ogni sezione dell’esercitazione consentono di apprendere e convalidare al volo la funzionalità del modulo che si sta creando.

Passaggio 1: Recupera un record cliente dal database

È stato creato un modello dati modulo seguendo l'articolo creare un modello dati modulo . Ora è possibile utilizzare l’editor di regole per richiamare i servizi Forms Data Model per recuperare e aggiungere informazioni al database.

A ogni cliente viene assegnato un numero ID cliente univoco, che consente di identificare i dati cliente rilevanti in un database. La procedura seguente utilizza l'ID cliente per recuperare le informazioni dal database:

  1. Apri il modulo adattivo per la modifica.

    http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html

  2. Tocca il campo ID cliente e tocca l’icona Modifica regole . Viene visualizzata la finestra Editor regole.

  3. Tocca l’icona + Crea per aggiungere una regola. Apre l'Editor visivo.

    Nell'editor visivo, l'istruzione WHEN è selezionata per impostazione predefinita. Inoltre, l'oggetto modulo (in questo caso, ID cliente) da cui è stato avviato l'editor di regole è specificato nell'istruzione WHEN.

  4. Tocca il menu a discesa Seleziona stato e seleziona viene modificato.

    quando customeridischanged

  5. Nell'istruzione THEN, seleziona Richiama servizio dal menu a discesa Seleziona azione.

  6. Seleziona il servizio Recupera indirizzo di spedizione dal menu a discesa Seleziona.

  7. Trascina il campo ID cliente dalla scheda Oggetti modulo all’oggetto Rilascia o seleziona qui nella casella INPUT .

    dropobjectstoinputfield-retrievedata

  8. Trascinare il campo ID cliente, Nome, Indirizzo di spedizione, Stato e Codice postale dalla scheda Oggetti modulo all'oggetto Rilascia o selezionare qui nella casella OUTPUT.

    dropobjectstooutputfield-retrievedata

    Tocca Fine per salvare la regola. Nella finestra dell’editor delle regole, tocca Chiudi.

  9. Visualizzare l’anteprima del modulo adattivo. Immetti un ID nel campo ID cliente . Il modulo ora può recuperare i dettagli dei clienti dal database.

    recupero-informazioni

Passaggio 2: Aggiungi l'indirizzo cliente aggiornato al database

Una volta recuperati i dettagli del cliente dal database, puoi aggiornare l’indirizzo di spedizione, lo stato e il codice postale. La procedura seguente richiama un servizio Form Data Model per aggiornare le informazioni dei clienti al database:

  1. Seleziona il campo Invia e tocca l'icona Modifica regole. Viene visualizzata la finestra Editor regole.

  2. Seleziona la regola Invia - Fai clic su e tocca l'icona Modifica. Vengono visualizzate le opzioni per modificare la regola di invio.

    regola di invio

    Nell’opzione WHEN , le opzioni Submit e sono già selezionate.

    invia con un clic

  3. Nell'opzione THEN, tocca l'opzione + Aggiungi istruzione. Seleziona Richiama servizio dal menu a discesa Seleziona azione.

  4. Seleziona il servizio Aggiorna indirizzo di spedizione dal menu a discesa Seleziona.

    indirizzo di spedizione-aggiornamento

  5. dropobjectstoinputfield-updatedata

    Trascinare il campo Indirizzo di spedizione, Stato e Codice postale dalla scheda Oggetti modulo alla corrispondente proprietà .nome tabella (ad esempio, customerdetails .shippingAddress) dell'oggetto Rilascia o selezionare qui nella casella INPUT. Tutti i campi con prefisso nome tabella (ad esempio, dettagli cliente in questo caso d’uso) fungono da dati di input per il servizio di aggiornamento. Tutto il contenuto fornito in questi campi viene aggiornato nell’origine dati.

    NOTA

    Non trascinare i campi Name e ID cliente nella corrispondente tablespace.property (ad esempio, customerdetails.name). Aiuta ad evitare di aggiornare per errore nome e ID del cliente.

  6. Trascinare il campo ID cliente dalla scheda Oggetti modulo al campo id nella casella INPUT. I campi senza nome tabella prefisso (ad esempio, dettagli cliente in questo caso d’uso) fungono da parametro di ricerca per il servizio di aggiornamento. Il campo id in questo caso d’uso identifica in modo univoco un record nella tabella dei dettagli del cliente.

  7. Tocca Fine per salvare la regola. Nella finestra dell’editor delle regole, tocca Chiudi.

  8. Visualizzare l’anteprima del modulo adattivo. Recupera i dettagli di un cliente, aggiorna l’indirizzo di spedizione e invia il modulo. Quando recuperi nuovamente i dettagli dello stesso cliente, viene visualizzato l'indirizzo di spedizione aggiornato.

Passaggio 3: (sezione Bonus) Utilizza l’editor di codice per eseguire convalide e visualizzare messaggi di errore

È necessario eseguire la convalida del modulo per verificare che i dati immessi nel modulo siano corretti e che venga visualizzato un messaggio di errore in caso di dati errati. Ad esempio, se nel modulo viene immesso un ID cliente non esistente, deve essere visualizzato un messaggio di errore.

I moduli adattivi forniscono diversi componenti con convalide integrate, ad esempio campi e-mail e numerici da utilizzare in casi d’uso comuni. Utilizza l'editor di regole per i casi d'uso avanzati, ad esempio, per visualizzare un messaggio di errore quando il database restituisce zero (0) record (nessun record).

La procedura seguente mostra come creare una regola per visualizzare un messaggio di errore se l’ID cliente immesso nel modulo non esiste nel database. La regola inoltre attiva e reimposta il campo ID cliente . La regola utilizza l'API dataIntegrationUtils del servizio del modello dati del modulo per verificare se l'ID cliente esiste nel database.

  1. Tocca il campo ID cliente e tocca l’icona Edit Rules. Viene visualizzata la finestra Editor regole.

  2. Tocca l’icona + Crea per aggiungere una regola. Apre l'Editor visivo.

    Nell'editor visivo, l'istruzione WHEN è selezionata per impostazione predefinita. Inoltre, l'oggetto modulo (in questo caso, ID cliente) da cui è stato avviato l'editor di regole è specificato nell'istruzione WHEN.

  3. Tocca il menu a discesa Seleziona stato e seleziona viene modificato.

    quando customeridischanged

    Nell'istruzione THEN, seleziona Richiama servizio dal menu a discesa Seleziona azione.

  4. Passa da Editor visivo a Editor di codice. Il controllo dell'interruttore si trova sul lato destro della finestra. Viene aperto l’Editor di codice, con codice simile al seguente:

    editor di codice

  5. Sostituisci la sezione della variabile di input con il seguente codice:

    var inputs = {
        "id" : this
    };
    
  6. Sostituisci la sezione guidelib.dataIntegrationUtils.executeOperation (operationInfo, input, output) con il seguente codice:

    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, function (result) {
      if (result) {
          result = JSON.parse(result);
        customer_Name.value = result.name;
        customer_Shipping_Address = result.shippingAddress;
      } else {
        if(window.confirm("Invalid Customer ID. Provide a valid customer ID")) {
              customer_Name.value = " ";
             guideBridge.setFocus(customer_ID);
        }
      }
    });
    
  7. Visualizzare l’anteprima del modulo adattivo. Immetti un ID cliente errato. Viene visualizzato un messaggio di errore.

    display-validation-error

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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