Use layout options to modify your dashboard canvas with the source editor

When you click on the canvas of your dashboard, you can change many of the dashboard layout settings in the visual editor Configuration panel. There are some options, however, that you can only set in the source editor, for example, adding a submit button for inputs.

The layoutsection of the dashboard definition is the section where the positions and sizes of visualizations, in pixels, are listed as they exist on the dashboard. You must also list any inputs in the globalInputs area of this section. For more information on inputs, see Specify inputs in the layout.

In the source editor, the layout section is where you can change the canvas size, background color, and background image settings to modify your dashboards.

In addition to the options field, there is a type field where you can specify whether to use the grid or absolute layout. You should not change this setting for populated dashboards, especially from absolute to grid, because it will likely result in the loss of your visualizations and an error message.

Some of the following options are available through the visual editor, others are only available using the options level of the layout section of the dashboard definition.

When some defaults are not changed in the visual editor, the corresponding source options and properties might not appear in the source editor. For example, if you don't change the default width and height of the dashboard, the width and height options and their settings will not appear in the editor. Similarly, if you don't change the display default, this option and setting will also not appear in the source code. To have them appear, you can either change the defaults or add and edit them manually in the source editor. The following is a layout example of these settings after the defaults have been changed in the visual editor.

"layout": {
        "globalInputs": [],
        "type": "absolute",
        "options": {
            "backgroundColor": "#C093F9",
            "backgroundImage":
                          {     "x": 0,                        
                                "y": 0,                       
                               "src": "splunk-enterprise-kvstore://5f6cc9810b19516995423ad1",                        
                                "sizeType": "contain"            
 }
            "submitButton": true,
            "width": 1198,
            "height": 898,
            "display": "auto-scale"
        },
        "structure": []
    },

Option	Type	Default	Description
backgroundColor	string	lightmode: #FFFFFF darkmode: #FF0000 Splunk Cloud: #171D21	This option is not available if you are using the grid layout. Specify the color of the layout background color using a hex code, such as #FF0000.
display	actual-size or auto-scale	actual-size	This option is not available if you are using the grid layout. Grid layout is always auto-sized. Specify the display behavior. If this property is set to "actual-size", changing the size of your browser will not change the size of your dashboard or visualizations. If this property is set to "auto-scale", your dashboard and visualizations will automatically also change size.
submitButton	boolean	N/A	You can specify the layout option submitButton. When set to true, a user must click a Submit button in order for the an input selection to take effect. If set to false, or if not specified at all, the dashboard will immediately refresh when a user makes a selection.
backgroundImage	object	N/A	This option is not available if you are using the grid layout. A background image must be one of the following types: jpg, jpeg, png, svg, or gif. You can also use a web-based image using the backgroundImage.src option.
backgroundImage.w	number	N/A	This option is not available if you are using the grid layout. Specify the image w (width) in pixels. You should not specify this option if you set the sizeType option. If you do, it will overrule that setting.
backgroundImage.h	number	N/A	This option is not available if you are using the grid layout. Specify the image h (height) in pixels. You should not specify this option if you set the sizeType option. If you do, it will overrule that setting.
backgroundImage.x	number	(0,y)	This option is not available if you are using the grid layout. Specify the position in pixels of the background image on the x-axis. You should not specify this option if you set the sizeType option. If you do, it will overrule that setting.
backgroundImage.y	number	(x,0)	This option is not available if you are using the grid layout. Specify the position in pixels of the background image on the y-axis. You should not specify this option if you set the sizeType option. If you do, it will overrule that setting.
backgroundImage.src	SRC	N/A	This option is not available if you are using the grid layout. Specify the location of a background image using the option src. For example: "src": "https://www.myImageLocation.com/galleryX/image1.png".
backgroundImage.sizeType	auto or contain or cover	contain	This option is not available if you are using the grid layout. auto scales the image while maintaining the image proportion. contain increases the size of the of the image as much as possible without cropping or stretching it. cover increases the size of the image without stretching it. The image may be cropped vertically and horizontally so that no empty space is shown.
width	number	1200	Specify the canvas width in pixels.
height	number	900	Specify the canvas height in pixels.