### Build and Install Example Components

Source: https://github.com/adobe/aem-core-forms-components/blob/master/README.md

Builds and installs the example proxy components. Run this command from the examples directory or the root directory.

```shell
mvn clean install -PautoInstallExamples,include-wcm-components-examples
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.tests/test-module/README.md

Run this command in your terminal to install all necessary project dependencies defined in `package.json`.

```bash
npm install
```

--------------------------------

### Build and Install Core Components to AEM

Source: https://context7.com/adobe/aem-core-forms-components/llms.txt

Commands to build and install the AEM Forms Core Components to a running AEM instance. Supports local and cloud SDK deployments, and selective submodule installation.

```shell
# Install everything to a running AEM author instance (localhost:4502)
mvn clean install -PautoInstallPackage

# Install to a specific host/port
mvn clean install -PautoInstallPackage \
  -Daem.host=my-aem-host \
  -Daem.port=4502

# Install only specific submodules (e.g., the AF apps bundle)
mvn clean install -PautoInstallPackage -pl ui.af.apps -am

# AEM as a Cloud Service SDK — deploy to /libs instead of /apps
mvn clean install -PautoInstallPackage,cloud
```

--------------------------------

### Compile and Install All Core Components

Source: https://github.com/adobe/aem-core-forms-components/blob/master/README.md

Builds and installs all Core Components to a running AEM instance. Use this command in the top-level project folder.

```shell
mvn clean install -PautoInstallPackage
```

--------------------------------

### Compile and Install Specific Core Components

Source: https://github.com/adobe/aem-core-forms-components/blob/master/README.md

Builds and installs specified individual packages or bundles. Use the -pl option to list project names and -am to include dependencies.

```shell
mvn clean install -PautoInstallPackage -pl <project_name(s)> -am
```

--------------------------------

### Fragment Container Events XML Example

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/e2e-testing/feature-toggles.md

Example XML demonstrating how to define 'fd:events' at the guideContainer level for a fragment. This allows fragment-specific events to be observed in tests.

```xml
<guideContainer
    fd:type="fragment"
    ...
    >
    <fd:events
        jcr:primaryType="nt:unstructured"
        initialize="dispatchEvent($form.myplaceholder.fieldname,'custom:setProperty',{value:'from-frag-container'})"/>
    <textinput ... name="fieldname"/>
</guideContainer>
```

--------------------------------

### Example: Local Headless Firefox Test Execution

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.tests/README.md

Demonstrates running tests locally in headless Firefox mode, targeting a custom AEM author instance. This example shows how to override default parameters.

```bash
mvn test \
    -Plocal-execution \
    -DHEADLESS_BROWSER=true \
    -DSELENIUM_BROWSER=firefox \
    -DAEM_AUTHOR_URL=http://my-aem-author-instance.com \
    -DAEM_AUTHOR_USERNAME=testuser \
    -DAEM_AUTHOR_PASSWORD=aVVe5om3
