List of all the row types

Character based
String
Text
Email
Phone
Number
Date

Other
Static
Switch
Check
Slider
Image
Option
Picker
Subform
Template

Buttons
Submit
Back
Edit

General

All row types accept following properties:

{
  key:        :user_name,     # Unique identifier for the row
  value:      'Some Value',   # The initial value passed to the row
  title:      'Title',        # Title of the row
  subtitle:   'Subtitle',     # Subtitle of the row
  type:       :string,        # The type of row (string, phone, switch, etc)
  row_height: 100             # Height of the row
}

The type property will define what kind of row type will get built. It looks for any Class within the Formotion::RowType namespace that has the constantized name (e.g. Formotion::RowType::StringRow).

Character based

All character based row types accept following properties:

{
  placeholder:         'James Bond',     # Placeholder before a value exists
  auto_correction:     :no,              # Disable auto correction
  auto_capitalization: :none,            # Disable auto capitalization
  secure:              true,             # Enable secure input (Password)
  clear_button:        :while_editing,   # Enable clear button
  return_key:          :google,          # Define return key
}

String row

{
  title: "Name",
  key: :name,
  type: :string,
  placeholder: 'James Bond',
  auto_correction: :no,
  auto_capitalization: :none
}

The StringRow is a simple text input row and opens a UIKeyboardTypeDefault keyboard when editing.

Text row

{
  title: "Text",
  key: :text,
  type: :text,
  placeholder: "Enter your text here",
  row_height: 100
}

The TextRow is a multiline text input row and opens the default keyboard when editing. To define the height of the row set the property row_height.

Email row

{
  title: "Email",
  key: :email,
  type: :email,
  placeholder: '[email protected]'
}

The EmailRow is a string input row for an email address and opens a UIKeyboardTypeEmailAddress keyboard when editing.

Phone row

{
  title: "Phone",
  key: :phone,
  type: :phone,
  placeholder: '+01 877 412 7753'
}

The PhoneRow is a string input row for a phone number and opens a UIKeyboardTypePhonePad keyboard when editing.

Number row

{
  title: "Number",
  key: :number,
  placeholder: "12345",
  type: :number
}

The NumberRow is a string input row for a number and opens a UIKeyboardTypeDecimalPad keyboard when editing.

Date row

{
  title: "Date",
  value: 326937600,
  key: :date_long,
  type: :date,
  format: :full
  input_accessory: :done #adds a Done button to the date picker
}

The DateRow is a string input row for a date and opens a UIDatePicker when editing. You can pass one of following formats as property:

  :no       # NSDateFormatterNoStyle - Specifies no style.
  :short    # NSDateFormatterShortStyle - Specifies a short style, typically numeric only, such as “11/23/37” or “3:30pm”.
  :medium   # NSDateFormatterMediumStyle - Specifies a medium style, typically with abbreviated text, such as “Nov 23, 1937”.
  :long     # NSDateFormatterLongStyle - Specifies a long style, typically with full text, such as “November 23, 1937” or “3:30:32pm”.
  :full     # NSDateFormatterFullStyle -Specifies a full style with complete details, such as “Tuesday, April 12, 1952 AD” or “3:30:42pm PST”.

The value integer can be obtained for the current date with NSDate.alloc.init.timeIntervalSince1970.to_i .

Other

Static row

{
  title: "Static",
  type: :static,
}

The StaticRow has no input funcitonality and therefore needs no key property. It is used for static text display like in Settings > General > About on your iOS device.

Switch row

{
  title: "Remember?",
  key: :remember,
  type: :switch,
}

The SwitchRow is a on/off switch that has the value true or false.

Check row

{
  title: "Check",
  key: :check,
  type: :check,
  value: true
}

The CheckRow is a row you can check and uncheck by tapping on it. It has either the value true or false. You can create a radio button style group by defining a section with select_one: true like this:

{
  title: "Account Type",
  key: :account_type,
  select_one: true,
  rows: [{
    title: "Free",
    key: :free,
    type: :check,
  }, {
    title: "Basic",
    value: true,
    key: :basic,
    type: :check,
  }, {
    title: "Pro",
    key: :pro,
    type: :check,
  }]
}

Slider row

{
  title: "Slider",
  key: :slider,
  type: :slider,
  range: (1..100),
  value: 25
}

The SliderRow takes a ruby range as range property that defines the min and max value of the slider.

Image row

{
  title: "Image",
  key: :image,
  type: :image
}

Options row

{
  title: "Account Type",
  key: :account_type,
  type: :options,
  items: ["Free", "Basic", "Pro"]
}

Picker row

{
  title: "Picker",
  key: :pick,
  type: :picker,
  items: ["Ruby", "Motion", "Rocks"],
  value: "Motion"
}

Subform row

{
  title: "Advanced",
  type: :subform,
  key: :advanced,
  subform: {
    title: "Advanced",
    sections: [{
      title: "Advanced Settings",
      rows: [{
        title: "Server URL",
        key: :server,
        placeholder: "example.com",
        type: :string,
      }]
    }, {
      rows: [{
        title: 'Back',
        type: :back
      }]
    }]
  }
}

Use a :display_key to show the value of the subform in the row:

{
  title: "Subform",
  subtitle: "With display_key",
  type: :subform,
  display_key: :type,
  subform: {
    ...
  }
}

Template row

{
  title: 'Your nicknames',
  rows: [{
    title: "Add nickname",
    key: :nicknames,
    type: :template,
    value: ['Nici', 'Sam'],
    template: {
      title: 'Nickname',
      type: :string,
      placeholder: 'Enter here',
      indented: true,
      deletable: true
    }
  }]
}

Buttons

Submit row

{
  title: "Submit",
  type: :submit,
}

The SubmitRow triggers the form.submit which triggers the defined on_submit callback.

Back row

{
  title: "Back",
  type: :back,
}

The BackRow is used in subforms to go back to the parent form.

Edit row

{
  title: "Edit",
  alt_title: "View",
  type: :edit,
}

The EditRow is used to switch between edit and view mode. It's mainly used for the TemplateRow.