Jump to:

1999 Posts in 1408 Topics by 613 members

Form Questions

SilverStripe Forums » Form Questions » Customizing the layout of a form

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 3739 Views
  • Danno
    Avatar
    Community Member
    1 Post

    Customizing the layout of a form Link to this post

    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?

  • UncleCheese
    Avatar
    4085 Posts

    Re: Customizing the layout of a form Link to this post

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

  • TerryMiddleton
    Avatar
    Community Member
    108 Posts

    Re: Customizing the layout of a form Link to this post

    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

  • petebd
    Avatar
    Community Member
    15 Posts

    Re: Customizing the layout of a form Link to this post

    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

  • petebd
    Avatar
    Community Member
    15 Posts

    Re: Customizing the layout of a form Link to this post

    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;
       }

  • TerryMiddleton
    Avatar
    Community Member
    108 Posts

    Re: Customizing the layout of a form Link to this post

    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

    3739 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.