DB-Toolkit

Remove Field: This only removes the field from the config screen. this is useful if interfacing a large table but only interfacing a small number of fields. you can safely remove the unused fields from the config without needing to configure them. the removed fields are simply ignored within the interface created. they will however be back when you re-edit the interface in case you require a field at a later stage.

Field Behavior Settings Panel: this will open a panel with additional field settings:

Title: The displayed title of the field for reports and forms
Caption: A caption for the field in the form
Width: the width of the field column in report. (not effected in template report)
Justify: Alignment of the field column in report.( not effected in template report)
XAxis: sets field as the X axis when in chart mode
Chart item: sets the field as a chart item (Y Axis) when in chart mode
Chart Type: type of chart when in chart mode

Field Name: The desplay name of the field that will be shown in the interface.

FieldType: This is the field data handler. It controls the way all the data for that field is handled. It also defines how the form input for that field looks and works. A text FieldType for example, will have a simple single line text box, but a date type will have a date picker or an image upload will have a file upload box with an image preview. Clicking on the fieldtype button opens the fieldtype selector panel for you to choose the desired fieldtype you want to use.

All fieldtypes available are listed here

Field View and Index Settings: This controls how the field is viewed in a report. there are 4 options in this selector:

1. Shown Indexed: the field is shown and has shows a filter setting in the filters box (fieldtype specific).
2. Shown Not-Indexed: the field is shown but doesn’t show a filter option and is not effected by filtering.
3. Hidden Indexed: the field is not shown but shows a filter setting in the filters box (fieldtype specific).
4. Hidden Not-Indexed: the field is not shown and doesn’t show a filter option and is not effected by filtering.

Field Control Settings: These 3 icons do special stuff!

1. Unique: This ensures that the value entered into the form does not exist in the database.
2. Required: Validates that the field is filled in.
3. Sortable: Makes the field column sortable in both directions (not in template mode)

FieldType Settings: Each field type can have its own configuration. An image field for example, may require a setting for image thumbnail sizes, or a date field may require date format settings and so forth. Some fields however don’t have any settings and therefore this button may not always be present.

GPS Coordinates FieldType config panel example which intergrates Google Maps

Form Builder Element Buttons: These buttons control certain aspecs of how the form looks. they are

Sync Fields: Fetch fields for the table and place them in the Available Fields Holder Box
Insert Row: Creates a new Row at the bottom of the row list
Add Section Break: Adds a section Break Field Element. These are useful for grouping fields on large forms
Add Tab: Makes parts of the form into a tabbed form (Experimental)

Width of Dialog Box: this is the pixel with of the dialog that holds the form. (only used in report/add new combination)

Dialog Modes: These are how the dialog box is handled. Modal sets the dialog to a modal type box and the Ajax form, sets the form to be handled via ajax so there’s no page reloads. (Experimental)

Disabled Notice: Lets you know if the form is running in default or not.

Columns: The columns where Fields can be dropped. an infinite number of columns can be added, however to many will really be a bad idea.

Row: The row in which Fields exist.

Row Editing Options: Rows are devided into columns. by default a row has 1 column. these options allows us to minipulate this. the options are:

Config: this sets the column widths in a ratio.
Add Column: Adds a new Column.
Remove Column: removes a column. Fields in the column move to the left.
Remove Row: Removes  the row. Must be empty.

Usable Fields Holder Box: Holds the fields that the form can use. Any fields left in here on save, are ignored.

Usable Fields: The fields that are dropped into columns. The X on to left of the field removes the field from the form and that field will be ignored.

[interface id=”dt_intfc52361c02bff59″ filter=”language” by=”English”]

where “filter” is the field you want to filter with and “by” is the value of the filter.

Posted February 19, 2013 by John Morris

This post describes a solution to a broken date picker dropdown in the DB-Toolkit plugin for WordPress.  This problem is present with the following versions of relevant software:

WordPress v3.5.2
DB Toolkit WordPress Plugin v0.3.3 and v0.3.2.026

DB Toolkit is an amazing plugin for WordPress that dramatically increases the power of WordPress as a generic content management system as opposed to a blog oriented content management system.  It allows you to create custom, database driven “applications” and “interfaces” that are automatically tied into WordPress admin tools.  However, I want to address a serious bug I have discovered.

Unfortunately, depending on which version of the plugin you use, the fix is different.  The two most prevalent versions of the plugin in distribution are versions 0.3.2.026 and 0.3.3.  The fix for 0.3.2.026 is a bit more complex, and is detailed farther down in the post.  The fix for 0.3.3 is detailed immediately below.

Using DB-Toolkit v0.3.3

In this version, unlike the previous one, the DatePicker is rendered, even though it may not be visible.  What is happening, is the DatePicker is displayed behind other content.  Fortunately, since the DatePicker is there, it is easy enough to make it appear on top of everything else like it is supposed to.

Reproduce the error

First, let’s go through how to reproduce the error.

1. Setup a vanilla install of WordPress (reproduced using v3.5.2)
2. Install and activate the DB Tookit plugin by David Cramer (reproduced using v0.3.3)
3. Create a “New Application” using DB Toolkit.
4. Create a “New Interface” in this new application
5. Set this interface to use a new database table (to prevent corrupting any existing tables)
6. Add a new field using the DatePicker type.
7. Save your interface.
8. Under the title of your new interface, click “View” followed by “Add Entry”

At this point, a jQuery UI DatePicker appears.  However, it is rendered behind the dialog box used to add entries.

As you can see in this example, the DatePicker is behind the modal dialog box.

Fix the problem

