Table Of Contents
 

How To: Use Tabs & Groups

Author : Peter Coppinger Email : peter@digital-crew.com
UDI allows you to layout you form neatly and logically using groups and tabs.
Groups and Tabs and be used together.

Tabs


Tabs ExampleTabs can be used to put information that rarely needs to be access out-of-the-way and/or to break down a complex form into more management small parts for the end user.

To use tabs, you simply add the text tab="Tab Name" to any line to your interface.
To put several form items in a tab together, the form elements must be in sequence and have the same tab name.

Usage


<cf_dccom component="UDI" table="test">
    <cf_dccom field="id" type="key"></cf_dccom>
    <cf_dccom field="First Name" type="text" tab="User Details"></cf_dccom>
    <cf_dccom field="Last Name" type="text" tab="User Details"></cf_dccom>
    <cf_dccom field="Email" type="email" tab="Login"></cf_dccom>
    <cf_dccom field="Password" type="password" tab="Login"></cf_dccom>
<cf_dccom>

This example would create 2 tabs, User Details and Login.

Groups


Example of GroupGroups are used to put a box (a fieldset) around related items.

Usage


<cf_dccom component="UDI" table="test">
    <cf_dccom field="id" type="key"></cf_dccom>
    <cf_dccom field="First Name" type="text" group="User Details"></cf_dccom>
    <cf_dccom field="Last Name" type="text" group="User Details"></cf_dccom>
    <cf_dccom field="Email" type="email" group="Login"></cf_dccom>
    <cf_dccom field="Password" type="password" group="Login"></cf_dccom>
<cf_dccom>

This example would create 2 groups, User Details and Login.