How to display/hide fields in a xataface form

Sometimes you are faced with a situation where you want certain components of a form to appear/hide when a certain choice has been selected. You can do this very easily through xataface.

The first thing you need to decide is which element will be the determining factor. If necessary, you can use a field that is of transient type and will only exist in the form, but is never actually stored in the database. We will present an example of this now. In our example, our record can belong to either a course or a conference. Depending on which type it is, it should be associated with either a CourseID or a ConferenceID. If the record is of one type, then the other type's ID should not appear.

So to do this,



We first start by adding a field called CourseOrConference field in the fields.ini file. The user will be able to choose the record to be either a course or conference. Note the use of transient field here, no field exists in the database called CourseOfConference. It is simply be used for this particular situation.

Now once the that choice is selected the hideFields() javascript method is called which is in a separate javascript file.

The javascript file.

hideFields();

//description: used to display which fields to display upon the user choosing conference or course
function hideFields() {
var type = document.getElementById('CourseOrConference').value;
if (type.length == 0){ //if the user hasn't selected the abstract to be part of course or conference or actually reset the type
//clear both type ids, and hide them both
document.getElementById('AbstractConferenceID_form_row').style.display = 'none';
document.getElementById('AbstractConferenceID').value = "";
document.getElementById('AbstractCourseID_form_row').style.display = 'none'; //hide the course_id
document.getElementById('AbstractCourseID').value = "";
} else if (type == 'course'){ //if the user has chosen the abstract to be part of a course
//clear the conference id field, hide it, and display the course
document.getElementById('AbstractConferenceID_form_row').style.display = 'none';
document.getElementById('AbstractConferenceID').value = "";
document.getElementById('AbstractCourseID_form_row').style.display = ''; //makes it appear as it originally was

} else if (type == 'conference'){ //if the user has chosen the abstract to be part of a conference
//clear the course id field, hide it, and display the conference
document.getElementById('AbstractCourseID_form_row').style.display = 'none';
document.getElementById('AbstractCourseID').value = "";
document.getElementById('AbstractConferenceID_form_row').style.display = '';
}
}

We first call the hideFields() in the javascript when it is first loaded. You will see why in a second.

1. First, the ConferenceOrConference form field is selected. If it is empty that means the user hasn't selected anything yet, and thus we should hide the AbstractID and ConferenceID fields. Because xataface uses tables to layout the forms, the proper way to hide them is to actually hide the entire row which contains the label too. We also need to set the values to "" so that if the user chooses to change type then the fields are reset to start again.


2. If the type is a course, then we need to hide all the conference information


3. If the type is a conference, then we need to hide all the conference information

And that's it basically. Note you have to make sure of the proper element ids to be hiding because that is dependent on the name of the field in the database.

Displaying Xataface record values

Taking a look at the Xataface Record API presents you with several techniques to display the values of the record. At the lowest level, there is a function called val and can be called like this (assuming $rec is a Xataface record)

$rec->val('fieldname')

What this does is it displays the raw value of field. As in exactly what is stored in the database.

But what happens if the value is say a foreign key to another table say like a number of a company. We don't really want to display just the number, but rather the company name of the id. If a valuelist has been setup for this company_id in a valuelist.ini file, then you can easily display the field you really want by simply using the "display" function.

So say for example, in your application delegate's valuelists.ini file you have this:

[companies]
__sql__="select company_id,company_name from companies order by company_name"

So you are basically telling Xataface to use the company_name as a replacement for the company_id. Since this is the application's delegate, this valuelist is accessible by any table and can be overwritten the own table's valuelist. In any case, if in your other table you just call:

$rec->display('company_id')

Xataface will be smart enough to use the company_name in replacement for the company_id. This display function is also useful for database field types datetime, time, or date. If you were simply use the "val" function it would return the date as an array with keys "year", "month", "seconds", etc. And you would be left with having to piece together the information yourself. But by using the display() function you can quickly circumvent this problem.