AnsweredAssumed Answered

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

Question asked by Holisticbynature on Oct 7, 2015
Latest reply on Jun 9, 2016 by cameronjohnsen

Like • Show 0 Likes0
Comment • 24

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.

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

mfet_glory Nov 21, 2015 12:30 AM

Correct Answer

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;
}

See the reply in context

No one else had this question

Outcomes

24 Replies

dafiter Oct 8, 2015 6:10 AM
Mark Correct
Correct Answer
David,

For question 1 look here:
Re: Popup Size for Edit widget
3 people found this helpful
Like • Show 1 Like1
Actions
- Holisticbynature @ dafiter on Oct 8, 2015 9:47 AM
  Mark Correct
  Correct Answer
  Thank Rickey, I will give this a shot. I tried to search for previous threads and I am surprised I did not get this one to come up.
  I have tried different edits before, but when I refresh the page nothing seems to change. Do you know what can causes edits to not reveal themselves sometimes. I have tried cleaning out the cache, but similar results.
  Like • Show 0 Likes0
  Actions
  - kfowler1013 @ Holisticbynature on Oct 8, 2015 10:24 AM
    Mark Correct
    Correct Answer
    Don't know if this will help you but I've had similar issues with WAB when doing certain edits to widgets. I've found that if I close out all of the browser windows and close the WAB app (in my case we're using local services so I have to stop and restart the service) and then reload everything it will sometimes solve the problem.
    
    Also, if you try to copy and replace a widget with the same name to either the server or stemap widgets folder it's better to delete the original or cut and paste the original somewhere else. I had an instance this morning where I was trying to replace the coordinate widget with a new one and it wasn't showing in WAB because I didn't delete the original coordinate widget first.
    
    Lastly, some widgets seem to need the updates in both the stemap and server widget folders.
    
    I know I must have at least 5 more work arounds but can't think of them right now. I usually use trial and error to until I find something that works.
    
    Hope this helps...
    3 people found this helpful
    Like • Show 1 Like1
    Actions
  - dafiter @ Holisticbynature on Oct 8, 2015 11:13 AM
    Mark Correct
    Correct Answer
    Are you editing the base widget or your app?
    
    your app:
    arcgis-web-appbuilder-1.2\server\apps\(your app Number)\widgets\Edit
    
    the base widget:
    
    arcgis-web-appbuilder-1.2\client\stemapp\widgets\Edit
    Like • Show 0 Likes0
    Actions
    - Holisticbynature @ dafiter on Oct 8, 2015 11:28 AM
      Mark Correct
      Correct Answer
      Hey Rickey,
      
      I am editing the app on my wwwroot folder, outside of app builder. I am trying to edit the app itself rather than the WAP code itself. After some steps following the advice of those listed above, I tried incognito and clearing my cache to see the change.
      
      I did make a change near line 223 here:
      
      query('.sizer', this.map.infoWindow.domNode).style({ height:"100px"});
      
      The result was that the overall pop up size changed, but the content did not resize with it. I think I need to access the base CSS/or query other aspects of the popup.
      Like • Show 0 Likes0
      Actions
      - dafiter @ Holisticbynature on Oct 8, 2015 11:37 AM
        Mark Correct
        Correct Answer
        David,
        
        Here is a pic of the edit widget with the code:
        
        Here is a pic of the edit widget with out the code:
        
        Here is all the code I used to change the size:
        
        //query(".esriEditor", this.domNode).style('height', height + 'px');         query(".templatePicker", this.domNode).style('height', height - 50 + 'px');         query(".grid", this.domNode).style('height', height - 60 + 'px');         query(".dojoxGridView", this.domNode).style('height', height - 60 + 'px');         query(".dojoxGridScrollbox", this.domNode).style('height', height - 60 + 'px');         query('.sizer', this.map.infoWindow.domNode).style({ width: '400px' });         query(".dojoxGridRowTable", this.domNode).style('width', width - 32 + 'px');
        1 person found this helpful
        Like • Show 0 Likes0
        Actions
        Holisticbynature @ dafiter on Oct 8, 2015 3:48 PM
        Mark Correct
        Correct Answer
        Hey Rickey,
        
        First of thanks for the help and suggestions. Can you give me some understanding on how you determine which properties to query?
        For example, I was able to get what I wanted by changing the sizer width, but the content pane height (and the parent adjusted).
        With no code I get:
        With the following code I get close:
                //query('.dijitTextBox',this.map.infoWindow.domNode).style({width:"60px",height:"60px"});                 query(".templatePicker", this.domNode).style('height', height - 50 + 'px');         query(".grid", this.domNode).style('height', height - 60 + 'px');         query(".dojoxGridView", this.domNode).style('height', height - 60 + 'px');         query('.contentPane', this.map.infoWindow.domNode).style({height:"150px"});         query('.sizer', this.map.infoWindow.domNode).style({ width:"450px"});         query(".dojoxGridScrollbox", this.domNode).style('height', height - 60 + 'px');         query(".dojoxGridRowTable", this.domNode).style('width', width - 32 + 'px');
        What I would want now is to access the gray text box and edit it so that is both wider and taller.
        
        Do you know what property does that specifically?
        
        Guidance on adding buttons would be appreciated too.
        
        Thanks for the help so far.
        Like • Show 0 Likes0
        Actions
        dafiter @ Holisticbynature on Oct 8, 2015 4:15 PM
        Mark Correct
        Correct Answer
        David,
        
        When using chrome (which is my browser of choice) you can use the site below as an example of how to select elements to see what you need to change.
        
        These links are how to change css. But I used this method to select elements and added the name to the code.
        
        Inspect and Tweak Your Pages: the Basics — Web Fundamentals
        
        Also this video is very helpful
        Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools - YouTube
        1 person found this helpful
        Like • Show 0 Likes0
        Actions
        Holisticbynature @ dafiter on Oct 8, 2015 4:12 PM
        Mark Correct
        Correct Answer
        I have been using inspections so far for sure. That is where I got my first crack at the text box that was commented out before. However, I think I will do more reading into the links you sent to get a better idea of what to look for or try (like persisting changes in chrome perhaps). Thanks!
        The video link goes to a "history" location, not an actual video, can you relink it?
        Like • Show 0 Likes0
        Actions
        dafiter @ Holisticbynature on Oct 8, 2015 4:16 PM
        Mark Correct
        Correct Answer
        David,
        If you cannot get it to work I will try again tomorrow.
        
        PS
        I changed the link it should work now.
        Like • Show 1 Like1
        Actions
        mfet_glory @ Holisticbynature on Nov 19, 2015 5:28 AM
        Mark Correct
        Correct Answer
        Add the following to the Edit widget's style.css file:
        
        .dijitTextBox {
            width: 100%;
        }
        1 person found this helpful
        Like • Show 1 Like1
        Actions
        Holisticbynature @ mfet_glory on Nov 19, 2015 7:29 AM
        Mark Correct
        Correct Answer
        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
        Like • Show 0 Likes0
        Actions
        dafiter @ Holisticbynature on Nov 20, 2015 8:45 AM
        Mark Correct
        Correct Answer
        David,
        
        To help the community, please make a response as correct and helpful all the comments that were helpful.
        
        Thank you!
        Like • Show 0 Likes0
        Actions
        Holisticbynature @ dafiter on Nov 20, 2015 9:52 AM
        Mark Correct
        Correct Answer
        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
        Like • Show 0 Likes0
        Actions
        dafiter @ Holisticbynature on Nov 20, 2015 10:01 AM
        Mark Correct
        Correct Answer
        David,
        
        What does your popup look like now?
        
        How can I help answer the question?
        Like • Show 0 Likes0
        Actions
        mfet_glory @ Holisticbynature on Nov 21, 2015 12:30 AM
        Unmark Correct
        Correct Answer
        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; }
        5 people found this helpful
        Like • Show 0 Likes0
        Actions
        Holisticbynature @ mfet_glory on Nov 21, 2015 2:14 PM
        Mark Correct
        Correct Answer
        I will give this a try and come back. I got sidetracked by other projects, but this might be what I am looking for.
        Like • Show 0 Likes0
        Actions
        Holisticbynature @ mfet_glory on Dec 3, 2015 11:49 AM
        Mark Correct
        Correct Answer
        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
        Like • Show 0 Likes0
        Actions
        mfet_glory @ Holisticbynature on Dec 6, 2015 1:11 AM
        Mark Correct
        Correct Answer
        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
        4 people found this helpful
        Like • Show 1 Like1
        Actions
        cameronjohnsen @ mfet_glory on Jun 8, 2016 3:59 PM
        Mark Correct
        Correct Answer
        
        Will this work with WAB 2.0? I am trying to do this to a WAB Application on my root folder to get the text field larger and the text to wrap but it doesn't seem to be working. I need to get the exact results @David Wasserman got with his text field. Any help is greatly appreciated.
        Like • Show 0 Likes0
        Actions
        rscheitlin @ cameronjohnsen on Jun 8, 2016 7:14 PM
        Mark Correct
        Correct Answer
        Cameron,
        
        The web maps attribute configuration take presidence over the setting in the edit widgets config.json. So open the web map in AGOL map viewer and choose to configure popups for your layer and choose the field you want to be multi-line and choose the "Configure Attributes" link and then choose textbox type = Multiple Line. Save your changes and now the edit widget will display that field as a text area in the edit widgets popup. You can then edit the css rule to set the height of all text areas in the edit widgets css rules:
        
        /*textArea*/
        .jimu-widget-edit-infoWindow .esriAttributeInspector .dijitTextBox.dijitTextArea {
        height: 32px;
        }
        2 people found this helpful
        Like • Show 0 Likes0
        Actions
cameronjohnsen Jun 8, 2016 1:41 PM
Mark Correct
Correct Answer
Where did you add this into the CSS file? The change to the config file seems pretty straight forward so I believe I have that correct. I believe my error is where I am changing the CSS file.
Like • Show 0 Likes0
Actions
- Holisticbynature @ cameronjohnsen on Jun 8, 2016 4:02 PM
  Mark Correct
  Correct Answer
  Hey Cameron,
  
  I have not tested since 1.2-1.3. I am not sure if it will work in 2. I hope this help.
  
  David
  1 person found this helpful
  Like • Show 0 Likes0
  Actions
  - cameronjohnsen @ Holisticbynature on Jun 9, 2016 2:43 PM
    Mark Correct
    Correct Answer
    Thank you, I was missing the step of configuring the attribute fields in AGOL map viewer.
    1 person found this helpful
    Like • Show 0 Likes0
    Actions

GeoNet

The Esri Community

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

Outcomes

Related Content

Recommended Content

Incoming Links