How to implement?

TextFieldView can be used for many purposes. Use it to draw a one-liner text field from to input the information. For example, it is used in case of Basic Authorization to input the API key. The possibilities are many but the implementation is similar.

Here is how the TextFieldView is used in PipeDrive component:

"credentials": {
        "fields": {
            "company_domain": {
                "viewClass": "TextFieldView",
                "label": "Company domain",
                "required": true,
                "placeholder":"yourcompany.pipedrive.com",
                "note":"Enter <em>only</em>&nbsp; the domain name here"
            },
            "token": {
                "viewClass": "TextFieldView",
                "label": "API token",
                "required": true,
                "placeholder": "API token goes here",
                "note":"More information is <a href='https://support.pipedrive.com/hc/en-us/articles/207344545'>here</a>."
            }
        }
    },

This produces the following input form:

label and viewClass

label and viewClass required as defined in the Fields Object and are treated as string.

required

required the parameter is boolean type which means can only be true or false. In both examples above true is used which resulted in red asterisks (*) to appear along with the label of the field.

If the value is set to false then the field is not required and the input field can be filled optional.

placeholder

Use placeholder to give short and descriptive text which will appear in the input field. The text can be longer, however, the UI will not extend automatically.

note

Use the note parameter to provide more information about the input field. When present a question mark will appear and the text will be shown in a tooltip when hovered. This parameter replaces the need to use the deprecated TextFieldWithNoteView view class. This parameter is not required.

note can accept a simple text, URL and HTML emphasize. Th text in tooltip will be folded for longer texts.

prefix and suffix

These parameters are not supported in the new UI at the moment.

These parameters are optional and can be omitted, however, they can provide additional clarity and better user experience if the component in the design is intended to be used by many customers.

prefix and suffix are convenient to have in such cases where for example only certain part of the existing say URL needs to be provided, therefore minimising the chance of making an error in input data.