Anpassade funktioner i Adaptive Forms (Core Components)
Introduktion
AEM Forms har stöd för anpassade funktioner, vilket gör att man kan definiera JavaScript-funktioner för att implementera komplexa affärsregler. Dessa anpassade funktioner gör att man kan förbättra blanketternas funktioner genom att underlätta hantering och bearbetning av inmatade data för att uppfylla specifika krav. De möjliggör också dynamisk ändring av formulärbeteende baserat på fördefinierade kriterier.
Användning av anpassade funktioner uses-of-custom-function
Fördelarna med att använda anpassade funktioner i Adaptive Forms är:
- Databearbetning: Anpassade funktioner hjälper dig att bearbeta data som anges i formulärfälten.
- Validering av data: Med anpassade funktioner kan du utföra anpassade kontroller av formulärindata och tillhandahålla angivna felmeddelanden.
- Dynamiskt beteende: Med anpassade funktioner kan du styra det dynamiska beteendet i dina formulär baserat på specifika villkor. Du kan till exempel visa/dölja fält, ändra fältvärden eller justera formulärlogiken dynamiskt.
- Integration: Du kan använda anpassade funktioner för att integrera med externa API:er eller tjänster. Det hjälper till att hämta data från externa källor, skicka data till externa Rest-slutpunkter eller utföra anpassade åtgärder baserade på externa händelser.
Anpassade funktioner är i huvudsak klientbibliotek som läggs till i JavaScript-filen. När du har skapat en anpassad funktion blir den tillgänglig i regelredigeraren så att användaren kan välja den i ett adaptivt formulär. De anpassade funktionerna identifieras av JavaScript kommentarer i regelredigeraren.
JavaScript-anteckningar som stöds för anpassade funktioner js-annotations
JavaScript-anteckningar används för att tillhandahålla metadata för JavaScript-kod. Det innehåller kommentarer som börjar med specifika symboler, till exempel /** och @. Anteckningarna innehåller viktig information om funktioner, variabler och andra element i koden. Adaptiv form stöder följande JavaScript-anteckningar för anpassade funktioner:
Namn
Namnet används för att identifiera den anpassade funktionen i regelredigeraren för ett adaptivt formulär. Följande syntaxer används för att namnge en anpassad funktion:
@name [functionName] <Function Name>
@function [functionName] <Function Name>
@func [functionName] <Function Name>
.functionName
är namnet på funktionen. Blanksteg är inte tillåtna.<Function Name>
är funktionens visningsnamn i regelredigeraren för ett adaptivt formulär.
Om funktionsnamnet är identiskt med namnet på själva funktionen kan du utelämna[functionName]
från syntaxen.
Parameter
Parametern är en lista med argument som används av anpassade funktioner. En funktion kan ha stöd för flera parametrar. Följande syntaxer används för att definiera en parameter i en anpassad funktion:
-
@param {type} name <Parameter Description>
-
@argument
{type} name <Parameter Description>
-
@arg
{type}
name <Parameter Description>
.{type}
representerar parametertypen. Tillåtna parametertyper är:- string: Representerar ett enda strängvärde.
- number: Representerar ett numeriskt värde.
- booleskt: Representerar ett enskilt booleskt värde (true eller false).
- sträng []: Representerar en array med strängvärden.
- tal[]: Representerar en matris med numeriska värden.
- boolesk[]: Representerar en matris med booleska värden.
- date: Representerar ett enda datumvärde.
- date[]: Representerar en matris med datumvärden.
- array: Representerar en generisk array som innehåller värden av olika typer.
- object: Representerar formulärobjektet som skickas till en anpassad funktion i stället för att skicka dess värde direkt.
- omfång: Representerar det globala objektet, som innehåller skrivskyddade variabler som formulärinstanser, målfältsinstanser och metoder för att utföra formulärändringar i anpassade funktioner. Den deklareras som den sista parametern i JavaScript-anteckningar och visas inte i regelredigeraren för ett adaptivt formulär. Omfångsparametern har åtkomst till formulärets eller komponentens objekt för att utlösa den regel eller händelse som krävs för formulärbearbetning. Om du vill ha mer information om det globala objektet och hur du använder det klickar du här.
Parametertypen är inte skiftlägeskänslig och blanksteg tillåts inte i parameternamnet.
<Parameter Description>
innehåller information om parameterns syfte. Det kan innehålla flera ord.
Valfria parametrar
Som standard är alla parametrar obligatoriska. Du kan definiera en parameter som valfri genom att antingen lägga till =
efter parametertypen eller genom att omsluta parameternamnet i []
. Parametrar som definieras som valfria i JavaScript-anteckningar visas som valfria i regelredigeraren.
Om du vill definiera en variabel som en valfri parameter kan du använda någon av följande syntaxer:
@param {type=} Input1
I ovanstående kodrad är Input1
en valfri parameter utan något standardvärde. Så här deklarerar du valfri parameter med standardvärdet:@param {string=<value>} input1
input1
som en valfri parameter med standardvärdet value
.
@param {type} [Input1]
I ovanstående kodrad är Input1
en valfri parameter utan något standardvärde. Så här deklarerar du valfri parameter med standardvärdet:@param {array} [input1=<value>]
input1
är en valfri parameter av arraytyp med standardvärdet value
.
Kontrollera att parametertypen omsluts av klammerparenteser {} och att parameternamnet omges av hakparenteser.
Titta på följande kodfragment, där input2 definieras som en valfri parameter:
/**
* optional parameter function
* @name OptionalParameterFunction
* @param {string} input1
* @param {string=} input2
* @return {string}
*/
function OptionalParameterFunction(input1, input2) {
let result = "Result: ";
result += input1;
if (input2 !== null) {
result += " " + input2;
}
return result;
}
Följande bild visas med den anpassade funktionen OptionalParameterFunction
i regelredigeraren:
Du kan spara regeln utan att ange ett värde för de obligatoriska parametrarna, men regeln körs inte och ett varningsmeddelande visas som:
När användaren lämnar den valfria parametern tom, skickas värdet "Odefinierad" till den anpassade funktionen för den valfria parametern.
Klicka här om du vill veta mer om hur du definierar valfria parametrar i JSDocs.
Returtyp
Returtypen anger vilken typ av värde som den anpassade funktionen returnerar efter körningen. Följande syntaxer används för att definiera en returtyp i en anpassad funktion:
-
@return {type}
-
@returns {type}
{type}
representerar funktionens returtyp. Följande returtyper tillåts:- string: Representerar ett enda strängvärde.
- number: Representerar ett numeriskt värde.
- booleskt: Representerar ett enskilt booleskt värde (true eller false).
- sträng []: Representerar en array med strängvärden.
- tal[]: Representerar en matris med numeriska värden.
- boolesk[]: Representerar en matris med booleska värden.
- date: Representerar ett enda datumvärde.
- date[]: Representerar en matris med datumvärden.
- array: Representerar en generisk array som innehåller värden av olika typer.
- objekt: Representerar formulärobjektet i stället för dess värde direkt.
Returtypen är inte skiftlägeskänslig.
Privat
Den anpassade funktionen som deklarerats som private visas inte i listan över anpassade funktioner i regelredigeraren för ett adaptivt formulär. Som standard är anpassade funktioner public. Syntaxen för att deklarera den anpassade funktionen som privat är @private
.
Riktlinjer när du skapar anpassade funktioner
Om du vill visa en lista över anpassade funktioner i regelredigeraren kan du använda något av följande format:
Funktionssats med eller utan jsdoc-kommentarer
Du kan skapa en anpassad funktion med eller utan jsdoc-kommentarer.
function functionName(parameters)
{
// code to be executed
}
Om användaren inte lägger till några JavaScript-anteckningar i den anpassade funktionen visas den i regelredigeraren med sitt funktionsnamn. Vi rekommenderar dock att du tar med JavaScript-anteckningar för förbättrad läsbarhet av anpassade funktioner.
Pilfunktion med obligatoriska JavaScript-anteckningar eller kommentarer
Du kan skapa en anpassad funktion med en pilfunktionssyntax:
/**
* test function
* @name testFunction
* @param {string} a parameter description
* @param {string=} b parameter description
* @return {string}
*/
testFunction = (a, b) => {
return a + b;
};
/** */
testFunction1=(a) => (return a)
/** */
testFunction2 = a => a + 100;
Om användaren inte lägger till några JavaScript-anteckningar i den anpassade funktionen visas inte den anpassade funktionen i regelredigeraren för ett anpassat formulär.
Funktionsuttryck med obligatoriska JavaScript-anteckningar eller kommentarer
Om du vill visa anpassade funktioner i regelredigeraren för ett adaptivt formulär skapar du anpassade funktioner i följande format:
/**
* test function
* @name testFunction
* @param {string} input1 parameter description
* @param {string=} input2 parameter description
* @return {string}
*/
testFunction = function(input1,input2)
{
// code to be executed
}
Om användaren inte lägger till några JavaScript-anteckningar i den anpassade funktionen visas inte den anpassade funktionen i regelredigeraren för ett anpassat formulär.
Skapa en anpassad funktion create-custom-function
Skapa ett klientbibliotek för att anropa anpassade funktioner i regelredigeraren. Mer information finns i Använda klientbibliotek.
Steg för att skapa anpassade funktioner är:
Krav för att skapa en anpassad funktion
Innan du börjar lägga till en anpassad funktion i din adaptiva Forms måste du se till att du har följande:
Programvara:
-
Vanlig textredigerare (IDE): En integrerad utvecklingsmiljö (IDE), som Microsoft Visual Studio Code, har avancerade funktioner för enklare redigering, även om en vanlig textredigerare kan fungera.
-
Git: Versionskontrollsystemet krävs för att hantera kodändringar. Om du inte har det installerat hämtar du det från https://git-scm.com.
Skapa ett klientbibliotek create-client-library
Du kan lägga till anpassade funktioner genom att lägga till ett klientbibliotek. Så här skapar du ett klientbibliotek:
Klona databasen
Klona din AEM Forms as a Cloud Service-databas:
-
Öppna kommandoraden eller terminalfönstret.
-
Navigera till önskad plats på datorn där du vill lagra databasen.
-
Kör följande kommando för att klona databasen:
git clone [Git Repository URL]
Det här kommandot hämtar databasen och skapar en lokal mapp för den klonade databasen på din dator. I hela den här handboken ser vi den här mappen som [AEMaaCS-projektkatalog].
Lägg till en klientbiblioteksmapp
Så här lägger du till en ny biblioteksmapp för klienten i [AEMaaCS-projektkatalogen]:
-
Öppna [AEMaaCS-projektkatalogen] i en redigerare.
-
Sök efter
ui.apps
. -
Lägg till ny mapp. Lägg till exempel till en mapp med namnet
experience-league
. -
Navigera till mappen
/experience-league/
och lägg till enClientLibraryFolder
. Skapa till exempel en klientbiblioteksmapp med namnetcustomclientlibs
.Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/
Lägg till filer och mappar i mappen Klientbibliotek
Lägg till följande i den tillagda klientbiblioteksmappen:
- .content.xml-fil
- js.txt, fil
- js-mapp
Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/experience-league/customclientlibs/
-
Lägg till följande kodrader i
.content.xml
:code language-javascript <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" categories="[customfunctionscategory]"/>
note note NOTE Du kan välja vilket namn som helst för egenskapen client library folder
ochcategories
. -
Lägg till följande kodrader i
js.txt
:code language-javascript #base=js function.js
-
Lägg till javascript-filen som
function.js
i mappenjs
som innehåller de anpassade funktionerna:code language-javascript /** * Calculates Age * @name calculateAge * @param {object} field * @return {string} */ function calculateAge(field) { var dob = new Date(field); var now = new Date(); var age = now.getFullYear() - dob.getFullYear(); var monthDiff = now.getMonth() - dob.getMonth(); if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) { age--; } return age; }
-
Spara filerna.
Inkludera den nya mappen i filter.xml:
-
Navigera till filen
/ui.apps/src/main/content/META-INF/vault/filter.xml
i [AEMaaCS-projektkatalogen]. -
Öppna filen och lägg till följande rad i slutet:
<filter root="/apps/experience-league" />
-
Spara filen.
Distribuera den nyligen skapade biblioteksmappen för klienter till AEM
Distribuera AEM as a Cloud Service, [AEMaaCS-projektkatalogen], till din Cloud Service. Så här distribuerar du till din Cloud Service:
-
Verkställ ändringarna
- Lägg till, implementera och skicka ändringarna i databasen med följande kommandon:
code language-javascript git add . git commit -a -m "Adding custom functions" git push
-
Distribuera den uppdaterade koden:
- Utlösa en distribution av koden via den befintliga pipeline-funktionen för hela stackar. Detta skapar och distribuerar automatiskt den uppdaterade koden.
Om du inte redan har konfigurerat en pipeline kan du läsa guiden Konfigurera en pipeline för AEM Forms as a Cloud Service.
När pipeline har körts blir den anpassade funktion som lagts till i klientbiblioteket tillgänglig i regelredigeraren Adaptiv form.
Lägga till klientbibliotek i ett adaptivt formulär use-custom-function
När du har distribuerat klientbiblioteket till Forms CS-miljön kan du använda funktionerna i ditt adaptiva formulär. Lägga till klientbiblioteket i ditt adaptiva formulär
-
Öppna formuläret i redigeringsläge. Om du vill öppna ett formulär i redigeringsläge markerar du ett formulär och väljer Edit.
-
Öppna innehållsläsaren och markera komponenten Guide Container i det adaptiva formuläret.
-
Klicka på ikonen för egenskaper för stödlinjebehållaren
-
Öppna fliken Basic och välj namnet på client library category i listrutan (välj i det här fallet
customfunctionscategory
).note note NOTE Du kan lägga till flera kategorier genom att ange en kommaavgränsad lista i fältet Client library category. -
Klicka på Done.
Du kan använda den anpassade funktionen i regelredigeraren för ett adaptivt formulär med JavaScript-anteckningar.
Använda en anpassad funktion i ett adaptivt formulär
I ett anpassat formulär kan du använda anpassade funktioner i regelredigeraren. Låt oss lägga till följande kod i JavaScript-filen (Function.js
) för att beräkna ålder baserat på födelsedatum (ÅÅÅÅ-MM-DD). Skapa en anpassad funktion som calculateAge()
som tar födelsedatumet som indata och returnerar ålder:
/**
* Calculates Age
* @name calculateAge
* @param {object} field
* @return {string}
*/
function calculateAge(field) {
var dob = new Date(field);
var now = new Date();
var age = now.getFullYear() - dob.getFullYear();
var monthDiff = now.getMonth() - dob.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) {
age--;
}
return age;
}
I ovanstående exempel anropas den anpassade funktionen calculateAge
när användaren anger födelsedatumet i formatet (ÅÅÅÅ-MM-DD) och sedan returnerar ålder.
Låt oss förhandsgranska formuläret för att se hur de anpassade funktionerna implementeras via regelredigeraren:
Ange alternativ för listrutor med anpassade funktioner
Regelredigeraren i Core Components stöder inte egenskapen Set Options of för att ange alternativ för listrutelistan vid körning. Du kan dock ange alternativ för listrutor med anpassade funktioner.
Titta på koden nedan för att se hur vi kan ange alternativ för listrutor med anpassade funktioner:
/**
* @name setEnums
* @returns {string[]}
**/
function setEnums() {
return ["0","1","2","3","4","5","6"];
}
/**
* @name setEnumNames
* @returns {string[]}
**/
function setEnumNames() {
return ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
}
I ovanstående kod används setEnums
för att ange egenskapen enum
och setEnumNames
används för att ange egenskapen enumNames
för listrutan.
Låt oss skapa en regel för knappen Next
, som anger värdet för alternativet för nedrullningsbar lista när användaren klickar på knappen Next
:
Se bilden nedan för att visa var alternativen i listrutan ställs in när du klickar på knappen Visa:
Stöd för asynkrona funktioner i anpassade funktioner support-of-async-functions
Asynkrona anpassade funktioner visas inte i regelredigeringslistan. Det går dock att anropa asynkrona funktioner i anpassade funktioner som skapats med synkrona funktionsuttryck.
Titta på koden nedan för att se hur vi kan anropa asynkrona funktioner med anpassade funktioner:
async function asyncFunction() {
const response = await fetch('https://petstore.swagger.io/v2/store/inventory');
const data = await response.json();
return data;
}
/**
* callAsyncFunction
* @name callAsyncFunction callAsyncFunction
*/
function callAsyncFunction() {
asyncFunction()
.then(responseData => {
console.log('Response data:', responseData);
})
.catch(error => {
console.error('Error:', error);
});
}
I ovanstående exempel är funktionen asyncFunction en asynchronous function
. Den utför en asynkron åtgärd genom att göra en GET
-begäran till https://petstore.swagger.io/v2/store/inventory
. Det väntar på svar med await
, tolkar svarstexten som JSON med response.json()
och returnerar sedan data. Funktionen callAsyncFunction
är en synkron anpassad funktion som anropar funktionen asyncFunction
och visar svarsdata i konsolen. Även om funktionen callAsyncFunction
är synkron anropar den asynkrona funktionen asyncFunction och hanterar resultatet med programsatserna then
och catch
.
För att se hur den fungerar kan vi lägga till en knapp och skapa en regel för knappen som anropar den asynkrona funktionen när en knapp klickas.
Titta på bilden för konsolfönstret nedan för att visa att när användaren klickar på knappen Fetch
anropas den anpassade funktionen callAsyncFunction
som i sin tur anropar en asynkron funktion asyncFunction
. Inspect i konsolfönstret för att visa svaret på knappen:
Låt oss dyka upp i funktionerna för anpassade funktioner.
Olika funktioner för anpassade funktioner
Du kan använda anpassade funktioner för att lägga till anpassade funktioner i formulär. Dessa funktioner har stöd för olika funktioner, som att arbeta med specifika fält, använda globala fält eller cachelagring. Tack vare denna flexibilitet kan ni anpassa formulären efter organisationens behov.
Fält- och globala omfångsobjekt i anpassade funktioner support-field-and-global-objects
Fältobjekt refererar till de enskilda komponenterna eller elementen i ett formulär, t.ex. textfält och kryssrutor. Globals-objektet innehåller skrivskyddade variabler som formulärinstans, målfältsinstans och metoder för att göra formulärändringar i anpassade funktioner.
param {scope} globals
måste vara den sista parametern och visas inte i regelredigeraren för ett anpassat formulär.Låt oss lära oss hur anpassade funktioner använder fält och globala objekt med hjälp av ett Contact Us
-formulär med olika användningsfall.
SetProperty
Lägg till följande kod i den anpassade funktionen enligt beskrivningen i avsnittet create-custom-function för att ange formulärfältet som Required
.
code language-javascript |
---|
|
note note |
---|
NOTE |
|
I det här exemplet valideras panelen personaldetails
när du klickar på knappen. Om inga fel upptäcks på panelen visas en annan panel, feedback
-panelen, när du klickar på knappen.
Låt oss skapa en regel för knappen Next
som validerar panelen personaldetails
och gör panelen feedback
synlig när användaren klickar på knappen Next
.
Se bilden nedan för att visa var panelen personaldetails
valideras när du klickar på knappen Next
. Om alla fält i personaldetails
valideras blir panelen feedback
synlig.
Om det finns fel i fälten på panelen personaldetails
visas de på fältnivå när du klickar på knappen Next
och panelen feedback
visas inte.
Lägg till följande kod i den anpassade funktionen enligt anvisningarna i avsnittet create-custom-function för att validera fältet.
code language-javascript |
---|
|
note note |
---|
NOTE |
Om inget argument skickas i funktionen validate() valideras formuläret. |
I det här exemplet används ett anpassat valideringsmönster för fältet contact
. Användare måste ange ett telefonnummer som börjar med 10
följt av 8
siffror. Om användaren anger ett telefonnummer som inte börjar med 10
eller innehåller fler eller färre än 8
siffror visas ett valideringsfelmeddelande när knappen klickar:
Nästa steg är nu att skapa en regel för knappen Next
som validerar fältet contact
vid knappklicket.
Se bilden nedan för att visa att om användaren anger ett telefonnummer som inte börjar med 10
visas ett felmeddelande på fältnivå:
Om användaren anger ett giltigt telefonnummer och alla fält på panelen personaldetails
valideras visas panelen feedback
på skärmen:
Lägg till följande kod i den anpassade funktionen enligt anvisningarna i avsnittet create-custom-function för att återställa panelen.
code language-javascript |
---|
|
note note |
---|
NOTE |
Om inget argument skickas i funktionen reset() valideras formuläret. |
I det här exemplet återställs panelen personaldetails
när du klickar på knappen Clear
. Nästa steg är att skapa en regel för knappen Clear
som återställer panelen när du klickar på knappen.
Se bilden nedan för att visa att panelen personaldetails
återställs om användaren klickar på knappen clear
:
Du kan använda funktionen markFieldAsInvalid()
för att definiera ett fält som ogiltigt och ange ett anpassat felmeddelande på fältnivå. Värdet fieldIdentifier
kan vara fieldId
, field qualifiedName
eller field dataRef
. Värdet för objektet option
kan vara {useId: true}
, {useQualifiedName: true}
eller {useDataRef: true}
.
Syntaxerna som används för att markera ett fält som ogiltigt och ange ett anpassat meddelande är:
globals.functions.markFieldAsInvalid(field.$id,"[custom message]",{useId: true});
globals.functions.markFieldAsInvalid(field.$qualifiedName, "[custom message]", {useQualifiedName: true});
globals.functions.markFieldAsInvalid(field.$dataRef, "[custom message]", {useDataRef: true});
Lägg till följande kod i den anpassade funktionen enligt beskrivningen i avsnittet create-custom-function för att aktivera ett anpassat meddelande på fältnivå.
code language-javascript |
---|
|
I det här exemplet visas ett anpassat meddelande på fältnivå om användaren skriver färre än 15 tecken i textrutan för kommentarer.
Nästa steg är att skapa en regel för fältet comments
:
Se demonstrationen nedan för att visa att om du anger negativ feedback i fältet comments
utlöses visningen av ett anpassat meddelande på fältnivå:
Om användaren skriver in mer än 15 tecken i textrutan för kommentarer valideras fältet och formuläret skickas:
Följande kodrad:globals.functions.submitForm(globals.functions.exportData(), false);
används för att skicka formulärdata efter manipulering.
- Det första argumentet är de data som ska skickas.
- Det andra argumentet anger om formuläret ska valideras innan det skickas in. Det är
optional
och inställt somtrue
som standard. - Det tredje argumentet är
contentType
i överföringen, som också är valfritt med standardvärdet sommultipart/form-data
. De andra värdena kan varaapplication/json
ochapplication/x-www-form-urlencoded
.
Lägg till följande kod i den anpassade funktionen enligt beskrivningen i avsnittet create-custom-function för att skicka manipulerade data till servern:
code language-javascript |
---|
|
I det här exemplet skickas NA
till servern när formuläret skickas om användaren lämnar textrutan comments
tom.
Skapa nu en regel för knappen Submit
som skickar data:
Titta på bilden för console window
nedan för att visa att om användaren lämnar textrutan comments
tom så skickas värdet som NA
på servern:
Du kan även kontrollera konsolfönstret för att visa data som skickats till servern:
Lägg till följande kodrad enligt beskrivningen i avsnittet create-custom-function för att anpassa överförings- eller felmeddelandet för formulärinskickning och visa formulärinskickningsmeddelandena i en modal ruta:
code language-javascript |
---|
|
I det här exemplet, när användaren använder de anpassade funktionerna customSubmitSuccessHandler
och customSubmitErrorHandler
, visas meddelanden om lyckade och misslyckade åtgärder i ett modalt format. JavaScript-funktionen showModal(type, message)
används för att dynamiskt skapa och visa en modal dialogruta på en skärm.
Skapa nu en regel för att skicka in formulär:
Se bilden nedan för att visa att när formuläret har skickats visas meddelandet om att det lyckades visas i ett modalt format:
På samma sätt kan vi skapa en regel för misslyckade formulärinskickade formulär:
Se bilden nedan för att visa att felmeddelandet visas i ett modalt format när formuläröverföringen misslyckas:
Funktionerna Default submit Form Success Handler
och Default submit Form Error Handler
är tillgängliga i paketet om du vill visa om formuläret har skickats in eller misslyckats på ett standardsätt.
Om den anpassade överföringshanteraren inte fungerar som förväntat i befintliga AEM projekt eller formulär, se avsnittet felsökning.
Regler som skapas med den visuella regelredigeraren på en repeterbar panel tillämpas på den sista instansen av den repeterbara panelen. Om du vill skriva en regel för en viss instans av den repeterbara panelen kan vi använda en anpassad funktion.
Låt oss skapa ett annat formulär för att samla in information om resenärer som är på väg till en destination. En resande panel läggs till som en upprepningsbar panel, där användaren kan lägga till information för 5 resenärer med knappen Add Traveler
.
Lägg till följande kodrad enligt beskrivningen i avsnittet create-custom-function för att utföra åtgärder i en specifik instans av den repeterbara panelen, förutom den sista:
code language-javascript |
---|
|
I det här exemplet utför den anpassade funktionen hidePanelInRepeatablePanel
en åtgärd i en specifik instans av den repeterbara panelen. I ovanstående kod representerar travelerinfo
den repeterbara panelen. Koden repeatablePanel[1].traveler, {visible: false}
döljer panelen i den andra instansen av den repeterbara panelen.
Låt oss lägga till en knapp med etiketten Hide
och lägga till en regel som döljer den andra instansen av en repeterbar panel.
Titta på videon nedan för att visa att panelen i den andra upprepningsbara instansen döljs när användaren klickar på Hide
:
embed |
---|
|
Lägg till följande kodrad, enligt beskrivningen i avsnittet create-custom-function , för att läsa in det förfyllda värdet i ett fält när formuläret initieras:
code language-javascript |
---|
|
I ovanstående kod fyller funktionen testImportData
i förväg i textrutefältet Booking Amount
när formuläret läses in. Låt oss anta att bokningsformuläret kräver att det minsta bokningsbeloppet är 10,000
.
Låt oss skapa en regel vid formulärinitiering, där värdet i textrutefältet Booking Amount
är förifyllt med ett angivet värde när formuläret läses in:
Titta på skärmbilden nedan som visar att när formuläret läses in är värdet i textrutan Booking Amount
förifyllt med ett angivet värde:
Lägg till följande kodrad, enligt beskrivningen i avsnittet create-custom-function , för att ange fokus på det angivna fältet när användaren klickar på knappen Submit
:
code language-javascript |
---|
|
Låt oss lägga till en regel till knappen Submit
för att ställa in fokus på fältet Email ID
när någon klickar på det:
Titta på skärmbilden nedan som visar att när användaren klickar på knappen Submit
ställs fokus in på fältet Email ID
:
note note |
---|
NOTE |
Du kan använda den valfria parametern $focusOption om du vill fokusera på nästa eller föregående fält i förhållande till fältet email . |
dispatchEvent
Lägg till följande kodrad, enligt beskrivningen i avsnittet create-custom-function , för att lägga till en panel när användaren klickar på knappen Add Traveler
med egenskapen dispatchEvent
:
code language-javascript |
---|
|
Låt oss lägga till en regel till knappen Add Traveler
för att lägga till den repeterbara panelen när någon klickar på den:
Se gif nedan som visar att panelen läggs till med egenskapen dispatchEvent
när användaren klickar på knappen Add Traveler
:
Lägg på samma sätt till följande kodrad, enligt beskrivningen i avsnittet create-custom-function , för att ta bort en panel när användaren klickar på knappen Delete Traveler
med egenskapen dispatchEvent
:
code language-javascript |
---|
|
Låt oss lägga till en regel till knappen Delete Traveler
för att ta bort den repeterbara panelen när någon klickar på den:
Se gif nedan som visar att när användaren klickar på knappen Delete Traveler
tas den resande panelen bort med egenskapen dispatchEvent
:
Cachelagringsstöd för anpassad funktion
Adaptiv Forms implementerar cachning för anpassade funktioner för att förbättra svarstiden samtidigt som den anpassade funktionslistan hämtas i regelredigeraren. Ett meddelande som Fetched following custom functions list from cache
visas i filen error.log
.
Om de anpassade funktionerna ändras blir cachningen ogiltig och den tolkas.
Felsökning troubleshooting
-
Utför följande steg om den anpassade överföringshanteraren inte fungerar som förväntat i befintliga AEM projekt eller formulär:
-
Kontrollera att kärnkomponentversionen för är uppdaterad till 3.0.18 och senare. För befintliga AEM och formulär finns det dock ytterligare steg att utföra:
-
För det AEM projektet bör användaren ersätta alla instanser av
submitForm('custom:submitSuccess', 'custom:submitError')
medsubmitForm()
och distribuera projektet via Cloud Manager pipeline. -
Om de anpassade överföringshanterarna inte fungerar som de ska i befintliga formulär måste användaren öppna och spara regeln
submitForm
på knappen Skicka med regelredigeraren. Den här åtgärden ersätter den befintliga regeln frånsubmitForm('custom:submitSuccess', 'custom:submitError')
medsubmitForm()
i formuläret.
-
-
Om det uppstår ett fel i JavaScript-filen som innehåller kod för anpassade funktioner visas inte de anpassade funktionerna i regelredigeraren i ett anpassat formulär. Om du vill kontrollera listan med anpassade funktioner kan du navigera till filen
error.log
för felet. Om ett fel uppstår visas listan med anpassade funktioner tom:Om det inte finns något fel hämtas den anpassade funktionen och visas i filen
error.log
. Ett meddelande somFetched following custom functions list
visas i filenerror.log
:
Överväganden
-
parameter type
ochreturn type
stöder inteNone
. -
De funktioner som inte stöds i den anpassade funktionslistan är:
- Generatorfunktioner
- Async-/Await-funktioner
- Metoddefinitioner
- Klassmetoder
- Standardparametrar
- Restparametrar
Se även see-also
- Skapa ett AEM anpassat formulär
- Lägg till ett AEM anpassat formulär på AEM Sites-sidan
- Använda teman i ett AEM anpassat formulär
- Lägg till komponenter i ett AEM anpassat formulär
- Använd CAPTCHA i en AEM anpassad form
- Generera PDF-version (DoR) av ett AEM adaptivt formulär
- Översätt en AEM adaptiv form
- Aktivera Adobe Analytics för ett adaptivt formulär för att spåra formuläranvändning
- Ansluta anpassat formulär till Microsoft SharePoint
- Ansluta anpassat formulär till Microsoft Power Automate
- Ansluta anpassat formulär till Microsoft OneDrive
- Ansluta anpassat formulär till Microsoft Azure Blob Storage
- Ansluta anpassat formulär till Salesforce
- Använda Adobe Sign i en AEM anpassad form
- Lägga till en ny språkinställning för ett adaptivt formulär
- Skicka adaptiva formulärdata till en databas
- Skicka data för anpassat formulär till en REST-slutpunkt
- Skicka anpassade formulärdata till AEM arbetsflöde
- Använd Forms Portal för att lista AEM Adaptive Forms på en AEM webbplats
- Lägga till versioner, kommentarer och anteckningar i ett adaptivt formulär
- Jämför adaptiv Forms