Drop down menu alfresco share中的Dynamic selectone

对于Alfresco share中的表单，我需要一个下拉框，其中根据表单中前面字段的值填充自定义选项

我的表单至少有两个字段。第一个是文本框，必须在其中输入唯一代码。完成后，第二个选择框必须使用输入的代码加载其选项

支持此要求的数据存储在数据列表中。我还通过webscript使用了/getOptions/{uniqueCode，返回了一个包含有效选项的JSON数组

现在，我有点纠结于如何构建表单的一部分，该部分将监视代码文本字段上的状态更改，并重新加载下拉框。我可以想到一些javascript，但我甚至不知道从哪里开始更改/添加文件

我查看了FDK，找到了selectone ftl。不幸的是，它只支持固定选项

我的实现基于我选择的答案

这与我已经在做的事情非常相似，我希望能够在服务器端完成这项工作，而不包括额外的往返。到目前为止，这是我所做的最好的一次

share-config-custom.xml

我在这里定义表单，并将我想要作为selectone的属性指向我自己的自定义字段模板。我向它传递一个参数ds，dataSource，它保存我的webscript的路径

<config evaluator="node-type" condition="my:contentType">
      <forms>
         <form>
            <field-visibility>
               <show id="my:code" />
               <show id="my:description" />
            </field-visibility>
            <appearance>
               <set id="general" appearance="bordered-panel" label="General" />
               <field id="my:description" set="general">
                   <control template="/org/alfresco/components/form/controls/customSelectone.ftl">
                       <control-param name="ds">/alfresco/service/mark/cache/options</control-param>
                   </control>
               </field>
            </appearance>
        </form>
    </forms>

customSelectone.ftl

我的自定义ftl有三个主要步骤。首先，它接收我从share config custom传递的ftl参数并将其分配给一个局部变量。然后它将一个html框作为一个字段，最后，它执行对我的webscript的调用以获取可能的选项

参数

html

Javascript

<script type="text/javascript">//<![CDATA[
(function()
{
    <#-- This references the code field from the form model. For this, the -->
    <#-- share config must be set to show the field for this form. -->
    <#if form.fields.prop_my_code??>
        var code = "${form.fields.prop_my_code.value}";
    <#else>
        var code = 0;
    </#if>

    // get code
    if(code === null || code === "") {
        document.getElementById('${fieldHtmlId}-scriptError').innerHTML = 'No description available.';
        return;
    }

    // Create webscript connection using yui connection manager
    // Note that a much more elegant way to call webscripts using Alfresco.util is 
    // available in the answers here.
    var AjaxConnectionManager = {
        handleSuccess:function(o) {
            console.log('response: '+o.responseText);
            this.processResult(o);
        }, 

        handleFailure:function(o) {
            var selectBox = document.getElementById('${fieldHtmlId}');
            var i;

            document.getElementById('${fieldHtmlId}-scriptError').innerHTML = 'Descriptions not available.';
        }, 

        startRequest:function() {
            console.log('webscript call to ${ds} with params code='+code);
            YAHOO.util.Connect.asyncRequest('GET', "${ds}?typecode="+code, callback, null);
        },

        processResult:function(o) {
            var selectBox = document.getElementById('${fieldHtmlId}');
            var jso = JSON.parse(o.responseText);
            var types = jso.types;
            console.log('adding '+types.length+' types to selectbox '+selectBox);
            var i;

            for(i=0;i<types.length;i++) {
                // If the current field's value is equal to this value, don't add it.
                if(types[i] === null || types[i] === '${field.value}') {
                    continue;
                }
                selectBox.add(new Option(types[i], types[i]));
            }
        }
    }

    // Define callback methods
    var callback = {
        success:AjaxConnectionManager.handleSuccess,
        failure:AjaxConnectionManager.handleFailure,
        scope: AjaxConnectionManager
    };

    // Call webscript
    AjaxConnectionManager.startRequest();
})();
//]]></script>
<#-- This closes the form.mode != "create" condition, so the js is only executed when in edit/create mode. -->
</#if>

---

我以前也有过类似的任务。 首先，您需要在配置xml中定义一个自定义模板

<config evaluator="node-type" condition="my:type">
    <forms>
        <form>
            <field-visibility>
                <show id="cm:name" />
                <show id="my:options" />
                <show id="cm:created" />
                <show id="cm:creator" />
                <show id="cm:modified" />
                <show id="cm:modifier" />
            </field-visibility>
            <appearance>
                <field id="my:options">
                    <control template="/org/alfresco/components/form/controls/custom/custom-options.ftl" />
                </field>
            </appearance>
        </form>
    </forms>
</config>

---

您可以这样调用webscript：

<script type="text/javascript">//<![CDATA[
    var updateOptions = function(res){
        var result = eval('(' + res.serverResponse.responseText + ')');
        if(result.Options.length > 0 ) { // Options - returned JSON object
            // do something with JSON data
        }
    }

Alfresco.util.Ajax.jsonGet({
    url : Alfresco.constants.PROXY_URI + "/getOptions/{uniqueCode}"+ (new Date().getTime()),
    successCallback : {
        fn : updateOptions,
        scope : this
    },
    failureCallback : {
        fn : function() {},
        scope : this
    }
});
//]]></script>

---

整洁，清晰。与我一直在做的事情类似。但是这个javascript，它将在客户端执行，对吗？在alfresco的服务器端javascript中执行它会更干净。知道从哪里开始吗？非常整洁！我已经编写了我的实现，但是你的webscript调用看起来很棒！

<#assign controlId = fieldHtmlId + "-cntrl">
<script type="text/javascript">//<![CDATA[
// Here you could call your webscript and load your list
</script>

<div id="${controlId}" class="form-field">
 <label for="${fieldHtmlId}">${msg("form.control.my-options.label")}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
 <select id="${fieldHtmlId}" name="${field.name}" tabindex="0"
       <#if field.description??>title="${field.description}"</#if>
       <#if field.control.params.size??>size="${field.control.params.size}"</#if> 
       <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>
       <#if field.control.params.style??>style="${field.control.params.style}"</#if>>
 </select>
 <@formLib.renderFieldHelp field=field />
</div>

<script type="text/javascript">//<![CDATA[
    var updateOptions = function(res){
        var result = eval('(' + res.serverResponse.responseText + ')');
        if(result.Options.length > 0 ) { // Options - returned JSON object
            // do something with JSON data
        }
    }

Alfresco.util.Ajax.jsonGet({
    url : Alfresco.constants.PROXY_URI + "/getOptions/{uniqueCode}"+ (new Date().getTime()),
    successCallback : {
        fn : updateOptions,
        scope : this
    },
    failureCallback : {
        fn : function() {},
        scope : this
    }
});
//]]></script>