Aangepaste functies in Adaptive Forms Core Components

In dit artikel wordt beschreven hoe u aangepaste functies maakt met de nieuwste adaptieve Form Core-component, die de nieuwste functies heeft, zoals:

Zorg ervoor om de recentste vormversieop uw milieu van de Component van de Kern van AEM Forms te plaatsen om de recentste eigenschappen in de Functies van de Douane te gebruiken.

Inleiding

AEM Forms 6.5 omvat de functies van JavaScript die u toestaan om complexe bedrijfsregels te bepalen door de regeleditor te gebruiken. Hoewel AEM Forms verschillende aangepaste functies biedt die niet in de box kunnen worden gebruikt, vereisen veel gebruiksgevallen het definiëren van uw eigen aangepaste functies die in meerdere formulieren kunnen worden gebruikt. Deze aangepaste functies verbeteren de mogelijkheden van formulieren door de bewerking en verwerking van ingevoerde gegevens in staat te stellen aan specifieke vereisten te voldoen. Bovendien kunnen hiermee het formuliergedrag dynamisch worden gewijzigd op basis van de vooraf gedefinieerde criteria.

Gebruik van aangepaste functies uses-of-custom-function

De voordelen van het gebruik van Aangepaste functies in Aangepaste Forms Core-componenten zijn:

Aangepaste functies zijn in wezen clientbibliotheken die in het JavaScript-bestand worden toegevoegd. Zodra u een Functie van de Douane creeert, wordt het beschikbaar in de regelredacteur voor selectie door de gebruiker in een Aangepast Vorm. De douanefuncties worden geïdentificeerd door de aantekeningen van JavaScript in de regelredacteur.

Ondersteunde JavaScript-annotaties voor aangepaste functies js-annotations

de aantekeningen van JavaScript verstrekken meta-gegevens voor code van JavaScript. Het bevat opmerkingen die beginnen met specifieke symbolen, bijvoorbeeld /** en @ . De annotaties bevatten belangrijke informatie over functies, variabelen en andere elementen in de code. Het adaptieve formulier ondersteunt de volgende JavaScript-annotaties voor aangepaste functies:

Naam

De Naam wordt gebruikt om de douanefunctie in de regelredacteur van een Adaptieve vorm te identificeren. De volgende syntaxis wordt gebruikt om een Functie van de Douane te noemen:

Parameter

De Parameter is een lijst van argumenten die door douanefuncties worden gebruikt. Een functie kan meerdere parameters ondersteunen. De volgende syntaxis wordt gebruikt om een parameter in een douanefunctie te bepalen:

Het type van Parameter is niet case-sensitive en de ruimten worden niet toegestaan in de parameternaam.

<Parameter Description> bevat details over het doel van de parameter. Het kan meerdere woorden hebben.

Retourtype

Het retourneringstype geeft het type waarde op dat de aangepaste functie na de uitvoering retourneert. De volgende syntaxis wordt gebruikt om een terugkeertype in een douanefunctie te bepalen:

Het terugkeertype is niet case-sensitive.

Persoonlijk

De aangepaste functie, gedeclareerd als private, komt niet voor in de lijst met aangepaste functies in de regeleditor van een adaptief formulier. Aangepaste functies zijn standaard openbaar. De syntaxis voor het declareren van een aangepaste functie als private is @private .

Richtlijnen tijdens het maken van aangepaste functies considerations

Om van de douanefuncties in de regelredacteur een lijst te maken, kunt u om het even welke volgende formaten gebruiken:

Functie-instructie met of zonder jsdoc-opmerkingen

U kunt een aangepaste functie maken met of zonder jsdoc-opmerkingen.

    function functionName(parameters)
        {
            // code to be executed
        }

Als de gebruiker geen JavaScript-annotaties toevoegt aan de aangepaste functie, wordt deze door de functienaam in de regeleditor weergegeven. Het wordt echter aanbevolen JavaScript-annotaties op te nemen om de leesbaarheid van de aangepaste functies te verbeteren.

Pijlfunctie met verplichte JavaScript-annotaties of -opmerkingen

U kunt een aangepaste functie maken met een syntaxis voor een pijlfunctie:

    /**
    * 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;

Als de gebruiker geen JavaScript-annotaties toevoegt aan de aangepaste functie, wordt de aangepaste functie niet vermeld in de regeleditor van een adaptief formulier.

Functie-expressie met verplichte JavaScript-annotaties of -commentaar

Als u aangepaste functies wilt weergeven in de regeleditor van een adaptief formulier, maakt u aangepaste functies in de volgende indeling:

    /**
    * test function
    * @name testFunction
    * @param {string} input1 parameter description
    * @param {string=} input2 parameter description
    * @return {string}
    */
    testFunction = function(input1,input2)
        {
            // code to be executed
        }

