Editing the Pop Ups Text Boxes for Comments in Web App Builder

8414
24
Jump to solution
10-07-2015 04:24 PM
DavidWasserman
Occasional Contributor III

Hi All,

I have been slowly trying to pick up the ArcGIS API and Javascript, and I want to make what seems like should be an easy CSS edit to the infoWindow in web app builder. I was curious if someone could give me an understanding of where within the edit widget (or the layer list widget?) the relevant JS/CSS files might be.

My goal is to make the pop up for creating features with the edit widget:

1. Larger in terms of size for the textArea.

2. Create a submit button rather than hitting the X. to close the widget.

Attribute inspector

I have been experimenting a bit with this, but I think part of the reason I can't see changes might just be because of cache or other issues. I would appreciate any guidance if anyone has any about where to look.

David

David Wasserman, AICP
0 Kudos
24 Replies
RickeyFight
MVP Regular Contributor

David,

If you cannot get it to work I will try again tomorrow.

PS

I changed the link it should work now.

MajdiTurkman1
New Contributor III

Add the following to the Edit widget's style.css file:

.dijitTextBox {

    width: 100%;

}

DavidWasserman
Occasional Contributor III

Hey Majdi,

I actually have not gotten back to this post in a while (had other projects come up). I actually did manage to do this or something like this to resize the box but encountered the problem of it not wrapping. Does this particular change to the CSS all make it wrap inside the text box of the pop up?

David

David Wasserman, AICP
0 Kudos
RickeyFight
MVP Regular Contributor

David,

To help the community, please make a response as correct and helpful all the comments that were helpful.

Thank you!

0 Kudos
DavidWasserman
Occasional Contributor III

Hi Rickey,

I have been marking responses as helpful, including some of your comments. 😃 I usually reserve the correct answer to when the issue is fully resolved. I will mark some of the new ones though, so thanks for the reminder.

David

David Wasserman, AICP
0 Kudos
RickeyFight
MVP Regular Contributor

David,

What does your popup look like now?

How can I help answer the question?

0 Kudos
MajdiTurkman1
New Contributor III

For text wrapping you need to change the editor's TextBox to TextArea. To do that, add "stringFieldOption" property to your field configurations in "[App Folder Number]\configs\Edit\config.json" file:

"fieldInfos": [
          {
            "fieldName": "Field_Name",
            "label": "Field_Label",
            "isEditable": true,
            "stringFieldOption": "textarea"
          },

Then add the following to Edit widget's style.css file:

.dijitTextBox {
    width: 100%;
}


.claro .dijitTextArea {
    height: 60px;
}
DavidWasserman
Occasional Contributor III

I will give this a try and come back. I got sidetracked by other projects, but this might be what I am looking for.

David Wasserman, AICP
0 Kudos
DavidWasserman
Occasional Contributor III

Hey Majdi,

Thanks this is what I was looking for. I felt like it was a CSS option and config I just did not see. Do you know where this element of the config file is documented?

My final solution was to edit the field infos field as you suggested, but edited the CSS option to look like this:

.dijitTextBox {

    width: 100%;

}

.claro .dijitTextArea {

    height: 90px;

    width: 200px;

}

The final box was this:

Thanks again everyone! I still need to add a button for submission next to delete (instead of depending on the close X to save it). If anyone has any thoughts on this I can open it as a new question down the line.

David

David Wasserman, AICP
0 Kudos
MajdiTurkman1
New Contributor III

Hello David,

This property is not documented in the JSON reference of the Edit widget in Web AppBuilder's help. I remember that I saw it used in some sample of the ArcGIS API for JavaScript. Have a look on this link for more:

AttributeInspector | API Reference | ArcGIS API for JavaScript