Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

Customizing the layout of a form


Reply


6 Posts   3986 Views

Avatar
Danno

Community Member, 1 Post

18 March 2009 at 9:57am

I've got a custom form working and displaying using the $Form method call within my .ss template, but the standard is to just list each Field vertically top to bottom. I want to build the form out left-to-right and then top-to-bottom and change the way the labels lay out, which is currently on top of the input element. Any ideas on how to make this happen?

Avatar
UncleCheese

Forum Moderator, 4096 Posts

18 March 2009 at 10:21am

<% control MyForm %>
<% control Fields %>
$FieldHolder (gives you the full structural markup)
$Field (form field only)
<% end_control %>
<% end_control %>

Avatar
TerryMiddleton

Community Member, 108 Posts

27 April 2009 at 2:47am

Unclecheese,

I don't get it. I apologize because I know it's simple, but I'm completely missing it.

Here's where I'm struggling to understand. $FieldHolder (gives you the full structural markup) - you are meaning CSS markup yes?

How to do I get my hands around what is really produced for the $FieldHolder?

Okay, so I've been able to strip away the field label and change the margins +/- to move the fields up/down/left/right, however at the end I'm dealing with a plate of spaghetti and then all the CSS get's interpreted differently in the different browsers.

I know I'm missing something so simple that once I understand it, SS will become even more easier to use that it already is.

Can you help?

Is the $FieldHolder the element we need to identify in the css?

Agian, I know it's simple, but I just don't get it.

Terry

Avatar
petebd

Community Member, 15 Posts

27 April 2009 at 7:17am

Take a look at this page: http://doc.silverstripe.com/doku.php?id=Form.
Halfway down is a section called "Using a custom template", which has a good example of how to layout a form anyway you like.
Hope that helps,
Pete

Avatar
petebd

Community Member, 15 Posts

27 April 2009 at 7:43am

To follow on from UncleCheese, this bit in the template basically gives you direct access to the form's fieldset.

<% control MyForm %>
<% control Fields %>


So now you are iterating through each FormField in the FieldSet. Each formfield has a Field() and FormField() method that can be used to output the field. Here is a quote from the documentation:

Although FieldHolder is generally what is inserted into templates, all of the field holder
templates make use of $Field. It's expected that FieldHolder will give you the "complete"
representation of the field on the form, whereas Field will give you the core editing widget,
such as an input tag.

So I guess if you want full control you will either follow the explicit field html idea in the wiki page I posted above or you use the following methods on the FormField:
Field() - the basic widget html.
Name() - the name of the field
Message() - any error message associated with this field
Title() - the main title of the field
RightTitle() - the right title for the field
Type() - the type of the field
extraClass() - the css classes associated with this field

It is interesting to look at the code of how this is used in FormField() to construct the standard html:

   /**
    * Returns a "Field Holder" for this field - used by templates.
    * Forms are constructed from by concatenating a number of these field holders. The default
    * field holder is a label and form field inside a paragraph tag.
    *
    * Composite fields can override FieldHolder to create whatever visual effects you like. It's
    * a good idea to put the actual HTML for field holders into templates. The default field holder
    * is the DefaultFieldHolder template. This lets you override the HTML for specific sites, if it's
    * necessary.
    *
    * @todo Add "validationError" if needed.
    */
   function FieldHolder() {
      $Title = $this->XML_val('Title');
      $Message = $this->XML_val('Message');
      $MessageType = $this->XML_val('MessageType');
      $RightTitle = $this->XML_val('RightTitle');
      $Type = $this->XML_val('Type');
      $extraClass = $this->XML_val('extraClass');
      $Name = $this->XML_val('Name');
      $Field = $this->XML_val('Field');
      
      $titleBlock = (!empty($Title)) ? "<label class=\"left\" for=\"{$this->id()}\">$Title</label>" : "";
      $messageBlock = (!empty($Message)) ? "<span class=\"message $MessageType\">$Message</span>" : "";
      $rightTitleBlock = (!empty($RightTitle)) ? "<label class=\"right\" for=\"{$this->id()}\">$RightTitle</label>" : "";

      return <<<HTML
<div id="$Name" class="field $Type $extraClass">$titleBlock<div class="middleColumn">$Field</div>$rightTitleBlock$messageBlock</div>
HTML;
   }

Avatar
TerryMiddleton

Community Member, 108 Posts

27 April 2009 at 7:59am

Pete,

Thank you very much for the info on both replies. I appreciate you insight.

I was able to get it to do what I wanted (99% anyway).

It's obvious to me that I need to bury my head into some php5 class and function books to learn this. I'm very weak at understanding how it all fits together and what options I have.

For example, on the $LoginForm, it seems that I need create a new class for the LoginForm in order to modify the fields on loginform. I was successful at doing this in the SearchForm. I found the Page_Controller that has SearchForm function and was able to add a string inside the field 'Search'

Thanks for your help. I appreciate you.

Terry