Adobe AEM 自定义Servlet定制配置dialog对话框中的select选项并支持联动

原创
2022/07/06 10:21
阅读数 219

背景:dialog中需要增加tab,该tab是可以公用的,也就是其他dialog直接可以引用,然后配置里的select选项,需要从后台动态获取,考虑自定义servlet来实现

1.首先dialog.xml的定义中增加公共tab

< yourtab
                        jcr:primaryType = "nt:unstructured"
                        sling:resourceType = "granite/ui/components/coral/foundation/include"
                        margin = "{Boolean}true"
                        path = "xxxx/v1/yourtab" />
2.在自定义tab的xml表述文件中,比如我的是select元素从后台servlet自动获取,就是datasource标签决定select选项的数据源
< xxx
                            granite:class = "core-title-sizes"
                            granite:id = "dto"
                            jcr:primaryType = "nt:unstructured"
                            sling:resourceType = "granite/ui/components/coral/foundation/form/select"
                            fieldLabel = "xxx"
                            fieldDescription = "xxxx"
                            name = "./xxx" >
                            < datasource
                                jcr:primaryType = "nt:unstructured"
                                sling:resourceType = "xxxx/v1/yourtab" />
                        </ dto >
3.创建数据源servlet类,同时支持resousetype和path请求类型
@SlingServlet(
        resourceTypes =
YourtabDataSourceServlet . RESOURCE_TYPE_V1 ,
        extensions = "html",
        paths="/bin/getxxx",
        methods = {HttpConstants.METHOD_GET,HttpConstants.METHOD_POST})//支持多种请求类型可以这么写
public class YourtabDataSourceServlet extends SlingSafeMethodsServlet {
 
    public final static String RESOURCE_TYPE_V1 = "xxxx/v1/yourtab" ;//这里要对于上面的 resourceType
 
    @ Override 此处会在dialog打开时处理get请求,进行select中的选项初始化数据获取
    protected void doGet (@ NotNull SlingHttpServletRequest request , @ NotNull SlingHttpServletResponse response )
            throws ServletException , IOException {
        SimpleDataSource myDataSource = new SimpleDataSource ( getAllowedElements ( request ). iterator ());
        request . setAttribute ( DataSource . class . getName (), myDataSource );
    }
 
4.对于联动的设计,即当选择select中的相应值后会影响下面的select的内容,达到联动,需要额外增加js脚本来实现
//reset selected every time open dialog
$ ( ".cq-dialog" ). find ( "#id" )[ 0 ]. selectedItem . selected = false ;//记得重置上次的选中选项,避免上次操作影响
$ ( ".cq-dialog" ). find ( "#id" ). on ( "change" , function ( e ) {//监听select选项的改变事件
            $ . ajax ({
                type : "POST" ,
                    url : '/bin/getxxx' ,//处理联动的servlet路径
                    data : {
                        value : $ ( "#id" ). val ()
                    },
                    success : function ( data , textStatus , jqXHR ) {
                        $ ( "#attr" )[ 0 ]. items . clear ();//清空选项
                        if ( data != null && data . options != null ){
                            let resp = JSON . parse ( data . options );
                            for ( var i = 0 ; i < resp . length ; i ++) {
                                let obj = new Object ();
                                let cnt = new Object ();
                                obj [ "value" ] = resp [ i ]. value ;
                                cnt [ "textContent" ] = resp [ i ]. text ;
                                obj [ "content" ] = cnt ;
                                $ ( "#attr" )[ 0 ]. items . add ( obj );//重新加入servlet返回的选项
                            }
                        }
                    },
                    error : function ( XMLHttpRequest , textStatus , errorThrown ) {
                    //write your logic that you need to perform on error
                    }
            });
        });
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部