Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Mar 7, 2021. It is now read-only.

Conversation

@jeffleeismyhero
Copy link
Collaborator

This allows for the use of spacing elements within the Form JSON.

See also: #531 - Feature Request: Spacer fields

Spacer Field JSON

{
  "id":"spacer",
  "type":"spacer",
  "size":{
    "width":40,
    "height":1
  }
}

Example

There is a 50 unit spacer after the Last Name field. This causes the Display Name field to move to the next row.

There is another spacer (20 units) after the Address field that pushes the E-post and Phone Number fields to the right.

simulator screen shot sep 1 2016 4 38 52 pm

Full JSON Example

{
  "groups":[
    {
      "id":"personal-details",
      "title":"Personal Details",
      "sections":[
        {
          "id":"personal-details-0",
          "fields":[
            {
              "id":"first_name",
              "title":"First name",
              "info":"Fornavn",
              "type":"name",
              "disabled":true,
              "size":{
                "width":30,
                "height":1
              },
              "validations":{
                "required":true,
                "min_length":2
              }
            },
            {
              "id":"last_name",
              "title":"Last name",
              "type":"name",
              "info":"Family name",
              "size":{
                "width":30,
                "height":1
              },
              "validations":{
                "required":true,
                "min_length":2
              }
            },
            {
              "id":"spacer",
              "type":"spacer",
              "size":{
                "width":40,
                "height":1
              }
            },
            {
              "id":"display_name",
              "title":"Display name",
              "info":"This is the name that is going to be used across the application.",
              "placeholder": "Display name",
              "type":"text",
              "size":{
                "width":60,
                "height":1
              },
              "formula":"first_name last_name"
            }
          ]
        },
        {
          "id":"personal-details-1",
          "fields":[
            {
              "id":"address",
              "title":"Address",
              "type":"text",
              "size":{
                "width":30,
                "height":1
              }
            },
            {
              "id":"spacer2",
              "type":"spacer",
              "size":{
                "width":20,
                "height":1
              }
            },
            {
              "id":"email",
              "title":"E-post",
              "info":"bork\nbork\nbork",
              "type":"email",
              "size":{
                "width":25,
                "height":1
              },
              "validations":{
                "format":"[\\w._%+-]+@[\\w.-]+\\.\\w{2,}",
                "required":true
              }
            },
            {
              "id":"phone",
              "title":"Phone number",
              "type":"text",
              "input_type":"number",
              "size":{
                "width":25,
                "height":1
              }
            },
            {
              "id":"image",
              "type":"image",
              "size":{
                "width":100,
                "height":1.7
              },
              "hidden":true
            }
          ]
        }
      ]
    },
    {
      "id":"employment",
      "title":"Employment",
      "sections":[
        {
          "id":"employment-0",
          "fields":[
            {
              "id":"start_date",
              "title":"Start date",
              "info":"The day of employment",
              "type":"date",
              "size":{
                "width":25,
                "height":1
              }
            },
            {
              "id":"start_time",
              "title":"Start time",
              "type":"time",
              "size":{
                "width":25,
                "height":1
              }
            },
            {
              "id":"end_date",
              "title":"End date",
              "type":"date",
              "validations":{
                "compare_to":"start_date",
                "compare_rule":">"
              },
              "size":{
                "width":25,
                "height":1
              }
            },
            {
              "id":"end_time",
              "title":"End time",
              "type":"time",
              "size":{
                "width":25,
                "height":1
              },
              "validations":{
                "required":true,
                "min_length":2
              }
            },
            {
              "id":"contract_type",
              "title":"Contract type",
              "info":"Type of contract\n Permanent or temporary",
              "type":"select",
              "size":{
                "width":50,
                "height":1
              },
              "values":[
                {
                  "id":0,
                  "title":"Permanent",
                  "info":"Regular employee",
                  "default":true,
                  "targets":[
                    {
                      "id":"end_date",
                      "type":"field",
                      "action":"show"
                    },
                    {
                      "id":"end_time",
                      "type":"field",
                      "action":"show"
                    },
                    {
                      "id":"employment-1",
                      "type":"section",
                      "action":"show"
                    }
                  ]
                },
                {
                  "id":1,
                  "title":"Temporary",
                  "targets":[
                    {
                      "id":"end_date",
                      "type":"field",
                      "action":"hide"
                    },
                    {
                      "id":"end_time",
                      "type":"field",
                      "action":"hide"
                    },
                    {
                      "id":"employment-1",
                      "type":"section",
                      "action":"hide"
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "id":"employment-1",
          "fields":[
            {
              "id":"base_salary",
              "title":"Base salary",
              "type":"select",
              "size":{
                "width":25,
                "height":1
              },
              "values":[
                {
                  "title":"Salary 1",
                  "id":0,
                  "value":100,
                  "targets":[
                    {
                      "id":"total",
                      "type":"field",
                      "action":"update"
                    }
                  ]
                },
                {
                  "title":"Salary 2",
                  "id":1,
                  "value":200,
                  "targets":[
                    {
                      "id":"total",
                      "type":"field",
                      "action":"update"
                    }
                  ]
                },
                {
                  "title":"Salary 3",
                  "id":2,
                  "value":10,
                  "targets":[
                    {
                      "id":"total",
                      "type":"field",
                      "action":"update"
                    }
                  ]
                }
              ]
            },
            {
              "id":"bonus_enabled",
              "title":"Bonus enabled",
              "type":"select",
              "size":{
                "width":25,
                "height":1
              },
              "values":[
                {
                  "id":true,
                  "title":"Ja"
                },
                {
                  "id":false,
                  "title":"Nei"
                }
              ]
            },
            {
              "id":"bonus",
              "title":"Bonus",
              "type":"float",
              "size":{
                "width":25,
                "height":1
              },
              "targets":[
                {
                  "id":"total",
                  "type":"field",
                  "action":"update"
                }
              ],
              "validations":{
                "max_value":100,
                "min_value":10
              }
            },
            {
              "id":"total",
              "title":"Total",
              "type":"float",
              "size":{
                "width":25,
                "height":1
              },
              "disabled":true,
              "formula":"$base_salary + $bonus"
            }
          ]
        },
        {
          "id":"companies",
          "type":"dynamic",
          "action_title":"ADD COMPANY ✛",
          "fields":null
        },
        {
          "id":"contacts",
          "type":"dynamic",
          "action_title":"ADD CONTACT ✛",
          "fields":null
        }
      ]
    }
  ],
  "templates":{
    "fields":null,
    "sections":[
      {
        "id":"companies",
        "fields":[
          {
            "id":"companies[:index].name",
            "title":"Company Name",
            "type":"name",
            "validations":{
              "required":true,
              "min_length":2
            },
            "size":{
              "width":50,
              "height":1
            }
          },
          {
            "id":"companies[:index].phone_number",
            "title":"Phone number",
            "type":"number",
            "size":{
              "width":30,
              "height":1
            }
          },
          {
            "id":"companies[:index].remove",
            "title":"Remove",
            "type":"button",
            "size":{
              "width":20,
              "height":1
            }
          }
        ]
      },
      {
        "id":"contacts",
        "fields":[
          {
            "id":"contacts[:index].name",
            "title":"Contact name",
            "type":"name",
            "validations":{
              "required":true,
              "min_length":2
            },
            "size":{
              "width":50,
              "height":1
            }
          },
          {
            "id":"contacts[:index].phone_number",
            "title":"Phone number",
            "type":"number",
            "size":{
              "width":30,
              "height":1
            }
          },
          {
            "id":"contacts[:index].remove",
            "title":"Remove",
            "type":"button",
            "size":{
              "width":20,
              "height":1
            }
          }
        ]
      }
    ]
  }
}

3lvis and others added 7 commits September 24, 2015 11:35
* upstream/master: (95 commits)
  Update labelHeight to take in account removal of title label
  Add support for clearing select field
  Remove unused code
  Fix off center info label
  Improve location of date picker in iPhone
  Add info for test purposes
  Make universal
  Add default input type when not provided
  Add unit test
  Remove implementation to add unit test
  Use field type as the default input type
  Update NSObject-HYPTesting
  Update pods
  Update .travis.yml
  Add universal form to FAQ
  Update pods
  Update dependencies
  Move to CocoaPods 1.0
  Improve/decimal separator based on locale
  Bump version number (again)
  ...

# Conflicts:
#	Demos/Basic-Swift/Basic-Swift/AppDelegate.swift
#	Demos/Basic-Swift/Basic-Swift/Objective-C Bridging Header.h
#	Demos/Basic-Swift/Basic-Swift/SampleCollectionViewController.swift
#	Demos/CustomField/App/Source/RootController.swift
#	Demos/CustomField/Podfile.lock
#pragma mark - Layout

- (void)layoutSubviews {
[super layoutSubviews];
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you remove this empty implementation, please?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was talking about removing the method, not the class.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you referring to the (void)updateWithField:(FORMField *)field method or (void)layoutSubviews?

Your comment seemed to highlight everything.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was talking about - (void)layoutSubviews. It only had a super call. :)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright. All fixed up!

@3lvis
Copy link
Owner

3lvis commented Sep 5, 2016

Nice implementation @jeffleeismyhero! Short and simple, couldn't get better.

@3lvis
Copy link
Owner

3lvis commented Sep 5, 2016

@jeffleeismyhero did you meant to remove the entire file?

@3lvis
Copy link
Owner

3lvis commented Sep 5, 2016

Looks good to me!

@3lvis 3lvis merged commit 16e716e into 3lvis:master Sep 5, 2016
@jeffleeismyhero jeffleeismyhero deleted the spacer_fields branch September 5, 2016 22:10
@jeffleeismyhero
Copy link
Collaborator Author

Thanks!

@3lvis
Copy link
Owner

3lvis commented Sep 5, 2016

Thanks to you, great work!

@3lvis
Copy link
Owner

3lvis commented Sep 5, 2016

jeffleeismyhero added a commit to jeffleeismyhero/Form that referenced this pull request Sep 16, 2016
* upstream/master:
  Update Form.podspec
  Spacer fields (3lvis#534)

# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants