Create Page Layout

In order to add charts to your page, you’ll have to set a layout within a page. Think about this like rows and columns where you can determine the size of the columns. There are two ways to get to the page designer. Both of these methods are outlined below with layout instructions following that.

1. Standard: Navigate to the Service Portal page that you are trying to edit and open that record. Near the bottom of the form under Related Links click the Open in Designer link. This will open your page in the Page Designer in a new window.

2. From VividCharts Dashboard View: If you already have a VividCharts dashboard built and a Service Portal page set for the dashboard, you can get to the Page Designer for that page by clicking Edit Layout button (pictured below). This will open your page in the Page Designer in a new window.

   Now that you’re in the Page Designer, you can start adding layouts to your page. There should be a “Container” automatically in your page that has a + icon in the middle of it. If you click this + icon, you will be presented with a list of common row column layouts. These layouts use Bootstrap which means the sum of the columns must always equal 12. For example, you can have 3 columns that are each 4 wide. Or you can have 2 columns that are 6 wide.

For this example, I clicked the 4-4-4 layout which created 3 columns that I can now drag widgets into. You are also able to drag additional row layouts from the left-hand list into your container.