Usiing Liferay.DynamicSelect with custom enities

[Pierre Roukens, geändert vor 8 Jahren.]

Can anybody give me an example on the steps needed to use Liferay.DynamicSelect with my custom (service builder) entities? I already use the Liferay country/region implementation which works fine, but I can't figure out how to use this with my custom entities.
Any help is much appreciated!

[Jan Geißler, geändert vor 8 Jahren.]

Can you explain your problem in more detail please?
Maybe add some salt/code?
Stacks?
Can you tell us what you already tried?

[Pierre Roukens, geändert vor 8 Jahren.]

Hi Jan, thanks for replying!
I now fill the select boxes by using on change events and then calling a function which gets the values with json. I thought this can be done a lot simpler when using Liferay.DynamicSelect so I queried the forum to figure out how to do this. The part that I don't understand is what should be put in the 'selectData' attribute. Do I need to register my custom method somehow?

[Jan Geißler, geändert vor 8 Jahren.]

Jan Geißler:

Maybe add some salt/code?

[Pierre Roukens, geändert vor 8 Jahren.]

Select box to select a product type and a dependent select box which should show all products with the selected product type.

<aui:select name="productType" label="product-type">
&lt;%= for (ProductType productType : ProductTypeLocalServiceUtil.getProductTypes()) {%&gt;
     <aui:option value="<%=productType.getProductTypeId()%>">&lt;%=productType.getName()%&gt;</aui:option>

<aui:select name="products" label="products">
</aui:select>
</aui:select>

Script to trigger filling the products select box:

<aui:script use="node,aui-base">
	var productType = A.one('#<portlet:namespace />productType');
	productType.on('change', function(event){
		setProducts(productType.val());
	});
</aui:script>

Script to fill the products select box:

<aui:script>
	Liferay.provide(window, 'setProducts', function(id) {
		var A = AUI();
		var products = A.one('#<portlet:namespace />products');
		A.io.request("&lt;%=jsonURL%&gt;.products/get-by-product-type", {
			cache:'true',
			dataType:'json',
			method:'GET',
			data:{p_auth:'&lt;%=userToken%&gt;', productTypeId:id},
			on:{
				failure: function() {
					alert("Error occurred while loading the products!");
				},
				success: function(event, id, obj) {
					var data=this.get('responseData');
					products.html('');
					var options = "";
					A.Array.each(data, function(obj, idx) {
						var option = '&lt;' + 'option class="" value="' + obj.productId + '"&gt;' + obj.name + '&lt;' + '/option&gt;';
						products.append(option);
					});
				}
			}
		});		
	});
</aui:script>

This works fine but I would like to implement this with Liferay.DynamicSelect:

<aui:script use="liferay-dynamic-select">
	new Liferay.DynamicSelect(
		[
			{
				select: '<portlet:namespace />productType',
				selectData: ????,
				selectDesc: 'name',
				selectSort: '&lt;%= true %&gt;',
				selectId: 'productTypeId',
				selectVal: '&lt;%= productTypeId %&gt;'
			},
			{
				select: '<portlet:namespace />products',
				selectData: ??????,
				selectDesc: 'name',
				selectId: 'productId',
				selectVal: '&lt;%= productId %&gt;'
			}
		]
	);
</aui:script>

[Jan Geißler, geändert vor 8 Jahren.]

Now I get you problem.
select Data should be the method from which you get the Data. An example can be found in
/portal-trunk/portal-web/docroot/html/portlet/users_admin/organization/details.jsp
line 248ff

new Liferay.DynamicSelect(
		[
			{
				select: '<portlet:namespace />countryId',
				selectData: Liferay.Address.getCountries,
				selectDesc: 'nameCurrentValue',
				selectSort: '&lt;%= true %&gt;',
				selectId: 'countryId',
				selectVal: '&lt;%= countryId %&gt;'
			},
			{
				select: '<portlet:namespace />regionId',
				selectData: Liferay.Address.getRegions,
				selectDesc: 'name',
				selectId: 'regionId',
				selectVal: '&lt;%= regionId %&gt;'
			}
		]
	);

So you would need to refactor your code, that you have a function which will return you data, than call the function in the dynamic select element.

[Pierre Roukens, geändert vor 8 Jahren.]

Hi Jan,
sorry but I don't get this. I understand that the selectData attribute has to be set to the method that provides the data. And to get the data from the Liferay countries this would be "Liferay.Address.getCountries". But I don't want to get the countries, I want to call my custom service method getProducts(long productTypeId). How do I "register" this method so I can use it as the method in selectData attribute?

[Jan Geißler, geändert vor 8 Jahren.]

function getData(productTypeId) { 
  #here is the totally sophisticated JS Code to retrieve the data.
}

new Liferay.DynamicSelect(
		[
			{
				select: '<portlet:namespace />countryId',
				selectData: getData,
				selectDesc: 'nameCurrentValue',
				selectSort: '&lt;%= true %&gt;',
				selectId: 'productTypeId',
				selectVal: '&lt;%= productTypeId %&gt;'
			},
			[...]
		]
	);

Liferay.Address.getCountries is nothing else than a JSON WebService from Liferay. so you just pass your method as an argument for the dynamic select.
You don't have to "register" but to "declare" your function.

[Pierre Roukens, geändert vor 8 Jahren.]

Ah, yes that was the missing piece.. Thanks!