Web AppBuilder - Add text to widget buttons

Blog Post created by LeonGIS on Jul 2, 2015

I thought I would try sharing some my experiences working with and developing GIS tools and applications.   Perhaps if I'm finding a need to develop solution, am struggling with something or have come up with a work around, then someone else is in the same boat.  Hopefully someone will find the information each post useful.  Better yet, maybe someone has come up with an improved solution.  Or maybe each post will only serve as a reminder of how I did something.


I'm in the midst of replacing my GIS web apps created in Flex to ones based on Esri's Web AppBuilder.  There is a lot great out of the box functionality that can be customized without any coding.  If you do need to do some additional customization, you can download the source code from Web AppBuilder and go from there.    I configured a simple app in Web AppBuilder using the "out of the box" Foldable Theme and exported the source code.  And that's the starting off point for the rest of the post.....


I like to provide some additional prompts to the user when they are trying to navigate the app.  It is difficult to come up with an entire set of icons that intuitively describe the functionality of each and every button.  A simple one word description along with the icon can be a tremendous help.  Instead of presenting the users with a row icon only buttons running along the top of the application like this.....


I like to give the user a row of buttons with both icons and text like this...



These buttons are created as part of the Header Controller widget under the Foldable Theme.  If you are browsing through the code structure, the source file that needs to be changed can be found in .\themes\FoldableTheme\widgets\HeaderController\Widget.js.  The function _createIconNode generates each of the buttons in the header control.  I simply added an additional html element to each button that contains the text from label attribute for each widget as its defined in the config.json file. (See code below.  Modifications in red)    I also hard coded the width of each button to 70px, to get the word "Basemaps" to fit. This is a bit of a hack job solution, but is working for the time being.  One possible solution might be to define a width in the configuration file, but I really haven't explored that option.   Also, I felt the buttons looked a better just a little bit closer to the top, so I made a small adjustment there; shifting it up 3 pixels.



_createIconNode: function(iconConfig) {

        var node, iconUrl;

        if (iconConfig.label === 'more') {

          iconUrl = this.folderUrl + 'images/more_icon.png';

        } else {

          iconUrl = iconConfig.icon;



        node = html.create('div', {

          'class': 'icon-node jimu-float-trailing',

          title: iconConfig.label,

          settingId: iconConfig.id,

          style: {

         // Modified by lCS: width to 70px....5/20/2015

            width: 70 + 'px',

          //width: this.height + 'px',

            height: this.height + 'px'


        }, this.containerNode);


        html.create('img', {

          src: iconUrl,

          style: {

         // Added by lCS: -3 px....5/20/2015

            marginTop: (((this.height - 24) / 2)-3) + 'px'

           // marginTop: ((this.height - 24) / 2) + 'px'


        }, node);


       // Added by LCS for icon labels....5/20/2015

       html.create('div', {

       'class': 'icon-text',

       innerHTML: iconConfig.label

      }, node);


       if (iconConfig.label === 'more') {


     .......... Code in this part unchanged.......


        return node;