Aangepaste functies in Adaptive Forms (Core Components)
Inleiding
AEM Forms 6.5 introduceerde de capaciteit om de functies van JavaScript te bepalen die in het bepalen van complexe bedrijfsregels kunnen worden gebruikt gebruikend de regelredacteur. AEM Forms biedt een aantal van dergelijke aangepaste functies uit de verpakking, maar u hebt de behoefte om uw eigen aangepaste functies te definiëren en deze in meerdere formulieren te gebruiken.
De aangepaste functies vergroten de mogelijkheden van formulieren door het bewerken en verwerken van ingevoerde gegevens te vergemakkelijken om aan bepaalde vereisten te voldoen. Ze maken het ook mogelijk het formuliergedrag dynamisch te wijzigen op basis van vooraf gedefinieerde criteria.
In Aanpassings Forms, kunt u douanefuncties binnen de regelredacteur van een Aangepaste Vormgebruiken om specifieke bevestigingsregels voor vormgebieden tot stand te brengen.
Laten we begrijpen hoe een aangepaste functie wordt gebruikt waarbij gebruikers het e-mailadres invoeren. Bovendien moet het ingevoerde e-mailadres een specifieke notatie hebben (het bevat een '@'-symbool en een domeinnaam). Maak een aangepaste functie als "ValidateEmail", die het e-mailadres als invoer gebruikt en waar retourneert als het geldig en anders onwaar is.
function ValidateEmail(inputText)
{
var email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(email))
{
alert("Valid email address!");
return true;
}
else
{
alert("Invalid email address!");
return false;
}
}
In het bovenstaande voorbeeld wordt de aangepaste functie "ValidateEmail" aangeroepen om te controleren of het ingevoerde e-mailadres geldig is wanneer de gebruiker het formulier probeert te verzenden.
Gebruik van aangepaste functies uses-of-custom-function
De voordelen van het gebruik van aangepaste functies in Adaptive Forms zijn:
- Manipulatie van gegevens: De functies van de douane manipuleren en verwerken gegevens ingegaan in de vormengebieden.
- Bevestiging van gegevens: De functies van de douane laten u toe om douanecontroles op vorminput uit te voeren en gespecificeerde foutenmeldingen te verstrekken.
- Dynamisch gedrag: De functies van de douane staan u toe om het dynamische gedrag van uw vormen te controleren die op specifieke voorwaarden worden gebaseerd. U kunt bijvoorbeeld velden weergeven/verbergen, veldwaarden wijzigen of de logica van het formulier dynamisch aanpassen.
- Integratie: U kunt douanefuncties gebruiken om met externe APIs of de diensten te integreren. Het helpt in het halen van gegevens uit externe bronnen, het verzenden van gegevens naar externe rustpunten, of het uitvoeren van douaneacties die op externe gebeurtenissen worden gebaseerd.
Ondersteunde JS-annotaties
Zorg ervoor dat de aangepaste functie die u schrijft, vergezeld gaat van de jsdoc
hierboven, voor het geval dat u aangepaste configuratie en beschrijving nodig hebt. Er zijn meerdere manieren om een functie in JavaScript,
te declareren en met opmerkingen kunt u de functies bijhouden. Voor meer informatie, zie usejsdoc.org.
Ondersteunde jsdoc
-tags:
-
Privé
Syntaxis:@private
Een functie van het type private is niet opgenomen als een aangepaste functie. -
Naam
Syntaxis:@name funcName <Function Name>
Alternatief,
kunt u gebruiken:@function funcName <Function Name>
of@func
funcName <Function Name>
.funcName
is de naam van de functie (geen spaties toegestaan).<Function Name>
is de weergavenaam van de functie. -
Lid
Syntaxis:@memberof namespace
Koppelt een naamruimte aan de functie. -
Parameter
Syntaxis:@param {type} name <Parameter Description>
U kunt ook het volgende gebruiken:@argument
{type} name <Parameter Description>
of@arg
{type}
name <Parameter Description>
.
Geeft parameters weer die door de functie worden gebruikt. Een functie kan meerdere parametertags hebben, één tag voor elke parameter in de volgorde waarin deze voorkomt.{type}
staat voor het parametertype. Toegestane parametertypen zijn:- string
- getal
- boolean
- bereik
Bereik wordt gebruikt voor verwijzingen naar velden van een adaptief formulier. Wanneer een formulier wazig laden gebruikt, kunt u
scope
gebruiken om de bijbehorende velden te openen. U kunt velden openen wanneer de velden worden geladen of als de velden algemeen zijn gemarkeerd.Alle andere parametertypen worden in een van de bovenstaande categorieën ingedeeld. Geen wordt niet ondersteund. Selecteer een van de bovenstaande typen. Typen zijn niet hoofdlettergevoelig. Spaties zijn niet toegestaan in de parameter
name
.<Parameter Descrption>
<parameter> can have multiple words. </parameter>
-
Type van Terugkeer
Syntaxis:@return {type}
U kunt ook@returns {type}
gebruiken.
Voegt informatie over de functie toe, zoals zijn doel.
{type} staat voor het retourneringstype van de functie. Toegestane retourtypen zijn:- string
- getal
- boolean
Alle andere retourneringstypen worden in een van de bovenstaande categorieën ingedeeld. Geen wordt niet ondersteund. Selecteer een van de bovenstaande typen. Retourtypen zijn niet hoofdlettergevoelig.
-
dit
Syntaxis:@this currentComponent
Gebruik @this om te verwijzen naar de component Adaptief formulier waarop de regel is geschreven.
Het volgende voorbeeld is gebaseerd op de veldwaarde. In het volgende voorbeeld verbergt de regel een veld in het formulier. Het
this
gedeelte vanthis.value
verwijst naar de onderliggende component Adaptief formulier waarop de regel is geschreven.code language-none /** * @function myTestFunction * @this currentComponent * @param {scope} scope in which code inside function will be executed. */ myTestFunction = function (scope) { if(this.value == "O"){ scope.age.visible = true; } else { scope.age.visible = false; } }
note note NOTE Opmerkingen vóór aangepaste functie worden gebruikt voor overzicht. Samenvatting kan tot veelvoudige lijnen worden uitgebreid tot een markering wordt ontmoet. Beperk de grootte tot één voor een beknopte beschrijving in de regelbouwer.
Ondersteunde typen functiedeclaratie function-declaration-supported-types
Verklaring van de Functie
function area(len) {
return len*len;
}
Deze functie wordt opgenomen zonder jsdoc
opmerkingen.
Uitdrukking van de Functie
var area;
//Some codes later
/** */
area = function(len) {
return len*len;
};
Uitdrukking en Verklaring van de Functie
var b={};
/** */
b.area = function(len) {
return len*len;
}
Verklaring van de Functie als Variabele
/** */
var x1,
area = function(len) {
return len*len;
},
x2 =5, x3 =true;
Beperking: een aangepaste functie kiest alleen de eerste functiedeclaratie uit de lijst met variabelen, indien bijeengevoegd. U kunt functie-expressie gebruiken voor elke gedeclareerde functie.
de Verklaring van de Functie als Voorwerp
var c = {
b : {
/** */
area : function(len) {
return len*len;
}
}
};
Aangepaste functie maken create-custom-function
Voer de volgende stappen uit om een aangepaste functie te maken:
-
Meld u aan bij
http://server:port/crx/de/index.jsp#
. -
Maak een map onder de map
/apps
. Maak bijvoorbeeld een map met de naamexperience-league
. -
Sla uw wijzigingen op.
-
Navigeer naar de gemaakte map en maak een knooppunt van het type
cq:ClientLibraryFolder
asclientlibs
. -
Navigeer naar de nieuwe map
clientlibs
en voeg de eigenschappenallowProxy
encategories
toe:note note NOTE U kunt elke naam opgeven in plaats van customfunctionsdemo
. -
Sla uw wijzigingen op.
-
Maak een map met de naam
js
onder de mapclientlibs
. -
Een JavaScript-bestand met de naam
functions.js
maken in de mapjs
-
Maak een bestand met de naam
js.txt
onder de mapclientlibs
. -
Sla uw wijzigingen op.
De gemaakte mapstructuur ziet er als volgt uit: -
Dubbelklik op het
functions.js
-bestand om de editor te openen. Het bestand bevat de code voor een aangepaste functie.
Voeg de volgende code toe aan het JavaScript-bestand om de leeftijd te berekenen op basis van de geboortedatum (JJJJ-MM-DD).code language-javascript /** * Calculates Age * @name calculateAge * @return {string} */ function calculateAge(dateOfBirthString) { var dob = new Date(dateOfBirthString); 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; }
-
Opslaan
function.js
. -
Navigeer naar
js.txt
en voeg de volgende code toe:code language-javascript #base=js functions.js
-
Sla het
js.txt
-bestand op.
U kunt naar de volgende omslag van de douanefunctieverwijzen. Download en installeer deze map in uw AEM.
Nu kunt u de aangepaste functie in het adaptieve formulier gebruiken door de clientbibliotheek toe te voegen.
Clientbibliotheek toevoegen in een adaptief formulier use-custom-function
Zodra u de clientbibliotheek hebt geïmplementeerd in uw Forms CS-omgeving, gebruikt u de mogelijkheden van de clientbibliotheek in uw adaptieve formulier. De clientbibliotheek toevoegen aan uw adaptieve formulier
-
Open het formulier in de bewerkingsmodus. Als u een formulier wilt openen in de bewerkingsmodus, selecteert u een formulier en selecteert u Edit .
-
Open de browser Inhoud en selecteer de component Guide Container van het adaptieve formulier.
-
Klik op het pictogram Eigenschappen van de container van de hulplijn. Het dialoogvenster Aangepaste formuliercontainer wordt geopend.
-
Open het tabblad Basic en selecteer de naam van de client library category in de vervolgkeuzelijst (in dit geval selecteert u
customfunctionscategory
). -
Klik op Done .
Nu, kunt u een regel tot stand brengen om douanefuncties in de regelredacteur te gebruiken:
Nu, begrijpen wij hoe te om een douanefunctie te vormen en te gebruiken gebruikend de Invoke dienst van de Redacteur van de Regel in AEM Forms.