因為Portal的列表篩選，只有三種樣式，文字框、單選和下拉框，如果要用到其他的篩選那就不能配置它了，所以我們可以使用它的Fetch Xml的篩選，來達到我們想要的效果，例如做一個日期選擇框，效果圖：

 做到這個要先在list選單中新增xml篩選：

<filter type="or" adx:uiinputtype="dynamic" adx:uiname="[邏輯名]">
      <condition value="" attribute="[邏輯名]" operator="on-or-after" adx:uiinputtype="dynamic" />
 

</filter>

<filter type="or" adx:uiinputtype="dynamic" adx:uiname="[邏輯名]">
      <condition value="" attribute="[邏輯名]" operator="on-or-before" adx:uiinputtype="dynamic" />
</filter>

增加 adx:uiinputtype="dynamic"屬性，然後在listjs自定義程式碼中寫入

$(document).ready(function () {

    //更改“checkbox”控制元件的型別text
 

    $('[name="0"]').prop('type', 'text');
    //給他加上id
    $('[name="0"]').prop('id', 'bk_fld_shipDateAfter');
    $('[name="0"]').hide();
    //先設定空值
    $("#bk_fld_shipDateAfter").val("");

    $("input[type=checkbox][name=1]").prop('id', 'bk_fld_shipDateBefore');
    $("input[type=checkbox][name=1]").hide();
    $(
 
"input[type=checkbox][name=1]").prop('type', 'text');
    $("#bk_fld_shipDateBefore").val("");

    // 隱藏前面幾個篩選條件，
    $("ul#entitylist-filters>li").css("display", "none");

 $("ul#entitylist-filters").append(`<li class='entitylist-filter-option-group'>
                <label data-filter-id='3' class='entitylist-filter-option-group-label h4'>開始時間~結束時間</label>
                <div id="app">
                <el-date-picker 
                    v-model='value1' 
                    type='daterange'
                    range-separator="-"
                    start-placeholder="開始時間"
                    end-placeholder="結束時間"
                    value-format="yyyy-MM-dd"
                    @change="daterangeClick">
                </el-date-picker></div></li>`);

const vue = new Vue({         el: '#app',         data: function () {             return {                 value1: [],             }         }, methods: {             daterangeClick() {                 if (this.value1) {                     $("#bk_fld_shipDateAfter").val(this.value1[0]);                     $("#bk_fld_shipDateBefore").val(this.value1[1]);                 } else {                     $("#bk_fld_shipDateAfter").val("");                     $("#bk_fld_shipDateBefore").val("");                 }             }         }     });

 $("div[class='pull-right']").ready(function () {
        // 獲取這個div所有按鈕html,在頁面上有兩個，但只會有一個有按鈕         var buttonDiv = $("div[class='pull-right']");
        for (var i = 0; i < buttonDiv.length; i++) {             if (buttonDiv[i].innerHTML != "undefined" && buttonDiv[i].innerHTML != "") {                 // 新增到查詢條件的ul裡面                 $("ul#entitylist-filters").append("<li class='entitylist-filter-option-group'><label  class='entitylist-filter-option-group-label h4' style='height:18px'></label>" + buttonDiv[i].innerHTML + "</li>");             }
        }
        // 移除原來的按鈕         var buttonList = $("div[class='pull-right'] > button");
        for (var i = 0; i < buttonList.length; i++) {             buttonList[i].remove();         }
    });
});