Als de gebruiker geen JavaScript-annotaties toevoegt aan de aangepaste functie, wordt de aangepaste functie niet vermeld in de regeleditor van een adaptief formulier.

Vereisten om een aangepaste functie te maken

Voordat u een aangepaste functie aan uw Adaptive Forms gaat toevoegen, moet u controleren of de volgende Software op uw computer is geïnstalleerd:

Een aangepaste functie maken create-custom-function

Stappen voor het maken van aangepaste functies zijn:

Een clientbibliotheek maken met het AEM Project Archetype create-client-library-archetype

U kunt douanefuncties toevoegen door een cliëntbibliotheek aan het gecreeerde project toe te voegen gebruikend het AEM Archetype van het Project.
Als u een bestaand project hebt kunt u douanefunctiesaan uw lokaal project direct toevoegen.

Nadat u een Project van Archetype creeert of een bestaand project gebruikt, creeer een cliëntbibliotheek. Voer de volgende stappen uit om een clientbibliotheek te maken:

voeg een Omslag van de Bibliotheek van de Cliënt toe

Om nieuwe omslag van de cliëntbibliotheek aan uw [ AEM projectfolder ] toe te voegen, volg de stappen:

voegt dossiers en omslagen aan de omslag van de Bibliotheek van de Cliënt toe

Voeg het volgende toe aan de toegevoegde omslag van de cliëntbibliotheek:

Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/experience-league/customclientlibs/

omvat de nieuwe omslag in filter.xml:

Aangepaste functies maken en implementeren via CRXDE create-add-custom-function

Als u de nieuwste invoegtoepassing voor AEM Forms en Forms gebruikt, kunt u een aangepaste functie maken via CRXDE om de nieuwste updates van aangepaste functies te gebruiken. Voer daartoe de volgende stappen uit:

U kunt naar de volgende omslag van de douanefunctieverwijzen. Download en installeer deze map op 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 add-client-library

Zodra u uw clientbibliotheek hebt geïmplementeerd in uw AEM Forms-omgeving, gebruikt u de mogelijkheden ervan in uw adaptieve formulier. De clientbibliotheek toevoegen aan uw adaptieve formulier

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 6.5

Aangepaste functie gebruiken in een adaptief formulier use-custom-functions

