Zelfstudie: regels toepassen op aangepaste formuliervelden tutorial-apply-rules-to-adaptive-form-fields

06-apply-rules-to-adaptive-form_main

Dit leerprogramma is een stap in creeert Uw Eerste AanpassingsVormreeksen. De Adobe raadt aan de reeks in chronologische volgorde te volgen om de volledige Gebruikssituatie van de zelfstudie te begrijpen, uit te voeren en te demonstreren.

Over de zelfstudie about-the-tutorial

Met regels kunt u interactiviteit, bedrijfslogica en slimme validaties toevoegen aan een adaptief formulier. Adaptieve formulieren hebben een ingebouwde regeleditor. De regelredacteur verstrekt belemmering-en-dalingsfunctionaliteit, gelijkend op geleide reizen. De methode slepen en neerzetten is de snelste en eenvoudigste methode om regels te maken. De regelredacteur verstrekt ook een codevenster voor gebruikers geinteresseerd in het testen van hun coderingsvaardigheden of het nemen van de regels aan het volgende niveau.

U kunt meer over de regelredacteur bij Aangepaste de regelredacteur van Formsleren.

Aan het einde van de zelfstudie leert u regels maken voor:

  • Een service van het formuliergegevensmodel aanroepen om gegevens uit de database op te halen
  • Een service van het formuliergegevensmodel aanroepen om gegevens aan de database toe te voegen
  • Een validatiecontrole uitvoeren en foutberichten weergeven

Met interactieve afbeeldingen van GIFFEN aan het einde van elke sectie van de zelfstudie leert u de functionaliteit van het formulier dat u maakt en controleert u deze.

Stap 1: Haal een klantenverslag van het gegevensbestand terug retrieve-customer-record

U creeerde een model van vormgegevens door te volgen creeert modelgegevensmodelartikel. Nu, kunt u de regelredacteur gebruiken om de diensten van het Gegevensmodel van Forms aan te halen en informatie aan het gegevensbestand toe te voegen.

Elke klant krijgt een uniek klant-id-nummer toegewezen, waarmee relevante klantgegevens in een database kunnen worden geïdentificeerd. In de onderstaande procedure wordt de klant-id gebruikt om gegevens op te halen uit de database:

  1. Open het aangepaste formulier voor bewerking.

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

  2. Selecteer het veld Customer ID en selecteer het pictogram Edit Rules . Het venster van de Redacteur van de Regel opent.

  3. Selecteer het pictogram + Create om een regel toe te voegen. Het opent de Visuele Redacteur.

    In de Visuele Editor wordt de instructie WHEN standaard geselecteerd. Bovendien wordt het formulierobject (in dit geval Customer ID ) waaruit u de regeleditor hebt gestart, opgegeven in de instructie WHEN .

  4. Selecteer de vervolgkeuzelijst Select State en selecteer is changed .

    whenccustomanged

  5. Selecteer Invoke Service in de vervolgkeuzelijst Select Action in de instructie THEN .

  6. Selecteer de service Retrieve Shipping Address in de vervolgkeuzelijst Select .

  7. Sleep het veld Customer ID van het tabblad Formulierobjecten naar het veld Drop object or select here in het vak INPUT .

    dropobjectstoinputfield-teruggewonnen gegevens

  8. Sleep het veld Customer ID, Name, Shipping Address, State, and Zip Code van het tabblad Formulierobjecten naar het veld Drop object or select here in het vak OUTPUT .

    dropobjectstooutputfield-teruggewonnen gegevens

    Selecteer Done om de regel op te slaan. Selecteer Close in het regeleditorvenster.

  9. Geef een voorvertoning weer van het adaptieve formulier. Voer een id in het veld Customer ID in. Het formulier kan nu klantgegevens uit de database ophalen.

    terugwinnen-informatie

Stap 2: Voeg het bijgewerkte klantenadres aan het gegevensbestand toe updated-customer-address