```

--------------------------------

### Compile and Install Core Components for AEM Cloud Service

Source: https://github.com/adobe/aem-core-forms-components/blob/master/README.md

Builds and installs Core Components for AEM as a Cloud Service, deploying them to the /libs directory. This uses the 'cloud' profile in conjunction with 'autoInstallPackage'.

```shell
mvn clean install -PautoInstallPackage,cloud
```

--------------------------------

### Items Array JSON Format Example

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/runtime-internals.md

Example of the 'items' array JSON format used for container children, which is a direct pass-through when a specific feature toggle is enabled.

```json
{
  "items": [{ "fieldType": "text-input", ... }]
}
```

--------------------------------

### OSGi Configuration for Dynamic Toggles

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/overview.md

Example of an OSGi configuration file used to enable dynamic toggles, which are read by the ComponentUtils.isToggleEnabled method.

```json
{
  "com.adobe.granite.toggle.impl.dev.DynamicToggleProviderImpl": {
    "feature.toggles": [
      "FT_FORMS-24343",
      "FT_FORMS-24358",
      "FT_FORMS-24087"
    ]
  }
}
```

--------------------------------

### Sling JSON Format Example

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/runtime-internals.md

Example of the Sling JSON format used for container children, featuring ':items' and ':itemsOrder' keys.

```json
{
  ":items": { "field1": { "fieldType": "text-input", ... } },
  ":itemsOrder": ["field1"]
}
```

--------------------------------

### Example Data Layer State Output

Source: https://github.com/adobe/aem-core-forms-components/wiki/Data-Layer-Integration

A concrete example of the data layer state returned by `adobeDataLayer.getState()` in a browser console, showing page and component details.

```json
{
    "page": {
        "page-12266a293b": {
            "@type": "forms-components-examples/components/page",
            "repo:modifyDate": "2023-04-24T07:08:11Z",
            "dc:title": "af2",
            "xdm:template": "/conf/core-components-examples/settings/wcm/templates/af-blank-v2",
            "xdm:language": "en",
            "xdm:tags": [],
            "repo:path": "/content/forms/af/af2.html"
        }
    },
    "component": {
        "textinput-1c7bc238a6": {
            "dc:title": "Name",
            "repo:modifyDate": "2023-04-24T07:10:10Z",
            "@type": "forms-components-examples/components/form/textinput",
            "fieldType": "text-input",
            "parentId": "page-12266a293b"
        },
        "numberinput-3bf4611d5a": {
            "dc:title": "Phone Number",
            "repo:modifyDate": "2023-04-24T07:10:26Z",
            "@type": "forms-components-examples/components/form/numberinput",
            "fieldType": "number-input",
            "parentId": "page-12266a293b"
        },
        "button-961d435b34": {
            "dc:title": "Submit Form",
            "repo:modifyDate": "2023-04-24T07:10:37Z",
            "@type": "forms-components-examples/components/form/button",
            "fieldType": "button",
            "parentId": "page-12266a293b"
        }
    }
}
```

--------------------------------

### Placeholder Panel Events XML Example

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/e2e-testing/feature-toggles.md

Example XML for a placeholder panel in the parent form, defining its own 'fd:events'. This is used in conjunction with fragment container events to test toggle behavior.

```xml
<fragment
    ...
    name="myplaceholder">
    <fd:events
        jcr:primaryType="nt:unstructured"
        initialize="dispatchEvent($form.myplaceholder.fieldname,'custom:setProperty',{value:'from-placeholder'})"/>
</fragment>
```

--------------------------------

### Data Layer Event Example

Source: https://github.com/adobe/aem-core-forms-components/wiki/Data-Layer-Integration

Example of a FormEvent triggered by the data layer, including target, type, and payload details.

```json
{
    "event": "FormEvent",
    "eventInfo": {
        "target": "numberinput",
        "originalTarget": "numberinput",
        "type": "Field visits",
        "payload": {
            "formTitle": "Application Form",
            "fieldTitle": "Phone Number",
            "fieldType": "number-input",
            "panelTitle": "Personal Details"
            "formPath": "/content/forms/af/form/jcr:content/guideContainer"
        }
    }
}
```

--------------------------------

### Data Layer State Structure Example

Source: https://github.com/adobe/aem-core-forms-components/wiki/Data-Layer-Integration

Illustrates the expected structure of the data layer state when enabled. This is what `adobeDataLayer.getState()` would return.

```json
{
  "page": {
    "page-id": {
      "key1": "value1,
      "key2": "value2,
    }
  },
  "component": {
    "component-id1": {
      "key1": "value1,
      "key2": "value2,
    },
    "component-id2": {
      "key1": "value1,
      "key2": "value2,
    },
    ...
  }
}
```

--------------------------------

### Core Component JSON Rendering Example

Source: https://github.com/adobe/aem-core-forms-components/wiki/Data-Layer-Integration

Illustrates the JSON structure of a Core Component's data layer property, showing component-specific data.

```json
"dataLayer": {
    "button-961d435b34": {
        "dc:title": "Submit Form",
        "repo:modifyDate": "2023-04-24T07:10:37Z",
        "@type": "forms-components-examples/components/form/button",
        "fieldType": "button"
    }
}
```

--------------------------------

### Cypress Feature Toggle Test Structure

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/e2e-testing/feature-toggles.md

This is the canonical example for structuring a Cypress test suite that utilizes feature toggles. It ensures tests only run on the latest addon build and conditionally execute based on fetched toggle status.

```javascript
describe("Form Runtime - My Feature Toggle", () => {
    if (cy.af.isLatestAddon()) {         // wrap entire body — toggle only tested on latest addon
        const pagePath = "content/forms/af/.../.html";
        let formContainer = null;
        let toggle_array = [];

        before(() => {                    // use before(), not beforeEach()
            cy.fetchFeatureToggles().then((response) => {
                if (response.status === 200) {
                    toggle_array = response.body.enabled;
                }
            });
        });

        it("description of expected behavior", () => {
            if (toggle_array.includes("FT_FORMS-XXXXX")) {   // guard each test individually
                cy.previewForm(pagePath).then(p => { formContainer = p; });
                // assertions...
            }
        });
    }
});
```

--------------------------------

### HelloWorld Component Model (Java)

Source: https://github.com/adobe/aem-core-forms-components/wiki/Data-Layer-Integration

A basic Java model for a HelloWorld component, demonstrating Sling model integration.

```java
package mymodels;
...
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;
...

