Organizing Designations in non-API Donation Form

So this would require some API and JavaScript work, even on a non-api form. Pulling the Gift Designations automatically from the system means using the API.


I would do this on a non-API form by hiding the regular designation picker with CSS, and presenting a stand-in picker consisting of three dropdowns that you build with html and JS. The value selected on the stand-in would then get copied into the hidden drop down when the submit button is clicked. (So from the form's perspective, the user simply chose a value from an unusably huge dropdown.)


http://open.convio.com/api/#donation_api.getDesignees_method.html


You can see that you only have Name, Type, Id (and Description) returned by the API call to work with. I don't think you can pull the Administrative Name, Accounting Code or Security Class. So I think your idea of using a naming convention is the only option, one field will need to hold two values. I also think that's going to be pretty unreliable, nothing on the Admin side will enforce or validate that - so mistakes will happen. So you'll get something like this out of the API (Ignoring some complications around Type Id.)


{ "typeId": ​"Local Affiliate", "name": "IL~Designation One", "id": "100001"},

{ "typeId": ​""Local Affiliate", "name": "IL~Designation Two", "id": "100002"},

{ "typeId": ​"​"Local Affiliate", "name": "CA~Designation Three","id":  "100003"},

{ "typeId": ​"​"Local Affiliate", "name": "CA~Designation Four", "id": "100004"},

{ "typeId": ​"​"Local Affiliate", "name": "NY~Designation Five", "id": "100005"},

{ "typeId": ​"​"National Affiliate", "name": "NY~Designation Six", "id": "100006"},

{ "typeId": ​"​"National Affiliate", "name": "NY~Designation Seven", "id": "100007"},


Which you will need to parse into a JS object that you will be able to search. 


var designations = []

designations[0] = [​"Local Affiliate", "IL", "Designation One", "100001"];

designations[1] = ["Local Affiliate", "IL", "Designation Two", "100002"];

designations[2] = [​"Local Affiliate", "CA", "Designation Three", "100003"];

designations[3] = [​"Local Affiliate", "CA", "Designation Four", "100004"];

designations[4] = [​"Local Affiliate", "NY", "Designation Five", "100005"];

designations[5] = [​"National Affiliate", "NY", "Designation Six", "100006"];

designations[6] = [​"National Affiliate", "NY", "Designation Seven", "100007"];


This is already getting to be a fairly complicated project. Do you do any work with JS? This is gonna need it!


Then the on change event on the Type dropdown would find all the appropriate keys, and use them to populate your State dropdown.

And then the on change event on State will populate the actual Gift Designation drop down with names and Ids.

And finally the form's on submit could take whatever was selected on your designation drop down and stick that value into the form's actual gift designation field.


Here's a quick idea on how you would populate the dropdowns based on the previous choice.


$("#TypePicker").change(function () {

    var type = ($(this).val());

    var state = ['Choose One'];

​    var stateLen;

    for (var i = 0, len = designations.length; i < len; i++) {

        if (designations[i][0] === type ) {

            stateLen = state.length + 1

            state[stateLen] = designations[i][1];

            break;

        }

    }

});



This is all pretty rough. We can build on this if it seems like something you would build.


BPM