### Install Theme Dependencies and Preview

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/forms/using-themes-in-core-components.md

Commands to initialize the local development environment and start the live preview server.

```bash
npm install
```

```bash
npm run live
```

```bash
npm install parcel --save-dev
```

```bash
npm i @parcel/transformer-sass
```

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

### Install AEM Quickstart MCP Server Content Package

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/ai-in-aem/local-development-with-ai-tools.md

Download and install the 'com.adobe.aem:com.adobe.aem.mcp-server-contribs-content' package into your local AEM Quickstart instance via Package Manager. This enables AI tools to access runtime data.

```plaintext
com.adobe.aem:com.adobe.aem.mcp-server-contribs-content
```

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

### Complete Rich Text Editor Configuration Example

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/implementing/universal-editor/configure-rte.md

This example shows a comprehensive configuration for a rich text editor, including toolbar setup and detailed action customizations for formatting, lists, links, images, and special characters.

```json
[
  {
    "id": "richtext",
    "rte": {
      // Configure which tools appear in toolbar
      "toolbar": {
        "format": [
          "bold",
          "italic"
        ],
        "blocks": [
          "paragraph",
          "h1",
          "h2"
        ],
        "list": [
          "bullet_list",
          "ordered_list"
        ],
        "insert": [
          "link",
          "unlink",
          "image",
          "special_characters"
        ],
        "sections": [
          "format",
          "blocks",
          "list",
          "insert"
        ]
      },
      // Customize individual action behavior
      "actions": {
        // Format actions with HTML tag choices
        "bold": {
          "tag": "strong",
          "shortcut": "Mod-B",
          "label": "Bold"
        },
        "italic": {
          "tag": "em",
          "shortcut": "Mod-I"
        },
        // List actions with content wrapping
        "bullet_list": {
          "wrapInParagraphs": true,
          "label": "Bullet List"
        },
        "ordered_list": {
          "wrapInParagraphs": false
        },
        // Link actions with target control
        "link": {
          "hideTarget": false,
          "shortcut": "Mod-K",
          "label": "Add Link"
        },
        "unlink": {
          "label": "Remove Link"
        },
        // Image actions with picture wrapping
        "image": {
          "wrapInPicture": false, // Use <img> tag instead of <picture>
          "shortcut": "Mod-Shift-I",
          "label": "Insert Image",
        },
        // Special characters with custom additions
        "special_characters": {
          "label": "Special Characters",
          "appendCharacters": [{ "character": "★", "title": "Black star" }],
        },
        // Other actions with basic customization
        "h1": {
          "shortcut": "Mod-Alt-1",
          "label": "Main Heading"
        }
      }
    }
  }
]
```

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

### Start Local AEM Environment

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/edge/docs/forms/tutorial.md

Navigates to the project directory and starts the local AEM instance.

```Bash
cd <repo>
aem up
```

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

### Example SharePoint Folder Path

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/edge/docs/forms/tutorial.md

An example of a correctly formatted SharePoint folder path for fstab.yaml.

```html
https://adobe.SharePoint.com/sites/wkndforms/Shared%20Documents/wefinance
```

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

### Install Dependencies

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/forms/aem-forms-cloud-service-communications-on-demand-processing.md

Install the required libraries for HTTP requests, environment variable management, and form data handling.

```bash
npm install node-fetch
npm install dotenv
npm install form-data
```

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

### init

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/implementing/developing/personalization/contexthub-api.md

Initializes the store with a name and configuration object.

```APIDOC
## init(name, config)

### Description
Initializes the store, sets store data and references to empty objects, and configures event channels.

### Parameters
#### Request Body
- **name** (string) - Required - The name of the store.
- **config** (object) - Required - Configuration properties including eventDeferring, eventing, and persistence.
```

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

### Install Upskill Extension and AEM Skills

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/ai-in-aem/local-development-with-ai-tools.md