@Model(adaptables = SlingHttpServletRequest.class)
public class HelloWorld {

    @SlingObject
    protected Resource resource;

    public String getMessage() {
        return "Hello World!";
    }
}
```

--------------------------------

### Initialize Form Field Component

Source: https://github.com/adobe/aem-core-forms-components/wiki/Forms-Runtime-Infrastructure

Use `FormView.Utils.setupField` to initialize a form component. This method takes a factory function that returns a new component instance and a selector for the component's root element.

```javascript
FormView.Utils.setupField(({element, formContainer}) => {
    return new TextInput({element, formContainer})
}, TextInput.selectors.self);
```

--------------------------------

### Deploy OSGi Configurations with Maven

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/overview.md

Use this command to deploy OSGi configurations, including toggle enablement and Sling configurations, to an AEM instance.

```bash
mvn clean install -pl it/config -PautoInstallPackage \
  -Daem.host=localhost -Daem.port=4502 \
  -Daem.username=admin -Daem.password=admin
```

--------------------------------

### Deploying IT Content and Running Cypress Specs

Source: https://context7.com/adobe/aem-core-forms-components/llms.txt

Commands for deploying test content and running Cypress tests locally. Use `cypress:run:specific` for individual specs or `cypress:run` for the full suite.

```bash
# Deploy test content (form pages, fragment definitions)
mvn clean install -pl it/content -PautoInstallPackage \
  -Daem.host=localhost -Daem.port=4502 \
  -Daem.username=admin -Daem.password=admin

# Run a specific Cypress spec against a local AEM instance
cd ui.tests/test-module
npm run cypress:run:specific -- "specs/fragment/fragment.featuretoggles.cy.js"

# Run the full suite (~149 specs)
npm run cypress:run

# Open the interactive Cypress runner
npm run cypress:open
```

--------------------------------

### Get Data Layer State (JavaScript)

Source: https://github.com/adobe/aem-core-forms-components/wiki/Data-Layer-Integration

JavaScript code to retrieve the current state of the Adobe Data Layer.

```javascript
adobeDataLayer.getState()
```

--------------------------------

### Granite Toggle Provider Configuration

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/e2e-testing/feature-toggles.md

Configuration file for the DynamicToggleProviderImpl in the IT environment. Add toggle names to the 'enabled' array to activate them.

```json
it/config/src/main/content/jcr_root/apps/system/config/
  com.adobe.granite.toggle.impl.dev.DynamicToggleProviderImpl.cfg.json
```

--------------------------------

### Multiple File Upload Export Data

Source: https://github.com/adobe/aem-core-forms-components/blob/master/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/customfileupload/README.md

Example JSON structure representing the export data for multiple file uploads.

```json
{
  "customfileupload1769598345994": [
    {
      "name": "sample.txt",
      "size": 0,
      "mediaType": "application/octet-stream",
      "data": "/services/s3/presign/sample.txt"
    },
    {
      "name": "sample2.txt",
      "size": 0,
      "mediaType": "application/octet-stream",
      "data": "/services/s3/presign/sample2.txt"
    }
  ]
}
```

--------------------------------

### Deploy Test Content with Maven

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/overview.md

Use this command to deploy test content, such as form pages and fragments, to an AEM instance.

```bash
mvn clean install -pl it/content -PautoInstallPackage \
  -Daem.host=localhost -Daem.port=4502 \
  -Daem.username=admin -Daem.password=admin
