Voorbeelden van het ontwikkelen en gebruiken van douanefunctie

Het artikel bevat de gedetailleerde voorbeelden van aangepaste functies voor een adaptief formulier dat is gebaseerd op kerncomponenten en dat waardevolle inzichten biedt in de effectieve implementatie ervan in verschillende scenario's. De functies van de douane worden gebruikt in de regelredacteur van AEM Forms, laten ontwikkelaars toe om de logica te bepalen en te controleren die vormgedrag beheerst.
In dit artikel worden verschillende implementaties van aangepaste functies besproken, waarbij wordt getoond hoe deze kunnen worden gebruikt om formulieren af te stemmen op specifieke vereisten en de algemene functionaliteit te verbeteren.

Opties voor vervolgkeuzelijsten instellen met behulp van aangepaste functies

De Redacteur van de regel in de Componenten van de Kern steunt niet de Vastgestelde Opties van bezit om de opties van de dropdown lijst bij runtime te plaatsen. U kunt de opties voor de vervolgkeuzelijst echter instellen met behulp van aangepaste functies.

Voeg de volgende code in de douanefunctie toe zoals die in wordt verklaard creeer-douane-functiesectie om de opties van de dropdown lijst te plaatsen gebruikend douanefuncties:

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

In de bovenstaande code wordt setEnums gebruikt om de eigenschap enum in te stellen en wordt setEnumNames gebruikt om de eigenschap enumNames van het vervolgkeuzemenu in te stellen.

Maak een regel voor de knop Next , die de waarde van de keuzelijst instelt wanneer de gebruiker op de knop Next klikt:

Raadpleeg de onderstaande afbeelding om aan te tonen waar de opties van de vervolgkeuzelijst zijn ingesteld wanneer u op de knop Weergeven klikt:

Een deelvenster tonen met de regel SetProperty

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

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.

Het veld valideren

Laten we leren hoe aangepaste functies veld- en globale objecten gebruiken om het veld te valideren met behulp van een Contact Us -formulier.

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:

Een deelvenster opnieuw instellen

Laten we leren hoe aangepaste functies veld- en globale objecten gebruiken om het veld opnieuw in te stellen met behulp van een Contact Us -formulier.

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:

Een aangepast bericht weergeven op veldniveau en het veld markeren als ongeldig

Laten we leren hoe aangepaste functies veld- en globale objecten gebruiken om een aangepast bericht op veldniveau weer te geven en het veld als ongeldig te markeren met behulp van een Contact Us -formulier.

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 een 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 een 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:

Gewijzigde gegevens naar de server verzenden

Laten we leren hoe aangepaste functies veld- en globale objecten gebruiken om gemanipuleerde gegevens op de server te verzenden met behulp van een Contact Us -formulier.

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:

Voltooien van verzenden van formulieren en fouthandlers negeren

Laten we leren hoe aangepaste functies veld- en globale objecten gebruiken om verzendingshandlers te negeren met behulp van een Contact Us -formulier.

Voeg de volgende lijn van code toe zoals die in wordt verklaard creeer-douane-functiesectie, om de voorlegging of het mislukkingsbericht voor vormvoorlegging aan te passen en de berichten van de vormvoorlegging in een modaal vakje te tonen:

/**
 * Handles the success response after a form submission.
 *
 * @param {scope} globals - This object contains a read-only form instance, target field instance, triggered event, and methods for performing form modifications within custom functions.
 * @returns {void}
 */
function customSubmitSuccessHandler(globals) {
    var event = globals.event;
    var submitSuccessResponse = event.payload.body;
    var form = globals.form;

    if (submitSuccessResponse) {
        if (submitSuccessResponse.redirectUrl) {
            window.location.href = encodeURI(submitSuccessResponse.redirectUrl);
        } else if (submitSuccessResponse.thankYouMessage) {
            showModal("success", submitSuccessResponse.thankYouMessage);
        }
    }
}

/**
 * Handles the error response after a form submission.
 *
 * @param {string} customSubmitErrorMessage - The custom error message.
 * @param {scope} globals - This object contains a read-only form instance, target field instance, triggered event, and methods for performing form modifications within custom functions.
 * @returns {void}
 */
