Tutorial: applicare regole ai campi del modulo adattivo tutorial-apply-rules-to-adaptive-form-fields

06-apply-rules-to-adaptive-form_main

Questo tutorial è un passaggio della serie Creare il primo modulo adattivo. L’Adobe consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e dimostrare il caso di utilizzo completo dell’esercitazione.

Informazioni sull’esercitazione about-the-tutorial

È possibile utilizzare le regole per aggiungere interattività, logica di business e convalide intelligenti a un modulo adattivo. I moduli adattivi hanno 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ù rapido e semplice per creare regole. L’editor di regole fornisce anche una finestra di codice per gli utenti interessati a testare le loro abilità di codifica o a portare le regole a un livello successivo.

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

Entro la fine dell’esercitazione imparerai a creare regole per:

  • Richiama un servizio Modello dati modulo per recuperare i dati dal database
  • Richiama un servizio Modello dati modulo per aggiungere dati al database
  • Eseguire un controllo delle convalide e visualizzare i 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: recuperare un record cliente dal database retrieve-customer-record

Hai creato un modello dati modulo seguendo l'articolo Crea 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 rilevanti del cliente in un database. La procedura seguente utilizza l’ID cliente per recuperare 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. Seleziona il campo ID cliente e l'icona Modifica regole. Viene visualizzata la finestra Editor regole.

  3. Seleziona l'icona + Crea per aggiungere una regola. Viene aperto l'Editor visivo.

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

  4. Seleziona l'elenco a discesa Seleziona stato e seleziona è cambiato.

    quando customeridischanged

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

  6. Selezionare 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-recuperedata

  8. Trascinare il campo ID cliente, nome, indirizzo di spedizione, stato e CAP dalla scheda Oggetti modulo al campo Rilascia oggetto o seleziona qui nella casella OUTPUT.

    dropobjectstooutputfield-recuperedata

    Seleziona Fine per salvare la regola. Nella finestra dell'editor di regole, seleziona Chiudi.

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

    informazioni-recupero

Passaggio 2: aggiungere l'indirizzo del cliente aggiornato al database updated-customer-address

Dopo aver recuperato i dettagli del cliente dal database, puoi aggiornare l’indirizzo di spedizione, lo stato e il codice postale. La procedura seguente richiama un servizio del modello dati modulo per aggiornare le informazioni sul cliente nel database:

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

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

    submit-rule

    Nell'opzione WHEN sono già selezionate le opzioni Invia e selezionate.

    invia-è-cliccato

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

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

    indirizzo-spedizione-aggiornamento

    dropobjectstoinputfield-updatedata

  5. Trascinare e rilasciare il campo Indirizzo di spedizione, Stato e CAP dalla scheda Oggetti modulo alla proprietà .nome tabella corrispondente (ad esempio, customerdetails.shippingAddress) dell'oggetto Rilasciare o selezionare qui nella casella INPUT. Tutti i campi con prefisso tablename (ad esempio, customerdetails in this use case) fungono da dati di input per il servizio di aggiornamento. Tutto il contenuto fornito in questi campi viene aggiornato nell’origine dati.

    note note
    NOTE
    Non trascinare i campi Nome e ID cliente nella proprietà tablename.property corrispondente, ad esempio customerdetails.name. Consente di evitare di aggiornare il nome e l’ID del cliente per errore.
  6. Trascina il campo ID cliente dalla scheda Oggetti modulo al campo ID nella casella INPUT. I campi senza un nome di tabella preceduto (ad esempio, customerdetails 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 customerdetails.

  7. Seleziona Fine per salvare la regola. Nella finestra dell'editor di regole, seleziona Chiudi.

  8. Visualizza 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 step-bonus-section-use-the-code-editor-to-run-validations-and-display-error-messages

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 inserito un ID cliente non esistente, deve essere visualizzato un messaggio di errore.

I moduli adattivi forniscono diversi componenti con convalide incorporate, ad esempio e-mail e campi numerici che puoi utilizzare per 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 record zero (0) (nessun record).

Nella procedura seguente viene illustrato come creare una regola per visualizzare un messaggio di errore se l'ID cliente immesso nel modulo non esiste nel database. La regola porta inoltre lo stato attivo al campo ID cliente e lo reimposta. La regola utilizza l'API dataIntegrationUtils del servizio modello dati modulo per verificare se l'ID cliente esiste nel database.

  1. Selezionare il campo ID cliente e l'icona Edit Rules. Viene visualizzata la finestra Editor regole.

  2. Seleziona l'icona + Crea per aggiungere una regola. Viene aperto l'Editor visivo.

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

  3. Seleziona l'elenco a discesa Seleziona stato e seleziona è cambiato.

    quando customeridischanged

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

  4. Passare da Editor visivo a Editor di codice. Il comando dell'interruttore si trova sul lato destro della finestra. Viene visualizzato l'Editor di codice, con un codice simile al seguente:

    editor di codice

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

    code language-javascript
    var inputs = {
        "id" : this
    };
    
  6. Sostituisci la sezione guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs) con il seguente codice:

    code language-javascript
    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. Visualizza l’anteprima del modulo adattivo. Immetti un ID cliente errato. Viene visualizzato un messaggio di errore.

    display-validation-error

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2