1. Navigate to the directory containing your WordPress installation using your file browser.  If you are on a remote server, this can be done using an FTP client such as FileZilla.
2. Once in your WordPress root directory, navigate to the directory “/wp-content/plugins/db-toolkit/data_form/fieldtypes/date/css”.
3. Open the “datepicker.css” file in a text editor (download and open it if working on a remote server).
4. Scroll down to line 18 which should contain the following:
   .dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#ffffff;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}.dropdown-menu.pull-right{right:0;left:auto;}
5. In that long line of code, locate the portion fairly close to the left which says “z-index:1000;”
6. Change the number 1000 to 9999 (the exact value of the number doesn’t matter, only that it is significantly higher than the 1000 value).
7. Save the file. (Upload it to the remote server if necessary)
8. Return to your interface, open it, and add a new entry.
9. You may need to refresh your browser’s cache on this page.  In most browsers in non-Apple operating systems, this is accomplished by hitting the Ctrl+F5 key combination.  On OSX, the methods vary depending on your web browser.  You will need to Google the appropriate method.  Try searching for “hard refresh a page in InsertBrowserNameHere on a Mac”.
10. Click inside your date picker field.
11. Behold the wonderment that is a working DatePicker.
    
12. Cheer
13. Breathe a sigh of relief
14. Smile
15. et cetera

Cause of the Error (for anyone interested)

This is a simple CSS problem.  When dealing with elements which stack one on top of the other, the CSS property z-index is used to determine the stacking order.  The higher the z-index value, the further up the visual stack the item goes.  What’s happening in version 0.3.3 is that the DatePicker is getting a z-index of 1000, while the dialog box containing the DatePicker has a z-index of something higher.  So the fix above makes the DatePicker’s z-index value larger than the dialog box, and it subsequently appears as it is supposed to.

Known Issues

I am unaware of any side effects from this fix.  Any that would appear would be due to the DatePicker having a higher z-index than another element that you need to see.  However, I do not believe this will be a problem as when the DatePicker is displayed, it is likely to be the center of attention.  When you are focusing on other tasks, the DatePicker is hidden.  If something does break because of this, please let me know in the comments below.  Also, if it fixes your problem, I’d love to hear it.

Using DB-Toolkit v0.3.2.026

In this version, the DatePicker does not display at all due to a JavaScript exception.  The fix comes from experience I have gained during development of my own large-scale WordPress plugin in recent weeks.

Reproduce the error

First, let’s go through how to reproduce the error.

1. Setup a vanilla install of WordPress (reproduced using v3.5.2)
2. Install and activate the DB Tookit plugin by David Cramer (reproduced using v0.3.2.026)
3. Create a “New Application” using DB Toolkit.
4. Create a “New Interface” in this new application
5. Set this interface to use a new database table (to prevent corrupting any existing tables)
6. Add a new field using the DatePicker type.
7. Save your interface.
8. Under the title of your new interface, click “View” followed by “Add Entry”

At this point, a jQuery UI DatePicker is supposed to be setup for the DatePicker field.  However, a Javascript exception is thrown:

Uncaught TypeError: Object [object Object] has no method ‘datepicker’

Clicking inside the date field or the calendar button confirms that no DatePicker was setup.

Fix the error

1. Navigate to the directory containing your WordPress installation using your file browser.  If you are on a remote server, this can be done using an FTP client such as FileZilla.
2. Once in your WordPress root directory, navigate to the directory “/wp-content/plugins/db-toolkit/libs/”.
3. Open the “functions.php” file in a text editor (download and open it if working on a remote server).
4. Scroll down to line 495 which should contain the following:
   wp_enqueue_script("jquery");
5. After this line of code, add the following:
   wp_enqueue_script(“jquery-ui”);
   wp_enqueue_script(“jquery-ui-datepicker”);

   That block of PHP code should now look like this:

   wp_enqueue_script("jquery");
   wp_enqueue_script("jquery-ui");
   wp_enqueue_script("jquery-ui-datepicker");
   wp_enqueue_script("jquery-ui-core");
   wp_enqueue_script("jquery-ui-dialog");
   wp_enqueue_script("jquery-ui-sortable");
   wp_enqueue_script("jquery-ui-tabs");
   wp_enqueue_script('jquery-multiselect');
   wp_enqueue_script('data_report');
   wp_enqueue_script('data_form');
   wp_enqueue_script('jquery-validate');

6. Save the file. (Upload it to the remote server if necessary)
7. Return to your interface, open it, and add a new entry.
8. You may need to refresh your browser’s cache on this page.  In most browsers in non-Apple operating systems, this is accomplished by hitting the Ctrl+F5 key combination.  On OSX, the methods vary depending on your web browser.  You will need to Google the appropriate method.  Try searching for “hard refresh a page in InsertBrowserNameHere on a Mac”.
9. Click inside your date picker field.
10. Behold the wonderment that is a working DatePicker.
    
11. Cheer
12. Breathe a sigh of relief
13. Smile
14. et cetera

Cause of the Error (for anyone interested)

The DatePicker is created using the jQuery UI library.  Essentially, the cause of this error is that the developer did not include jQuery UI and its necessary components to form a functioning DatePicker.  Based on some of the files he has present, and some of the code he commented out, I believe this is because, at one point, he included his own version of jQuery UI instead of using WordPress’ built-in version.  Then, at some point down the road, he removed his custom version, but did not re-include WordPress’ version.  Doing so is accomplished by adding the code above with the “jquery-ui”.  Getting the functioning DatePicker then required including jQuery’s DatePicker module, done with the code above with the “jquery-ui-datepicker”.

Known Issues

I am unaware of any side effects from this fix.  I do not believe that any should crop up, unlike with my older fix.  In fact, if anything, this may fix a few other problems that I don’t know of.  If something does break because of this, please let me know in the comments below.  Also, if it fixes your problem, I’d love to hear it.

This is the first video tutorial for the free WordPress Plugin DB-Toolkit.
It will guide you in building the Easy Docs app.