Editor Widget - Text Field Length / Visibility

[ArmstKP]

So far, I have found no way in the editor widget in ArcGIS Online or with ArcGIS Javascript API to make text fields taller to make the text within them all visible.  Here is the issue, I need to scroll over to read the text in the field:

[bbollin]

hi @ArmstKP, there is a multi line text input that will definitely help you here! To learn more about how to configure forms and choose between different input types, check out this blog: https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/smart-forms-arent-just-for-field-map...

Here's an example of the multi line text input in the form/editor widget after configuring:

[ArmstKP]

@bbollin How would you do the same, working with ArcGIS Javascript API and using the editor widget?  I ask because I am not referencing a webmap in the javascript application, so therefore it doesn't have a form to change the field to a multiline....

[EmilyGeo · Accepted solution]

Hi @ArmstKP,

Use formTextAreaInput: set the inputType > type to "text-area"

Example: 

"formInfo": {
"formElements": [

{
"label": "Comments",
"type": "field",
"editable": true,
"editableExpression": "expr/system/true",
"fieldName": "Comments",
"inputType": {
"type": "text-area",
"maxLength": 1000,
"minLength": 0

[ArmstKP]

@EmilyGeo This is what I have and I am not getting it to work:

const editConfigRequests = {
            layer: snowIceRequestsLayer,
            formTemplate: {
              elements: [
                {
                  type: "field",
                  fieldName: "status",
                  label: "Status"
                },
                {
                  type: "field",
                  fieldName: "notes",
                  label: "Notes",
                  inputType: {
                    type: "text-area"
                  }
                },
                {
                  type: "field",
                  fieldName: "assignedto",
                  label: "Assigned to"
                },
                {
                  type: "field",
                  fieldName: "resolution",
                  label: "Resolution",
                  inputType: {
                    type: "text-area"
                  }
                },
                {
                  type: "field",
                  fieldName: "resolutiondt",
                  label: "Resolved on"
                }
              ]
            }
          };

[ArmstKP]

@EmilyGeo  Ok, I changed the code to this and it has worked:

const editConfigRequests = {
            layer: snowIceRequestsLayer,
            formInfo: {
              formElements: [
                {
                  type: "field",
                  fieldName: "status",
                  label: "Status"
                },
                {
                  type: "field",
                  fieldName: "notes",
                  label: "Notes",
                  inputType: {
                    type: "text-area"
                  }
                },
                {
                  type: "field",
                  fieldName: "assignedto",
                  label: "Assigned to"
                },
                {
                  type: "field",
                  fieldName: "resolution",
                  label: "Resolution",
                  inputType: {
                    type: "text-area"
                  }
                },
                {
                  type: "field",
                  fieldName: "resolutiondt",
                  label: "Resolved on"
                }
              ]
            }
          };

[EmilyGeo]

Nice, I'm glad you were able to figure it out 😁

[ArmstKP]

@EmilyGeo What is funny though, after I changed my code to what you had suggested, now all of my fields show up in the editor widget, not just the ones I spell out below:

const editConfigRequests = {
            layer: snowIceRequestsLayer,
            formInfo: {
              formElements: [
                {
                  type: "field",
                  fieldName: "status",
                  label: "Status"
                },
                {
                  type: "field",
                  fieldName: "notes",
                  label: "Notes",
                  inputType: {
                    type: "text-area"
                  }
                },
                {
                  type: "field",
                  fieldName: "assignedto",
                  label: "Assigned to"
                },
                {
                  type: "field",
                  fieldName: "resolution",
                  label: "Resolution",
                  inputType: {
                    type: "text-area"
                  }
                },
                {
                  type: "field",
                  fieldName: "resolutiondt",
                  label: "Resolved on"
                }
              ]
            }
          };