Install the gh-upskill GitHub CLI extension and then install all available AEM Cloud Service skills using this extension. This is a one-time setup for the extension.

```bash
# Install the gh-upskill extension (one-time setup)
gh extension install ai-ecoverse/gh-upskill

# Install all available skills
gh upskill adobe/skills --path plugins/aem/cloud-service --all
```

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

### Initialize Interactive Video Viewer with Quickview Handlers

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/assets/dynamic-media/interactive-videos.md

This snippet demonstrates the setup of the InteractiveVideoViewer and provides a commented-out template for handling quickViewActivate and initComplete events to integrate with custom Quickview logic.

```javascript
<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%;
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 /* // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
    //To pass other parameter from the hotspot, you need to add custom parameter during the hotspot setup as parameterName=value
    loadQuickView(sku); //Replace this call with your quickview plugin
    //See your quickviewer plugin for the quickview call
    },
"initComplete":function() {
    //--- Attach quickview pop-up to viewer container so pop-up works in fullscreen mode ---
    var popup = document.getElementById('quickview_div'); // get custom quickview container
    popup.parentNode.removeChild(popup); // remove it from current DOM
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(popup); //Attach custom quickview container to viewer
    }
   });
 */
 s7interactivevideoviewer.init();
</script>
```

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

### Example DEBUG Log Entry

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/implementing/developing/introduction/development-guidelines.md

This is an example of a log entry when the log level is set to DEBUG. It shows the log level, installer action, and the log message.

```text
DEBUG 3 WebApp Panel: WebApp successfully deployed
```

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

### Get Content Upgrade Status

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/headless/graphql-api/uuid-reference-upgrade.md

Use this GET request to check the status of an ongoing content upgrade. You must provide the jobId obtained from the start request.

```http
GET http://localhost:4502/libs/dam/cfm/maintenance.json?action=status&jobId=<UUID>
```

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

### Initialize Interactive Image Viewer

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/assets/dynamic-media/interactive-images.md

Complete implementation showing the viewer initialization and the quickViewActivate handler integration.

```xml
 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();
```

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

### Example component folder structure

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/forms/embed-adaptive-forms-theme-in-site-theme.md

Illustrates the expected directory structure after copying individual component folders into the adaptiveform directory.

```text
theme/src/components/adaptiveform/button/
theme/src/components/adaptiveform/checkbox/
theme/src/components/adaptiveform/container/
… (one folder per component)
```

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

### Install Adobe Skills for Claude Code

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/ai-in-aem/local-development-with-ai-tools.md

Add the Adobe Skills marketplace and install all available AEM Cloud Service skills for Claude Code. This is a one-time setup.

```bash
# Add the Adobe Skills marketplace (one-time setup)
/plugin marketplace add adobe/skills

# Install all available skills
/plugin install aem-cloud-service@adobe-skills
```

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

### Install DocuSign Sample to Local Repository

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/forms/integrate-docusign-adaptive-forms.md

Build and install the DocuSign sample code into the local project's Maven repository.

```shell
mvn clean install -Dinstall.dir="<AEM Forms as a Cloud Service project path>/maven_repository"
```

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

### Initialize Configuration Directory

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/forms/aem-forms-cloud-service-communications-on-demand-processing.md

Commands to create the configuration directory and the API configuration file.

```bash
mkdir config
```

```bash
touch config/api.yaml
```

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

### Structure Prefill Data without afData Wrapper

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/forms/prepopulate-adaptive-form-fields.md

Example of prefill data starting directly from the schema root object without the afData wrapper.

```json
{
  "user": {
    "address": {
      "city": "Noida",
      "country": "India"
    }
  }
}
```

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

### Run Live Preview of Theme Changes

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/forms/using-themes-in-core-components.md

Execute this command in the root of your theme folder to start a local development server. This command redirects you to a local browser where you can preview your theme changes in real-time.

```bash
npm run live

```

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

