Create Proxy Component in AEM

A proxy component in AEM allows you to fetch content from an external source and render it as a component on your AEM page. This can be useful when you want to display content from a third-party service, such as a weather widget or news feed, on your AEM page.

Here are the steps to create a proxy component in AEM:

Create a new folder for your proxy component under /apps. For example, you could create /apps/myproject/components/proxy.

Inside the proxy folder, create a new file called .content.xml and add the following code:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="sling:Folder"
    sling:resourceType="myproject/components/proxy"
    jcr:title="My Proxy Component"
    />

This code defines the folder as a proxy component and sets its title to “My Proxy Component”.

Create a new file in the same folder called proxy.html and add the HTML code for your component.
For example:
```
<div class="my-proxy-component">
    <h2>Weather Widget</h2>
    <p>Today's temperature: {{temperature}}</p>
    <p>Conditions: {{conditions}}</p>
</div>
```
This code creates a simple weather widget with placeholders for the temperature and conditions.

Create a new file in the same folder called proxy.js and add the following code:

"use strict";
use(function () {
    var url = "https://api.weather.com/1234"; // Replace with your API endpoint
    var result = {};

    try {
        var connection = new java.net.URL(url).openConnection();
        connection.setRequestMethod("GET");
        connection.connect();
        var inputStream = connection.getInputStream();
        var scanner = new java.util.Scanner(inputStream).useDelimiter("\\A");
        var response = scanner.hasNext() ? scanner.next() : "";
        var data = JSON.parse(response);
        result.temperature = data.temperature;
        result.conditions = data.conditions;
    } catch (e) {
        result.error = "Unable to fetch data";
    }

    return result;
});

This code defines the server-side logic for the component. It fetches data from an external API and returns it as an object that can be used in the HTML code. Replace the URL with your own API endpoint.

Save the files and navigate to a page where you want to add the proxy component. In edit mode, drag the proxy component from the side rail to the desired location on the page.
In the component dialog, you can configure any properties specific to your proxy component. For example, you might configure the API endpoint URL or set default values for the temperature and conditions placeholders.
Save the page and publish it to see your new proxy component in action.

Share on Facebook

Save