Disconnected Cascading Dropdowns

[nimrand]

I have a requirement to build cascading drop-downs for an App that's intended to work in disconnected mode. It seems that the built-in functionality uses only AJAX, so that won't work.

Also, the built-in functionality doesn't seem to work with Lists with Detail Views, which my app also uses. Specifically, when I switch between items in the list, the drop down list that is filtered doesn't update its list.

What's the best way to make a cascading drop down that will work with both a List's Detail View and in disconnected mode?

Note, the total number of items in the drop down list to be filtered is not so long, so caching this data locally should not be an issue.

-Kevin

[Steve Workings]

Re: Disconnected Cascading Dropdowns

I posted a message about this just yesterday.

http://www.alphasoftware.com/alphafo...-local-storage

[nimrand]

Re: Disconnected Cascading Dropdowns

I posted a message about this just yesterday.

http://www.alphasoftware.com/alphafo...-local-storage

I saw it, though my requirements are a slightly different, so I posted my own. Hope someone replies!

[peteconway]

Re: Disconnected Cascading Dropdowns

You need to set them up in the Client Side Data Cache of the UX in the Pre-release build.
2016-03-30_1458.png

[Steve Workings]

Re: Disconnected Cascading Dropdowns

Uh huh. And for those of us who are working with clients who cannot use a pre-release build, and still seek the javascript to do this, the question seems to remain open.

[peteconway]

Re: Disconnected Cascading Dropdowns

Yes

[nimrand]

Re: Disconnected Cascading Dropdowns

Would using the pre-release build fix the issue with List Detail View bound drop down controls too?

[peteconway]

Re: Disconnected Cascading Dropdowns

What issue is causing you problems with dropdowns in detail view Kevin

[nimrand]

Re: Disconnected Cascading Dropdowns

If the cascading drop downs do are bound as part of the list control's detail view, switch between items in the list does not cause the drop doen to refresh its list.

For example, let's say I have a list of International addresses. In the detail list, there is a Country and a Province/State field configured as a cascading drop down (filtered by country). With the app running, I enter a Canadian address. After selecting Canada in the furst drop down, the State/Province combo box populates correctly. Now, suppose I select an existing American address in the list that was created in a previous session. The state/province's drop down's list doesn't get updated, it's still displaying Canadian provinces. What's worse, because the state that had been entered for that American address is not in the drop diwn lists options, it gets overwritten.

[peteconway]

Re: Disconnected Cascading Dropdowns

Is this in a mobile device using phonegap or a browser?

[nimrand]

Re: Disconnected Cascading Dropdowns

Is this in a mobile device using phonegap or a browser?

Browser

[peteconway]

Re: Disconnected Cascading Dropdowns

OK ill take a look tomorrow for you.

[nimrand]

Re: Disconnected Cascading Dropdowns

The prerelease build is too unstable right now, even for an application that's in Beta. Trying it, a ran into two crippling bugs. Maybe if they had a stable-ish pre-release, instead of nightly builds.

For now, I'm going to work around the issue by using an invisible list control to download the data. Then I can read the data from the list to filter and populate the dropdown as-needed.

[peteconway]

Re: Disconnected Cascading Dropdowns

OK

[Simone]

Re: Disconnected Cascading Dropdowns

In response to post #9 of this thread:
I am also seeing the issues Kevin sees when two cascading dropdown controls are placed onto a list's detail view. I believe, I found a solution for the case where the app does not need to run in disconnected mode.
I am posting it here, in case someone finds this helpful:

The two controls are called LocationCategoryId (the parent control) and LocationId (the child control whose dropdown list should be filtered by the value in the parent control). These two controls have been placed on the panel that displays the detail view of a list called "Activities".

I have set the two controls up as normal dropdown controls. The child control gets the initial dropdown list from a sql statement. "Cascading choices" is off for this control. (The parent control gets its dropdown list from a variable, but I don't think that matters.)

On the panel that displays the "Activities" list I have a button that slides in the detail view for the selected record. It has this code in the onClick event:

//We will use the refreshDropdownBoxChoices method to filter the dropdown list of
//the LocationId control on the detail view we are about to open, by the value in the 
//LocationCategoryId control

//From Alphapedia:
//{dialog.Object}.refreshDropdownBoxChoices(controlName [[,dynamicFilter [[,dynamicFilterArguments [[,selectedValue [[,currentRowOnly]]]]);
//refresh the choices and filter choices to only show items where the 'type' field is 'a' and 'code' field is 'x'
//{dialog.object}.refreshDropdownBoxChoices('PRODUCTS','type=:whatType and code = :whatCode','a|||c|whatType\nx|||c|whatCode');
//Note that in the above example the dynamicFilterArguments is a crlf delimited string (\n is the CRLF code in javascript) of the form
//value|||datatype|argumentname

var detailLocationCategoryId = {dialog.Object}.getValue('list::ACTIVITIES::LocationCategoryId');
var detailLocationId = {dialog.Object}.getValue('list::ACTIVITIES::LocationId'); 
{dialog.object}.stateInfo['si_detailLocationCategoryId'] = detailLocationCategoryId.toString();
{dialog.object}.stateInfo['si_detailLocationId'] = detailLocationId.toString();

function func1() {
	{dialog.object}.refreshDropdownBoxChoices('LocationId', 'LocationCategoryId = :argLocationCategoryId', detailLocationCategoryId + '|||n|argLocationCategoryId', detailLocationId);
};
function func2() {
	{dialog.object}.panelSetActive('PC_ACTIVITIES_DETAIL');
};
A5.executeThisThenThat(func1, func2);

This refreshes the dropdown list of the child control and puts the correct value into it - otherwise the child control would be blank. I am also storing the original values of the parent and the child control in the stateInfo object. I will use these to address the issue that the value in the child control gets overwritten when the user changes the value of the parent control. Note that the refreshDropdownBoxChoices method won't work for disconnected apps.

The onChange event of the LocationCategoryId control (i.e. the parent control) contains the following code:

var originalLocationId         = {dialog.object}.stateInfo['si_detailLocationId'];
var originalLocationCategoryId = {dialog.object}.stateInfo['si_detailLocationCategoryId'];

var currentValueInLocationCategoryId = {dialog.object}.getValue('LOCATIONCATEGORYID');

//If the current value in the LocationCategoryId control equals the original one that was put into the 
//stateInfo object when the user clicked the "Details" button on the Activities list panel, we will put 
//the original LocationId back into the LocationId control.

//Or rather, we'll ask the refreshDropdownBoxChoices function to set this value.

if (currentValueInLocationCategoryId === originalLocationCategoryId) {
		{dialog.object}.refreshDropdownBoxChoices('LocationId', 'LocationCategoryId = :argLocationCategoryId', originalLocationCategoryId + '|||n|argLocationCategoryId', originalLocationId);
} else { 
	//if it isn't we'll leave the value in the LocationId control blank.
		{dialog.object}.refreshDropdownBoxChoices('LocationId', 'LocationCategoryId = :argLocationCategoryId', originalLocationCategoryId + '|||n|argLocationCategoryId','');
}

Finally, I put the following code into the onClick event of the detail view's "Reset" button:

{dialog.object}.setValue('LOCATIONCATEGORYID',{dialog.object}.stateInfo['si_detailLocationCategoryId']);
{dialog.object}.setValue('LOCATIONID',{dialog.object}.stateInfo['si_detailLocationId']);

var lObj = {dialog.object}.getControl('ACTIVITIES');
lObj.resetForm({prompt: true});

When the user changes the value in the parent control, the value in the child control gets lost. This ensures it gets put back when the user clicks the reset button.