View the contents of a related record inside the view record tab

Say you have an abstract which belongs to a conference. The abstract to conference is a many-to-many relationship stored in a table. When you view the abstract record, you may have set the conferenceID to be a valuelist so that it displays the conference name.

Instead of just displaying the conference name, you can include an expando box beside the name. And if the user clicks on it, then the details of the conference appears and you can hide it again very quickly by clicking on the collapse button. For example:



This is a snippet of the view record of an abstract. You can see the conference name it belongs to and the expando box to the left. When you click it:



All the contents of the conference appear right. Very cool! So how does this work. It's actually pretty easy.

Start off by adding the field__htmlValue code to the delegate class (in our class it would be the Abstracts delegate class)



In line 2, we define our javascript file which will do most of the work for us. We will add this file in a bit. In line 3, we attempt to get the conference record from this record we have. You'll need to add another function to do this because the abstract record only has a conferenceID. So you can do this:



This will grab the conference record to use. Now in our scripts.js file, we add this:



And that should do it!

The return value of df_get_record()

The df_get_record() function is a very useful function because it returns you the specific Xataface record given a set of parameters. For example:



This would get the course record with the primary key (course_id) of 1. When you don't give the function enough searching parameters and it could return a number of records with the parameters, then it returns only the first one.

Using the url attribute for an image

If you have an image field, and you have the url attribute for that field. Then you can access that field pretty easily to do some interesting things. Like for example, if in the event that there is no image we can set a default image using the same url attribute.

Say in your fields.ini of your delegate class you have:



The attribute url tells Xataface where in the application the images for this field are found. If you put your default image in this folder, then there are a number ways to make a default image appear. The idea is you don't want to have to hardcode the directory path into the code/template, but rather use that attribute in the fields.ini file (except for method 3).

1. Method 1: Using the PHP function dirname()
   You can have an if statement which checks if there is an image, and if not then use the directory path of the folder containing your default image:
   
   

   
   if (!$record->display('image'))
   $default = dirname($record->display('image')).'/default.jpg';
   

   
   



2. Method 2: Directly access the url attribute from the fields.ini file
   
   

   
   $fld = $record->_table->getField('image');
   $default = $fld['url'].'/default.jpg';
   




3. Method 3: Move the image the default xataface image folder.
   Not really a method, but you can just place the default image in another folder and rely on Xataface's environment variables to help you. Say you want to display a default image in the event there is no image. You do this in the smarty template:
   
   

   
   {if $row->val('image') }
   <img src="{$row->display('image')}?max_height=100&max_width=100" />
   {else}
   <img src="{$ENV.DATAFACE_SITE_URL}/images/default_tire.jpg?max_height=100&max_width=100" />
   {/if}
   

   
   
   

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.

How to svn checkout the xataface modules

Xataface by itself doesn't come with any modules to reduce the size of the download. But if you want to get some modules for your xataface, it is very simple!

You can checkout the repository for modules at:

http://weblite.ca/svn/dataface/modules/

There is a list of modules. Once you've decided to checkout a module, you can then do this through the command prompt using the 'svn checkout' command, or through the gui interface.

How to properly checkout xataface from svn command prompt

So to checkout from xataface from the command prompt, you can simply enter the command

svn checkout https://weblite.ca/svn/dataface/core/trunk

This will check everything that was in the trunk folder out and into a trunk folder.. However, if you want to say check it out into another folder you need to provide a parameter. So for example:

svn checkout https://weblite.ca/svn/dataface/core/trunk xataface

This will check everything out into the xataface folder (everything in the trunk folder).