### Display Current RDE Configuration Output

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/implementing/developing/introduction/rapid-development-environments.md

This is an example of the output from the `aio aem rde setup --show` command, detailing the active configuration.

```bash
Current configuration: cm-p1-e1: programName - environmentName (organization: ...@AdobeOrg)
```

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

### Basic Upload Form Example

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/assets/content-advisor-customization.md

Provides a basic setup for uploading files using the AllInOneUpload component. Ensure repositoryId, apiToken, and targetUploadPath are correctly configured.

```javascript
import { AllInOneUpload } from '@assets/upload';
import { TextField, ContextualHelp } from '@adobe/react-spectrum';

const repoId = 'author-p52554-e145207-cmstg.adobeaemcloud.com'
const apiToken = 'eyJhbG....';
const targetUploadPath = '/content/dam/hydrated-assets/cq/as/cq-assets-upload-storybook-testing';

export const UploadExample = () => {
    return (
        <>
            <TextField
                marginStart="size-200"
                width="size-6000"
                isDisabled={true}
                label="Target Upload Path"
                value={targetUploadPath}
                contextualHelp={
                    <ContextualHelp>
                        <Content>Use Storybook Controls panel to change the default upload location</Content>
                    </ContextualHelp>
                }
            />
            <AllInOneUpload
                repositoryId={repoId}
                apiToken={apiToken}
                targetUploadPath={targetUploadPath}
            />
        <>
    )
}
```

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

### Get All Keys from ContextHub Store

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/implementing/developing/personalization/contexthub-api.md

Retrieves an array of all key names stored in the ContextHub store. Optionally include internal keys (starting with '_') by setting the parameter to true.

```javascript
getKeys(includeInternals)
```

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

### Full top-level pom.xml configuration sample

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/operations/indexing.md

A consolidated example of the plugin configuration in the top-level pom.xml.

```xml
<plugin>
    <groupId>org.apache.jackrabbit</groupId>
        <artifactId>filevault-package-maven-plugin</artifactId>
        ...
        <version>1.3.2</version>
        <configuration>
            ...
            <validatorsSettings>
                <jackrabbit-packagetype>
                    <options>
                        <immutableRootNodeNames>apps,libs,oak:index</immutableRootNodeNames>
                    </options>
                </jackrabbit-packagetype>
                ...
            ...
</plugin>
```

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

### Example Paging Request

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/assets/content-fragments/assets-api-content-fragments.md

Demonstrates how to use offset and limit parameters in a GET request to retrieve a specific range of assets. The response includes paging information in the srn:paging property.

```HTTP
GET /api/assets.json?offset=2&limit=3
```

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

### Sample Quickview Function Call

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/assets/dynamic-media/custom-pop-ups.md

A sample function call for Quickview integration. Assumes the `loadQuickView(sku)` function is accessible on the host page.

```javascript
loadQuickView(sku)
```

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

### Custom Redirect URL Example

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/security/open-id-connect-support-for-aem-as-a-cloud-service-on-publish-tier.md

Demonstrates how to use the 'redirect' query parameter to specify a custom URL after successful OIDC authentication. The redirect URL must be a relative path starting with '/'.

```plaintext
/content/wknd/us/en/adventures?redirect=/content/wknd/us/en/welcome
```

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

### Entrypoint Script for Playwright HTTP Proxy Setup

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/implementing/cloud-manager/ui-testing.md

Configures HTTP proxy environment variables and installs the proxy CA certificate for Chromium when PROXY_HOST is set. It also includes a check for proxy readiness.

