Textarea

General
1

Sorry is this is a silly question, but I can’t seem to figure out how to create a textarea. Do you do that within one of the json files?

[original thread by Deleted]

2

No worries. This is a channel specifically for questions so there are no silly questions here! In general you have three different data blobs when using JSON Forms: The JSON schema which is a standard describing your data, a UI schema which describes how your data shall be rendered and finally the data itself. You can see all of them in action in our JSON Forms react seed which I would like to suggest to you to get familiar with.
Coming back to your question: You can configure rendering a text area instead of a normal text input by passing an option object with multi: true. Example:

    {
      type: 'Control',
      scope: '#/properties/description',
      options: {
        multi: true
      }
    }

I hope this helps!

3

[Deleted]

Thank you! Is there a way to specify the “rows” property of the text box? Or more generally, how can I specify properties of the form elements?

4

Via the Ui schema you can only configure the properties which are actually set by the renderers. The rows property is currently not supported as you can see in the code.
If you want to set such a property you’ll need to register your own renderer which can then configure the input in any way you want.

5

[Lily]

I have an example of a react renderer for this.

import { withJsonFormsControlProps } from "@jsonforms/react"
import * as React from "react"

import { Unwrapped } from "@jsonforms/material-renderers"

export const LongText = (props) => {
  const newProps = props
  newProps.uischema.options = { multi: true }
  return (
    <Unwrapped.MaterialTextControl {...newProps} muiInputProps={{ rows: 5 }} />
  )
}

export default withJsonFormsControlProps(LongText)