{"action":"created","issue":{"url":"https://api.github.com/repos/mozilla-services/react-jsonschema-form/issues/304","repository_url":"https://api.github.com/repos/mozilla-services/react-jsonschema-form","labels_url":"https://api.github.com/repos/mozilla-services/react-jsonschema-form/issues/304/labels{/name}","comments_url":"https://api.github.com/repos/mozilla-services/react-jsonschema-form/issues/304/comments","events_url":"https://api.github.com/repos/mozilla-services/react-jsonschema-form/issues/304/events","html_url":"https://github.com/mozilla-services/react-jsonschema-form/pull/304","id":171919205,"number":304,"title":"Fix #284: Introduce a field template API.","user":{"login":"n1k0","id":41547,"avatar_url":"https://avatars.githubusercontent.com/u/41547?v=3","gravatar_id":"","url":"https://api.github.com/users/n1k0","html_url":"https://github.com/n1k0","followers_url":"https://api.github.com/users/n1k0/followers","following_url":"https://api.github.com/users/n1k0/following{/other_user}","gists_url":"https://api.github.com/users/n1k0/gists{/gist_id}","starred_url":"https://api.github.com/users/n1k0/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/n1k0/subscriptions","organizations_url":"https://api.github.com/users/n1k0/orgs","repos_url":"https://api.github.com/users/n1k0/repos","events_url":"https://api.github.com/users/n1k0/events{/privacy}","received_events_url":"https://api.github.com/users/n1k0/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":12,"created_at":"2016-08-18T14:46:16Z","updated_at":"2016-08-29T21:40:55Z","closed_at":"2016-08-19T10:10:16Z","pull_request":{"url":"https://api.github.com/repos/mozilla-services/react-jsonschema-form/pulls/304","html_url":"https://github.com/mozilla-services/react-jsonschema-form/pull/304","diff_url":"https://github.com/mozilla-services/react-jsonschema-form/pull/304.diff","patch_url":"https://github.com/mozilla-services/react-jsonschema-form/pull/304.patch"},"body":"Refs #284, WiP. Early feedback appreciated :)\r\n\r\n### Field template\r\n\r\nTo take control over the inner organization of each field (each form row), you can define a *field template* for your form.\r\n\r\nA field template is basically a React stateless component being passed field-related props so you can structure your form row as you like:\r\n\r\n```jsx\r\nfunction CustomFieldTemplate(props) {\r\n  const {id, classNames, label, help, required, description, errors, children} = props;\r\n  return (\r\n    <div className={classNames}>\r\n      <label htmlFor={id}>{label}{required ? \"*\" : null}</label>\r\n      {description}\r\n      {children}\r\n      {errors}\r\n      {help}\r\n    </div>\r\n  );\r\n}\r\n\r\nrender((\r\n  <Form schema={schema}\r\n        FieldTemplate={CustomFieldTemplate} />,\r\n), document.getElementById(\"app\"));\r\n```\r\n\r\nThe following props are passed to a custom field template component:\r\n\r\n- `id`: The id of the field in the hierarchy. You can use it to render a label targetting the wrapped widget;\r\n- `classNames`: A string containing the base bootstrap CSS classes merged with any [custom ones](#custom-css-class-names) defined in your uiSchema;\r\n- `label`: The computed label for this field, as a string;\r\n- `description`: A component instance rendering the field description, if any defined (this will use any [custom `DescriptionField`](#custom-descriptions) defined);\r\n- `children`: The field or widget component instance for this field row;\r\n- `errors`: A component instance listing any encountered errors for this field;\r\n- `help`: A component instance rendering any `ui:help` uiSchema directive defined;\r\n- `hidden`: A boolean value stating if the field should be hidden;\r\n- `required`: A boolean value stating if the field is required;\r\n- `readonly`: A boolean value stating if the field is read-only;\r\n- `displayLabel`: A boolean value stating if the label should be rendered or not. This is useful for nested fields in arrays where you don't want to clutter the UI.\r\n\r\n> Note: you can only define a single field template for a form. If you need many, it's probably time to look for [custom fields](#custom-field-components) instead."},"comment":{"url":"https://api.github.com/repos/mozilla-services/react-jsonschema-form/issues/comments/243265780","html_url":"https://github.com/mozilla-services/react-jsonschema-form/pull/304#issuecomment-243265780","issue_url":"https://api.github.com/repos/mozilla-services/react-jsonschema-form/issues/304","id":243265780,"user":{"login":"nuclearspike","id":1151638,"avatar_url":"https://avatars.githubusercontent.com/u/1151638?v=3","gravatar_id":"","url":"https://api.github.com/users/nuclearspike","html_url":"https://github.com/nuclearspike","followers_url":"https://api.github.com/users/nuclearspike/followers","following_url":"https://api.github.com/users/nuclearspike/following{/other_user}","gists_url":"https://api.github.com/users/nuclearspike/gists{/gist_id}","starred_url":"https://api.github.com/users/nuclearspike/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nuclearspike/subscriptions","organizations_url":"https://api.github.com/users/nuclearspike/orgs","repos_url":"https://api.github.com/users/nuclearspike/repos","events_url":"https://api.github.com/users/nuclearspike/events{/privacy}","received_events_url":"https://api.github.com/users/nuclearspike/received_events","type":"User","site_admin":false},"created_at":"2016-08-29T21:40:55Z","updated_at":"2016-08-29T21:40:55Z","body":"Finally got a chance to take this for a spin, and definitely appreciate this. I use it to do automatic title prettification so I can leave out a lot of titles now. \"first_name\" => \"First Name\" or in some strange situations where I want no titles/labels (uses placeholders only), no indication that it's required but I still want the required behavior (popup, no posting until it's filled in)... I have run into an issue though. When the I have a field template set up and a schema with nested properties, the titles go all wonky. Seems like it may make sense to not use the field template when displaying the TitleField. \r\n\r\nAdditionally (maybe best as a new ticket) it would be nice to be able to override the error field to handle that however I want. One thing I want to do is to just do a find and replace on the word \"property\" in the error messages. No user should ever see that (I realize that's the json validator library and not this component's code)."}}
{"actor":{"display_login":"nuclearspike"}}