Members

Note: You can use your Sitellite.org account here and vice versa.

Username

Password

Remember Login

Forgot your password?

Not a member? Click here to register

Form Tabs

Home Page | All Pages | Recently Revised | Authors | Feeds |

Sitellite 4.2.12 features a new Tab widget in the MailForm form library, which makes it insanely easy to create a multi-tab form for your custom content type or any type of form.

The Tab widget is controlled entirely in your form's settings.php file. A typical settings.php file might look like this:

[Form]

error_mode = all

[name]

type = text

[email]

type = text

[website]

type = text

[address]

type = text

[state]

type = text

[country]

type = text

[zip_code]

type = text

[submit_button]

type = submit
setValues = Save

If we wanted to turn the above form description into a two-tab form with the address information in a separate "Address" tab, all we have to do is this:

[Form]

error_mode = all

[tab1]

type = tab
title = General

[name]

type = text

[email]

type = text

[website]

type = text

[tab2]

type = tab
title = Address

[address]

type = text

[state]

type = text

[country]

type = text

[zip_code]

type = text

[tab-end]

type = tab

[submit_button]

type = submit
setValues = Save

The first tab widget opens the first tab and anything below it until the next tab falls under that first tab. The same goes for the next tab. The last tab widget doesn't have a title and simply ends the tabs, allowing you to continue to have form fields outside of the tabs as well as in. This is good for submit buttons, as used in the example.

Sitellite will now create all of the necessary tab logic/code so that the tabs just appear in your form, with nothing else to do on your part.

Rex/Generic Integration

Rex and Generic are two database abstraction libraries in Sitellite that require special care when working with the tabs. I'll focus on Rex, but the same logic and code change applies to both.

A typical onSubmit() handler with Rex might look like this:


<?php
function onSubmit ($vals) {
    loader_import ('cms.Versioning.Rex');

    $rex = new Rex ('your_collection');

    if (! $res = $rex-&gt;create ($vals)) {
        die ($rex-&gt;error);
    }

    // form saved successfully, respond to user
}
?>

The issue that arises with this code and the new Tab widget is that the tabs end up as values in the $vals array, which are then passed to Rex which will try to insert them into rows in the database called "tab1", "tab2", and "tab-end". This will cause the create() method call to fail.

The solution is to first unset() the tab output in the $vals array, like this:


<?php
function onSubmit ($vals) {
    loader_import ('cms.Versioning.Rex');

    $rex = new Rex ('your_collection');

    unset ($vals['tab1']);
    unset ($vals['tab2']);
    unset ($vals['tab-end']);

    if (! $res = $rex-&gt;create ($vals)) {
        die ($rex-&gt;error);
    }

    // form saved successfully, respond to user
}
?>

This eliminates the values from the array, allowing the others to pass through the create() method just fine.

As you can see, creating tabbed forms couldn't be easier than using Sitellite's new Tab widget and MailForm API.

Revision from August 1, 2007 1:15 PM by anonymous

Back in time (2 more) | Linked from: Forms