In een AanpassingsVorm, kunt u Functies van de Douane binnen de regelredacteurgebruiken.
Voeg de volgende code toe aan het JavaScript-bestand (Function.js ) om de leeftijd te berekenen op basis van de geboortedatum (JJJJ-MM-DD). Maak een aangepaste functie als calculateAge() die de geboortedatum als invoer neemt en de leeftijd retourneert:

    /**
        * 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;
    }

In het bovenstaande voorbeeld wordt de aangepaste functie calculateAge aangeroepen en wordt de leeftijd geretourneerd wanneer de gebruiker de geboortedatum in de notatie invoert (JJJJ-MM-DD).

Bekijk een voorbeeld van het formulier om te zien hoe de aangepaste functies worden geïmplementeerd via de regeleditor:

Ondersteuning voor asynchrone functies in aangepaste functies support-of-async-functions

De asynchrone douanefuncties verschijnen niet in de lijst van de regelredacteur. Het is echter mogelijk om asynchrone functies aan te roepen binnen aangepaste functies die zijn gemaakt met synchrone functie-expressies.

Bekijk de code hieronder om te zien hoe we asynchrone functies kunnen aanroepen met behulp van aangepaste functies:

    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);
    });
}

In het bovenstaande voorbeeld is de functie asyncFunction een asynchronous function . De toepassing voert een asynchrone bewerking uit door een GET -aanvraag in te dienen bij https://petstore.swagger.io/v2/store/inventory . Het wacht op de reactie met await, parseert de hoofdtekst van de reactie met JSON met de response.json() en retourneert de gegevens. De functie callAsyncFunction is een synchrone aangepaste functie die de functie asyncFunction aanroept en de reactiegegevens in de console weergeeft. Hoewel de functie callAsyncFunction synchroon is, roept deze de asynchrone functie asynchrone functie asyncFunction aan en verwerkt deze het resultaat met then - en catch -instructies.

Om zijn het werken te zien, laten wij een knoop toevoegen en een regel voor de knoop creëren die de asynchrone functie na een knoop klikt.

Raadpleeg de illustratie van het onderstaande consolevenster om aan te tonen dat wanneer de gebruiker op de knop Fetch klikt, de aangepaste functie callAsyncFunction wordt aangeroepen, die op zijn beurt een asynchrone functie asyncFunction aanroept. Inspect het consolevenster om de reactie op de knoop te bekijken klikt:

Laten we eens kijken naar de functies van aangepaste functies.

Verschillende functies voor Aangepaste functies

U kunt aangepaste functies gebruiken om aangepaste functies toe te voegen aan formulieren. Deze functies ondersteunen diverse mogelijkheden, zoals het werken met specifieke velden, het gebruik van globale velden of caching. Dankzij deze flexibiliteit kunt u formulieren aanpassen aan de vereisten van uw organisatie.

Veld- en globale bereikobjecten in aangepaste functies support-field-and-global-objects

Veldobjecten verwijzen naar de afzonderlijke componenten of elementen in een formulier, zoals tekstvelden, selectievakjes. Het object Globals bevat alleen-lezen variabelen, zoals formulierinstantie, doelveldinstantie en methoden voor het uitvoeren van formulierwijzigingen binnen aangepaste functies.

Laten we leren hoe aangepaste functies veld- en globale objecten gebruiken met behulp van een Contact Us -formulier met behulp van verschillende gebruiksmogelijkheden.

Geval van het Gebruik: toon een paneel gebruikend de SetProperty regel

Voeg de volgende code in de douanefunctie toe zoals die in wordt verklaard creeer-douane-functiesectie, om het vormgebied als Required te plaatsen.

    /**
    * enablePanel
    * @name enablePanel
    * @param {object} field1
    * @param {object} field2
    * @param {scope} globals
    */

    function enablePanel(field1,field2, globals)
    {
       if(globals.functions.validate(field1).length === 0)
       {
       globals.functions.setProperty(field2, {visible: true});
       }
    }

In dit voorbeeld wordt de validatie van het deelvenster personaldetails uitgevoerd wanneer u op de knop klikt. Als er geen fouten worden gedetecteerd in het deelvenster, wordt een ander deelvenster, het deelvenster feedback , weergegeven wanneer u op de knop klikt.

Laten we een regel voor de knop Next maken, die het deelvenster personaldetails valideert en het deelvenster feedback zichtbaar maakt wanneer de gebruiker op de knop Next klikt.

Raadpleeg de onderstaande afbeelding om aan te tonen waar het deelvenster personaldetails wordt gevalideerd wanneer u op de knop Next klikt. Als alle velden in de personaldetails worden gevalideerd, wordt het deelvenster feedback weergegeven.

Als er fouten voorkomen in de velden van het deelvenster personaldetails , worden deze in het veld weergegeven wanneer op de knop Next wordt geklikt. Het deelvenster feedback blijft dan onzichtbaar.

Geval van het Gebruik: Valideer het gebied.

Voeg de volgende code in de douanefunctie toe zoals die in wordt verklaard creeer-douane-functiesectie, om het gebied te bevestigen.

    /**
    * validateField
    * @name validateField
    * @param {object} field
    * @param {scope} globals
    */
    function validateField(field,globals)
    {

        globals.functions.validate(field);

    }

In dit voorbeeld wordt een aangepast validatiepatroon toegepast op het veld contact . Gebruikers moeten een telefoonnummer invoeren dat begint met 10 gevolgd door 8 cijfers. Als de gebruiker een telefoonnummer invoert dat niet begint met 10 of meer of minder dan 8 cijfers bevat, verschijnt er een foutbericht bij de klik op de knop:

De volgende stap bestaat uit het maken van een regel voor de knop Next die het veld contact in het klikveld valideert.

Verwijs naar de illustratie hieronder om aan te tonen dat als de gebruiker een telefoonaantal ingaat dat niet met 10 begint, een foutenmelding op het gebiedsniveau verschijnt:

