Problem when concatenating choice options field

[KristaDuff]

I’ve run into something I’m not sure how to resolve. I have 5 textboxes. They are all linked to the same “choices database file”, but to different fields within the file for the “choice values field” property. For the “choice options field” property, I have several columns selected to display multiple columns of data in the drop down list of the textbox (for example: CSTRS#,CSGRP#,CSDIV#). This works fine. The “choice values field” property assigns the correct data to the textbox and all is good.

Now, what I’ve been asked to do is to capture the contents of the selected data in the drop down list and fill-in the remaining textboxes that are displayed with the data displayed in the columns of the drop down list of the current selected textbox. What I did to make this possible is for each textbox I changed the “choice options field” property to list the column data concatenated together with commas (for example: CSTRS# || ',' || CSGRP# || ',' || CSDIV#). Then in the onselect event of the textbox I capture the comma delimited string using getElementValue(); Then I parse the string using the javascript split(‘,’) method on the string. This works great and produces an array of the values in each column. Then I assign the individual array values to the textboxes.
This is my code in the onselect event of a textbox:

var choiceString = getElementValue('I_9_45');
var choiceValues = choiceString.split(',');
if (choiceValues.length > 0 ) {
changeElementValue('I_9_45',choiceValues[0]);
changeElementValue('I_11_45',choiceValues[1]);
changeElementValue('I_13_45',choiceValues[2]);
changeElementValue('I_15_45',choiceValues[3]);
changeElementValue('I_17_45',choiceValues[4]);
}

All of this works until I hit the Enter key and send that values back to the server. For some reason if the remaining 4 textboxes have their “choice options field” property set to a concatenated list (CSTRS# || ',' || CSGRP# || ',' || CSDIV#) the values in the textboxes that are updated with changeElementValue() function are seen as invalid. But if I change the “choice options field” property back to separate columns (CSTRS#,CSGRP#,CSDIV#) for the 4 remaining textboxes that have had nothing selected yet from their lists, everything goes well and the values are accepted.

I have tried using applyProperty on the ‘value’ and ‘choice value’ properties of each text box instead of changeElementValue(), but that failed also. Is there a way that I can update the textboxes when their “choice options fields” property is set to display only one column of concatenated data? Should I use something other than the changeElementValue()? Is there another property that also needs to be updated along with the value property when using the database driven properties of the textbox? Any guidance or suggestions on this topic would be greatly appreciated.

[Scott Klement]

changeElementValue() is the correct API. Using applyProperty() would be incorrect.

You say that the values are seen as invalid. Can you elaborate on that? What error do you get, exactly?

[KristaDuff]

The RPG side doesn't like the value being sent. I get back a validation message telling me it is invalid. I have set alerts on the form's onsubmit event and can see the values in the textboxes using getElementValue(). From there all the values look good.

This only happens when "choice options field" is set to display concatenated columns and I try to set the value of that field manually (using changeElementValue). That combination is where I am having trouble. If I select an item from the drop down list of a textbox with concatenated columns in the "choice options field", everything is fine. If go back and change the "choice options field" to display separate columns, I have no problems. I can set the fields manually (using changeElementValue) or select from the list and everything works great. But if I do that, I lose the ability to collect the multiple column values that are displayed in the drop down list by concatenating the columns.

[KristaDuff]

I've been researching my options with this task I am trying to accomplish and I have found that I may not need to concatenate the columns in the "choice options field" property. I found that the selection object that is referenced in the onselect event actually contains the values of each of the database columns that I have selected in the "choice options field" property. I wrote a function in my custom.js file that references this selection object that is passed in from the onselect event. I then call the function from the onselect event and can access each of the values of the columns displayed in the dropdown list from this custom function. But I really do not want to clutter up my custom.js with a separate function for each textbox onselect event. I have many textboxes I would like to do this with. So now my initial question that started this topic has morphed into a new question.

Is there a way to reference this object that the onselect event sends to custom functions that are written? I would prefer to simply reference this object within the onselect event of the screen element. Each textbox references different columns from different database files and it would be difficult to maintain all the custom functions that I would have to write for each textbox.

Currently my onselect event contains "textboxSelection" (without the quotes).
Then the function textboxSelection (located in my custom.js file) looks like this:
function textboxSelection(selectedRecord) {
changeElementValue('I_11_45',selectedRecord['CSGRP#']); //Group Number
changeElementValue('I_13_45',selectedRecord['CSDIV#']); //Division Number
changeElementValue('I_15_45',selectedRecord['CSLOB#']); //LOB
changeElementValue('I_17_45',selectedRecord['CSCSEG']); //Segment
}

This accomplishes exactly what I am trying to do, but I do no like having this function referencing specific screen element ids and database column names. This function only works for one textbox on one screen. Is there anyway that I could reference this selectedRecord object directly within the onselect event? If this cannot be done, is there a way to pass this function more parameters and still have access to this selectedRecord object? I may be able to then write a more generic function to be able use across multiple screens.

[Scott Klement]

There is a "trick" to this that might help you. You can define your function directly in the 'onselect' event instead of putting it into 'custom.js' or another JavaScript file. This may look a little weird, but it works.

Put all of this into your 'onselect' property:

Code: Select all

function tempFunc(rec) {
   changeElementValue('I_9_45',rec["CSTRS#"]);
   changeElementValue('I_11_45',rec["CSGRP#"]);
   changeElementValue('I_13_45',rec["CSDIV#"]);
}
tempFunc

Background information:

The code inside Genie does the following with your 'onselect' property:

Code: Select all

var func = eval(onselect);
if (typeof func == "function") func(selectedRecord, textBox);

So when you set the 'onselect' to a function name (without parenthesis or parameters) when JavaScript does the 'eval', it will look for something named (in this example) tempFunc. If tempFunc turns out to be a function, it will call it and pass the parameters you need. So all I did in my example, above, is define tempFunc first, and then put the name by itself on the last line (it MUST be the last line for this to work) -- this results in the function being defined, but the 'eval' still sees the result as a function, so it'll then call the function you just defined.

That way, you an code your functions right on the property values but still accept parameters. Kinda "tricky", but it works!

[KristaDuff]

Thank you so much Scott! That is just what I needed to be able to do. It works like a charm filling in the other elements on the screen from the data in the drop down list. Problem solved.

[SeanTyree]

Scott, I have a question for you that is related to the function definition within the onselect event.

What is the scope of this function? Is it avalable for use by other widgets on the same record format, or is it scoped to just this event?

Thanks,
Sean

[Scott Klement]

I believe that it is only available within the event, but I have not tested this thoroughly. You could, of course, define the function as global like this:

Code: Select all

window.testFunc = function(rec) {
... code ...
}

prefixing it with 'window.' makes it global. Though, if I wanted to define a global function within a display, I don't think it'd do it in the 'onselect' event. but, I might to it in the screen's 'onload' event :-)

[SeanTyree]

Thanks Scott, a 'global' event from the onLoad is what I've been looking for so that I am not forced to repeat a dirty screen check in every widgets' onchange event.

Sean