function customSubmitErrorHandler(customSubmitErrorMessage, globals) {
    showModal("error", customSubmitErrorMessage);
}
function showModal(type, message) {
    // Remove any existing modals
    var existingModal = document.getElementById("modal");
    if (existingModal) {
        existingModal.remove();
    }

    // Create the modal dialog
    var modal = document.createElement("div");
    modal.setAttribute("id", "modal");
    modal.setAttribute("class", "modal");

    // Create the modal content
    var modalContent = document.createElement("div");
    modalContent.setAttribute("class", "modal-content");

    // Create the modal header
    var modalHeader = document.createElement("div");
    modalHeader.setAttribute("class", "modal-header");
    modalHeader.innerHTML = "<h2>" + (type === "success" ? "Thank You" : "Error") + "</h2>";

    // Create the modal body
    var modalBody = document.createElement("div");
    modalBody.setAttribute("class", "modal-body");
    modalBody.innerHTML = "<p class='" + type + "-message'>" + message + "</p>";

    // Create the modal footer
    var modalFooter = document.createElement("div");
    modalFooter.setAttribute("class", "modal-footer");

    // Create the close button
    var closeButton = document.createElement("button");
    closeButton.setAttribute("class", "close-button");
    closeButton.innerHTML = "Close";
    closeButton.onclick = function() {
        modal.remove();
    };

    // Append the elements to the modal content
    modalFooter.appendChild(closeButton);
    modalContent.appendChild(modalHeader);
    modalContent.appendChild(modalBody);
    modalContent.appendChild(modalFooter);

    // Append the modal content to the modal
    modal.appendChild(modalContent);

    // Append the modal to the document body
    document.body.appendChild(modal);
}

Wanneer de gebruiker in dit voorbeeld de aangepaste functies customSubmitSuccessHandler en customSubmitErrorHandler gebruikt, worden de geluids- en foutberichten in een modaal voorbeeld weergegeven. De JavaScript-functie showModal(type, message) wordt gebruikt om dynamisch een modaal dialoogvenster op het scherm te maken en weer te geven.

Maak nu een regel voor het succesvol verzenden van formulieren:

Raadpleeg de onderstaande illustratie om aan te tonen dat wanneer het formulier is verzonden, het succesbericht wordt weergegeven in een modaal formulier:

Laten we ook een regel maken voor mislukte formulierverzendingen:

Raadpleeg de onderstaande afbeelding om aan te tonen dat wanneer het verzenden van het formulier mislukt, het foutbericht wordt weergegeven in een modaal:

Als u het verzenden van formulieren standaard wilt laten slagen of mislukken, zijn de functies Default submit Form Success Handler en Default submit Form Error Handler beschikbaar buiten het vak.

In het geval, ontbreekt de manager van de douanevoorlegging om zoals verwacht in bestaande AEM Projecten of vormen uit te voeren, verwijs naar de het oplossen van problemen sectie.

Handelingen uitvoeren in een specifieke instantie van het herhaalbare deelvenster

Regels die u met de visuele regeleditor in een herhaalbaar deelvenster hebt gemaakt, worden toegepast op de laatste instantie van het herhaalbare deelvenster. Om een regel voor een specifieke instantie van het herhaalbare paneel te schrijven, kunnen wij een douanefunctie gebruiken.

Laten we een ander formulier maken als Booking Form om informatie te verzamelen over reizigers die naar een bestemming gaan. Er wordt een deelvenster voor reizigers toegevoegd als een herhaalbaar deelvenster, waar de gebruiker met de knop Add Traveler details voor 5 reizigers kan toevoegen.

Voeg de volgende lijn van code toe zoals die in wordt verklaard creeer-douane-functiesectie, om acties in een specifieke instantie van het herhaalbare paneel, buiten laatste uit te voeren:

/**
* @name hidePanelInRepeatablePanel
* @param {scope} globals
*/
function hidePanelInRepeatablePanel(globals)
{
    var repeatablePanel = globals.form.travelerinfo;
    // hides a panel inside second instance of repeatable panel
    globals.functions.setProperty(repeatablePanel[1].traveler, {visible : false});
}

In dit voorbeeld voert de aangepaste functie hidePanelInRepeatablePanel een handeling uit in een specifieke instantie van het herhaalbare deelvenster. In de bovenstaande code staat travelerinfo voor het herhaalbare deelvenster. De code repeatablePanel[1].traveler, {visible: false} verbergt het deelvenster in de tweede instantie van het herhaalbare deelvenster.

Voeg een knop met het label Hide toe en voeg een regel toe om de tweede instantie van een herhaalbaar deelvenster te verbergen.

