Dynamically hide fields in a form depending on another field value
Article ID: KB0073979
Updated On:
| Products | Versions |
|---|---|
| TIBCO EBX | All supported versions. |
Description
In this article we will provide an example of a UIForm that dynamically hides fields depending on the value of another field.
Issue/Introduction
Resolution
Example
In our example we will use the following data model:
Our goal is to display or hide the foreign keys depending on the value of "choice" field (enumeration):
| Choice | Display | Hide |
|---|---|---|
| 1 | fk1 | fk2 |
| 2 | fk2 | fk1 |
| null | fk1, fk2 |
In order to achieve this we will implement a custom UIForm on the table and add a Javascript function that will display/hide the foreign key fields at each value change in the "choice" field.
Implementation
In the writePane() method of our UIFormPane, we create our table form row:
writer.startTableFormRow();writer.addFormRow(Path.parse("./id")); |
For the "choice" field form row, we have to specify that a JavaScript function (displayfk) will be called at each value change of the field:
UIComboBox box = writer.newComboBox(Path.parse("./choice"));box.setActionOnAfterValueChanged(JsFunctionCall.on("displayfk"));writer.addFormRow(box); |
Then we have to add the foreign key fields, give them some HTML ids in order for them to be accessible in our JavaScript function, and end the table form row:
UIFormRow row1 = writer.newFormRow(Path.parse("./fk1"));row1.setRowId("ticket13588fk1");writer.addFormRow(row1);UIFormRow row2 = writer.newFormRow(Path.parse("./fk2"));row2.setRowId("ticket13588fk2");writer.addFormRow(row2); writer.endTableFormRow(); |
Then we have to implement our JavaScript function:
writer.addJS("displayfk();"); writer.addJS("function displayfk(choice) {"); // The argument contains the "choice" field value writer.addJS("if (choice == null) {"); // If choice is null, we hide both fks writer.addJS("document.getElementById('ticket13588fk2').style.display='none';"); writer.addJS("document.getElementById('ticket13588fk1').style.display='none';}"); writer.addJS("else if (choice.key == '1'){"); // If choice equals "1", we hide fk2 writer.addJS("document.getElementById('ticket13588fk1').style.display='';"); writer.addJS("document.getElementById('ticket13588fk2').style.display='none';}"); writer.addJS("else if (choice.key == '2'){"); // If choice equals "2", we hide fk1 writer.addJS("document.getElementById('ticket13588fk2').style.display='';"); writer.addJS("document.getElementById('ticket13588fk1').style.display='none';}}"); |
In our example, the "choice" widget is a combo box, and its JavaScript type is an object with three fields : key, label and previewURL. Please refer to your widget Javadoc in order to learn about the JavaScript type returned.
I now have a dynamic form that will hide/display my foreign key fields depending on the selection in the "choice" field.
Additional Information
https://docs.tibco.com/pub/ebx/5.9.7/doc/html/en/Java_API/com/orchestranetworks/ui/form/UIFormPane.html
https://docs.tibco.com/pub/ebx/5.9.7/doc/html/en/Java_API/com/orchestranetworks/ui/form/widget/UIAtomicWidget.html#setActionOnAfterValueChanged-com.orchestranetworks.ui.base.JsFunctionCall-
https://docs.tibco.com/pub/ebx/5.9.7/doc/html/en/Java_API/com/orchestranetworks/ui/form/UIFormRow.html#setRowId-java.lang.String-
https://docs.tibco.com/pub/ebx/5.9.7/doc/html/en/Java_API/com/orchestranetworks/ui/UIJavaScriptWriter.html#addJS-java.lang.String-
Attachments
Feedback
