Is it possible to change the appearance of the Editor widget popup?

2674
3
Jump to solution
02-12-2015 01:51 PM
AshleyDePottey
New Contributor II

My users would like to use the Editor widget to edit text fields with long values.  Is it possible to make the editing popup text boxes larger (and/or replace them with textareas so they are multiline)?

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

This sample uses a text area for one of the fields in the Editor. The Editor widget uses the styling of the Attribute Inspector‌.

View solution in original post

0 Kudos
3 Replies
BenGrod
Regular Contributor

Ashley, I've never edited the out of the box widgets but I think it is possible. You also can create custom widgets from scratch, either way you would have to start by installing Web AppBuilder for Developers‌, there are many blogs and posting that can help with the installation if you have questions. Also consider joining and posting questions to the Web AppBuilder Custom Widgets group. Hope this helps and good luck.

0 Kudos
KenBuja
MVP Honored Contributor

This sample uses a text area for one of the fields in the Editor. The Editor widget uses the styling of the Attribute Inspector‌.

0 Kudos
AshleyDePottey
New Contributor II

Thanks Ken!  For anyone else trying to do the same thing, I added ""stringFieldOption": AttributeInspector.STRING_FIELD_OPTION_TEXTAREA" to the fieldInfo object for each field I wanted to display as a textbox.

var layerInfos = [{
    "featureLayer": editlayer,
    "fieldInfos": [
        {
            "fieldName": "Name",
            "label": "Title",
            "isEditable": true,
            "stringFieldOption": AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
        },
        {
            "fieldName": "PopupInfo",
            "label": "Description",
            "isEditable": true,
            "stringFieldOption": AttributeInspector.STRING_FIELD_OPTION_TEXTAREA
        }
    ]
}]


var settings = {
    map: map,
    layerInfos: layerInfos,
    geometryService: new GeometryService(config.geometryserviceurl)
};
var params = {
    settings: settings
};
editorWidget = new Editor(params, editorWidgetDiv);
editorWidget.startup();