```bash
# setup proxy environment variables and CA certificate
if [ -n "${PROXY_HOST:-}" ]; then
  if [ -n "${PROXY_HTTPS_PORT:-}" ]; then
    export HTTP_PROXY="https://${PROXY_HOST}:${PROXY_HTTPS_PORT}"
  elif [ -n "${PROXY_HTTP_PORT:-}" ]; then
    export HTTP_PROXY="http://${PROXY_HOST}:${PROXY_HTTP_PORT}"
  fi
  if [ -n "${PROXY_CA_PATH:-}" ]; then
    echo "installing certificate"
    mkdir -p $HOME/.pki/nssdb
    certutil -d sql:$HOME/.pki/nssdb -A -t "CT,c,c" -n "EaaS Client Proxy Root" -i $PROXY_CA_PATH
    export NODE_EXTRA_CA_CERTS=${PROXY_CA_PATH}
  fi
  if [ -n "${PROXY_OBSERVABILITY_PORT:-}" ] && [ -n "${HTTP_PROXY:-}" ]; then
    echo "waiting for proxy"
    curl --silent  --retry ${PROXY_RETRY_ATTEMPTS:-3} --retry-connrefused --retry-delay ${PROXY_RETRY_DELAY:-10} \
      --proxy ${HTTP_PROXY} --proxy-cacert ${PROXY_CA_PATH:-}\" 
      ${PROXY_HOST}:${PROXY_OBSERVABILITY_PORT}
    if [ $? -ne 0 ]; then
      echo "proxy is not ready"
      exit 1
    fi
  fi
fi
```

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

### CDN Configuration with Origin Selectors

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/implementing/dispatcher/cdn-configuring-traffic.md

This example demonstrates how to configure CDN origin selectors to route traffic based on the original request path. It defines a rule to select the 'example-com' origin for requests starting with '/proxy'.

```yaml
kind: "CDN"
version: "1"
data:
  originSelectors:
    rules:
      - name: example-com
        when: { reqProperty: originalPath, like: /proxy* }
        action:
          type: selectOrigin
          originName: example-com
          # skipCache: true
          # headers:
          #   Authorization: ${{AUTH_TOKEN}}$
    origins:
      - name: example-com
        domain: www.example.com
        # ip: '1.1.1.1'
        # forwardHost: true
        # forwardCookie: true
        # forwardAuthorization: true
        # timeout: 20
```

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

### Configure Interactive Video Event Handlers

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/assets/dynamic-media/interactive-videos.md

Sets up event handlers for quickview activation and viewer initialization, including DOM manipulation for fullscreen support.

```javascript
 // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
     var categoryId=inData.categoryId; //categoryId
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   "initComplete":function() {
    //--- Attach quickview pop-up to viewer container so pop-up works in fullscreen mode ---
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(document.getElementById("quickview-modal"));
    }
   });
 s7interactivevideoviewer.init();
```

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

### install

Source: https://github.com/adobedocs/experience-manager-cloud-service.en/blob/main/help/implementing/developing/tools/maven-plugin.md

Installs a package in the repository.

```APIDOC
## install

### Description
Installs a package in the repository. The goal is bound to the install phase of the Maven build lifecycle.

### Parameters
- **artifact** (String) - Optional - A string of the form groupId:artifactId:version[:packaging].
- **artifactId** (String) - Optional - The ID of the artifact to install.
- **groupId** (String) - Optional - The groupId of the artifact to install.
- **install** (boolean) - Optional - Determines whether to unpack the package automatically when it is uploaded.
- **localRepository** (org.apache.maven.artifact.repository.ArtifactRepository) - Optional - The local Maven repository.
- **packageFile** (java.io.File) - Optional - The name of the package file to install.
- **packaging** (String) - Optional - The type of packaging of the artifact to install.
- **pomRemoteRepositories** (java.util.List) - Required - The remote artifact repositories defined for the project.
- **project** (org.apache.maven.project.MavenProject) - Required - The Maven project.
- **repositoryId** (String) - Optional - The ID of the repository from which the artifact is retrieved.
- **repositoryUrl** (String) - Optional - The URL of the repository from which the artifact is retrieved.
- **version** (String) - Optional - The version of the artifact to install.
```