```

--------------------------------

### HelloWorld Component HTL Script (Data Layer Enabled)

Source: https://github.com/adobe/aem-core-forms-components/wiki/Data-Layer-Integration

HTL script for the HelloWorld component updated to include the data-cmp-data-layer attribute for data layer integration.

```html
<div data-sly-use.hello="mymodels.HelloWorld"
     data-cmp-data-layer="${hello.data.json}">
    ${hello.message}
</div>

```

--------------------------------

### Single File Upload Export Data

Source: https://github.com/adobe/aem-core-forms-components/blob/master/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/customfileupload/README.md

Example JSON structure representing the export data for a single file upload.

```json
{
  "customfileupload1769598345994": {
    "name": "sample.pdf",
    "size": 0,
    "mediaType": "application/octet-stream",
    "data": "/services/s3/presign/sample.pdf"
  }
}
```

--------------------------------

### Execute UI Tests in Headless Mode

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.tests/README.md

Run UI tests in headless mode using Maven. This is suitable for CI environments.

```bash
mvn verify -Pcypress-ci
```

--------------------------------

### Reusing Enums in Java

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/overview.md

Reuse existing enums from the `models/form/` package instead of duplicating them. For example, use `CheckBox.Orientation` for option-style components.

```java
// Wrong — verbatim copy of CheckBox.Orientation
enum Orientation { HORIZONTAL("horizontal"), VERTICAL("vertical"); ... }

// Correct — reuse
import com.adobe.cq.forms.core.components.models.form.CheckBox;
// return type: CheckBox.Orientation
```

--------------------------------

### HelloWorld Component HTL Script (Initial)

Source: https://github.com/adobe/aem-core-forms-components/wiki/Data-Layer-Integration

The initial HTL script for the HelloWorld component, displaying a message.

```html
<div data-sly-use.hello="mymodels.HelloWorld">
    ${hello.message}
</div>


```

--------------------------------

### JSON Double-Emission Trap Example

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/overview.md

Illustrates how a JCR property not registered in `ReservedProperties.java` can appear twice in the form JSON: once as a top-level property and again under `fd:layout`.

```json
{
  "selectionType": "single",    // stray top-level — NOT expected by AF2 runtime
  "fd:layout": {
    "selectionType": "single"   // intended
  }
}
```

--------------------------------

### Fragment Placeholder in Parent Form JCR Content

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/overview.md

Example JCR content for a fragment placeholder within a parent form, referencing a fragment by its `fragmentPath`.

```xml
<fragment
    sling:resourceType="forms-components-examples/components/form/fragment"
    fieldType="panel"
    fragmentPath="/content/forms/af/core-components-it/samples/fragment/my-fragment"
    name="myplaceholder"
    wrapData="{Boolean}true">
    <fd:events jcr:primaryType="nt:unstructured"
        initialize="scriptExpression"/>
    <fd:rules jcr:primaryType="nt:unstructured"
        visible="expressionString"/>
</fragment>
```

--------------------------------

### Execute Cypress Tests with Maven

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.tests/test-module/README.md

Use this Maven command to execute the Cypress tests. Ensure your AEM instance is running. Reports will be generated in the `target/reports` folder.

```bash
mvn verify -Pcypress
```

--------------------------------

### Fragment Definition JCR Content

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/overview.md

Example JCR content for a fragment definition page, indicating a reusable sub-form with `fd:type="fragment"`.

```xml
<guideContainer
    fd:type="fragment"
    fd:version="2.1"
    sling:resourceType="forms-components-examples/components/form/fragmentcontainer"
    fieldType="form">
    <fd:events jcr:primaryType="nt:unstructured"
        initialize="dispatchEvent($form.placeholder.fieldname,'custom:setProperty',{value:'x'})"/>
    <textinput
        sling:resourceType=".../form/textinput"
        fieldType="text-input"
        name="fieldname"/>
