cancel
Showing results for 
Search instead for 
Did you mean: 

Aikau cascading dropdown for dynamic values

kranthi
Star Contributor
Star Contributor
Hi all,

I am doing cascading dropdown operation in aikau pages,where I want to get values from content model for drop down list now I am not knowing how to call web script in aikau customsearch.get.js .Here I'll share my static values one can anyone tell how to write for dynamic dropdown.

model.jsonModel = {
services : [ "alfresco/services/NavigationService",
"alfresco/services/LogoutService",
"js/example/widgets/CustomServiceForNestedSelects",
// 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"
} ]
}
}
}
]
}
}
]
};

and
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]);
},

});
})
Guide me how to do in dynamic dropdown list.
1 REPLY 1

ddraper
World-Class Innovator
World-Class Innovator

Can you provide a bit more information on your intention for this data? It looks like you're trying to create a form control... you've described this as a cascading drop-down operation but I'm not entirely sure what you mean by this.

It is possible through configuration to make one form control respond to changes in another, and have form controls publish requests to get new options based on the value of another form control (there are examples of this in the Aikau unit test application).

Perhaps if you describe the expected user interaction I will be able to help more and point you in the right direction!