Skapa en knapp för att lägga till och ta bort ett avsnitt

I en interaktiv formulärdesign är det vanligt att ha ett eller flera avsnitt i formuläret som inte visas förrän användaren markerar ett alternativ för att inkludera det. Med Designer kan du lägga till en knapp med ett skript som dynamiskt lägger till eller tar bort ett visst avsnitt (delformulär) från formuläret när användaren klickar på en knapp.

I t.ex. det interaktiva exemplet Inköpsorder kan användaren klicka på knappen Lägg till kommentarer för att visa avsnittet Kommentarer (delformuläret kommentarer). Knappen har en av två växlande bildtexter, Lägg till kommentarer och Ta bort kommentarer, beroende på delformulärets aktuella tillstånd. Varje gång användaren klickar på knappen kontrollerar skriptet om delformuläret kommentarer visas och därefter uppdateras knappens bildtext i enlighet med detta.

Knappen utlöser ett skript som använder instanceManager, XML-formulärobjektmodellobjektet som styr skapande, borttagande och flyttning av formulärobjekt. När slutanvändaren tar bort delformuläret Kommentar tar objektet instanceManager bort delformuläret från både formulärdata-DOM (document object model) och från data-DOM.

Observera att instanceManager använder fyra metoder: addInstance, removeInstance, moveInstance och setInstances. Namnkonventionen för en instanceManager är delformulärets namn med ett ett understreck som prefix (_delformulärnamn). Syntaxen för instanceManager är _delformulärnamn.metodnamn().

I det interaktiva exemplet Inköpsorderformulär har formulärförfattaren skrivit följande skript i skriptredigeraren (JavaScript) med metoden setInstances för att lägga till och ta bort delformuläret kommentarer och ändra knappens bildtext. Observera att comments.count == 0 property returnerar antalet delformulärinstanser som instantierats.

// Invoke the Instance Manager to add and remove the comments subform. 
 
if (_comments.count == 0) {// The count property specifies the current number      
                                            // of instances instantiated. 
    _comments.setInstances(1);                                                // Add the comments subform. 
    this.resolveNode("caption.value.#text").value = "Clear Comments";                                                                                                            // Change the button's caption. 
} 
 
else { 
    _comments.setInstances(0);                                                // Remove the comments subform. 
    this.resolveNode("caption.value.#text").value = "Add Comments";                                                                                                            // Change the button's caption. 
}
Du kan också använda dialogrutan Action Builder på menyn Verktyg för att bygga gemensamma interaktiva funktioner i formulär som har flödesbaserad layout, utan att skriva skript.

Skapa Lägg till- och Ta bort-knappar

Genom att lägga till knappar i ett interaktivt formulär får slutanvändare möjlighet att starta en åtgärd, t.ex. att lägga till och ta bort instanser av delformulär som definierar avsnitt som objektrader i ett orderformulär.

Du kan dessutom lägga till en funktionsbeskrivning för Ta bort-knappen med orden ”Ta bort objekt” som visas när användaren placerar pekaren över knappen. Separata Ta bort-knappar är ett bra sätt att ge användare möjlighet att ta bort specifika rader från formuläret.

Det interaktiva exempelformuläret Inköpsorder har t.ex. en Lägg till objekt-knapp och en Ta bort-knapp märkt med ett ”X” för varje detaljdelformulär. När användaren klickar på knappen Lägg till artikel läggs en artikelrad till med hjälp av ett skript. När användaren klickar på en av Ta bort-knapparna tar ett skript bort den tillhörande artikelraden.

Du kan också använda dialogrutan Action Builder på menyn Verktyg för att bygga gemensamma interaktiva funktioner i formulär som har flödesbaserad layout, utan att skriva skript. Se Bygga åtgärder i formulär.

Knappen Lägg till artikel

Följande skript (JavaScript) i händelsen click för knappen Lägg till objekt gör att användaren kan lägga till en objektrad i det interaktiva exempelformuläret Inköpsorder. Skriptet beräknar också om formuläret så att fältet Summa innehåller den nya raden i beräkningen.

Eftersom användare bara lägger till artikelrader med knappen Lägg till artikel behöver skriptet inte verifiera värdet för minsta antal (förekomst).

// Invoke the Instance Manager to add one instance of the detail subform. 
_detail.addInstance(1); 
 
//Invoke the recalculate method to include the field values from the added subform in calculations. 
xfa.form.recalculate(1);

Knappen Ta bort

Följande skript (JavaScript) i Ta bort-knappens händelse click gör att användarna kan ta bort en instans av delformuläret detail från det interaktiva exemplet Inköpsorder med. Skriptet beräknar också om formuläret så att fältet Summa inte längre innehåller den borttagna raden i beräkningen. 

// Invoke the Instance Manager to remove the current instance of the detail subform. 
_detail.removeInstance(this.parent.index); 
 
// Invoke the recalculate method to update the form calculations. 
xfa.form.recalculate(1);

Eftersom det första lägsta förekomstvärdet för delformuläret detail är 2 måste skriptet minska det lägsta förekomstvärdet så att den som fyller i formuläret kan ta bort de två objektrader som automatiskt visas när formuläret återges. Det här skriptet har lagts till i delformuläret händelse initialize.

// Reset the minimum occurrence value of the detail subform. 
this.occur.min = "0";

Eftersom formuläret tillåter användarna att ta bort alla instanser av delformuläret detail, måste skriptet för händelse calculate för fältet Total (numTotal) verifiera att det finns minst en instans av fältet numAmount i delformuläret detail. Annars uppstår ett fel eftersom beräkningen inte hittar några förekomster av fältet numAmount. Det här skriptet har lagts till i Calculate-händelsen i fältet numTotal.

// Verify at least one instance of the numAmount field exists. 
if (exists(detail[0].numAmount) == 1) then 
    Sum(detail[*].numAmount) 
endif