2nd Attempt: UX lists and dropdownboxes

[CLaubscher]

I am registering a new thread as my original thread have no responses and/or interested parties without payments linked to it. Unfortunately i would gladly pay for assistance IF the price was not so high.

I am therefore downgrading my request to the following;

I need assistance in doing the following;

I have two "persist to local" lists - List1 and List2

I also have 2 dropdownboxes on a panel which requires the following cascading;
Dropdown box 1 obtain its values from field1 in List1
Dropdown box 2 obtain its values from field2 in List2 and need to be filtered based on the value chosen in dropdownbox 1

Both lists have the same fields to do the filtering on i.e.
List1 fields - fieldA, fieldB, fieldC and field1 [dropdown value, not primary keys]
List2 fields - fieldA, fieldB, fieldC and field2 [dropdown value, not primary keys, to be filtered on fieldA, fieldB and fieldC of List1]

If not to much to ask, any assistance on the above will provide me with a starting point at least because i have never done this before. Online it works great as it can see the SQL tables.

Kind regards

[peteconway]

Re: 2nd Attempt: UX lists and dropdownboxes

See if this helps.. You will need the latest pre-release. http://www.viddler.com/v/bbf8628f

[RichCPT]

Re: 2nd Attempt: UX lists and dropdownboxes

You can repopulate the choices in the DROPDOWN boxes by extracting the desired choices from the LISTS into arrays and then calling "A5.form.populateSelect(ElementID, SelectedValue, ChoiceArray, bClearExistingValues)". I'm thinking List2 contains all the possible choices for dropdown2 and at any given moment dropdown2 is only displaying a subset of records from list2 (the records that have a field value matching that from the selected record in DropDown1.) List1 contains all possible choices for dropdown1.

You should NOT need a pre-release to accomplish this; I suspect the A5.form.populateSelect function has been in the A5 library for a long time.

There are probably higher level functions you could use from the UX methods. Search the Video library for 'dropdown' and/or 'dynamic' for higher level methods that you can use.
But this low level function will get the job done very efficiently and everything takes place in the browser.

I don't know where to find documentation on the A5.form.populateSelect method. So, I will try to explain the parameters, which I have renamed with my own terminology for this example. The best thing to do is to use the browser's Developer Tools to step into this A5 library function and see what it does. Here's my explanation of the parameters:

-ElementID: character string: This is the fully qualified ID used for the control like '{dialog.ComponentName}.V.R1.MyDropdown1'
-SelectedValue: character string containing the StoredValue of the element in the list that should be initially selected. (Note: I haven't figured out how to not preselect a value; everything I have tried has ended up adding an extra, non-sense, choice into the list.
-ChoiceArray: array[n][2] of display value and stored value pairs for 'n' number of items.
-bClearExistingValues: Boolean: true = clear existing choices, false = keep existing choice and append new choices.

Computing the 'ChoiceArray' is the tricky thing here. You want to end up with a two dimensional JavaScript array. The first dimension contains 'n' number of display / stored value pairs. The second dimension contains the display value [0] and the stored value[1]. So, an example array to pass to the function, using JavaScript object syntax would be:
[ [ 'Alabama', 'AL'],
['Alaska','AK'],
['Arizona','AZ'],
['Arkansas','AR'],
['California','CA']
]

I believe the function expects a stored value, if your stored value is the same as the display value then just duplicate the display value to the stored value slot [n][1].

To create the array, use the JavaScript array methods '.filter()' and '.map()' or you could create the arrays in a 'for' loop using the array.push() method. The 'filter()' and 'map()' functions are difficult to explain, so I will just provide an example and you can search youtube for video explanations of these two higher-order functions. I took my working code and came up with the following example to demonstrate dynamically changing the choices in dropbox2. Sorry, if there are any mistakes in it.

function refreshDropBox2( thisUX ) {
var filterVal = thisUX.getValue('DropBox1');
var filterFunc = function( list2Record ) { return list2Record.someField == this; } // 'list2Record' is a placeholder name, choose anything you like, 'someField' must be name of field you are filtering on
var mapFunc = function( list2Record ) { return [ list2Record['your_display_field'], list2Record['your_stored_value_field'] ];
var list2 = thisUX.getControl('List2');
var tmpAry = list2.data.filter( filterFunc, filterVal );
var datAry = tmpAry.map( mapFunc );
var dropDown2EleID = '{dialog.object}' + '.V.R1.' + 'DropBox2';
if( datAry.length == 0 ) {
// Oops, no data - might have to hide dropdown 2 and display an error message
}
else {
// show dropdown 2, if you chose to hide it when there is no data
// populate dropdown 2
A5.form.populateSelect(dropDown2EleID, datAry[0][1], datAry, true);
// if don't want to pre-select first item then need to deselect it, not sure how.
// Best would be to not select first item, but don't know how to do that in the .populateSelect ()
}
}

When the function is called you would pass it one parameter, {dialog.object} .

It would be best to make the refreshDropBox2 function name unique by either attaching it as a function to the UX or prefixing the function name with the alias of the UX, {Dialog.ComponentName}.

[RichCPT]

Re: 2nd Attempt: UX lists and dropdownboxes

Addendum: After rereading your OP, I see you want to filter dropbox2 on three field values from dropbox1. As DavidK pointed out to you, you can only have two fields in a dropdown box: 1) a display field and, 2) a stored value field. Things will be so much simpler if you just add a unique identify field to your DB. But, if you don't add an identity field then you will have to concatenate the three values into a single value that can be used as the 'stored value' field in dropdown1. Just be sure you concatenate the strings by using a token separator. Alpha likes using ":" and "::" and "." as separators. You would need to change the filterVal field in the example code to be the concatenated value of all three fields and then change the filterFunc to compare 'this' against a concatenation of the three fields:

return (list2Record.FieldA + ':' list2Record.FieldB + ':' list2Record.FieldC) == this;


=

[CLaubscher]

Re: 2nd Attempt: UX lists and dropdownboxes

Thank you so much for the feedback. Its refreshing and appreciated.

I've been away for a while but will immediately start testing (learning) the above advice and possible solutions. Never in my wildest thoughts did i think this would become such an "interesting" task. Greek now, but will make sense after a few days.

I have attached the "source data" extracted to a txt file so you can see the choices and/or data i'm working with.

Rich, what needs to happen is this;
DDB1 gets its value from LIST2 field1.
DDB2 gets its value from LIST2 field2 BUT have many values to choose from. Thus it must be filtered based on the selecting made in DDB1 field1

And so forth.
DDB3 gets its value from LIST2 field3 BUT have many values to choose from. Thus it must be filtered based on the selection made in DDB1 AND DDB2

In the end i will have exactly 7 DDBoxes which needs this. I was very forward in expecting assistance in all 7, but understand that if i can get the concept on the first 2 boxes, the rest i'll be able to work out myself.

I remembered; "Feed a man a fish and he's fed for a day BUT teach him how to fish and he's fed for life"