</guideContainer>
```

--------------------------------

### Toggle Monitor System Property Configuration

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/e2e-testing/feature-toggles.md

OSGi factory configuration to bridge Granite toggles to JVM system properties. This file should be placed in the same directory as the Granite config.

```json
{
  "toggle.name": "FT_FORMS-XXXXX",
  "system.property": "FT_FORMS-XXXXX",
  "fail.used": false
}
```

--------------------------------

### Get Model Element by ID in AEM Forms

Source: https://context7.com/adobe/aem-core-forms-components/llms.txt

Retrieves the root model or a specific element by its ID. Used in Cypress tests to inspect form state and interact with fields.

```javascript
getModel(id) {
    return id ? this._model.getElement(id) : this._model;
}
```

```javascript
// Usage in a Cypress test
cy.previewForm("/content/forms/af/my-form.html").then(formContainer => {
    // Inspect all registered field views
    const fields = formContainer.getAllFields();
    console.log("Registered fields:", Object.keys(fields));

    // Get the model node for a specific field by id
    const [firstFieldId] = Object.entries(fields)[0];
    const modelNode = formContainer.getModel(firstFieldId);
    console.log("Field state:", modelNode.getState());

    // Programmatically focus a field
    formContainer.setFocus(firstFieldId);
});
```

--------------------------------

### Modern Form JSON Model Structure (items array format)

Source: https://context7.com/adobe/aem-core-forms-components/llms.txt

Example JSON structure for an AEM Adaptive Form model when the items-array feature toggle is ON. Uses a modern flat array format for 'items'.

```json
{
  "fieldType": "form",
  "fd:version": "2.1",
  "title": "My Adaptive Form",
  "items": [
    {
      "fieldType": "text-input",
      "name": "firstName",
      "label": { "value": "First Name" },
      "required": true
    },
    {
      "fieldType": "panel",
      "items": []
    }
  ]
}
```

--------------------------------

### OSGi Config: Enable Toggles in IT Environment

Source: https://context7.com/adobe/aem-core-forms-components/llms.txt

Enables a list of feature toggles within the Integration Test (IT) environment by configuring the DynamicToggleProviderImpl.

```json
// it/config/.../com.adobe.granite.toggle.impl.dev.DynamicToggleProviderImpl.cfg.json
{
  "enabled": [
    "FT_FORMS-24087",
    "FT_FORMS-24343",
    "FT_FORMS-24358"
  ]
}
```

--------------------------------

### Legacy Form JSON Model Structure (:items map format)

Source: https://context7.com/adobe/aem-core-forms-components/llms.txt

Example JSON structure for an AEM Adaptive Form model when the items-array feature toggle is OFF. Uses a legacy map format with ':items' and ':itemsOrder' keys.

```json
{
  "fieldType": "form",
  "fd:version": "2.1",
  "title": "My Adaptive Form",
  ":items": {
    "textinput1": {
      "fieldType": "text-input",
      "name": "firstName",
      "label": { "value": "First Name" },
      "required": true,
      "events": {
        "custom:setProperty": ["$event.payload"]
      }
    },
    "panel1": {
      "fieldType": "panel",
      "items": []
    }
  },
  ":itemsOrder": ["textinput1", "panel1"]
}
```

--------------------------------

### Run Full Cypress Test Suite

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/overview.md

Executes all tests in the Cypress test suite.

```bash
npm run cypress:run
```

--------------------------------

### Verify Deployed Content with Curl

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/overview.md

Fetch and pretty-print the JSON model of a deployed form or fragment using curl and Python.

```bash
curl -s -u admin:admin \
  "http://localhost:4502/content/forms/af/core-components-it/samples/<path>.model.json" \
  | python3 -m json.tool
```

--------------------------------

### Open Interactive Cypress Runner

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/overview.md

Launches the Cypress interactive runner, allowing for real-time test execution and debugging.

```bash
npm run cypress:open
```

--------------------------------

### Initialize Adaptive Form Wizard JavaScript Component

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md

Apply this data attribute to the wrapper block to enable the initialization of the Adaptive Form Wizard JavaScript component. This is necessary for the component's interactive features.

```html
data-cmp-is="adaptiveFormWizard"
```

--------------------------------

### Format Java Code with Maven

Source: https://github.com/adobe/aem-core-forms-components/blob/master/README.md

Execute this Maven command to automatically format your Java code according to the project's Eclipse formatter rules.

```bash
mvn clean install -Pformat-code
```

--------------------------------

### Initialize Adaptive Form Switch Component

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/switch/v1/switch/README.md

Essential data attributes for initializing the Adaptive Form Switch component in the form view. Ensure these are present for the component to function correctly.

```html
data-cmp-is="adaptiveFormSwitch"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
```

--------------------------------

### Load and Initialize Form with cy.previewForm

Source: https://context7.com/adobe/aem-core-forms-components/llms.txt

Loads a form at a given path in disabled mode and waits for initialization before resolving with the formContainer object. Used in Cypress tests to set up form interactions.

```javascript
// commands.js — cy.previewForm loads the form at ?wcmmode=disabled and waits for
// Constants.FORM_CONTAINER_INITIALISED before resolving with the formContainer object.

