Designers  »  Forms and Controls 

Designers

Form & Control Topics

Forms and Controls in Exponent

Overview

Forms and controls are a basic building block for many pages or interfaces within Exponent.  Therefore, we've developed some handy tools to make their use more intuitive and to provide better integration into the system.

Even though the information in this area deals primarily with the 'tags' placed in a view template to display controls in a form, it is also the reference for the form control classes which would be used to build a 'form' within a controller.

Building a Form in the View

A form not only displays data, it is used to send data back into Exponent.  Forms are fairly easy to create since in most cases they are simply a {form} block with {control} inside.  There are some important aspects though.  We must ensure we have an 'action' for the form to return to, include some basic hidden data such as the record id, and round it out with a {buttongroup} to do the work.  Here is the form we use to edit a text item in Exponent.

{form action=update}
        {control type=hidden name=id value=$record->id}
        {control type=hidden name=rank value=$record->rank}
        {control type=text name=title label="Title"|gettext value=$record->title|escape:"html"}
        {control type=html name=body label="Body Content"|gettext value=$record->body}
        {if $config.filedisplay}
            {control type="files" name="files" label="Files"|gettext value=$record->expFile}
        {/if}
        {control type=buttongroup submit="Save Text"|gettext cancel="Cancel"|gettext}
{/form}

Form and Control Guides

{control} smarty function

The {control} tag is used to place controls within the form.  Generally, the class file for each of these controls is found in the '/framework/core/subsystems/forms/controls' folder.  It is called in the following format: ...

{form} smarty block

The {form} block encapsulates a form in a template.  It accepts several parameters, but the most common is the action to take when the form is submitted via the buttongroupcontrol. ...

antispam Control

The antispam control places reCaptcha validation in the form based on the Anti-Spam Site Configuration settings.  You must have turned on the site anti-spam measures and set the reCaptcha Public and Private keys. It does NOT use the antispamcontrol class in the forms/controls folder. ...

autocomplete Control - autocompletecontrol Class

The autocomplete control places a text box in the form with autocomplete support.  It uses the autocompletecontrol class in the forms/controls folder. ...

buttongroup Control - buttongroupcontrol Class

The buttongroup control places action buttons in the form which are used to process the form entries.  It is typically placed as the last control in the form.  It uses the buttongroupcontrol class in the forms/controls folder. ...

calendar Control - calendarcontrol Class

This creates a widget with text entry date and/or time and a pop-up date selector. ...

checkbox Control - checkboxcontrol Class

The checkbox control places a checkbox in the form.  It uses the checkboxcontrol class in the forms/controls folder. ...

color/colorpicker Control - colorcontrol Class

This control creates a text box for entering a hex html color (e.g., #FF0055) and a sample of the color, It generates a popup color selection dialog when the text box or color sample is clicked. ...

configcontrol Class

Intended to create a configuration panel.  There is a smarty function to implement this control class. ...

contactcontrol Class

This is intended to create a control for selecting a contact from a drop down list of names. ...

country Control

This creates a dropdown list of countries. ...

countryregioncontrol Class

This control is inteded to create lists of countries and regions. ...

customcontrol Class

This class is used to embed a custom control such as a form within a form, etc... ...

datetime Control - datetimecontrol Class

The datetime control places a set of text based date time controls in the form.  It uses the datetimcontrol class in the forms/controls folder. ...

dropdown Control - dropdowncontrol Class

The dropdown control places a drop-down list in the form.  It uses the dropdowncontrol class in the forms/controls folder. ...

editor or html Control - ckeditorcontrol or htmleditorcontrol Classes

The editor or html control places a multi-line text box with a WYSIWYG editor in the form.  The two control types are a psuedonym for each other.  It uses the either the ckeditorcontrol or htmleditorcontrol class in the forms/controls folder based on the site selected WYSIWYG editor. ...

files Control - filemanagercontrol Class

This control creates the 'Add Files' widget control. ...

grouplistcontrol

This smarty function {grouplistcontrol ...} creates a listbuilder control populated with user groups. ...

hiddenfieldcontrol Class

This creates a 'hidden' field within a form. ...

list Control - listcontrol Class

This control is used to build a list. ...

listbuilder Control - listbuildercontrol Class

This creates a managable list where a list can be managed from a second list of all available items. ...

massmailcontrol Class

This class is intended to activate a mass mailing list. ...

monthyear Control - monthyearcontrol Class

This control creates two drop-down lists for selecting a month and year. ...

nextbackcontrol Class

This is intended to create a set of buttons to move next/back. ...

passwordcontrol Class

This is intended to create a password entry control. ...

quantity Control - quantitycontrol Class

This control creates a widget for selecting quantities using an up/down arrow. ...

radio Control - radiocontrol Class

Creates a single radio button.  Generally this is a sub-component of the radiogroup control. ...

radiogroup Control - radiogroupcontrol Class

The radiogroup control places a radio button group in the form.  It uses the radiogroupcontrol class in the forms/controls folder. ...

state Control

Creates a dropdown list of states/regions. ...

tags Control - tagpickercontrol Class

Creates a control to select from all the tags in the system.  This is how we currently implement tags. ...

tagtree Control - tagtreecontrol Class

This control crreate a managable tree of tags.  This is currently used for (nested) store categories. ...

text Control - genericcontrol Class

The text control places a single line text box in the form.  It uses the genericcontrol class in the forms/controls folder. ...

textarea Control - texteditorcontrol Class

The textarea control places a multi-line text box in the form.  It uses the texteditorcontrol class in the forms/controls folder. ...

uploader Control - uploadcontrol Class

This control allows a user to 'upload' a file, which in a form will send the file as an attachment. ...

User Control

Creates a dropdown list of all usernames in the system. ...

userlistcontrol

This smarty function {userlistcontrol ...} creates a listbuilder control populated with system users. ...

yuicalendar Control - yuicalendarcontrol Class

The yuicalendar  control places a YUI calendar widget control in the form.  It uses the yuicalendarcontrol class in the forms/controls folder. ...

yuidatetime Control - yuidatetimecontrol Class

The yuidatetime control places a YUI calendar widget and date/time control in the form.  It uses the yuidatetimecontrol class in the forms/controls folder. ...