Nadat de klantgegevens uit de database zijn opgehaald, kunt u het verzendadres, de provincie en de postcode bijwerken. Met de onderstaande procedure wordt een service Formuliergegevensmodel aangeroepen om klantgegevens bij te werken naar de database:

  1. Selecteer het veld Submit en selecteer het pictogram Edit Rules . Het venster van de Redacteur van de Regel opent.

  2. Selecteer de regel Submit - Click en selecteer het pictogram Edit . De opties voor het bewerken van de regel Verzenden worden weergegeven.

    voorleggen-regel

    In de optie WHEN zijn de opties Submit en is clicked al geselecteerd.

    voorleggen-is-geklikt

  3. Selecteer de optie + Add Statement in de optie THEN . Selecteer Invoke Service in de vervolgkeuzelijst Select Action .

  4. Selecteer de service Update Shipping Address in de vervolgkeuzelijst Select .

    update-verschepend-adres

    dropobjectstoinputfield-updatedata

  5. Sleep het veld Shipping Address, State, and Zip Code van de tab Form Objects naar de overeenkomstige eigenschap tableName.property (bijvoorbeeld customerdetails.ShippingAddress) van het veld Drop object or select here in het vak INPUT . Alle velden met een tabelnaam (bijvoorbeeld details van de klant in dit geval) fungeren als invoergegevens voor de updateservice. Alle inhoud die in deze velden wordt geleverd, wordt bijgewerkt in de gegevensbron.

    note note
    NOTE
    Sleep de velden Name en Customer ID niet naar de bijbehorende eigenschap tabName.property (bijvoorbeeld customerdetails.name). Zo voorkomt u per ongeluk dat de naam en id van de klant worden bijgewerkt.
  6. Sleep het veld Customer ID van de tab Form Objects naar het veld ID in het vak INPUT . Velden zonder een vooraf ingestelde tabelnaam (bijvoorbeeld klantgegevens in dit geval) fungeren als zoekparameter voor de updateservice. Het id gebied in dit gebruiksgeval identificeert uniek een verslag in de klantDetails lijst.

  7. Selecteer Done om de regel op te slaan. Selecteer Close in het regeleditorvenster.

  8. Geef een voorvertoning weer van het adaptieve formulier. Haal de gegevens van een klant op, werk het verzendadres bij en verzend het formulier. Wanneer u de details van dezelfde klant opnieuw ophaalt, wordt het bijgewerkte verzendadres weergegeven.

Stap 3: (sectie Bonus) Gebruik de code-editor om validaties uit te voeren en foutberichten weer te geven step-bonus-section-use-the-code-editor-to-run-validations-and-display-error-messages

Voer de validatie op het formulier uit om te controleren of de gegevens in het formulier correct zijn en of er een foutbericht wordt weergegeven als er onjuiste gegevens zijn. Als bijvoorbeeld een niet-bestaande klant-id in het formulier wordt ingevoerd, moet een foutbericht worden weergegeven.

Aangepaste formulieren bieden verschillende componenten ingebouwde validaties, zoals e-mail en numerieke velden die u kunt gebruiken voor veelvoorkomende gebruiksgevallen. Gebruik de regeleditor voor geavanceerde gebruiksgevallen bijvoorbeeld om een foutbericht weer te geven wanneer de database nul (0) records (geen records) retourneert.

De volgende procedure laat zien hoe u een regel maakt om een foutbericht weer te geven als de klant-id die u in het formulier hebt ingevoerd, niet bestaat in de database. Met de regel wordt ook de focus naar het veld Customer ID gebracht en opnieuw ingesteld. De regel gebruikt dataIntegrationUtils API van de modeldienst van vormgegevensom te controleren of identiteitskaart van de Klant in het gegevensbestand bestaat.

  1. Selecteer het veld Customer ID en selecteer het pictogram Edit Rules . Het venster Rule Editor wordt geopend.

  2. Selecteer het pictogram + Create om een regel toe te voegen. Het opent de Visuele Redacteur.

    In de Visuele Editor wordt de instructie WHEN standaard geselecteerd. Bovendien wordt het formulierobject (in dit geval Customer ID ) waaruit u de regeleditor hebt gestart, opgegeven in de instructie WHEN .

  3. Selecteer de vervolgkeuzelijst Select State en selecteer is changed .

    whenccustomanged

    Selecteer Invoke Service in de vervolgkeuzelijst Select Action in de instructie THEN .

  4. Schakel van Visual Editor naar Code Editor . De schakelaarcontrole is op de rechterkant van het venster. De Redacteur van de Code opent, tonend code gelijkend op het volgende:

    code-redacteur

  5. Vervang de sectie met invoervariabelen door de volgende code:

    code language-javascript
    var inputs = {
        "id" : this
    };
    
  6. Vervang de sectie guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs) door de volgende code:

    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. Geef een voorvertoning weer van het adaptieve formulier. Voer een onjuiste klant-id in. Er verschijnt een foutbericht.

    vertoning-bevestiging-fout

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