describe("Text Input Component", () => {
    if (cy.af.isLatestAddon()) {
        const pagePath = "content/forms/af/core-components-it/samples/textinput/basic.html";
        let formContainer = null;

        it("should render text input and accept user input", () => {
            cy.previewForm(pagePath).then(p => {
                formContainer = p;
                expect(formContainer, "initialized").to.not.be.null;

                const [firstId] = Object.entries(formContainer._fields)[0];
                cy.get(`#${firstId}`).find("input")
                    .should("be.visible")
                    .clear()
                    .type("Hello AEM")
                    .blur();

                cy.get(`#${firstId}`).find("input").should("have.value", "Hello AEM");
            });
        });
    }
});
```

--------------------------------

### Cypress Async Trap - Correct Initialization

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/e2e-testing/feature-toggles.md

Shows the correct pattern for initializing formContainer and performing assertions. All dependent code, including assertions, must be placed inside the `.then()` callback of the asynchronous Cypress command.

```javascript
cy.previewForm(pagePath).then(p => {
    formContainer = p;
    expect(formContainer, "initialized").to.not.be.null; // inside .then() — works
    cy.get(`#${Object.keys(formContainer._fields)[0]}`).should("be.visible");
});
```

--------------------------------

### Verify Server Output with cURL

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/architecture/runtime-internals.md

Uses cURL to fetch the form model JSON from the server and Python to parse it, verifying the presence of ':items' and 'items' keys.

```bash
curl -s -u admin:admin \
  "http://localhost:4502/<pagePath>/_jcr_content/guideContainer.model.json" \
  | python3 -c "import sys,json; d=json.load(sys.stdin); print(':items:', ':items' in d, '  items:', 'items' in d)"
```

--------------------------------

### Configure Content Package Maven Plugin

Source: https://github.com/adobe/aem-core-forms-components/blob/master/README.md

Add this configuration to your content-package-maven-plugin in pom.xml to include the core components as a sub package.

```xml
<subPackage>
     <groupId>com.adobe.aem</groupId>
     <artifactId>core-forms-components-all</artifactId>
     <filter>true</filter>
 </subPackage>
