如何在露天中创建级联下拉

时间:2015-12-24 09:27:37

标签: alfresco alfresco-share

我要求我必须创建级联下拉列表,这意味着第二个下拉列表的值将取决于第一个下拉列表。该列表将被硬编码。

例如国家的第一次下降,根据这个值,第二次下降是与该国相对应的州;我将列出与每个国家相对应的州名单。

现在我知道如何使用list对字段应用约束,但是可以将其扩展到两个级别吗?

我还搜索过datalist,但我真的不希望这样,因为列表将成为泛客户,但是datalist将使客户特定,并且不希望客户自己创建列表。

任何帮助都将受到高度赞赏。

由于

4 个答案:

答案 0 :(得分:2)

Alfresco没有开箱即用的级联下拉列表。 尽管如此,开发一个并不困难。

因为您的列表是硬编码的,所以有一个简单的解决方案。 生成两个下拉列表的控件。它们甚至可以只是一个隐藏的字段或空的下拉列表。如果您不熟悉Alfresco表单引擎,则可能更容易使用隐藏字段,如下例所示(share-config-custom.xml中的配置代码段):

const bg::AppSettings& bg::AppSettings::GetInstance()
{
    static AppSettings instance;
    return instance;
}

在share-config-custom.xml中,您还可以添加新的自定义javascript和css:

<field id="dropdown1">
  <control template="/org/alfresco/components/form/controls/hidden.ftl">
     <control-param name="contextProperty">dropdown1</control-param>
  </control>
</field>
<field id="dropdown2">
  <control template="/org/alfresco/components/form/controls/hidden.ftl">
     <control-param name="contextProperty">dropdown2</control-param>
  </control>
</field>

自定义javascript和css可以使用YUI找到两个控件并生成必要的下拉列表和事件侦听器。更新下拉列表时,事件侦听器将更新级联下拉列表,并且还将更新隐藏字段。表单关闭时,将发布隐藏字段的值。

更好的解决方案是使用自定义javascript来定义javascript库。然后,您可以在自定义免费标记模板中使用此javascript库而不是“/org/alfresco/components/form/controls/hidden.ftl”

您可以在

中找到hidden.ftl

/webapps/share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/form/controls/hidden.ftl

在扩展路径中复制此ftl并修改它以使用您的自定义JavaScript。

如果列表没有硬编码,只需使用webscript生成列表并使用ajax调用从浏览器中调用它。

答案 1 :(得分:1)

与alfresco社区版5.0.d一样,您可以/应该使用aikau进行此类事情,您可以开始学习并使用基于this tutorial的aikau作为独立的aikau客户端或this tutorial用于新的自定义共享页面。

一旦你进行了页面设置(desc.xml,js和ftl),你应该有这样的东西:

自定义-page.get.desc.xml

<webscript>
  <shortname>Test page 1</shortname>
  <family>testing</family>
  <url>/custom-uri</url>
</webscript>

自定义-page.get.ftl

<@processJsonModel group="share"/>

custom-page.get.js

model.jsonModel = {
    services : [ "alfresco/services/NavigationService",
            "alfresco/services/LogoutService",
            // Add more services here !!!
            ],
    widgets : [ 
        // Add more widgets here
    ]
};

现在需要为小部件数组添加两个选择:

{
    name : "alfresco/forms/Form",
    config : {
        scopeFormControls : false, // to avoid complex handling of
        // pubSubScope

        widgets : [ {
            name : "alfresco/forms/controls/Select",
            config : {
                fieldId : "LEVEL_1",
                label : "Level 1",
                description : "Select an item from the list",
                name : "level_1",
                value : "1",
                requirementConfig : {
                    initialValue : true
                },
                optionsConfig : {
                    fixed : [ {
                        label : "Item 1",
                        value : "1"
                    }, {
                        label : "Item 2",
                        value : "2"
                    }, {
                        label : "Item 3",
                        value : "3"
                    } ]
                }
            }
        }, {
            name : "alfresco/forms/controls/Select",
            id : "LEVEL_2",
            config : {
                fieldId : "LEVEL_2",
                label : "Level 2",
                description : "Select an item from the list",
                name : "level_2",
                requirementConfig : {
                    initialValue : true
                },
                optionsConfig : {
                    fixed : [ {
                        label : "Item 1.1",
                        value : "1"
                    }, {
                        label : "Item 1.2",
                        value : "2"
                    }, {
                        label : "Item 1.3",
                        value : "3"
                    } ]
                }
            }
        } ]
    }
}

下一步是在第一个选择中检测更改事件,然后使用新项目刷新第二个选择的列表。为此,您需要定义新服务或扩展第二个选择的选择小部件。我将选择1号选项: 的 CustomServiceForNestedSelects.js

define(
        [ "dojo/_base/declare", "alfresco/core/Core", "dojo/_base/lang",
                "alfresco/core/CoreXhr", "service/constants/Default" ],
        function(declare, Core, lang, CoreXhr, AlfConstants) {

            return declare(
                    [ Core, CoreXhr ],
                    {
                        pubSubScope : "",
                        levelOneFieldId : "LEVEL_1",
                        levelTwoFieldId : "LEVEL_2",
                        levelTwoItems : [ [ {
                            label : "Item 1.1",
                            value : "1"
                        }, {
                            label : "Item 1.2",
                            value : "2"
                        }, {
                            label : "Item 1.3",
                            value : "3"
                        } ], [ {
                            label : "Item 2.1",
                            value : "1"
                        }, {
                            label : "Item 2.2",
                            value : "2"
                        }, {
                            label : "Item 2.3",
                            value : "3"
                        } ], [ {
                            label : "Item 3.1",
                            value : "1"
                        }, {
                            label : "Item 3.2",
                            value : "2"
                        }, {
                            label : "Item 3.3",
                            value : "3"
                        } ] ],
                        constructor : function yreg_CustomServiceForNestedSelects__constructor(
                                args) {
                            lang.mixin(this, args);

                            this.alfSubscribe(this.pubSubScope
                                    + "_valueChangeOf_" + this.levelOneFieldId,
                                    lang.hitch(this, this.levelOneChanged));
                        },
                        levelOneChanged : function yreg_CustomServiceForNestedSelects__levelOneChanged(
                                payload) {
                            var value = payload.value;
                            var levelTwo = dijit.byId(this.levelTwoFieldId);
                            if (levelTwo)
                                levelTwo
                                        .setOptions(this.levelTwoItems[value - 1]);
                        },

                    });
        });

现在,剩下的就是将您的服务包含在您的页面模型中

"<custom-package>/CustomServiceForNestedSelects"

注意:

答案 2 :(得分:1)

Aikau实际上提供了开箱即用的级联菜单,请参阅alfresco / menus / AlfCascadingMenu小部件。 Alfresco中已经存在其使用的示例(例如,Share中主标题中的sites菜单下的收藏夹列表)。如果您已经知道级联内容,则可以在页面WebScript中定义这些内容。但是,如果您需要动态更改级联菜单的内容,那么您应该查看alfresco / header / AlfSitesMenu或alfresco / documentlibrary / AlfCreateTemplateContentMenu的实现(您可以在Aikau GitHub project中找到源代码)。

答案 3 :(得分:0)

一些有用的信息:https://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/cascading-dropdown-alfresco-share-03102011

用它作为我自己的级联选择的基础。建立在与Marco Altieri描述的相同概念上