Configure the layout of glass tables in ITSI

The layout of the glass table editor in IT Service Intelligence (ITSI) comprises the canvas size, the background color or image, and the positioning of visualizations on the canvas. You can modify the layout in the UI and in the layout section of the source editor.

Change the canvas size

The glass table canvas has default dimensions of 1920 x 1080 pixels. This is conceptually different than the current glass table editor, which has an infinite canvas.

1. (Optional) In the Configuration panel, change the Display Mode.
   • Select Auto so the current canvas size applies when using Edit or View mode.
   • Select Actual Size to display the actual size in pixels.
   • Select Fit to Width so the canvas takes up the entire window and applies to both edit mode and view mode. The canvas fits horizontally but might still require vertical scroll.
2. Manually change the dimensions of the canvas, in pixels, using the Canvas Width and Canvas Height fields.
3. Click saveto save your changes.

The following examples are some popular canvas sizes:

• Monitors. 16:9 aspect ratio resolutions such as: 1280 x 720 (HD), 1920 x 1080 (FHD), 2560 x 1440 (4K)
• U.S. letter. 4:3 aspect ratio resolutions such as: 640 x 480, 900 x 600
• Some mobile phones. 18:9 aspect ratio resolutions such as: 2880 x 1440

Change the background color

1. In the Configuration panel, choose a Background Color. Either enter the hex code for a color, such as #ffff00, or choose a color from the palette.

   If you've added a background image to your glass table, only portions of the canvas that are not covered by the image are visible in the designated color.

2. Click savewhen you're finished.

Upload a background image

You can upload a background image to further customize your glass table. Supported image types are PNG, JPG/JPEG, and GIF.

By default, uploaded background images are positioned at (0,0) on your glass table canvas, so the top left corner is at the top left corner of the canvas.

1. In the Background Image section of the Configuration panel, drop your image file or click browse... to select it. You can also specify a URL for web-based images. If you use web-based images, the image is updated each time you refresh your glass table.
2. Configure the sizing options to fit your individual needs:
   • Select Contain (default) to fit the entire image to the canvas width. The canvas height might not be completely covered.
   • Select Cover to cover the entire canvas. The entire background image might not be displayed if the height to width ratio is different than that of the canvas.
   • Select Custom to provide your own sizing and position settings.
   • Select Original Size to display the image with its original dimensions.
3. Click View to see the image as it will appear in the glass table.
4. Click savewhen you're finished.

Show or hide the title and description

By default, the glass table title and description are displayed on the canvas. By using Toggle Show Title & Description you can hide the title and description on the canvas. You can configure the same behavior in the source editor by setting showTitleAndDescription to true or false.

Configure the layout in the source editor

The layout section of the glass table source definition determines the layout of your glass table. The types of layout supported are described below:

absolute

The absolute layout type positions visualizations on absolute coordinates that start from the top left corner. This means the center of the grid, (0,0) corresponds with the upper left corner of your canvas. This is the default starting position for the top left corner of any background image you may use. You must specify both height and width, in pixels, when using the absolute layout.

• By default, absolute layout is not responsive. Resizing the container doesn't resize the glass table. However, you can specify auto-scale for the display option to make the layout responsive.

The following example uses the absolute layout with a specified width and height using the auto-scale display option.

"layout": {
    "type": "absolute",
    "options": {
        "width": 900,
        "height": 600,
        "display": "auto-scale",
        "showTitleAndDescription": true
    },
    "structure": [
        {
            "position": {
                "x": 20,
                "y": 20,
                "w": 400,
                "h": 60
            },
            "item": "viz3"
        }
    ],
  "globalInputs": [
       "input1" 
     ] 
}

grid

A grid layout enables users to create non-overlapping, perfectly-aligned visualizations in a quick and easy way.

• In grid layout, the height and the width of the Canvas change dynamically depending on the contents in the Layout.
• If there are one or more Visualizations in the Layout, the Full Width of the Canvas will always be filled up, with no empty space.
• In grid layout, edges placed between Visualizations have two main functions:
  • To enable you to resize the bordering Items by clicking and dragging the edges
  • To enable you to drag and drop an Item on top of an edge

The following example uses the grid layout:

"layout": {
        "type": "grid",
        "options": {
            "width": 1920,
            "height": 1080,
            "backgroundColor": "#FFFFFF",
            "showTitleAndDescription": true
        },
        "globalInputs": [
            "input1"
        ],
        "structure": [
            {
                "item": "viz_7Ayn8Yq0",
                "type": "block",
                "position": {
                    "x": 0,
                    "y": 0,
                    "w": 250,
                    "h": 250
                }
            }
        ]
    }

To compare absolute and the grid layouts, see Compare absolute and grid layouts in Splunk Dashboard Studio.

Optionally, include the submitButton option to add a Submit button that saves your settings for the Global Time Range and Global Refresh Rate when clicked. If you don't include the submitButton option or set it to false, all changes take effect immediately.

The following example shows the submitButton option enabled:

"layout": {
        "type": "grid",
        "options": {
            "width": 1920,
            "height": 1080,
            "backgroundColor": "#FFFFFF",
            "showTitleAndDescription": true,
            "submitButton": true
        },
        "globalInputs": [
            "input_global_trp",
            "input_global_refresh_rate"
        ],
        "structure": [
            {
                "item": "viz_7Ayn8Yq0",
                "type": "block",
                "position": {
                    "x": 0,
                    "y": 0,
                    "w": 250,
                    "h": 250
                }
            }
        ]
    }