AEM Touch UI对话框中从外部服务动态加载下拉选项方案咨询

我来给你一步步解决这个问题——不用Datasource的话，咱们直接靠客户端JS就能搞定第三方接口的选项加载：

1. 先在对话框里定义好下拉字段 #

首先在你的组件dialog.xml里，给下拉框加个唯一的标识（比如自定义class），方便后续JS定位：

<items jcr:primaryType="nt:unstructured">
    <movieSelection
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/form/select"
        fieldLabel="选择影片"
        name="./movieSelection"
        class="dynamic-movie-dropdown"> <!-- 这个class是关键，用来定位元素 -->
        <items jcr:primaryType="nt:unstructured">
            <!-- 先放个默认加载提示，后续会替换 -->
            <loading
                jcr:primaryType="nt:unstructured"
                text="加载中..."
                value=""/>
        </items>
    </movieSelection>
</items>

2. 编写客户端JS逻辑（放在Clientlib里） #

创建一个客户端库（Clientlib），把下面的JS放进去，记得把Clientlib的categories设为cq.authoring.dialog，这样它会在Touch UI对话框加载时自动执行：

$(document).on("foundation-contentloaded", function() {
    // 定位到咱们的下拉框
    const $dropdown = $(".dynamic-movie-dropdown");
    
    // 如果没找到元素就直接返回，避免报错
    if (!$dropdown.length) return;

    // 调用第三方接口
    $.get(mec.serviceConfig.baseUrl + '/movies')
        .done(function(movies) {
            // 先清空原有选项
            $dropdown.find("option").remove();

            // 循环接口返回的影片数据，生成选项
            movies.forEach(function(movie) {
                // 假设返回的每个movie对象有id和name属性，可根据实际结构调整
                const $option = $("<option>").val(movie.id).text(movie.name);
                $dropdown.append($option);
            });

            // 如果没有数据，加个提示选项
            if (movies.length === 0) {
                $dropdown.append($("<option>").val("").text("暂无影片数据"));
            }
        })
        .fail(function() {
            // 请求失败时的处理
            $dropdown.find("option").remove();
            $dropdown.append($("<option>").val("").text("加载影片失败，请稍后重试"));
        });
});

3. 注意事项 #

• 跨域问题：如果第三方接口和AEM不在同一域名下，你需要要么让接口开启CORS，要么在AEM中配置反向代理（通过Apache或Dispatcher转发请求），否则浏览器会拦截跨域请求。
• 数据结构适配：上面的代码假设接口返回的是包含id和name的数组，你需要根据实际返回的JSON结构调整movie.id和movie.name的部分。
• Clientlib配置：确保你的Clientlib的categories包含cq.authoring.dialog，并且被正确打包到AEM中，这样JS才能在对话框加载时执行。

这样操作下来，当用户打开对话框时，下拉框就会自动调用第三方接口加载选项啦！

内容的提问来源于stack exchange，提问作者Oliver