Självstudiekurs: Använda regler i anpassade formulärfält tutorial-apply-rules-to-adaptive-form-fields
Den här självstudiekursen är ett steg i serien Create Your First Adaptive Form . Adobe rekommenderar att du följer serien i kronologisk ordning för att förstå, utföra och demonstrera det fullständiga exemplet med självstudiekurser.
Om självstudiekursen about-the-tutorial
Du kan använda regler för att lägga till interaktivitet, affärslogik och smarta valideringar i ett anpassat formulär. Anpassningsbara formulär har en inbyggd regelredigerare. Regelredigeraren har en dra och släpp-funktion som liknar guidade rundturer. Metoden dra och släpp är den snabbaste och enklaste metoden att skapa regler. Regelredigeraren innehåller också ett kodfönster för användare som vill testa sina kodningskunskaper eller ta reglerna till nästa nivå.
Du kan läsa mer om regelredigeraren på Anpassad regelredigerare för Forms.
I slutet av självstudiekursen kommer du att lära dig att skapa regler för att:
- Anropa en formulärdatamodelltjänst för att hämta data från databasen
- Anropa en tjänst för formulärdatamodell för att lägga till data i databasen
- Kör en valideringskontroll och visa felmeddelanden
Med hjälp av interaktiva GIF-bilder i slutet av varje avsnitt i självstudiekursen kan du snabbt lära dig och validera funktionaliteten i det formulär du bygger.
Steg 1: Hämta en kundpost från databasen retrieve-customer-record
Du skapade en formulärdatamodell genom att följa artikeln Skapa formulärdatamodell . Nu kan du använda regelredigeraren för att anropa Forms datamodelltjänster för att hämta och lägga till information i databasen.
Varje kund tilldelas ett unikt Kund-ID-nummer som hjälper till att identifiera relevanta kunddata i en databas. I proceduren nedan används Kund-ID för att hämta information från databasen:
-
Öppna det adaptiva formuläret för redigering.
http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html
-
Markera fältet Customer ID och välj ikonen Edit Rules . Regelredigeraren öppnas.
-
Välj ikonen + Create om du vill lägga till en regel. Den öppnar Visual Editor.
I Visual Editor är programsatsen WHEN markerad som standard. Formulärobjektet (i det här fallet Customer ID) från vilket du startade regelredigeraren anges i programsatsen WHEN.
-
Markera listrutan Select State och välj is changed.
-
Välj Invoke Service i listrutan Select Action i programsatsen THEN.
-
Välj tjänsten Retrieve Shipping Address i listrutan Select.
-
Dra och släpp fältet Customer ID från fliken Formulärobjekt till fältet Drop object or select here i rutan INPUT.
-
Dra och släpp fältet Customer ID, Name, Shipping Address, State, and Zip Code från fliken Formulärobjekt till fältet Drop object or select here i rutan OUTPUT.
Välj Done om du vill spara regeln. Välj Close i regelredigeringsfönstret.
-
Förhandsgranska det adaptiva formuläret. Ange ett ID i fältet Customer ID. Formuläret kan nu hämta kundinformation från databasen.
Steg 2: Lägg till den uppdaterade kundadressen i databasen updated-customer-address
När kundinformationen har hämtats från databasen kan du uppdatera leveransadress, leveransstatus och postnummer. Proceduren nedan anropar en Form Data Model-tjänst för att uppdatera kundinformationen till databasen:
-
Markera fältet Submit och välj ikonen Edit Rules . Regelredigeraren öppnas.
-
Markera regeln Submit - Click och välj ikonen Edit . Alternativen för att redigera regeln Skicka visas.
I alternativet WHEN är alternativen Submit och is clicked redan markerade.
-
Välj alternativet + Add Statement i alternativet THEN. Välj Invoke Service i listrutan Select Action.
-
Välj tjänsten Update Shipping Address i listrutan Select.
-
Dra och släpp fältet Shipping Address, State, and Zip Code från fliken Form Objects till motsvarande tabellnamnsegenskap (till exempel kundinformation .shippingAddress) för fältet Drop object or select here i rutan INPUT. Alla fält med tabellnamn som prefix (t.ex. kundinformation i det här fallet) fungerar som indata för uppdateringstjänsten. Allt innehåll i dessa fält uppdateras i datakällan.
note note NOTE Dra och släpp inte fälten Name och Customer ID till motsvarande tabellename.property (till exempel customerdetails.name). Det hjälper till att undvika att uppdatera kundens namn och ID av misstag. -
Dra och släpp fältet Customer ID från fliken Form Objects till ID-fältet i rutan INPUT. Fält utan ett prefix-tabellnamn (t.ex. kundinformation i det här fallet) fungerar som sökparametrar för uppdateringstjänsten. Fältet id i det här användningsfallet identifierar en post i tabellen customerDetails unikt.
-
Välj Done om du vill spara regeln. Välj Close i regelredigeringsfönstret.
-
Förhandsgranska det adaptiva formuläret. Hämta information om en kund, uppdatera leveransadressen och skicka in formuläret. När du hämtar information om samma kund igen visas den uppdaterade leveransadressen.
Steg 3: (Bonusavsnitt) Använd kodredigeraren för att köra valideringar och visa felmeddelanden step-bonus-section-use-the-code-editor-to-run-validations-and-display-error-messages
Du bör köra valideringen i formuläret för att säkerställa att de data som anges i formuläret är korrekta och att ett felmeddelande visas om felaktiga data finns. Om t.ex. ett icke-befintligt kund-ID anges i formuläret, ska ett felmeddelande visas.
Adaptiva formulär innehåller flera komponenter med inbyggda valideringar, till exempel e-post och numeriska fält som du kan använda för vanliga användningsområden. Använd regelredigeraren för avancerad användning, till exempel för att visa ett felmeddelande när databasen returnerar noll (0) poster (inga poster).
Följande procedur visar hur du skapar en regel som visar ett felmeddelande om det kund-ID som anges i formuläret inte finns i databasen. Regeln ger även fokus till och återställer fältet Customer ID. Regeln använder API:t dataIntegrationUtils för formulärdatamodelltjänsten för att kontrollera om det finns ett kund-ID i databasen.
-
Markera fältet Customer ID och välj ikonen
Edit Rules
. Fönstret Rule Editor öppnas. -
Välj ikonen + Create om du vill lägga till en regel. Den öppnar Visual Editor.
I Visual Editor är programsatsen WHEN markerad som standard. Formulärobjektet (i det här fallet Customer ID) från vilket du startade regelredigeraren anges i programsatsen WHEN.
-
Markera listrutan Select State och välj is changed.
Välj Invoke Service i listrutan Select Action i programsatsen THEN.
-
Växla från Visual Editor till Code Editor. Växelkontrollen finns till höger i fönstret. Kodredigeraren öppnas och visar kod som liknar följande:
-
Ersätt indatavariabelavsnittet med följande kod:
code language-javascript var inputs = { "id" : this };
-
Ersätt avsnittet
guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs)
med följande kod: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); } } });
-
Förhandsgranska det adaptiva formuläret. Ange ett felaktigt kund-ID. Ett felmeddelande visas.