In de onderstaande video ziet u hoe u kunt zien dat wanneer op Hide wordt geklikt, het deelvenster in de tweede herhaalbare instantie wordt verborgen:

Vul het veld vooraf met een waarde wanneer het formulier wordt geladen

Laten we leren hoe aangepaste functies veld- en globale objecten gebruiken om velden vooraf in te vullen met behulp van een Booking Form .

Voeg de volgende lijn van code, zoals die in wordt verklaard creeer-douane-functiesectie, toe om de vooraf ingevulde waarde op een gebied te laden wanneer de vorm wordt geïnitialiseerd:

/**
 * Tests import data
 * @name testImportData
 * @param {scope} globals
 */
function testImportData(globals)
{
    globals.functions.importData(Object.fromEntries([['amount','10000']]));
}

In de bovenstaande code vult de functie testImportData het tekstvak Booking Amount vooraf in wanneer het formulier wordt geladen. Laten we ervan uitgaan dat voor het boekingsformulier het minimumboekingsbedrag 10,000 vereist is.

Laten we een regel maken bij de initialisatie van het formulier, waarbij de waarde in het tekstvak Booking Amount wordt voorgevuld met een opgegeven waarde wanneer het formulier wordt geladen:

Raadpleeg de onderstaande schermafbeelding, die aantoont dat bij het laden van het formulier de waarde in het tekstvak Booking Amount vooraf is ingevuld met een opgegeven waarde:

Focus instellen op het specifieke veld

Laten we leren hoe aangepaste functies veld- en globale objecten gebruiken om focus op een specifiek veld in te stellen met behulp van een Booking Form .

Voeg de volgende lijn van code, zoals die in wordt verklaard creeer-douane-functiesectie, toe om nadruk op het gespecificeerde gebied te plaatsen wanneer de Submit knoop wordt geklikt.:

/**
 * @name testSetFocus
 * @param {object} emailField
 * @param {scope} globals
 */
    function testSetFocus(field, globals)
    {
        globals.functions.setFocus(field);
    }

Voeg een regel toe aan de knop Submit om de focus in te stellen op het tekstvak Email ID wanneer erop wordt geklikt.

Raadpleeg de onderstaande schermafbeelding die aantoont dat wanneer op de knop Submit wordt geklikt, de focus wordt ingesteld op het veld Email ID :

Een herhaalbaar deelvenster toevoegen of verwijderen met de eigenschap dispatchEvent

Laten we leren hoe aangepaste functies veld- en globale objecten gebruiken om een herhaalbaar deelvenster toe te voegen of te verwijderen met behulp van de eigenschap dispatchEvent met behulp van een Booking Form .

Voeg de volgende lijn van code, zoals die in wordt verklaard creeer-douane-functiesectie, toe om een paneel toe te voegen wanneer de Add Traveler knoop gebruikend het dispatchEvent bezit wordt geklikt:

/**
 * Tests add instance with dispatchEvent
 * @name testAddInstance
 * @param {scope} globals
 */
function testAddInstance(globals)
{
    var repeatablePanel = globals.form.traveler;
    globals.functions.dispatchEvent(repeatablePanel,'addInstance');
}

Voeg een regel aan de knop Add Traveler toe om het herhaalbare deelvenster toe te voegen wanneer erop wordt geklikt:

Verwijs naar gif hieronder, die aantoont dat wanneer Add Traveler wordt geklikt, het paneel gebruikend het dispatchEvent bezit wordt toegevoegd:

toe

Op dezelfde manier voeg de volgende lijn van code toe, zoals die in wordt verklaard creeer-douane-functiesectie, om een paneel te schrappen wanneer de Delete Traveler knoop gebruikend het dispatchEvent bezit wordt geklikt:

/**

 * @name testRemoveInstance
 * @param {scope} globals
 */
function testRemoveInstance(globals)
{
    var repeatablePanel = globals.form.traveler;
    globals.functions.dispatchEvent(repeatablePanel, 'removeInstance');
}

Voeg een regel aan de knop Delete Traveler toe om het herhaalbare deelvenster te verwijderen wanneer erop wordt geklikt.

Zie de onderstaande GIF, die aantoont dat wanneer op de knop Delete Traveler wordt geklikt, het deelvenster Reiziger wordt verwijderd met de eigenschap dispatchEvent :

Problemen oplossen

Zie ook