Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

400 lines (322 sloc) 8.985 kb

Character based
String
Text
Email
Phone
Number
Date

Other
Static
Switch
Check
Slider
Image
Option
Picker
Subform
Template

Buttons
Button
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

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

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

Email row

{
  title: "Email",
  key: :email,
  type: :email,
  placeholder: 'me@mail.com'
}

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

Phone row

Email 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

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

Date row

{
  title: "Date",
  value: 326937600,
  key: :date_long,
  type: :date,
  format: :full
}

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 is a NSDate.timeIntervalSince1970 as an integer.

Other

Static row

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

Switch row

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

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

Check row

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

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

Image row

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

Options row

Options row

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

Picker row

Picker row

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

Subform row

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:

Subform row with display

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

Template row

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

Button row

{
  title: "Any Button",
  type: :button,
}

# later...
form.sections[0].rows[0].on_tap do |row|
  # do something when tapped
end

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

Submit row

Submit row

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

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

Back row

Submit row

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

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

Edit row

Submit 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.

Jump to Line
Something went wrong with that request. Please try again.