Create a nondefault layout

This topic explains how to create a nondefault layout. The concept of a nondefault layout is the same as a mobile layout, which overrides a set of positions.

To understand the basic concepts of a layout and its components in Web AppBuilder, as well as the differences between the default and nondefault layouts, see Layouts.

You'll move the following:

• The HeaderController to the bottom of the screen
• The on-screen widgets and widget placeholders to the bottom left of the screen

New positions for the widgets will be defined in an array. The mobile layout uses the default.

1. Go to the layouts folder in the theme where the new layout will be created, such as ~/client/stemapp/themes/<YourTheme>/layouts .
2. Create a folder and name it myLayout.
3. Copy the entire code from the config.json file in the default layout, and paste it into the config.json file in the myLayout folder.
4. Remove the map and mobileLayout sections.
5. Remove the widgets sections and the groups from the widgetPool.
6. Remove any property that is not required for the position. The new JSON structure should look like the following:

   {
     "widgetOnScreen": {
       "widgets": [{
         "position": {
           "left": 20,
           "top": 20,
           "right": 20,
           "height": 40
         }
       }, {
         "position": {
           "top": 70,
           "left": 20
         }
       }, {
         "position": {
           "left": 20,
           "top": 140
         }
       }, {
         "position": {
           "left": 20,
           "top": 190
         }
       }, {
         "position": {
           "left": 20,
           "top": 240
         }
       }, {
         "position": {
           "left": 20,
           "top": 290
         }
       }]
     },
     "widgetPool": {
       "panel": {
         "position": {
           "top": 70,
           "right": 20,
           "bottom": 10,
           "width": 300
         }
       },
       "groups": [{
         "panel": {
           "position": {
             "top": 70,
             "right": 20,
             "width": 200,
             "height": 200
           }
         }
       }]
     }
   }

   The first object in the widgets array is for the HeaderController widget, the second is for the ZoomSlider widget, the third is for the MyLocation widget, and so on.

   When you open Web AppBuilder and select this layout, the app should have the same layout as the default.

7. Move the HeaderController widget to the bottom. Find the first object in the widgetOnScreen section and move its top property to the bottom. This makes the HeaderController 20 pixels away from the bottom instead of the top of the screen.

   {
     "widgetOnScreen": {
       "widgets": [{
         "position": {
           "left": 20,
           "bottom": 20,
           "right": 20,
           "height": 40
         }
       }, 
       {...}, 
       {...}, 
       {...}, 
       {...}, 
       {...}]
     },
     "widgetPool": {
       "panel": {...}
       },
       "groups": [{
         "panel": {...}
       }]
     }
   }

8. Reposition the panels to align properly with the HeaderController widget. The panels from the default layout overlap the HeaderController widget after it's moved to the bottom. To resolve this, move the FoldablePanel up by 60 pixels. Locate the first panel section in the widgetPool, and change its top property to 10 and the bottom property to 70.

   {
     "widgetOnScreen": {
       "widgets": [...]
     },
     "widgetPool": {
      "panel": {
         "position": {
           "top": 10,
           "right": 20,
           "bottom": 70,
           "width": 300
         }
       },
       "groups": [{
         "panel": {...}
       }]
     }
   }

9. To make the SimpleBorderPanel align at the bottom, locate the panel section in the groups, and replace the top property with the bottom property.

   {
     "widgetOnScreen": {
       "widgets": [...]
     },
     "widgetPool": {
      "panel": {
         "position": {
           "top": 10,
           "right": 20,
           "bottom": 70,
           "width": 300
         }
       },
      "groups": [{
         "panel": {
           "position": {
             "bottom": 70,
             "right": 20,
             "width": 200,
             "height": 200
           }
         }
       }]
     }
   }

10. Move the widgets and widget placeholders to the bottom left of the screen.

    {
      "widgetOnScreen": {
       "widgets": [{
          "position": {
            "left": 20,
            "bottom": 20,
            "right": 20,
            "height": 40
          }
        }, {
          "position": {
            "bottom": 70,
            "left": 20
          }
        }, {
          "position": {
            "left": 20,
            "bottom": 140
          }
        }, {
          "position": {
            "left": 20,
            "bottom": 290
          }
        }, {
          "position": {
            "left": 20,
            "bottom": 240
          }
        }, {
          "position": {
            "left": 20,
            "bottom": 190
          }
        }]
      },
      "widgetPool": {...}
    }

    You now have a nondefault layout.