```

--------------------------------

### Enable JavaScript Initialization for Wizard

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v2/wizard/README.md

Apply this data attribute to the wrapper block to initialize the JavaScript component for the Adaptive Form Wizard. This enables its interactive features.

```html
<div data-cmp-is="adaptiveFormWizard"></div>
```

--------------------------------

### Initialize AEM Form Component and GuideBridge Events

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.apps/src/main/content/jcr_root/apps/core/fd/components/aemform/v2/aemform/aemform.html

This script initializes the AEM Form component and sets up event listeners for GuideBridge integration. It ensures the client library is loaded before initializing the form and handles form container initialization events.

```javascript
(function () {
    const registerGuideBridgeEvents = (e) => {
        const formContainerPath = e.detail.getPath();
        bridge.connect(() => {
            if (window.guideBridge && typeof window.guideBridge?.getFormModel().setAdditionalSubmitMetadata == 'function') {
                const additionalSubmitMetadata = window.guideBridge?.getFormModel()?.additionalSubmitMetadata;
                window.guideBridge?.getFormModel()?. setAdditionalSubmitMetadata({
                    ...additionalSubmitMetadata,
                    embedContainerFormPathMapping: {
                        ...additionalSubmitMetadata.embedContainerFormPathMapping,
                        "${form.formPagePath @ context='scriptString'}": "${resource.path @ context='scriptString'}"
                    }
                });
            }
        }, null, formContainerPath);
    }
    const onDocumentReady = () => {
        if (window.guideBridge !== undefined) {
            bridge = window.guideBridge;
        } else {
            window.addEventListener("bridgeInitializeStart", (event) => {
                bridge = event.detail.guideBridge;
            });
        }
        document.addEventListener("AF_FormContainerInitialised", registerGuideBridgeEvents);
    }
    var onScriptLoad = function (evnt) {
        var formApp = evnt.detail.formApp;
        formApp.initializeAEMForm({
            "form": "${form.isFormSelected @ context='scriptString'}",
            "submitType": "${form.submitType @ context='scriptString'}",
            "thankyouConfig": "${form.thankyouConfig @ context='scriptString'}",
            "thankyouMessage": "${form.thankyouMessage @ context='scriptString'}",
            "thankyouPage": "${form.thankyouPage @ context='scriptString'}",
            "useIframe": "${form.useIframe @ context='scriptString'}",
            "height": "${form.height @ context='scriptString'}",
            "aemFormComponentPath": "${resource.path @ context='scriptString'}",
            "enableFocusOnFirstField": "${form.enableFocusOnFirstField @ context='scriptString'}",
            "version": "${form.formVersion @ context='scriptString'}"
        });
        //remove the event listener after completion
        window.removeEventListener("aemform-onscript-load", onScriptLoad);
    };
    window.addEventListener("aemform-onscript-load", onScriptLoad);
    window.addEventListener("DOMContentLoaded", onDocumentReady);
}());
```

--------------------------------

### Load Adaptive Form Function

Source: https://github.com/adobe/aem-core-forms-components/blob/master/it/apps/src/main/content/jcr_root/apps/forms-core-components-it/samplepages/loadunloadaf/v1/loadunloadaf/loadunloadaf.html

This function fetches an Adaptive Form's HTML and injects it into a specified DOM element. It constructs the form path with `wcmmode=disabled` and uses the Fetch API. Ensure the target CSS selector exists in your HTML.

```javascript
function loadform(btn) { var formPath = btn.getAttribute('data-form-path') loadAdaptiveForm({ formPath: formPath, CSS_Selector: '.customafsection' }) }
```

```javascript
var loadAdaptiveForm = function(options) { // Note: Query Parameter 'wcmmode=disabled' is not required for publish instance var path = options.formPath + '.html?wcmmode=disabled'; fetch(path).then((res) => res.text()).then(html => { setInnerHTML(document.querySelector(options.CSS_Selector), html); // OR $(options.CSS_Selector).html(html); }) }
```

--------------------------------

### Run a Specific Spec File in Headless Mode

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.tests/README.md

Execute a particular spec file within the Cypress test suite in headless mode. Navigate to the test-module directory first.

```bash
cd ui.tests/test-module
npm run cypress:run:file -- ./specs/textinput/textinput.runtime.spec.js
```

--------------------------------

### Enable Feature Toggle in Granite Configuration

Source: https://github.com/adobe/aem-core-forms-components/blob/master/docs/e2e-testing/feature-toggles.md

Add the feature toggle identifier to the 'enabled' array within the DynamicToggleProviderImpl.cfg.json file. This makes the toggle active in the Granite configuration.

```json
"FT_FORMS-XXXXX"
```

--------------------------------

### Enable Wizard Editing Functionality

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/README.md

Required properties and child nodes for the proxy component to enable full editing functionality for the Wizard. This includes marking the Wizard as a container and providing edit configuration listeners.

```xml
./cq:isContainer - set to {Boolean}true, marks the Wizard as a container component
./cq:editConfig - afterchilddelete, afterchildinsert and afterchildmove listeners should be provided via
the edit configuration of the proxy. _cq_editConfig.xml contains the recommended actions and can be copied to the proxy component.
```

--------------------------------

### Enable Wizard Editing Functionality Configuration

Source: https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v2/wizard/README.md

These properties and child nodes are required in the proxy component to enable full editing functionality for the Wizard. Ensure these are correctly configured for authoring.

```plaintext
./cq:isContainer - set to {Boolean}true
./cq:editConfig - afterchilddelete, afterchildinsert and afterchildmove listeners should be provided via the edit configuration of the proxy. _cq_editConfig.xml contains the recommended actions and can be copied to the proxy component.
```