Strategy needed for custom layout of Signum React controls

[ghockx1p]

A lot of Signum React entity components are made using the Bootstrap grid. It has 2 columns for the label and 10 columns for the input. My company's styleguide dictates a different setup with the input stretching to full width and a label on top of it. This is a sample html for a rendered date field:

<div class="control-group">
    <label class="control-label" for="Sailing Date">
        Discharge Date
    </label>
    <div class="controls">
        <input class="form-control input-xlarge hasDatepicker"  id="SailingDate" name="SailingDate" type="text" value="">
    </div>
</div>

So basically I want to adapt a different alignment for all Signum React ontrols. What would a good strategy for doing this?

[olmobrutall]

Hi Geraldo,

Thank you for asking and sorry that there is still no official documentation for Signum React.

The problem is well-supported.

Raw Bootstrap

If you take a look at http://getbootstrap.com/css/#forms there are different examples of layout.

• Basic: label up, value button with width 100%.
• Sr Only: value only, label is hidden for screen-readers only
• Inline form: label value in the same line with no margin or alignment.
• Horizontal form: label takes 2 columns, value takes 12-2 columns.

Most of the changes are in how the div with class form-group is built. But Horizontal form also requires a container div with class form-horizontal.

Signum React

FormControl

Signum.React typical components, like ValueLine, EntityLine or EntityCombo, have in their render function a FormGroup component.

FormGroup is an abstraction that let you choose the right configuration for the form-grup div depending on the ctx variable. You can also use the control alone to write a label.

FormGroupStyle

You can control the behaviour using formGroupStyle and labelColumns properties.

The different values values for formGroupStyle are:

export enum FormGroupStyle {
    /// Unaffected by FormGroupSize
    None,
    /// Requires form-vertical container
    Basic,

    /// Requires form-vertical container
    BasicDown,

    /// Requires form-vertical / form-inline container
    SrOnly,

    /// Requires form-horizontal (default),  affected by LabelColumns / ValueColumns
    LabelColumns,
}

You can set the properties in each component:

<ValueLine ctx={ctx.subCtx(c => c.companyName) } formGroupStyle={FormGroupStyle.Basic} />

But this will require a lot of repetition so typically you set this in the context.

    render() {
        var ctx = this.props.ctx.subCtx({ formGroupStyle: FormGroupStyle.Basic });
        return (
            <div>
                <ValueLine ctx={ctx.subCtx(c => c.companyName) } />
                <ValueLine ctx={ctx.subCtx(c => c.contactName)} />
                <ValueLine ctx={ctx.subCtx(c => c.contactTitle)} />
            </div>
        );
    }

There are a lot of other useful things that you can set in the context, like readOnly, placeHolderLabels or formGroupSize, to control the size of the inputs.

export enum FormGroupSize {
    Normal, //Raw Bootstrap default
    Small,  //Signum default
    ExtraSmall, //Like in FilterBuilder
}

form-horizontal and form-vertical

Bootstrap requires a form-horizontal container to make the horizontal forms. In order to make them simpler to build, since they are the default style, the default container (ModalFrame and PageFrame) already include them.

That means that if you want to any other configuration you have to create a div with the class form-vertical to compensate.

The class form-vertical is non standard and part for Signum React.

So, to answer your question, it will be like this:

import * as React from 'react'
import { CompanyEntity } from '../Southwind.Entities'
import { ValueLine, EntityLine, EntityCombo, EntityList, EntityDetail, EntityStrip, EntityRepeater, TypeContext, FormGroupStyle } from '../../../../Framework/Signum.React/Scripts/Lines'

export default class Company extends React.Component<{ ctx: TypeContext<CompanyEntity> }, void> {

    render() {
        var ctx = this.props.ctx.subCtx({ formGroupStyle: FormGroupStyle.Basic });
        return (
            <div className="form-vertical">
                <ValueLine ctx={ctx.subCtx(c => c.companyName) } />
                <ValueLine ctx={ctx.subCtx(c => c.contactName)} />
                <ValueLine ctx={ctx.subCtx(c => c.contactTitle)} />
            </div>
        );
    }
}

[ghockx1p]

Hi Olmo,

Thanks for the extensive and clear answer. Once you know how it's very simple to do.

Regards, Geraldo.