{"id":31334,"date":"2018-01-16T13:05:58","date_gmt":"2018-01-16T05:05:58","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=31334"},"modified":"2024-10-23T14:21:03","modified_gmt":"2024-10-23T06:21:03","slug":"table-layout","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/table-layout\/","title":{"rendered":"Table Layout"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.5.4 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">The Table Layout provides an easy way of creating interactive \"templated pages\", allowing you to model the whole company on a single page.<\/p>\n<p class=\"intro-text\">It arranges data and components in a tabular format. You specify the type of data and component you want in each column, and the table is automatically created.\u00a0\u00a0The table layout allows you to specify a main source of data for the table, and also use data from other sources as required.<\/p>\n<p class=\"intro-text\">You would use a table layout when:<\/p>\n<ul class=\"intro-text\">\n<li>You have already set up some datasets and you want to make them interactive.<\/li>\n<li>You have a list of items to display from a hierarchy, and want to display an item's children in the table \u2014 useful for time series data within an asset model.<\/li>\n<\/ul>\n<table style=\"width: 700px; border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"width: 40%; padding-left: 10px; border-right: 1px solid #cccccc;\"><em>Examples of components you can add to a table layout:<\/em><\/td>\n<td style=\"width: 60%; padding-left: 10px;\"><em>Example of a table layout that includes a status indicator and sparkline:<\/em><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 35%; padding-left: 10px; border-right: 1px solid #cccccc;\">\n<ul>\n<li><a title=\"Chart Tutorial\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">Chart<\/a><\/li>\n<li><a title=\"Status Indicator Tutorial\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-indicator\/\">Status Indicator<\/a><\/li>\n<li><a title=\"Image Tutorial\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/\">Image<\/a><\/li>\n<li><a title=\"Target Variance Bar Tutorial\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/target-variance-bar\/\">Target Variance Bar<\/a><\/li>\n<li><a title=\"Bullet Graph\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/bullet-graph\/\">Bullet Graph<\/a><\/li>\n<li><a title=\"Data Label Tutorial\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a><\/li>\n<li><a title=\"Text Label Tutorial\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a><\/li>\n<li><a title=\"Hyperlink Tutorial\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hyperlink\/\">Hyperlink<\/a><\/li>\n<\/ul>\n<\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-example.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33248 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-example-e1510807447601.png\" alt=\"\" width=\"396\" height=\"155\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-example-e1510807447601.png 396w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-example-e1510807447601-150x59.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-example-e1510807447601-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-example-e1510807447601-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-example-e1510807447601-48x19.png 48w\" sizes=\"auto, (max-width: 396px) 100vw, 396px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Below is an example of a configured table layout, in design mode:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-overview1.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33253 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-overview1.png\" alt=\"\" width=\"726\" height=\"580\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-overview1.png 726w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-overview1-150x120.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-overview1-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-overview1-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-overview1-48x38.png 48w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"130\"><strong>Data<\/strong>:<\/td>\n<td>The Table Layout's data determines the rows and the contextual data. When you assign this data, the first five columns (or fewer, if the dataset has fewer columns) are added automatically. See <a href=\"#The_Table_Layouts_Data\">The Table Layout's Data<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Highlight<\/strong>:<\/td>\n<td>Allows you to show a different background colour on alternating rows or columns, or for selected columns. Note that the Style Administrator must have specified an Alternate Background Colour for this work. See\u00a0<a href=\"#Highlight_Rows_or_Columns\">Highlight Rows or Columns<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Headerless<\/strong>:<\/td>\n<td>Select this option to hide the header row. See <a href=\"#Hide_Header_Row\">Hide Header Row<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Row Variable<\/strong>:<\/td>\n<td>When a user clicks on a row, the data from this column is published to a variable. This is usually used in conjunction with the <em>Selected<\/em> variable.<\/td>\n<\/tr>\n<tr>\n<td><strong>Selected<\/strong>:<\/td>\n<td>The variable that is published when the user clicks on a row. This is usually used in conjunction with the <em>Row Variable<\/em> column (see <a href=\"#Tutorial_5_Row_Variables\">Tutorial 5<\/a>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Columns<\/strong>:<\/td>\n<td>The columns you want to display in the layout. You can update the header and width for these. See <a href=\"#Configure_Columns\">Configure Columns<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Style<\/strong>:<\/td>\n<td>The style to apply to the Table Layout.\u00a0If you are a Style Administrator,\u00a0you can\u00a0add a new Table Layout style. See <a href=\"#Styling\">Styling<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"note\">Note: You can use a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/paging-control\/\">Paging Control<\/a> with a Table Layout, if you use a dataset that has paging enabled.<\/p>\n<p class=\"left-bar\">Related:\u00a0Adding a new\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-layouts\/\">Table Layout style<\/a>\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Basics of the Table Layout<\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">The easiest way to get started with a table layout is to create a table which is automatically populated with data. The next few steps will show you how to create a simple table that looks like this:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33185\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8.png\" alt=\"\" width=\"319\" height=\"164\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8-48x25.png 48w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14281\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png\" alt=\"New Page button on ribbon\" width=\"438\" height=\"109\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png 438w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-150x37.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-48x12.png 48w\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" \/><\/p>\n<p class=\"intro-text\">Before you start, click the\u00a0<strong>New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n<ul class=\"intro-text\">\n<li>For this exercise, keep the 4 grid cells.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related:\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Add the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-1.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33165 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-1.png\" alt=\"\" width=\"1170\" height=\"604\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-1.png 1170w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-1-768x396.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-1-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-1-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-1-48x25.png 48w\" sizes=\"auto, (max-width: 1170px) 100vw, 1170px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the Table Layout component\u00a0onto a grid cell.\u00a0The Table Layout is in the Layout\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1853 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/layouts.png\" alt=\"\" width=\"20\" height=\"16\" \/>\u00a0group.<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add Data to the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-qs.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33256\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-qs.png\" alt=\"\" width=\"359\" height=\"530\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-qs.png 359w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-qs-102x150.png 102w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-qs-16x24.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-qs-24x36.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-qs-33x48.png 33w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/a><\/p>\n<p class=\"intro-text\">This is the crucial step that will establish the basis of your table. After you select the data and configure any parameters or options, it is available to be used anywhere in the table. For this example, configure the Table Layout data as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Dataset Query<\/strong><\/td>\n<td>WellProductionDataSumByYear<\/td>\n<td><em>This contains the columns and data that the table layout will use<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>EndDate<\/strong><\/td>\n<td>Last week<\/td>\n<td><em>This sets the end of the reporting period<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>EntitiesList<\/strong><\/td>\n<td>Beardy, Hunter, Maxwell, Queen<\/td>\n<td><em>These are the entities being reported on<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>StartDate<\/strong><\/td>\n<td>Today<\/td>\n<td><em>This sets the beginning of the reporting period<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p id=\"dataset_preview\" class=\"intro-text\">Click the <strong>Preview<\/strong> button - this will show you all the columns available.<\/p>\n<p class=\"note\">Remember this table - this forms the basis of your contextual data. Take particular note of the column names - as you progress to more advanced use of the table layout, these will become available in other components via the <em>table layout context<\/em>.\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33260 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2.png\" alt=\"\" width=\"1012\" height=\"224\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2.png 1012w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2-768x170.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2-150x33.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2-48x11.png 48w\" sizes=\"auto, (max-width: 1012px) 100vw, 1012px\" \/><\/a><\/p>\n<p class=\"note\">Take note also of the rows - the rows in this preview are exactly the rows you will initially see in your table layout. The rows are determined by the data you specify here - in this case, the entities you have specified. You can change the rows by making your table interactive.<\/p>\n<p class=\"intro-text\">Notice that we have hard-coded the dataset parameters here. This is not usually good practice as it doesn't allow you much interactivity on your pages, so let's quickly go and change these to variables, as per the following screenshot:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-3.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33166\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-3.png\" alt=\"\" width=\"339\" height=\"423\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-3.png 339w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-3-120x150.png 120w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-3-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-3-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-3-38x48.png 38w\" sizes=\"auto, (max-width: 339px) 100vw, 339px\" \/><\/a><\/p>\n<p class=\"intro-text\">Note also that because you have set all the dataset parameters as variables, you now need to check that your default variables are suitable.<\/p>\n<p class=\"intro-text\"><strong>Step 4. Default Values<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-4.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33177\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-4.png\" alt=\"\" width=\"1162\" height=\"757\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-4.png 1162w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-4-768x500.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-4-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-4-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-4-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-4-48x31.png 48w\" sizes=\"auto, (max-width: 1162px) 100vw, 1162px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click <strong>Defaults<\/strong> on the Studio tab of the Explorer Ribbon. Let's say you want the reporting period to be for the last week, so update the following default values:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Variable<\/strong><\/td>\n<td><strong>Type<\/strong><\/td>\n<td><strong>Value<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">startTime<\/td>\n<td>Text<\/td>\n<td>Last week<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">endTime<\/td>\n<td>Text<\/td>\n<td>Today<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Click the <strong>Add<\/strong> button and add the following variable, to specify the entities you are interested in. Later, we'll see how you can make this interactive by using an <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector<\/a> component to drive your selected entities.<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Variable<\/strong><\/td>\n<td><strong>Type<\/strong><\/td>\n<td><strong>Value<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">selectedEntities<\/td>\n<td>EntityList<\/td>\n<td>Anstey, Archer, Big Red, Burt, Derby, Maxwell, Tucki<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 5. Add columns to the table<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-51.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33182 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-51.png\" alt=\"\" width=\"1187\" height=\"572\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-51.png 1187w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-51-768x370.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-51-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-51-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-51-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-51-48x23.png 48w\" sizes=\"auto, (max-width: 1187px) 100vw, 1187px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, use the <em>Prefill<\/em> function to add all the columns to the table, and then in the next step you can remove the ones you don't want. This is the easiest way to get your table data into the layout.<\/p>\n<ul class=\"intro-text\">\n<li>In the ribbon, click the <strong>Component<\/strong> option to return to the Table Layout editor.<\/li>\n<li>Click the <strong>Prefill<\/strong> button.<\/li>\n<\/ul>\n<p class=\"note\">Each column in the table layout contains a <em>component<\/em>. When you prefill the columns, the table layout is actually adding a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> to each column, and the layout automatically configures these text labels with data for you. As you progress to more advanced use, you can add new columns and place different components in them, such as a Status Indicator. These can still be configured to use the table layout's data, or even other related data.<\/p>\n<p class=\"intro-text\"><strong>Step 6. Remove unwanted columns<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-6.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33183\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-6.png\" alt=\"\" width=\"1027\" height=\"725\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-6.png 1027w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-6-768x542.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-6-150x106.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-6-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-6-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-6-48x34.png 48w\" sizes=\"auto, (max-width: 1027px) 100vw, 1027px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, you want to remove all the columns except for <em>Entity<\/em> and <em>OilActualSum<\/em>.<\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Remove<\/strong> button next to each column you want to remove.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 7. Style the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-7.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33184\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-7.png\" alt=\"\" width=\"657\" height=\"521\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-7.png 657w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-7-150x119.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-7-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-7-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-7-48x38.png 48w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, you'll make some cosmetic adjustments to the Table Layout.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Highlight<\/strong>: Select <em>Alternate Rows<\/em><\/li>\n<li><strong>Style<\/strong>: Choose <em>Table Layout Style 1<\/em><\/li>\n<\/ul>\n<p class=\"note\">Note: These styles are included in the sample data; styles may vary at your site. For example, your styles may contain borders around each row to present a classic grid style. If you are a Style Administrator, you can add a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-layouts\/\">Table Layout style<\/a>.<\/p>\n<p class=\"intro-text\">Now let's rename one of the column headers.<\/p>\n<ul>\n<li class=\"intro-text\">Find the <strong>OilActualSum<\/strong> column, and type over the header name with '<em>Oil Prod<\/em>'.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 8. All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33185\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8.png\" alt=\"\" width=\"319\" height=\"164\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut1-8-48x25.png 48w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a Table Layout that shows you the oil production for specified entities.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/>\u00a0button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" alt=\"save\" width=\"48\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" \/>\u00a0Remember to\u00a0<a title=\"Saving Your Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save your page<\/a>!<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorials - Interactive Datasets<\/h2>\n<p class=\"intro-text\">The following tutorials demonstrate how to enhance a table layout by making it interactive and using different components.\u00a0<\/p>\n<p class=\"intro-text\">At the end of these tutorials, your page should look something like this:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tuts1.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33325\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tuts1.png\" alt=\"\" width=\"906\" height=\"417\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tuts1.png 906w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tuts1-768x353.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tuts1-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tuts1-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tuts1-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tuts1-48x22.png 48w\" sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/a><\/p>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the <em>Sample Data <\/em>table\u00a0and datasets that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n<h3>Tutorial 1: Interactive Entity Selection<\/h3>\n<p class=\"intro-text\">In this tutorial, you'll add an Entity Selector to the page, to enable users to specify the entities in the table. This tutorial carries on from <a href=\"#Basics_of_the_Table_Layout\">Basics of the Table Layout<\/a>.<\/p>\n<p class=\"left-bar-blue\"><strong>Refresher<\/strong>: Remember that we have already added a variable called <em>selectedEntities<\/em> to our page defaults. We are now going to add an entity selector that will let the user specify the selected entities.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add an Entity Selector<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33291\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector.png\" alt=\"\" width=\"1471\" height=\"460\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector.png 1471w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-768x240.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-150x47.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-1280x400.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-48x15.png 48w\" sizes=\"auto, (max-width: 1471px) 100vw, 1471px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop an Entity Selector onto a grid cell on the same page as the table layout. The Entity Selector is in the Hierarchy <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1850 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchy.png\" alt=\"\" width=\"20\" height=\"17\" \/>\u00a0group.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Configure the Entity Selector<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-config1.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33293 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-config1.png\" alt=\"\" width=\"1259\" height=\"454\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-config1.png 1259w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-config1-768x277.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-config1-150x54.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-config1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-config1-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-config1-48x17.png 48w\" sizes=\"auto, (max-width: 1259px) 100vw, 1259px\" \/><\/a><\/p>\n<p class=\"intro-text\">Notice how the <em>Anstey<\/em> and <em>Archer<\/em> entities are already selected. This is because they have been added as page defaults for the <em>selectedEntities<\/em> variable, and the Entity Selector makes use of this variable by default.<\/p>\n<p class=\"intro-text\">Stay in Basic Mode and configure the entity selector to only show entities that are oil wells. There are 2 settings to configure:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Hierarchy Name<\/strong>: The drop-down list recognises the hierarchies set up in IFS OI Server. Choose the hierarchy from the drop-down list, in this case <em>P2 Corporate<\/em>.<\/li>\n<li><strong>Template Filter<\/strong>: Oil wells in the hierarchy use the <em>Oil Producing Well<\/em> template, so type this in to the text box.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 3. View the Page<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-display.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33298\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-display.png\" alt=\"\" width=\"756\" height=\"472\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-display.png 756w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-display-150x94.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-display-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-display-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-entity-selector-display-48x30.png 48w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click the <strong>Finish and Open<\/strong>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2978 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" alt=\"\" width=\"14\" height=\"16\" \/> button on the Studio toolbar to view the page.<\/p>\n<ul class=\"intro-text\">\n<li>Click different entities in the entity selector and note how the rows in the table layout are updated.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Tutorial 2: New Component<\/h3>\n<p class=\"intro-text\">One of the biggest advantages of the table layout is the ability to show visualisations in a column, such as a Status Indicator or Bullet Graph. In this tutorial, you'll add a new column that contains a Bullet Graph. This tutorial carries on from <a href=\"#Basics_of_the_Table_Layout\">Basics of the Table Layout<\/a>.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Select the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33188\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png\" alt=\"\" width=\"433\" height=\"176\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png 433w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-48x20.png 48w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Switch back to design mode in Studio.<\/li>\n<\/ul>\n<p class=\"note\">If you click on the cell containing the table layout, you'll notice that the component editor doesn't show the table layout options - instead it shows options for a text label. This is because the table layout columns actually contain <em>components<\/em> which display the layout's data. Prefilled columns are always added as text labels, which is why clicking on either of the table layout columns shows you the text label editor. To select the table layout itself, right-click and choose it from the shortcut menu.<\/p>\n<ul class=\"intro-text\">\n<li>Right-click on the cell containing the table layout, and choose <strong>Table Layout<\/strong> from the menu.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 2. Add a new column to the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-2.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33189\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-2.png\" alt=\"\" width=\"658\" height=\"480\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-2.png 658w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-2-150x109.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-2-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-2-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-2-48x35.png 48w\" sizes=\"auto, (max-width: 658px) 100vw, 658px\" \/><\/a><\/p>\n<p class=\"intro-text\">In the Table Layout editor:<\/p>\n<ul class=\"intro-text\">\n<li>Click <strong>Add<\/strong> to add a new column.<\/li>\n<li>For the new column, type <em>Oil Targets<\/em> as the column <strong>Header<\/strong>.<\/li>\n<\/ul>\n<p class=\"intro-text\">You will see the table preview update with the new column name.<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add a Bullet Graph<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-3.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33190\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-3.png\" alt=\"\" width=\"1176\" height=\"539\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-3.png 1176w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-3-768x352.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-3-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-3-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-3-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-3-48x22.png 48w\" sizes=\"auto, (max-width: 1176px) 100vw, 1176px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop a Bullet Graph onto the Oil Targets column in the Table Layout.\u00a0The Bullet Graph\u00a0is in the Chart\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1837 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/chartsicon_sm.png\" alt=\"chartsicon_sm\" width=\"22\" height=\"17\" \/>\u00a0group.<\/p>\n<p class=\"left-bar\">Related:\u00a0 <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/bullet-graph\/\">Bullet Graph tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 4. Configure the Bullet Graph<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33191\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4.png\" alt=\"\" width=\"668\" height=\"388\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4.png 668w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4-48x28.png 48w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, you will configure the Bullet Graph to compare the actual production with planned production for the entity. Both of these values are available from the Table Layout's data.<\/p>\n<p class=\"note\"><strong>Note:<\/strong> Because the Bullet Graph is in a Table Layout column, the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Value_Data\">Data Selector<\/a>\u00a0shows a button for the <em>Table Layout Context<\/em>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20724 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Table-Layout-Data-icon.png\" alt=\"\" width=\"15\" height=\"13\" \/>\u00a0for the <em>Value<\/em> property. This indicates that you can use the same data that you added for the Table Layout, back in <a href=\"#Basics_of_the_Table_Layout\">Basics of the Table Layout<\/a>. Remember the <a href=\"#dataset_preview\">dataset preview<\/a>? These are the same columns that you will see every time you use the <em>table layout context<\/em>.<\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Table Layout Context\u00a0<\/strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20724 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Table-Layout-Data-icon.png\" alt=\"\" width=\"15\" height=\"13\" \/> icon, and then select the relevant\u00a0column from the drop-down list, as shown below:<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">\u00a0<\/td>\n<td><b>Actual<\/b><\/td>\n<td><strong>Target<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Value<\/strong><\/td>\n<td>\n<p><em>OilActualSum<\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4a.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33192\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4a.png\" alt=\"\" width=\"347\" height=\"443\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4a.png 347w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4a-117x150.png 117w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4a-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4a-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4a-38x48.png 38w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/a><\/p>\n<\/td>\n<td>\n<p><em>OilPlannedSum<\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4b.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33193\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4b.png\" alt=\"\" width=\"344\" height=\"331\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4b.png 344w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4b-150x144.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4b-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4b-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-4b-48x46.png 48w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 5. Preview the Page<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-5.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33199\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-5.png\" alt=\"\" width=\"517\" height=\"170\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-5.png 517w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-5-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-5-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-5-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-5-48x16.png 48w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Click the Preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Tutorial 3: Show Different Data<\/h3>\n<p class=\"intro-text\">In this tutorial, we'll add a new column that contains a Data Label, which shows the downtime data for the entities, from a different dataset. This tutorial carries on from Tutorial 2.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Select the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33188\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png\" alt=\"\" width=\"433\" height=\"176\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png 433w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-48x20.png 48w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Switch back to design mode in Studio.<\/li>\n<li>Right-click on the cell containing the table layout, and choose <strong>Table Layout<\/strong> from the menu.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 2. Add a new column to the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-2-1.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33308 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-2-1.png\" alt=\"\" width=\"820\" height=\"504\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-2-1.png 820w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-2-1-768x472.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-2-1-150x92.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-2-1-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-2-1-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-2-1-48x30.png 48w\" sizes=\"auto, (max-width: 820px) 100vw, 820px\" \/><\/a><\/p>\n<p class=\"intro-text\">In the Table Layout editor:<\/p>\n<ul class=\"intro-text\">\n<li>Click <strong>Add<\/strong> to add a new column.<\/li>\n<li>For the new column, type <em>Downtime<\/em> as the column <strong>Header<\/strong>.<\/li>\n<\/ul>\n<p class=\"intro-text\">You will see the table preview update with the new column name.<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add a Data Label<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-3-1.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33309 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-3-1.png\" alt=\"\" width=\"1413\" height=\"414\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-3-1.png 1413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-3-1-768x225.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-3-1-150x44.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-3-1-1280x375.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-3-1-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-3-1-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-3-1-48x14.png 48w\" sizes=\"auto, (max-width: 1413px) 100vw, 1413px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop a Data Label onto the <em>Downtime<\/em> column in the Table Layout.\u00a0The Data Label is in the Display\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1844 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/>\u00a0group.<\/p>\n<p class=\"intro-text\"><strong>Step 4. Configure the Data Label<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-4.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33310 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-4.png\" alt=\"\" width=\"1264\" height=\"534\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-4.png 1264w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-4-768x324.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-4-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-4-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-4-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-4-48x20.png 48w\" sizes=\"auto, (max-width: 1264px) 100vw, 1264px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, configure the Data Label to show the downtime for the entity. The downtime data is derived from a different dataset, however it is still linked to the Table Layout's data via the <em>Entity<\/em> field.<\/p>\n<p class=\"note\">Because the Data Label is in a Table Layout column, the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Value_Data\">Data Selector<\/a>\u00a0shows a button for <em>Table Layout Context<\/em>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20724 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Table-Layout-Data-icon.png\" alt=\"\" width=\"15\" height=\"13\" \/>\u00a0for various properties. This is how you can link corresponding columns between the Dataset Query chosen here for the Data Label, and the dataset chosen for the Table Layout Context. It is important to specify Filter Column and Filter Value correctly. <br \/>\n- <strong>Filter Column<\/strong> refers to the column in the <em>dataset for the Data Label<\/em>.<br \/>\n- <strong>Filter Value<\/strong> refers to the column in the <em>Table Layout Context<\/em>.\u00a0<br \/>\nBoth columns must contain data that matches, such as entities.<\/p>\n<ul class=\"intro-text\">\n<li>Click the Data Selector for the <strong>Value<\/strong> property, and then select the Dataset\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14669 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/> tab. Configure the properties as shown below:<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Dataset Query<\/strong><\/td>\n<td>OilDowntime<\/td>\n<td><em>Use this query from the Oil and Gas datasource, instead of the Table Layout's data.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Filter Column<\/strong><\/td>\n<td>(List <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33217 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/list-icon.png\" alt=\"\" width=\"13\" height=\"10\" \/>) Entity\u00a0<\/td>\n<td><em>We are filtering the rows according to the Entity column from this dataset.\u00a0<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Filter Value<\/strong><\/td>\n<td>(Table Layout Context\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20724 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Table-Layout-Data-icon.png\" alt=\"\" width=\"15\" height=\"13\" \/>)\u00a0Entity<\/td>\n<td><em>This is the context that links the entities in this dataset with the entities in the Table Layout's dataset.\u00a0\u00a0<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Value Column<\/strong><\/td>\n<td>(List <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33217 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/list-icon.png\" alt=\"\" width=\"13\" height=\"10\" \/>) SumDowntimeHours\u00a0<\/td>\n<td><em>We are getting the values from this column, according to the row specified in the Filter Column.\u00a0<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>EndDate<\/strong><\/td>\n<td>(Variable) endTime<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>EntitiesList<\/strong><\/td>\n<td>(Variable) selectedEntities<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>StartDate<\/strong><\/td>\n<td>(Variable) startTime<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Related:\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label\u00a0tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 5. Preview the Page<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-1.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33311 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-1.png\" alt=\"\" width=\"442\" height=\"166\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-1.png 442w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-1-150x56.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-1-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-1-48x18.png 48w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Click the Preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Tutorial 4: Row Variables<\/h3>\n<p class=\"intro-text\">In this tutorial, we'll add a new variable to show the <em>Planned Oil<\/em>\u00a0for the selected row. This tutorial carries on from Tutorial 3.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add a Default Value<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-5.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33219\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-5.png\" alt=\"\" width=\"340\" height=\"671\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-5.png 340w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-5-76x150.png 76w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-5-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-5-18x36.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-5-24x48.png 24w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click <strong>Defaults<\/strong> on the Explorer Ribbon, and then add a new default value, as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Variable<\/strong><\/td>\n<td><strong>Type<\/strong><\/td>\n<td><strong>Value<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\">PlannedOil<\/td>\n<td>Number<\/td>\n<td>0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 2. Select the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33188\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png\" alt=\"\" width=\"433\" height=\"176\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png 433w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-48x20.png 48w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Switch back to design mode in Studio.<\/li>\n<li>Right-click on the cell containing the table layout, and choose <strong>Table Layout<\/strong> from the menu.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 3. Update the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-3.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33223\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-3.png\" alt=\"\" width=\"334\" height=\"298\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-3.png 334w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-3-150x134.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-3-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-3-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-3-48x43.png 48w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/a><\/p>\n<p class=\"intro-text\">Update the properties as follows:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Highlight<\/strong>: Choose <em>None<\/em>.<\/li>\n<li><strong>Row Variable<\/strong>: Select <em>OilPlannedSum<\/em> from the drop-down list. This is one of the columns from the Table Layout dataset.<\/li>\n<li><strong>Selected<\/strong>: Select <em>PlannedOil<\/em> from the drop-down list. This is the variable you just added as a default value.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 4. Add and Configure a Text Label<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-4b.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33318 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-4b.png\" alt=\"\" width=\"1329\" height=\"714\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-4b.png 1329w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-4b-768x413.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-4b-150x81.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-4b-1280x688.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-4b-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-4b-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-4b-48x26.png 48w\" sizes=\"auto, (max-width: 1329px) 100vw, 1329px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop a Text Label onto the grid cell\u00a0next to the Table Layout.\u00a0The Text Label is in the Display\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1844\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/><\/a>\u00a0group.<\/li>\n<li>In the Content box, add following text: Planned Oil:<\/li>\n<li>Click the\u00a0<strong>Add Data<\/strong>\u00a0button, complete the following fields, and then click <strong>Add<\/strong> to add the data:\n<ul class=\"intro-text\">\n<li><strong>Type<\/strong>: <em>Number<\/em><\/li>\n<li><strong>Data<\/strong>: (Variable) <em>PlannedOil<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-4b.png\" rel=\"lightbox-33\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33222\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-4b.png\" alt=\"\" width=\"333\" height=\"310\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-4b.png 333w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-4b-150x140.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-4b-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-4b-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut5-4b-48x45.png 48w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related:\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label\u00a0tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 5. Preview the Page<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-5a.png\" rel=\"lightbox-34\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33323 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-5a.png\" alt=\"\" width=\"562\" height=\"256\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-5a.png 562w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-5a-150x68.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-5a-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-5a-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut4-5a-48x22.png 48w\" sizes=\"auto, (max-width: 562px) 100vw, 562px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Click the Preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li>Click on the row that contains entity 'Archer'. See how the <em>Planned Oil<\/em> amount updates in the text label. Now click on another entity and see how the Planned Oil changes for that entity.<\/li>\n<\/ul>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorials - Hierarchy Attributes<\/h2>\n<p class=\"intro-text\">The following tutorials demonstrate how to dynamically update a table layout from a <strong>hierarchy<\/strong> that uses time series data, by displaying the children of a selected entity. This scenario takes full advantage of an <strong>asset model<\/strong> setup, and enables you to construct tables that allow you to drill down and determine the cause of a problem. For this scenario, we make use of the Hierarchy Query Trigger to show us only the entities with an <em>Oil Producing Well<\/em> Template.<\/p>\n<p class=\"intro-text\">At the end of these tutorials, your page should look something like this:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy.png\" rel=\"lightbox-35\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33451\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy.png\" alt=\"\" width=\"625\" height=\"298\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy.png 625w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-48x23.png 48w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a><\/p>\n<h3>Background<\/h3>\n<p class=\"intro-text\">This scenario requires entities in the hierarchy to be correctly set up with templates and attribute values. This is usually done by an administrator. Here's what you need to know about how our example is set up:<\/p>\n<ul class=\"intro-text\">\n<li>All entities in the hierarchy must have the <strong>Oil Producing Well<\/strong> assigned. However, it does not need to be the primary template.\n<ul class=\"intro-text\">\n<li>Typically, entities at the deepest level of the hierarchy would have Oil Producing Well as the primary template (e.g. Beardy, Cornish, Hunter).<\/li>\n<li>Other entities higher up in the hierarchy would have primary templates such as <em>Region<\/em> or <em>Area<\/em>. These entities must have Oil Producing Well as a <em>secondary<\/em> template.<\/li>\n<\/ul>\n<\/li>\n<li>In this example, we are interested in the <strong>Status!Actual<\/strong> attribute value on the Oil Producing Well template. All entities must have a value for this attribute value.\n<ul class=\"intro-text\">\n<li>Entities with Oil Producing Well as their <strong>primary <\/strong>template will usually collect this value from a tag assignment.<\/li>\n<li>Entities with Oil Producing Well as their <strong>secondary <\/strong>template will use this calculation to determine the value:<br \/>\n<span class=\"code-fragment\">DDSum(DDGet(\"P2 Corporate\", 1, entity, \":Status\",\"\",\"Oil Producing Well\"))<\/span><br \/>\nThe calculation assumes that entities that are online have a status of 0, and entities that are offline have a status of 1. This means two things:<\/p>\n<ul class=\"intro-text\">\n<li>If the sum of statuses along a branch is greater than 1, then at least one well on that branch is offline.<\/li>\n<li>If offline wells all have a value of 1, we can use the calculation to determine the number of offline wells along a particular branch.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/hierarchies\/\">Hierarchies in IFS OI Server<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/templates\/\">Templates<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/attributes\/\">Attributes<\/a><\/p>\n<h3>Tutorial 5: Hierarchy Query<\/h3>\n<p class=\"intro-text\">In this tutorial, we'll set the scene for how we want to table to behave, by applying a trigger and setting the page defaults.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14281\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png\" alt=\"New Page button on ribbon\" width=\"438\" height=\"109\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png 438w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-150x37.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-48x12.png 48w\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" \/><\/p>\n<p class=\"intro-text\">Before you start, click the\u00a0<strong>New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid layout<\/a>, and keep the 4 grid cells.<\/p>\n<p class=\"intro-text\"><strong>Step 2. Hierarchy Query Trigger<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-2a.png\" rel=\"lightbox-36\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33456 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-2a.png\" alt=\"\" width=\"1117\" height=\"591\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-2a.png 1117w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-2a-768x406.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-2a-150x79.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-2a-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-2a-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-2a-48x25.png 48w\" sizes=\"auto, (max-width: 1117px) 100vw, 1117px\" \/><\/a><\/p>\n<p class=\"intro-text\">In the Studio ribbon, click the <strong>Triggers<\/strong> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/trigger-icon.png\" rel=\"lightbox-37\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-33455\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/trigger-icon.png\" alt=\"\" width=\"11\" height=\"21\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/trigger-icon.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/trigger-icon-13x24.png 13w\" sizes=\"auto, (max-width: 11px) 100vw, 11px\" \/><\/a>\u00a0button.<\/p>\n<p class=\"intro-text\">In the <strong>Triggers<\/strong> panel on the right, click the <strong>Add<\/strong> button and expand the <strong>Hierarchy Query<\/strong> trigger.<\/p>\n<p class=\"intro-text\"><strong>Step 3. Configure the Hierarchy Query<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-3.png\" rel=\"lightbox-38\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33457\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-3.png\" alt=\"\" width=\"349\" height=\"417\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-3.png 349w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-3-126x150.png 126w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-3-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-3-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-3-40x48.png 40w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><\/a><\/p>\n<p class=\"intro-text\">The Hierarchy Query generates a list of child entities from a selected entity in a hierarchy. There are 5 important fields to fill out here:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Hierarchy Name<\/strong><\/td>\n<td>P2 Corporate<\/td>\n<td><em>The name of the hierarchy containing the entities of interest.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Entity<\/strong><\/td>\n<td>selectedEntity<\/td>\n<td><em>This variable contains the name of the entity that the user will be clicking on. We recommend using the default, selectedEntity.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Levels<\/strong><\/td>\n<td>1<\/td>\n<td><em>The number of levels to fetch entities from. A level of 1 means that when the user clicks an entity, the trigger will return the immediate children of the clicked entity.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Template Filters<\/strong><\/td>\n<td>Oil Producing Well<\/td>\n<td><em>Restrict the returned entities to only show those containing the Oil Producing Well template. The template may be a primary or a secondary template, but it must be applied to the entities in order for them to be fetched.\u00a0<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Child Entities<\/strong><\/td>\n<td>childEntities<\/td>\n<td><em>The variable containing the list of child entities returned by the trigger, when the user clicks an entity.\u00a0We recommend using the default, childEntities.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 4. Default Values<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-4.png\" rel=\"lightbox-39\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33460\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-4.png\" alt=\"\" width=\"1092\" height=\"609\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-4.png 1092w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-4-768x428.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-4-150x84.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-4-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-4-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-4-48x27.png 48w\" sizes=\"auto, (max-width: 1092px) 100vw, 1092px\" \/><\/a><\/p>\n<p class=\"intro-text\">Set the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">default values<\/a> for the reporting period and selected entity:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>startTime<\/strong><\/td>\n<td>Last week<\/td>\n<td><em>This sets the beginning of the reporting period<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>endTime<\/strong><\/td>\n<td>Today<\/td>\n<td><em>This sets the end of the reporting period<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>selectedEntity<\/strong><\/td>\n<td>Glen Innes<\/td>\n<td><em>When the page is loaded, this sets Glen Innes as the clicked entity, so the user sees data for Glen Innes first.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3>Tutorial 6: Configure Page<\/h3>\n<p class=\"intro-text\">In this tutorial, we take advantage of the Hierarchy Query Trigger to allow a hierarchy to drive the entities displayed in the Table Layout. We also make the Table Layout interactive, so that when the users clicks an entity in the table, they can drill down the hierarchy to see more data.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add and Configure a Hierarchy<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-1.png\" rel=\"lightbox-40\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33462\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-1.png\" alt=\"\" width=\"1117\" height=\"413\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-1.png 1117w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-1-768x284.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-1-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-1-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-1-48x18.png 48w\" sizes=\"auto, (max-width: 1117px) 100vw, 1117px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop a Hierarchy to a grid cell.\u00a0The Hierarchy is in the Hierarchy <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchy.png\" rel=\"lightbox-41\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1850\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchy.png\" alt=\"\" width=\"20\" height=\"17\" \/><\/a>\u00a0group.<\/p>\n<p class=\"intro-text\">The only thing you need to configure here is the name of the hierarchy - this should be the same as the one you specified in the Trigger, in the previous step.\u00a0<\/p>\n<p class=\"intro-text\"><strong>Hierarchy Name<\/strong>: P2 Corporate<\/p>\n<p class=\"intro-text\">Note the use of the default <em>selectedEntity<\/em> variable here too. This must also match the selected entity variable used in the Trigger.<\/p>\n<p class=\"left-bar\">Related:\u00a0\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy\/\">Hierarchy tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Add the Table Layout and Configure its Data<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2.png\" rel=\"lightbox-42\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33463\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2.png\" alt=\"\" width=\"1117\" height=\"673\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2.png 1117w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2-768x463.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2-150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2-48x29.png 48w\" sizes=\"auto, (max-width: 1117px) 100vw, 1117px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the Table Layout component\u00a0onto a grid cell.\u00a0The Table Layout is in the Layout\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1853 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/layouts.png\" alt=\"\" width=\"20\" height=\"16\" \/>\u00a0group.\u00a0<\/p>\n<p class=\"intro-text\">For this table, we want to display the attributes of entities in the hierarchy. The configuration is as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 123px;\"><strong>Entities<\/strong><\/td>\n<td width=\"98px\">(Variable <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14462\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" alt=\"Variable 4.4\" width=\"14\" height=\"21\" \/><\/a>) childEntities<\/td>\n<td><em>We want to display the children of the selected entity in the table. This is provided by the Hierarchy Query Trigger so if you have not already set this, you will not see any data.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Attributes<\/strong><\/td>\n<td>Add<\/td>\n<td><em>Click the <strong>Add<\/strong> button to add an attribute. If you add more than one attribute, the table layout will give you a separate column for each attribute.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Template<\/strong><\/td>\n<td>Oil Producing Well<\/td>\n<td><em>The template containing the attribute we are interested in.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Attribute<\/strong><\/td>\n<td>Status<\/td>\n<td><em>The attribute we are interested in.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Attribute Value<\/strong><\/td>\n<td>Actual<\/td>\n<td><em>The attribute value containing the data to be displayed in the table.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Start Time<\/strong><\/td>\n<td>(Variable <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14462\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" alt=\"Variable 4.4\" width=\"14\" height=\"21\" \/><\/a>) endTime<\/td>\n<td><em>When using time series data, it is important to make the start and end times the same, otherwise the table will display entities repeated on each row\u00a0 for each timestamp in the reporting period. This will make the page sluggish, and is not what you usually want to see. In this example, we have set endTime as 'Today' in the Default Values, so by setting the startTime to be the same as the endTime, we will see today's data only.\u00a0<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"note\">Click the <strong>Preview<\/strong> button to see the columns available in your table layout. Note that Confidence and Error are metadata columns for all timeseries data. You will not usually want to see these in a table layout, so they will not be available for selection.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2a.png\" rel=\"lightbox-45\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33470\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2a.png\" alt=\"\" width=\"710\" height=\"260\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2a.png 710w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2a-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2a-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2a-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-2a-48x18.png 48w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 3. Prefill Table Layout Columns<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3.png\" rel=\"lightbox-46\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33469\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3.png\" alt=\"\" width=\"336\" height=\"168\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3.png 336w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3-48x24.png 48w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click the <strong>Prefill<\/strong> button to add columns to the table. Notice that these are the first 3 columns from the Dataset Preview.<\/p>\n<p class=\"intro-text\">Now remove the <strong>Timestamp<\/strong> column, because we are not interested in that, and rename the<em>\u00a0<\/em><strong>[Oil Producing Well]:Status!Actual<\/strong> column to: <em>Offline Wells.<\/em><\/p>\n<p class=\"intro-text\">Your table layout should now look like this:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3a.png\" rel=\"lightbox-47\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33472\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3a.png\" alt=\"\" width=\"717\" height=\"439\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3a.png 717w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3a-150x92.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3a-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3a-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-3a-48x29.png 48w\" sizes=\"auto, (max-width: 717px) 100vw, 717px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 4. Add a New Column and Status Indicator to the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-4.png\" rel=\"lightbox-48\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33473\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-4.png\" alt=\"\" width=\"1089\" height=\"473\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-4.png 1089w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-4-768x334.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-4-150x65.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-4-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-4-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-4-48x21.png 48w\" sizes=\"auto, (max-width: 1089px) 100vw, 1089px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>In the Table Layout, click <strong>Add<\/strong> to add a new column.<\/li>\n<li>Give the new column a name of: <strong>Status<\/strong>.<\/li>\n<li>In the component toolbox, drag and drop a <strong>Status Indicator<\/strong> into the new <em>Status<\/em> column.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 5. Configure the Status Indicator<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5.png\" rel=\"lightbox-49\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33474\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5.png\" alt=\"\" width=\"616\" height=\"527\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5.png 616w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5-150x128.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5-48x41.png 48w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/a><\/p>\n<p class=\"intro-text\">When you add the Status Indicator, that column becomes active and you will see its editor. Configure the Status Indicator as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 123px;\"><strong>Actual<\/strong><\/td>\n<td width=\"98px\">(Table Layout Context <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Table-Layout-Data-icon.png\" rel=\"lightbox-50\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20724\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Table-Layout-Data-icon.png\" alt=\"\" width=\"15\" height=\"13\" \/><\/a>)\u00a0[Oil Producing Well]:Status!Actual<\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5a.png\" rel=\"lightbox-51\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-33475 alignleft\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5a.png\" alt=\"\" width=\"338\" height=\"165\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5a.png 338w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5a-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5a-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5a-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-5a-48x23.png 48w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/a>\u00a0<em>This is the context that links the entities in this component's data with the entities in the Table Layout's data. Here we are specifying that we want to use the same attribute value to drive the status indicator.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>State Count<\/strong><\/td>\n<td>2 States<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Direction<\/strong><\/td>\n<td>Ascending<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Limit<\/strong><\/td>\n<td>0<\/td>\n<td><em>Specify a limit of 0. This means that values up to and including 0 will be considered below the limit, and values greater than 0 will be above the limit. Select the icons and colours you want for indicating these limits. In this example, values above 0 reflect that a well is offline, so it's appropriate to use a warning icon and colour for this. Values below 0 reflect an online well, which is a good status.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-indicator\/\">Status Indicator tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 6. Table Layout Interactivity and Appearance<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png\" rel=\"lightbox[33038] lightbox-52\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33188\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png 433w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-48x20.png 48w\" alt=\"\" width=\"433\" height=\"176\" \/><\/a><\/p>\n<p class=\"intro-text\">Right-click on the Table Layout and select it from the menu. We will finish setting the interactivity and appearance here in the Table Layout editor.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-6.png\" rel=\"lightbox-53\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33477\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-6.png\" alt=\"\" width=\"336\" height=\"538\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-6.png 336w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-6-94x150.png 94w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-6-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-6-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-page-6-30x48.png 30w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/a><\/p>\n<p class=\"intro-text\">To enable users to interact with the table layout, we need to assign a variable when a row is clicked. The relevant settings are:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Row Variable<\/strong><\/td>\n<td>Entity<\/td>\n<td><em>When the user clicks a row, the Entity column is used to obtain the value for the Selected variable.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Selected<\/strong><\/td>\n<td>selectedEntity<\/td>\n<td><em>We use selectedEntity, which we have already defined. When a user clicks a row, this is updated with the name of the entity that was clicked.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Finally, assign a style to the table layout.<\/p>\n<p class=\"intro-text\"><strong>Step 7. Finish and Open the Page<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy.png\" rel=\"lightbox-35\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33451\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy.png\" alt=\"\" width=\"625\" height=\"298\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy.png 625w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-hierarchy-48x23.png 48w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Click the Finish and Open <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" rel=\"lightbox-55\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2978\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" alt=\"\" width=\"14\" height=\"16\" \/><\/a>\u00a0button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Click different entities in the hierarchy, and observe what happens in the table.<\/li>\n<li>Click an entity in the table, and observe what happens (both the table and hierarchy will update). Note: Clicking a child entity at the deepest level in the hierarchy will result in the table appearing blank, because the selected entities has no child entities of its own.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial - Other Components<\/h2>\n<h3>Tutorial 7: Sparkline<\/h3>\n<p class=\"intro-text\">In this tutorial, we'll add a column that contains a sparkline to a table layout. The sparkline we'll configure is a Line Chart component without labels, gridlines, a legend, or tooltips.\u00a0This tutorial carries on from Tutorial 4.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Select the Table Layout<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33188\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png\" alt=\"\" width=\"433\" height=\"176\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1.png 433w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut2-1-48x20.png 48w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Open the page from Tutorial 4, and switch back to design mode in Studio.<\/li>\n<li>Right-click on the cell containing the table layout, and choose\u00a0<strong>Table Layout<\/strong>\u00a0from the menu.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 2. Add a new column to the Table Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-2.png\" rel=\"lightbox-57\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33478\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-2.png\" alt=\"\" width=\"752\" height=\"538\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-2.png 752w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-2-150x107.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-2-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-2-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-2-48x34.png 48w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><\/a><\/p>\n<p class=\"intro-text\">In the Table Layout editor:<\/p>\n<ul class=\"intro-text\">\n<li>Click\u00a0<strong>Add<\/strong>\u00a0to add a new column.<\/li>\n<li>For the new column, type\u00a0<em>Oil Trend\u00a0<\/em>as the column\u00a0<strong>Header<\/strong>.<\/li>\n<\/ul>\n<p class=\"intro-text\">You will see the table preview update with the new column name.<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add a Line Chart<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-3.png\" rel=\"lightbox-58\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33479\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-3.png\" alt=\"\" width=\"1352\" height=\"446\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-3.png 1352w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-3-768x253.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-3-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-3-1280x422.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-3-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-3-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-3-48x16.png 48w\" sizes=\"auto, (max-width: 1352px) 100vw, 1352px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop a Line Chart component onto the <strong>Oil Trend<\/strong> column in the Table Layout. The Line Chart is in the Chart <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1837 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/chartsicon_sm.png\" alt=\"chartsicon_sm\" width=\"22\" height=\"17\" \/> group.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">Charts tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 4. Configure the Chart data<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Sparkline-data.png\" rel=\"lightbox-59\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31471 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Sparkline-data-e1510711224250.png\" alt=\"\" width=\"331\" height=\"418\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Sparkline-data-e1510711224250.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Sparkline-data-e1510711224250-119x150.png 119w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Sparkline-data-e1510711224250-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Sparkline-data-e1510711224250-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Configure-Sparkline-data-e1510711224250-38x48.png 38w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, we'll configure the chart to use its own data for each entity in the table layout.<\/p>\n<ul class=\"intro-text\">\n<li>Click the Line Chart component to configure it.<\/li>\n<li>Open the Chart Data <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\">Data Selector<\/a>\u00a0and add a dataset query. Configure it as follows:<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Dataset Query<\/strong><\/td>\n<td><em>WellProductionSumbyDay<\/em><\/td>\n<td>This is from the\u00a0<em>Oil and Gas Data<\/em>\u00a0datasource<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>EndDate<\/strong><\/td>\n<td>(Variable <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14462\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" alt=\"Variable 4.4\" width=\"14\" height=\"21\" \/><\/a>) <em>endTime<\/em><\/td>\n<td>This uses the Page Default variable for <em>endTime<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>EntitiesList<\/strong><\/td>\n<td>(Variable <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14462\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" alt=\"Variable 4.4\" width=\"14\" height=\"21\" \/><\/a>)\u00a0<em>selectedEntities<\/em><\/td>\n<td>This uses the Default variable that you added in Tutorial 1<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>StartDate<\/strong><\/td>\n<td>(Variable <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14462\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/variableicon.png\" alt=\"Variable 4.4\" width=\"14\" height=\"21\" \/><\/a>) <em>startTime<\/em><\/td>\n<td>This uses the Page Default variable for <em>startTime<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"note\">Note: These are the same parameters used for the Table Layout data's dataset query, keeping the two in sync. The dataset queries themselves are also similar, and access the same data; the difference is that the chart's query divides the results into separate days, which is better suited to showing a sparkline trend.<\/p>\n<p class=\"intro-text\"><strong>Step 5. Configure the Line Series<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5.png\" rel=\"lightbox-63\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33207\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5.png\" alt=\"\" width=\"330\" height=\"572\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5.png 330w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-87x150.png 87w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-5-28x48.png 28w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click to open the <em>Line Series<\/em>. Configure the following properties:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 125px;\"><strong>Y Column<\/strong><\/td>\n<td>(DataColumn)\u00a0OilActualSum<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Filter Column<\/strong><\/td>\n<td>(DataColumn)\u00a0Entity<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Filter Value<\/strong><\/td>\n<td>(Context)\u00a0Entity<\/td>\n<td><em>The Context option is available to all of the chart's properties, because it is in a Table Layout column. When you select context data, Explorer uses the selected Y Column for the current row.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Colour Matcher<\/strong><\/td>\n<td>OIL<\/td>\n<td><em>This colours the line in green.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 6. Configure the X Axis<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-6.png\" rel=\"lightbox-64\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33208\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-6.png\" alt=\"\" width=\"330\" height=\"398\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-6.png 330w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-6-124x150.png 124w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-6-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-6-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-6-40x48.png 40w\" sizes=\"auto, (max-width: 330px) 100vw, 330px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click to open the <em>X Axis<\/em>.\u00a0Configure the following properties:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Column<\/strong><\/td>\n<td>(DataColumn)\u00a0Day<\/td>\n<td><em>This column is from the dataset specified in the Chart Data property.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 130px;\"><b>Visible<\/b><\/td>\n<td>No<\/td>\n<td><em>Clear the check box,\u00a0so that the y values do not appear along the x-axis.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Enable Gridlines<\/strong><\/td>\n<td>No<\/td>\n<td><em>Clear the check box.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 7. Configure the Left Y Axis and Other Options<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-7.png\" rel=\"lightbox-65\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33209\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-7.png\" alt=\"\" width=\"331\" height=\"610\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-7.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-7-81x150.png 81w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-7-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-7-20x36.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-tut3-7-26x48.png 26w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click to open the <em>Left Y Axis<\/em>.\u00a0Configure the following properties:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 130px;\"><strong>Visible<\/strong><\/td>\n<td width=\"80px;\">No<em>\u00a0<\/em><\/td>\n<td><em>Clear the check box,\u00a0so that the y values do not appear along the y-axis.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><b>Enable Gridlines<\/b><\/td>\n<td>No<\/td>\n<td><em>Clear the check box.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Configure the following <em>Other<\/em> properties:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 130px;\"><b>Legend<\/b><\/td>\n<td width=\"80px;\">No<\/td>\n<td><em>The check box should be cleared by default.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Tooltip<\/strong><\/td>\n<td>No<\/td>\n<td><em>Clear the check box.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 8. Preview the Page<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-8.png\" rel=\"lightbox-66\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33480\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-8.png\" alt=\"\" width=\"426\" height=\"173\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-8.png 426w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-8-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-8-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-8-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-tut-6-8-48x19.png 48w\" sizes=\"auto, (max-width: 426px) 100vw, 426px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Click the Preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Understanding the Table Layout<\/h2>\n<p class=\"intro-text\">When using a table layout, you configure the data you want to display in the table, and how you want to display it. First, you set up the table layout and initial data, and then you configure the data in the individual columns.\u00a0This is described in the following sections.<\/p>\n<h3>Selecting the Table Layout<\/h3>\n<p class=\"intro-text\">When configuring a Table Layout, you will probably want to toggle between configuring the table layout itself and configuring a component in a column.<\/p>\n<p class=\"intro-text\">When you click on a configured table layout in Studio, you will notice that you have actually clicked on the column, as it is highlighted in blue and the column's component editor appears on the right:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-column-clicked.png\" rel=\"lightbox-67\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33064\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-column-clicked.png\" alt=\"\" width=\"903\" height=\"398\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-column-clicked.png 903w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-column-clicked-768x338.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-column-clicked-150x66.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-column-clicked-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-column-clicked-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-column-clicked-48x21.png 48w\" sizes=\"auto, (max-width: 903px) 100vw, 903px\" \/><\/a><\/p>\n<p class=\"intro-text\">If you want to select the component editor for the Table Layout, you will need to either\u00a0click an empty column, or use the right-click menu.<\/p>\n<p class=\"intro-text\">1. Right-click on the Table Layout to open the menu.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-right-click.png\" rel=\"lightbox-68\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33071\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-right-click.png\" alt=\"\" width=\"376\" height=\"150\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-right-click.png 376w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-right-click-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-right-click-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-right-click-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-right-click-48x19.png 48w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Click the <strong>Table Layout<\/strong> item, which is second on the menu. Note that the first item in the menu is the column you have clicked on.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-config-clicked.png\" rel=\"lightbox-69\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33065\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-config-clicked.png\" alt=\"\" width=\"733\" height=\"384\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-config-clicked.png 733w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-config-clicked-150x79.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-config-clicked-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-config-clicked-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-config-clicked-48x25.png 48w\" sizes=\"auto, (max-width: 733px) 100vw, 733px\" \/><\/a><\/p>\n<p class=\"intro-text\">Now that you have selected the Table Layout, you can configure it, move it, and resize it.<\/p>\n<h3>Setting Up Columns<\/h3>\n<p class=\"intro-text\">There are 2 aspects to setting up columns: configuring the columns displayed by the table layout, and configuring what goes into the columns.<\/p>\n<h4>Table Layout Columns<\/h4>\n<p class=\"intro-text\">The Columns section in the table layout editor allows you to add and remove columns, change the header names and widths of the columns, and prefill table data in the columns. You can use the following functions:<\/p>\n<p class=\"intro-text\"><strong>Prefill<\/strong>: Adds all columns in the table layout's set of data, as shown in the data Preview.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-prefill.png\" rel=\"lightbox-70\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33107\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-prefill.png\" alt=\"\" width=\"345\" height=\"399\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-prefill.png 345w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-prefill-130x150.png 130w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-prefill-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-prefill-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-prefill-42x48.png 42w\" sizes=\"auto, (max-width: 345px) 100vw, 345px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Add<\/strong>: Adds a new blank column to the table layout, into which you can drag a component.\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col.png\" rel=\"lightbox-71\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33109\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col.png\" alt=\"\" width=\"335\" height=\"140\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col.png 335w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-150x63.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-48x20.png 48w\" sizes=\"auto, (max-width: 335px) 100vw, 335px\" \/><\/a><\/p>\n<p class=\"intro-text\">The new column will appear in the design preview as follows:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-preview.png\" rel=\"lightbox-72\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33110\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-preview.png\" alt=\"\" width=\"216\" height=\"106\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-preview.png 216w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-preview-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-preview-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-preview-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-add-col-preview-48x24.png 48w\" sizes=\"auto, (max-width: 216px) 100vw, 216px\" \/><\/a><\/p>\n<p class=\"intro-text\">Once you have added columns to the table layout, the following options are available for each column:<\/p>\n<p class=\"intro-text\"><strong>Remove<\/strong>: Removes the corresponding column from the table layout.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-remove.png\" rel=\"lightbox-73\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33108\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-remove.png\" alt=\"\" width=\"320\" height=\"159\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-remove.png 320w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-remove-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-remove-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-remove-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-remove-48x24.png 48w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Header<\/strong>: The name of the column header. You can change the name by typing over an existing name. For prefilled columns, the data will remain the same but the name of the header will change. Example:<\/p>\n<table>\n<tbody>\n<tr>\n<td><em>Header: Entity<\/em><\/td>\n<td><em>Header: Asset<\/em><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header1.png\" rel=\"lightbox-74\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33111\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header1.png\" alt=\"\" width=\"216\" height=\"106\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header1.png 216w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header1-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header1-48x24.png 48w\" sizes=\"auto, (max-width: 216px) 100vw, 216px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header2.png\" rel=\"lightbox-75\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33112\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header2.png\" alt=\"\" width=\"216\" height=\"106\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header2.png 216w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header2-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header2-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header2-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-edit-header2-48x24.png 48w\" sizes=\"auto, (max-width: 216px) 100vw, 216px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Width:<\/strong> Each newly added column has an asterisk <strong>*<\/strong> as its default width.\u00a0Rules for column width follow the same rules as used in the <strong><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/#Width_and_Height\">Grid Layout<\/a><\/strong>: an asterisk (*) indicates a proportional width, a number indicates a fixed width in pixels. You can also have a mix of proportional and fixed width columns. Example:<\/p>\n<table>\n<tbody>\n<tr>\n<td><em>Specified width of columns:<\/em><\/td>\n<td><em>Appearance of corresponding table layout column widths:<\/em><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width1.png\" rel=\"lightbox-76\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33114\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width1.png\" alt=\"\" width=\"309\" height=\"224\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width1.png 309w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width1-150x109.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width1-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width1-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width1-48x35.png 48w\" sizes=\"auto, (max-width: 309px) 100vw, 309px\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width2.png\" rel=\"lightbox-77\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33115\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width2.png\" alt=\"\" width=\"504\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width2.png 504w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width2-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width2-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-width2-48x17.png 48w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Components in Columns<\/h4>\n<p class=\"intro-text\">The columns in a table layout contain components. There is one component per column, with its data repeated in each row.<\/p>\n<p class=\"intro-text\">Columns that are added using the Prefill button contain a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> component.\u00a0You can also add a different component to a column instead of a text label - in the image below, the extra column (column <em>3<\/em>) contains a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-indicator\/\">Status Indicator<\/a> component. Components can be configured to use the <strong><a href=\"#Using_the_Table_Data\">data from the table layout<\/a><\/strong>, or to use a <strong><a href=\"#Using_Different_Data\">different set of data<\/a><\/strong>.\u00a0<\/p>\n<p class=\"intro-text\">To configure a component in a column, click the column and then configure the component as you normally would, depending on the options available for that component.<\/p>\n<p class=\"intro-text\">You can style individual columns by applying a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/\">style<\/a> to the component in the column - e.g. you might want to right-align columns containing a number.\u00a0 You can also reorder the columns by changing the <strong>Position in Table Layout<\/strong> property. The first column on the left is column 0 (zero). Note that you can only move a column to another empty column.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-status-454.png\" rel=\"lightbox-78\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33507\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-status-454.png\" alt=\"\" width=\"749\" height=\"799\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-status-454.png 749w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-status-454-141x150.png 141w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-status-454-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-status-454-34x36.png 34w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-status-454-45x48.png 45w\" sizes=\"auto, (max-width: 749px) 100vw, 749px\" \/><\/a><\/p>\n<h3>Table Data<\/h3>\n<p class=\"intro-text\">Adding data to the Table Layout enables that data to be easily used in components within the table layout.\u00a0The number of rows depends on the set of data: if the data has ten rows, the Table Layout will have ten rows, and so on.<\/p>\n<p class=\"intro-text\">To add data, use the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a>.\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-data-5.png\" rel=\"lightbox-79\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33074\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-data-5.png\" alt=\"\" width=\"341\" height=\"271\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-data-5.png 341w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-data-5-150x119.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-data-5-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-data-5-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-data-5-48x38.png 48w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/a><\/p>\n<p class=\"intro-text\">The Table Layout has been designed to use tabular data, however other forms of data (such as <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Ad_hoc_Calculation_Data\">ad hoc calculations<\/a> and <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Tag_Data\">tags<\/a>) can be used. The two most common types of data used in a Table Layout are <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\"><strong>dataset queries<\/strong><\/a>\u00a0and\u00a0<strong><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Attribute_Data\">attributes<\/a>.<\/strong><\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p><em><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9576 size-full\" style=\"font-family: inherit;\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Dataset-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/>\u00a0Dataset Query example: \u00a0<\/em><\/p>\n<p><em><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset.png\" rel=\"lightbox-80\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33148\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset.png\" alt=\"\" width=\"355\" height=\"421\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset.png 355w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-126x150.png 126w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-40x48.png 40w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/a><\/em><\/p>\n<\/td>\n<td>\n<p><em><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17335 size-full\" style=\"font-family: inherit;\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Attribute-icon.png\" width=\"21\" height=\"19\" \/>\u00a0Attributes example: \u00a0<\/em><\/p>\n<p><em><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Table-Layout-Data-3.png\" rel=\"lightbox-81\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31419 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Table-Layout-Data-3-e1510548679838.png\" alt=\"\" width=\"354\" height=\"719\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Table-Layout-Data-3-e1510548679838.png 354w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Table-Layout-Data-3-e1510548679838-74x150.png 74w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Table-Layout-Data-3-e1510548679838-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Table-Layout-Data-3-e1510548679838-18x36.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/Table-Layout-Data-3-e1510548679838-24x48.png 24w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/a><\/em><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Previewing<\/strong> your data shows you the columns that will be available for use in the table layout and other components added to the table layout's columns.\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33260 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2.png\" alt=\"\" width=\"1012\" height=\"224\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2.png 1012w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2-768x170.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2-150x33.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-dataset-preview2-48x11.png 48w\" sizes=\"auto, (max-width: 1012px) 100vw, 1012px\" \/><\/a><\/p>\n<h3>Component Data<\/h3>\n<p class=\"intro-text\">Components in a table layout can either use the Table layout's data or its own independent data.\u00a0<\/p>\n<h4>Using Table Data<\/h4>\n<p class=\"intro-text\">When you configure a component in one of the Table Layout's columns, you can select any of the Table Layout's data columns of the relevant type (e.g.\u00a0<em>text<\/em>, <em>number<\/em> etc).\u00a0The data that gets used is contextual for the row.<\/p>\n<p class=\"intro-text\">Table Layout data can be identified by the <em>table layout context\u00a0<\/em><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20724 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Table-Layout-Data-icon.png\" alt=\"\" width=\"15\" height=\"13\" \/> icon, in the Data Selector options. E.g. The Status Indicator shown below is contained in a Table Layout, so its <b>Value\u00a0<\/b>property can be configured to use a data column from the Table Layout.\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-data.png\" rel=\"lightbox-83\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33147\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-data.png\" alt=\"\" width=\"341\" height=\"418\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-data.png 341w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-data-122x150.png 122w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-data-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-data-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-data-39x48.png 39w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/a><\/p>\n<p class=\"intro-text\">Some components, such as the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">Chart<\/a>, will show an additional <em>Context<\/em>\u00a0option in <strong>Filter Value<\/strong> fields. This is only available when the component is placed in a Table Layout, and enables you to select a column from the Table Layout for this value. For details on how to do this, see <a href=\"#Tutorial_7_Sparkline\">Tutorial 7<\/a>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-value-e1511921777192.png\" rel=\"lightbox-84\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-33149 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-value-e1511921777192.png\" alt=\"\" width=\"333\" height=\"322\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-value-e1511921777192.png 333w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-value-e1511921777192-150x145.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-value-e1511921777192-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-value-e1511921777192-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-context-value-e1511921777192-48x46.png 48w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><\/a><\/p>\n<h4>Using Different Data<\/h4>\n<p class=\"intro-text\">You can configure a component in a Table Layout to show different data from that in the rest of the table layout. This is best done when the other set of data has some commonalities with the table layout's data. E.g. Both sets of data refer to the same entities.\u00a0<\/p>\n<p class=\"intro-text\">In the example below, the <em>Downtime<\/em> column sources data from a different query (<em>OilDowntime<\/em>) to the table layout's data (<em>WellProductionDataSum<\/em>). The two sets of data are connected via the <em>Entity<\/em> column which is present in both sources of data.\u00a0For details on how to do this, see <a href=\"#Tutorial_3_Show_Different_Data\">Tutorial 3<\/a>.\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-different-data.png\" rel=\"lightbox-85\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33155\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-different-data.png\" alt=\"\" width=\"708\" height=\"522\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-different-data.png 708w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-different-data-150x111.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-different-data-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-different-data-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-different-data-48x35.png 48w\" sizes=\"auto, (max-width: 708px) 100vw, 708px\" \/><\/a><\/p>\n<p class=\"note\">\u00a0<\/p>\n<h3>Interactive Variables<\/h3>\n<p class=\"intro-text\">You can configure a Table Layout's data column to update a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">variable<\/a>, which can be used to make the table layout and other components interactive.\u00a0To do this, the Table Layout provides two properties: <strong>Row Variable<\/strong> and <strong>Selected<\/strong>.<\/p>\n<p class=\"intro-text\"><strong>Row Variable<\/strong>: The name of the column that contains the data item of interest when a user clicks on a row. The columns are available in a drop-down list, and are obtained from the table layout's configured data. This data is published to the <em>Selected<\/em> variable.<\/p>\n<p class=\"intro-text\"><strong>Selected<\/strong>: The variable that is published when the user clicks on a row. This variable contains the data from the column specified by\u00a0<em>Row Variable<\/em>. E.g. It may contain the name of an entity.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-selected.png\" rel=\"lightbox-86\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33498\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-selected.png\" alt=\"\" width=\"343\" height=\"293\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-selected.png 343w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-selected-150x128.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-selected-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-selected-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/11\/table-layout-selected-48x41.png 48w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/><\/a><\/p>\n<p class=\"intro-text\">This variable must be added to the <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a> panel, with the appropriate data type. E.g. If this is to contain an entity, then it would be a text variable.\u00a0<\/p>\n<p class=\"intro-text\">You can add any other component that accepts a variable, to display the content of the row that a users clicks in the table layout. E.g. A Data Label which displays the <em>selectedEntity<\/em>\u00a0variable.<\/p>\n<p class=\"left-bar\">See <a href=\"##Tutorial_4_Row_Variables\">Tutorial 4<\/a> or <a href=\"#Tutorial_6_Configure_Page\">Tutorial 6<\/a> for examples of how to use the row variable.<\/p>\n<h3>Appearance<\/h3>\n<p class=\"intro-text\">You can change the appearance of the table layout in several ways.<\/p>\n<h4>Styles<\/h4>\n<p class=\"intro-text\">There are two levels of styling you can apply: the style for the <strong>table layout<\/strong> itself, and the styles for its <strong>components<\/strong>.<\/p>\n<p class=\"intro-text\"><strong>Table Layout style<\/strong><br \/>\nWhen you select a style for the Table Layout, this will control the colour and size of the table and its rows, columns, borders, and header text. These styles are created by a Style Administrator for the Table Layout component.\u00a0If you are a Style Administrator, you can add a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-layouts\/\">Table Layout style<\/a>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-1.png\" rel=\"lightbox-87\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33133\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-1.png\" alt=\"\" width=\"335\" height=\"479\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-1.png 335w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-1-105x150.png 105w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-1-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-1-25x36.png 25w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-1-34x48.png 34w\" sizes=\"auto, (max-width: 335px) 100vw, 335px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Component Style<\/strong><br \/>\nClicking on each of the column components allows you to select a style for each component, including any style overrides available for that component (e.g. Alignment).\u00a0These styles are created by a Style Administrator for the component (e.g. Text Label).\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-component.png\" rel=\"lightbox-88\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33134\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-component.png\" alt=\"\" width=\"342\" height=\"353\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-component.png 342w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-component-145x150.png 145w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-component-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-style-component-36x36.png 36w\" sizes=\"auto, (max-width: 342px) 100vw, 342px\" \/><\/a><\/p>\n<h4>Highlight Rows or Columns<\/h4>\n<p class=\"intro-text\">If you use a table layout style that contains a highlight colour, you can choose to highlight the table's columns or rows.\u00a0The non-highlighted rows or columns will assume the table background colour.<\/p>\n<p class=\"intro-text\"><strong>Highlight<\/strong>: The Highlight drop-down list has the following options:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Alternate Rows<\/strong>: Highlight alternating rows in a different colour, from the second row onwards. This does not include the row containing the header.<\/li>\n<li><strong>Alternate Columns<\/strong>: Highlight alternating columns in a different colour, from the second column onwards.\u00a0<\/li>\n<li><strong>Choose Columns<\/strong>: Choose the columns that you want to highlight. If this option is selected, a check box will be available next to each column. Select the check box to enable highlighting for that column.<\/li>\n<\/ul>\n<p class=\"intro-text\">To clear highlighting, select <strong>None <\/strong>from the Highlight drop-down list.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Highlights.png\" rel=\"lightbox-89\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20892 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Highlights.png\" width=\"351\" height=\"217\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Highlights.png 351w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Highlights-150x93.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Highlights-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Highlights-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Highlights-48x30.png 48w\" sizes=\"auto, (max-width: 351px) 100vw, 351px\" \/><\/a><\/p>\n<p><em>Table Layout with Alternate Rows highlighted:<\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-rows.png\" rel=\"lightbox-90\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33124\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-rows.png\" alt=\"\" width=\"783\" height=\"499\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-rows.png 783w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-rows-768x489.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-rows-150x96.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-rows-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-rows-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-rows-48x31.png 48w\" sizes=\"auto, (max-width: 783px) 100vw, 783px\" \/><\/a><\/p>\n<p><em>Table Layout with Alternate Columns highlighted:<\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-cols.png\" rel=\"lightbox-91\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33125\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-cols.png\" alt=\"\" width=\"782\" height=\"503\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-cols.png 782w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-cols-768x494.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-cols-150x96.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-cols-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-cols-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-alternate-cols-48x31.png 48w\" sizes=\"auto, (max-width: 782px) 100vw, 782px\" \/><\/a><\/p>\n<p><em>Table Layout with selected columns (Choose Columns option) highlighted:<\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-choose-cols.png\" rel=\"lightbox-92\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33126\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-choose-cols.png\" alt=\"\" width=\"784\" height=\"499\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-choose-cols.png 784w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-choose-cols-768x489.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-choose-cols-150x95.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-choose-cols-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-choose-cols-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-choose-cols-48x31.png 48w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/a><\/p>\n<h4>Hide Header Row<\/h4>\n<p class=\"intro-text\">To hide the row containing the column headers, select the <strong>Headerless<\/strong> check box.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-headerless.png\" rel=\"lightbox-93\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33130\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-headerless.png\" alt=\"\" width=\"784\" height=\"334\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-headerless.png 784w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-headerless-768x327.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-headerless-150x64.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-headerless-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-headerless-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/09\/table-layout-headerless-48x20.png 48w\" sizes=\"auto, (max-width: 784px) 100vw, 784px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Table Layout 4.5.4 (this release)\n<ul class=\"overview\">\n<li>Added a new Prefill button to automatically add all data columns to the layout.<\/li>\n<li>First 5 columns of data are no longer automatically added.\u00a0<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/table-layout\/table-layout-4-5-3\/\">Table Layout 4.5.3<\/a>\n<ul class=\"intro-text\">\n<li>If the table layout's data has tags or calculations that have a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/explorers-data\/#Digital_State_Sets\">digital state set<\/a> assigned, the matching digital state pair's <em>Name<\/em> appears instead of the <em>Value<\/em> if there is a match, in text labels or data labels on the table layout's columns.\u00a0<\/li>\n<\/ul>\n<\/li>\n<li class=\"intro-text\">Table Layout 4.5.0\n<ul class=\"intro-text\">\n<li>Optional configuration for updating a page variable with any nominated column from the table layout\u2019s dataset.<\/li>\n<\/ul>\n<\/li>\n<li class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/table-layout\/table-layout-4-4-1\/\">Table Layout 4.4.1<\/a><\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Table Layout is a component that arranges your data in a tabular format. You only need to configure the first row on the table and that will be repeated across each row in your dataset.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/table-layout\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":33039,"parent":1407,"menu_order":460,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[315,584,116,441,113,587],"class_list":["post-31334","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-asset-model","tag-hierarchy-query","tag-layouts","tag-status","tag-tables","tag-trigger","Version-4-5-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=31334"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31334\/revisions"}],"predecessor-version":[{"id":67058,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31334\/revisions\/67058"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/33039"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=31334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=31334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=31334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}