setLeftTitle in Silverstripe 3.1

Question

I have just jumped up the Silverstripe bandwagon. I have been trying to get the following effect of static text in front of a text field on the getCMSfields form:

Telephone number:   +36 [__________]

where "telephone number:" is obviously the field title (which can be altered via ->setTitle() and +36 is a static prefix prepended to the left of the input field.

I have been trying with ->setLeftTitle('+36') but it does not seem to have any effect.

BTW. ->setRightTitle('something') - which I expected to append a label to the right of input field, works identically to ->setDescription().

I'm confused. So is there any way to achieve what I want?

Answer 1

Use the FieldGroup class

public function getCMSFields($fields) {
    $fields = parent::getCMSFields($fields);

    $fields->addFieldToTab('Root.Main',
        FieldGroup::create(
            new HeaderField('+36'),
            new TextField('PhoneNumber','')
        )->setTitle('Telephone number')
    );

    return $fields;
}

Personally I'd use two TextFields for cosmetic reasons, and enforce some validation on the TelephonePrefix.

Answer 2

The default template does not render the left title. To do this, you will probably need to create a custom form field template (called FormFieldLeftTitle.ss) or something, and include $LeftTitle in the appropriate spot:

<div id="$Name" class="field<% if $extraClass %> $extraClass<% end_if %>">
    <% if $Title %><label class="left" for="$ID">$Title</label><% end_if %>
    <div class="middleColumn">
        $LeftTitle
        $Field
    </div>
    <% if $RightTitle %><label class="right" for="$ID">$RightTitle</label><% end_if %>
    <% if $Message %><span class="message $MessageType">$Message</span><% end_if %>
    <% if $Description %><span class="description">$Description</span><% end_if %>
</div>

You can then call $myFormField->setTemplate('FormFieldLeftTitle') to use this template.