{"id":14223,"date":"2016-04-19T09:10:24","date_gmt":"2016-04-19T01:10:24","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=14223"},"modified":"2019-08-27T10:33:06","modified_gmt":"2019-08-27T02:33:06","slug":"grid-layout-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/grid-layout-4-3-2\/","title":{"rendered":"Grid Layout (4.3.2)"},"content":{"rendered":"\n

This article applies to versions 4.3.2 and earlier of P2 Explorer.\u00a0For help on the latest version of the Grid Layout, see Grid Layout<\/a>.<\/p>\n

Overview<\/h3>\n

The following diagram shows a grid layout with a single column and 2 rows:<\/p>\n

\n

\"gridbuttons\"<\/a><\/i><\/p>\n<\/div>\n\n\n\n\n\n\n
Width<\/strong>:<\/td>\nThe width of the column in pixels. You should only enter a number. Type * to allow the browser to automatically adjust the width of the column.<\/td>\n<\/tr>\n
Column spacing<\/strong>:<\/td>\nThe amount of spacing or padding between each column, in pixels. You should only enter a number. The default is no spacing, which means that the elements may butt up against each other.<\/td>\n<\/tr>\n
Height<\/strong>:<\/td>\nThe height of the row in pixels. You should only enter a number. Type * to allow the browser to automatically adjust the height of the row.<\/td>\n<\/tr>\n
Row spacing<\/strong>:<\/td>\nThe amount of spacing or padding between each row, in pixels. You should only enter a number. The default is no spacing, which means that the elements may butt up against each other.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

Tutorial<\/h3>\n

\"gridstudio\"<\/p>\n

Grid-based layouts are one of the easiest ways to get started in designing a dashboard<\/a>. A grid-based layout provides the basis for a balanced design, and is also easy to visualise.<\/p>\n

In Explorer, you can lay out the elements of your page as if you were putting one element in each cell, just like you would in Excel\u00ae. It's a simple concept, but you can achieve some complex layouts when you add a grid layout inside another grid layout - which is how you effectively \"split\" cells.<\/p>\n

In this topic, we'll show you how to use the grid layout to design a simple dashboard.<\/p>\n

Before we get started, here are some simple examples of grid-based page design:<\/p>\n\n\n\n
\"layout5\"<\/td>\n\"layout1\"<\/td>\n\"layout2\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u00a0<\/div>\n

Now, let's look at the following dashboard. It's a bit more complicated than the above examples, but not by much.<\/p>\n

\n
\"\"<\/a>

Royalties Dashboard<\/i><\/p><\/div>\n<\/div>\n

We're going to break this down into what the grid layout looks like, and then how to construct it. The image below left (Breakdown #1) shows you that this dashboard actually follows the first simple structure shown in the layout examples above.<\/p>\n\n\n\n\n
\"Royalties<\/a><\/td>\n\"Royalties<\/a><\/td>\n<\/tr>\n
Royalties Dashboard - Breakdown #1<\/em><\/td>\nRoyalties Dashboard - Breakdown #2<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Breakdown #2 (above right) shows how the Header and Content sections are then further broken down. The Header cell is then divided into 2 further cells, and the Content cell is divided into 4 further cells. In fact, Breakdown #2 has a grid layout inserted into the header cell, and another grid layout inserted into the content cell!<\/p>\n

Now, let's look at how we're actually going to do this, step-by-step.<\/p>\n

\n

Step by Step: Creating a Grid Layout for a Dashboard<\/h3>\n

Before you start, open a new tab in Explorer and click the \"Create a New Page in Studio Mode\" thumbnail. You should have a blank canvas to start with.<\/p>\n

Step 1. Add a grid layout to the page<\/strong><\/p>\n

\r\n\t\r\n\t

On the left, scroll down until you see the Grid Layout component, and then drag and drop it onto the canvas. Watch the short video above to see how to do this. Note: There are other ways<\/a> you can do this.<\/p>\n

\u00a0<\/p>\n

Step 2. Add rows and columns to create header and content areas<\/strong><\/p>\n

\"gridstep2\"<\/a><\/p>\n