Als de gebruiker een geldig telefoonnummer invoert en alle velden in het deelvenster personaldetails zijn gevalideerd, wordt het deelvenster feedback op het scherm weergegeven:

Geval van het Gebruik: Herstel een paneel

Voeg de volgende code in de douanefunctie toe zoals die in wordt verklaard creeer-douane-functiesectie, om het paneel terug te stellen.

    /**
    * resetField
    * @name  resetField
    * @param {string} input1
    * @param {object} field
    * @param {scope} globals
    */
    function  resetField(field,globals)
    {

        globals.functions.reset(field);

    }

In dit voorbeeld wordt het deelvenster personaldetails opnieuw ingesteld wanneer u op de knop Clear klikt. In de volgende stap wordt een regel gemaakt voor de knop Clear die het deelvenster opnieuw instelt wanneer op de knop wordt geklikt.

Zie de onderstaande afbeelding om weer te geven dat als de gebruiker op de knop clear klikt, het deelvenster personaldetails opnieuw wordt ingesteld:

Geval van het Gebruik: Om douanebericht op het gebiedsniveau te tonen en het gebied als ongeldig te merken

Met de functie markFieldAsInvalid() kunt u een veld definiëren als ongeldig en een aangepast foutbericht instellen op veldniveau. De fieldIdentifier -waarde kan fieldId , field qualifiedName of field dataRef zijn. De waarde van het object met de naam option kan {useId: true} , {useQualifiedName: true} of {useDataRef: true} zijn.
De syntaxis die wordt gebruikt om het veld als ongeldig te markeren en een aangepast bericht in te stellen, is:

Voeg de volgende code in de douanefunctie toe zoals die in wordt verklaard creeer-douane-functiesectie, om douanebericht op het gebiedsniveau toe te laten.

    /**
    * customMessage
    * @name customMessage
    * @param {object} field
    * @param {scope} globals
    */
    function customMessage(field, globals) {
    const minLength = 15;
    const comments = field.$value.trim();
    if (comments.length < minLength) {
        globals.functions.markFieldAsInvalid(field.$id, "Comments must be at least 15 characters long.", { useId: true });
    }
}

In dit voorbeeld wordt een aangepast bericht weergegeven op veldniveau als de gebruiker minder dan 15 tekens invoert in het tekstvak Opmerkingen.

In de volgende stap wordt een regel voor het veld comments gemaakt:

Zie de onderstaande demonstratie om te tonen dat het invoeren van negatieve feedback in het veld comments de weergave van een aangepast bericht op veldniveau activeert:

Als de gebruiker meer dan 15 tekens in het tekstvak Opmerkingen invoert, wordt het veld gevalideerd en wordt het formulier verzonden:

Geval van het Gebruik: Verzend veranderde gegevens aan de server

De volgende regel code:
globals.functions.submitForm(globals.functions.exportData(), false); wordt gebruikt om de formuliergegevens te verzenden na manipulatie.

Voeg de volgende code in de douanefunctie toe zoals die in wordt verklaard creeer-douane-functiesectie, om de gemanipuleerde gegevens bij de server voor te leggen:

    /**
    * submitData
    * @name submitData
    * @param {object} field
    * @param {scope} globals
    */
    function submitData(globals)
    {

    var data = globals.functions.exportData();
    if(!data.comments) {
    data.comments = 'NA';
    }
    console.log('After update:{}',data);
    globals.functions.submitForm(data, false);
    }

In dit voorbeeld wordt NA verzonden naar de server wanneer de gebruiker het tekstvak comments leeg laat.

Maak nu een regel voor de knop Submit die gegevens verzendt:

voor

Raadpleeg de illustratie van de onderstaande console window om aan te tonen dat als de gebruiker het comments textbox leeg laat, de waarde zoals NA wordt verzonden op de server:

U kunt het consolevenster ook inspecteren om de gegevens te bekijken die aan de server worden voorgelegd:

Ondersteuning voor caching van aangepaste functies

De adaptieve Forms voert caching voor douanefuncties uit om reactietijd te verbeteren terwijl het terugwinnen van de lijst van de douanefunctie in de regelredacteur. Er verschijnt een bericht als Fetched following custom functions list from cache in het error.log -bestand.

Als de aangepaste functies worden gewijzigd, wordt het in cache plaatsen ongeldig en wordt het geparseerd.

Problemen oplossen troubleshooting

Overwegingen