{"id":31612,"date":"2017-12-07T11:26:02","date_gmt":"2017-12-07T03:26:02","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=31612"},"modified":"2018-10-12T16:17:49","modified_gmt":"2018-10-12T08:17:49","slug":"status-tile-4-4-4","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-tile\/status-tile-4-4-4\/","title":{"rendered":"Status Tile (4.4.4)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.4.4-4.5.3 of P2 Explorer. For the latest, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-tile\/\">Status Tile<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">The Status Tile is a plain rectangular shape which conveys four key pieces of information:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Title<\/strong>: A title identifying what data the status tile is displaying<\/li>\n<li><strong>Value<\/strong>: The current value of the configured data<\/li>\n<li><strong>Description<\/strong>: A description supplying more detail on what data the tile is representing<\/li>\n<li><strong>Status<\/strong>: The colour of the tile, representing whether the status tile's value is below, above, or equal to the tile's defined limit<\/li>\n<\/ul>\n<p class=\"intro-text\">The status tile also has a tooltip showing the data that's been displayed, as well as its current value, and can also contain a hyperlink which you can configure to open a page, a URL, or a trend.<\/p>\n<p class=\"intro-text\">Typically, a whole set of related status tiles are grouped together, representing key overview information. If there is a configured hyperlink, the user can click on a status tile to get more detail.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Overview-2-1.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19704 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Overview-2-1.png\" width=\"944\" height=\"338\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Overview-2-1.png 944w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Overview-2-1-768x275.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Overview-2-1-150x54.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Overview-2-1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Overview-2-1-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Overview-2-1-48x17.png 48w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/a><\/p>\n<p class=\"left-bar-p2blue\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-the-status-displays\/#Status_Tiles\">Using the Status Tile<\/a> in display mode, Adding a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/styles\/#Status_Tile\">Status Tile style<\/a><\/p>\n<hr \/>\n<h2 class=\"page-subheading\">What is the Current Status?<\/h2>\n<p class=\"intro-text\">A user can tell immediately whether the value is over, under or equal to the defined limit, just by the colour of the status tile.<\/p>\n<p class=\"note\"><strong>Note<\/strong> that the colours here are for the base style; these may vary if a different style is used.<\/p>\n<table style=\"border: 2px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 10px; width: 25%;\"><strong>Value Under Limit<\/strong><\/td>\n<td style=\"padding-left: 10px; border-left: 1px solid #cccccc; width: 25%;\"><strong>Value Equal to Limit<\/strong><\/td>\n<td style=\"padding-left: 10px; border-left: 1px solid #cccccc; width: 25%;\"><strong>Value Over Limit<\/strong><\/td>\n<td style=\"padding-left: 10px; border-left: 1px solid #cccccc; width: 25%;\"><strong>Value Unknown<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px; width: 25%;\">The status tile is BLUE.<\/td>\n<td style=\"padding-left: 10px; border-left: 1px solid #cccccc; width: 25%;\">The status tile is GREEN.<\/td>\n<td style=\"padding-left: 10px; border-left: 1px solid #cccccc; width: 25%;\">The status tile is RED.<\/td>\n<td style=\"padding-left: 10px; border-left: 1px solid #cccccc; width: 25%;\">The status tile is GREY.<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 10px; width: 25%;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Below-Limit.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19713\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Below-Limit.png\" width=\"200\" height=\"151\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Below-Limit.png 264w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Below-Limit-150x113.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Below-Limit-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Below-Limit-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Below-Limit-48x36.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/td>\n<td style=\"padding-left: 10px; border-left: 1px solid #cccccc; width: 25%;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Equal-Limit.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19714\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Equal-Limit.png\" width=\"200\" height=\"151\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Equal-Limit.png 264w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Equal-Limit-150x113.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Equal-Limit-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Equal-Limit-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Equal-Limit-48x36.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/td>\n<td style=\"padding-left: 10px; border-left: 1px solid #cccccc; width: 25%;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Above-Limit.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19712\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Above-Limit.png\" width=\"200\" height=\"152\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Above-Limit.png 261w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Above-Limit-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Above-Limit-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Above-Limit-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-Above-Limit-48x36.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/td>\n<td style=\"padding-left: 10px; border-left: 1px solid #cccccc; width: 25%;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-No-Data.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19715\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-No-Data.png\" width=\"200\" height=\"152\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-No-Data.png 264w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-No-Data-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-No-Data-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-No-Data-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Gas-No-Data-48x37.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">In the example below, Gas Production Costs are below budget (value is below limit), while Oil and NGL both have costs above their respective budgets (value exceeds limit).<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Over-and-Under-1.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19710 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Over-and-Under-1-400x104.png\" width=\"400\" height=\"104\" \/><\/a><\/p>\n<p class=\"intro-text\">If there are no available values, the status tiles are coloured in grey.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Three-tiles-with-no-data-1.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-19709 size-medium alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Three-tiles-with-no-data-1-400x104.png\" width=\"400\" height=\"104\" \/><\/a><\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Status Tile Properties<\/h2>\n<p class=\"intro-text\">This section describes the properties of the Status Tile component.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 10px; width: 80%;\">\n<table>\n<tbody>\n<tr>\n<td style=\"width: 10%;\"><strong>Title<\/strong>:<\/td>\n<td style=\"width: 90%;\">Select a title for the status tile (see <a href=\"#Title_Value_Decimals_and_Limit\">Title, Values, Decimals and Limits<\/a>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Value<\/strong>:<\/td>\n<td>Select the status tile's value data (see <a href=\"#Title_Value_Decimals_and_Limit\">Title, Values, Decimals and Limits<\/a>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Decimals<\/strong>:<\/td>\n<td>Select the decimal places for the status tile's displayed value (see <a href=\"#Title_Value_Decimals_and_Limit\">Title, Values, Decimals and Limits<\/a>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Limit<\/strong>:<\/td>\n<td>Select the status tile's limit (see <a href=\"#Title_Value_Decimals_and_Limit\">Title, Values, Decimals and Limits<\/a>).<\/td>\n<\/tr>\n<tr>\n<td><strong>Description<\/strong>:<\/td>\n<td>Provide a meaningful description to supplement the title's information.<\/td>\n<\/tr>\n<tr>\n<td><strong>Link Action<\/strong>:<\/td>\n<td>The status tile incorporates an optional hyperlink feature. Depending on what type you select, there are different properties to configure. See <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Link Action and Variable Mapping<\/a> for details.<\/td>\n<\/tr>\n<tr>\n<td><em>Type<\/em><\/td>\n<td>Select the type of hyperlink you want:<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><strong>Open Page<\/strong> Specify a <em>Workspace Name, Page Name<\/em>.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><strong>Open Trend<\/strong> Specify a <em>Workspace Name, Trend Name<\/em>.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><strong>New Trend<\/strong> No further details are required; Explorer opens a new, blank trend when a user clicks this type of hyperlink.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><strong>Open URL<\/strong> Specify the URL. You can also specify a Header. Unless the address begins with <em>https<\/em> the URL opens in a new tab in your web browser, regardless of the selected <em>Tab Type<\/em>.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td><strong>--Select a Type--<\/strong> Select this if you choose not to have a hyperlink.<\/td>\n<\/tr>\n<tr>\n<td><em>Workspace Name\/URL<\/em><\/td>\n<td>For <em>Open Page<\/em> and <em>Open Trend<\/em> hyperlink types, specify in which workspace the page or trend exists; this is because page names\/trend names can be duplicated across different workspaces. For a <em>URL<\/em> hyperlink, specify a URL address; if the address starts with <em>http<\/em>, then it will open in a new browser tab; if the address starts with <em>https<\/em> the URL will open in Explorer.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>Trend Name\/Page Name\/Header<\/em><\/td>\n<td>For an <em>Open Page<\/em>\/ <em>Open Trend<\/em> hyperlink, specify which page\/trend to open. For a <em>URL<\/em> hyperlink, optionally specify a header.<\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td><em>Tab Type<\/em><\/td>\n<td>This specifies where the page, trend or URL is opened. For Explorer displays (trends and pages) the options are: <strong>New Explorer Tab<\/strong> and <strong>Same Explorer Tab<\/strong>. For URLs, the options are <strong>New Explorer Tab, Same Explorer Tab<\/strong> and <strong>New Browser Tab<\/strong>.<\/p>\n<p><strong>Note, for URLs<\/strong>: Unless the address begins with <em>https<\/em> the URL opens in a new tab in your web browser, regardless of the selected <em>Tab Type<\/em>.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em>Variable Mapping<\/em><\/td>\n<td>Use <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Variable Mapping<\/a> to pass variables from the current Explorer page to the page, trend or URL you are linking to.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>Click <strong>Add<\/strong> to add a new variable mapping.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>Each variable mapping needs a source (coming from the page you are on) and a target (for the trend\/ page\/ URL you are opening). The source and the target should have matching data types. See the tutorial for an example.<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>\n<table>\n<tbody>\n<tr>\n<td width=\"50\"><em>Source<\/em><\/td>\n<td>This can be a variable (such as a <a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box's<\/a> Selected Option, for example), or you can type in text or number (select <em>Variable, Text, Number, List, Entity, or Entities<\/em> as appropriate, from the drop-down list to the left of <em>Source<\/em>). You can also pass in a Yes\/No value or a datetime value.<\/td>\n<\/tr>\n<tr>\n<td><em>Target<\/em><\/td>\n<td>Type in the variable name for the target page\/ trend, or a parameter name for the target URL. This must be an accurate match (case-sensitive).\u00a0Read more about the names of common variables on <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-integration\/link-to-a-frameless-explorer-page\/#Variable_Parameters\">pages<\/a> and <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/#Variable_Parameters\">trends<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><em>Remove<\/em><\/td>\n<td>Click <strong>Remove<\/strong> to remove the variable mapping.\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>Style<\/strong>:<\/td>\n<td>You can change the style of the hyperlink font and alignment by selecting a different style from the drop-down list. If you are a Style Administrator, you can add a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/styles\/#Status_Tile\">Status Tile style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td style=\"width: 20%;\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Comprehensive-Reference.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19682 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Comprehensive-Reference.png\" width=\"339\" height=\"887\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Comprehensive-Reference.png 339w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Comprehensive-Reference-57x150.png 57w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Comprehensive-Reference-9x24.png 9w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Comprehensive-Reference-14x36.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/Status-Tile-Comprehensive-Reference-18x48.png 18w\" sizes=\"auto, (max-width: 339px) 100vw, 339px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2 class=\"page-subheading\">Title, Value, Decimals and Limit<\/h2>\n<p class=\"intro-text\">Configure the Title, Value, its Decimal places and a Limit, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a> for each limit in the property panel.<\/p>\n<p class=\"intro-text\">There are five separate data categories that you can choose from, for each of these properties: <em>Dataset, Attribute, Ad Hoc Calculation, Tag<\/em> or <em>Value<\/em>.<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorial: Status Tiles Allowing Entity Selections<\/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\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">In this tutorial, we're going to drop a status tile onto a page, configure it to use data, and then make two copies. The three status tiles will all use the same dataset for their respective values and limits, and we'll add a Hierarchy component so that the user can change the entity (region), controlling what is shown.<\/p>\n<p class=\"intro-text\">We'll add a hyperlink to the first tile, to open a new trend. This trend will show the <em>Oil Production<\/em> attribute of the selected entity.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Link Action and Variable Mapping<\/a><\/p>\n<p class=\"intro-text\">Watch the video below to see how the status tiles change in appearance as the regions are selected from the hierarchy. The colour changes are immediately apparent, as values and limits are update for the different periods.<\/p>\n<p class=\"left-bar\">Note how the user opens a new trend by clicking on the hyperlink on the first status tile.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_366685321\" class=\"video-js vjs-default-skin\" width=\"1003\" height=\"671\" controls preload=\"none\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/StatusTilesVideo.mp4\" type='video\/mp4' \/>\r\n\t\t\r\n\t\t\r\n\t<\/video>\r\n\t<!-- End Video.js -->\r\n\n<p class=\"intro-text\">The tutorial describes how to configure the status tiles shown in the video.<\/p>\n<p class=\"left-bar\">Refer to the <strong>Status Tiles Tutorial <\/strong>page in the <em>Tutorials<\/em> workspace, if you have access to this.<\/p>\n<p class=\"intro-text\">There are five steps in the tutorial:<\/p>\n<ul class=\"intro-text\">\n<li>Step 1. Prepare the new tutorial page in Grid Layout, and configure the layout.<\/li>\n<li>Step 2. Add a default value.<\/li>\n<li>Step 3. Add and configure a Hierarchy.<\/li>\n<li>Step 4. Add and configure a Status Tile with Hyperlink.<\/li>\n<li>Step 5. Make two copies of the status tile, and adjust the configuration of each.<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20957 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode.png\" width=\"878\" height=\"375\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode.png 878w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode-768x328.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode-150x64.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode-48x21.png 48w\" sizes=\"auto, (max-width: 878px) 100vw, 878px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Step 1. Prepare the Tutorial Page<\/p>\n<p class=\"left-bar\"><strong>Note: <\/strong>Before you start the tutorial, <a title=\"Preparing an Explorer page for Tutorials\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/preparing-an-explorer-studio-page-for-a-tutorial\/\">prepare a page in Studio<\/a>. Save it to your workspace (<em>My Workspace<\/em>), giving it a suitable name, such as <strong>Status Tiles Tutorial<\/strong>.<\/p>\n<p class=\"intro-text\">1. Configure the grid layout to have two columns and two rows. Allocate a <strong>Column Spacing<\/strong> and <strong>Row Spacing<\/strong> of <strong>30<\/strong>, each. Resize the first column to <strong>25*<\/strong> and the second to <strong>75*<\/strong>. Resize the first row to <strong>80*<\/strong> and the second to <strong>20*<\/strong>.<\/p>\n<p class=\"intro-text\">2. Drop a second <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a> onto the top right cell of the base grid layout. Give this two columns and three rows, with a <strong>Row Spacing<\/strong> of <strong>20<\/strong>.<\/p>\n<p class=\"intro-text\">This is how the page should look at this stage:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Status-Tiles-grid-Layout.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-21116\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Status-Tiles-grid-Layout.png\" width=\"900\" height=\"536\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Status-Tiles-grid-Layout.png 1370w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Status-Tiles-grid-Layout-768x457.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Status-Tiles-grid-Layout-150x89.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Status-Tiles-grid-Layout-1280x762.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Status-Tiles-grid-Layout-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Status-Tiles-grid-Layout-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Status-Tiles-grid-Layout-48x29.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"no-toc-heading\">Step 2. Update the selectedEntity Default Value<\/p>\n<p class=\"intro-text\">In this step we're going to assign a value to the <em>selectedEntity<\/em> page default.<\/p>\n<p class=\"left-bar\">Related: See how to add and configure a <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Value<\/a>.<\/p>\n<p class=\"intro-text\">1. Open the Default Values panel.<\/p>\n<p class=\"intro-text\">2. Type <em>Far North Coast<\/em> in the <em>selectedEntity<\/em> value text box.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Entity-Default.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20940 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Entity-Default.png\" width=\"356\" height=\"195\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Entity-Default.png 356w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Entity-Default-150x82.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Entity-Default-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Entity-Default-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Selected-Entity-Default-48x26.png 48w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"no-toc-heading\">Step 3. Drop a Hierarchy onto a grid cell<\/p>\n<p class=\"left-bar\">Related: <a title=\"Hierarchy\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy\/\">Hierarchy<\/a>.<\/p>\n<p class=\"intro-text\">1. Drop a Hierarchy component onto the top left grid cell of the base grid layout, as shown. The Hierarchy component is in the Hierarchy <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1865 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchy.png\" alt=\"timeicon_sm\" width=\"18\" height=\"17\" \/> group.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-hierarchy.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20942 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-hierarchy.png\" width=\"648\" height=\"420\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-hierarchy.png 648w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-hierarchy-150x97.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-hierarchy-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-hierarchy-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Drop-a-hierarchy-48x31.png 48w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Choose a hierarchy from the drop-down list: <em>P2 Corporate<\/em>.<\/p>\n<p class=\"note\"><strong>Note:<\/strong> The default <strong>Selected Entity<\/strong> for the hierarchy component is <em>selectedEntity<\/em>, so this will use the selectedEntity value you defined in the previous step: <em>Far North Coast<\/em>.<\/p>\n<p class=\"no-toc-heading\">Step 4. Add and configure a status tile<\/p>\n<p class=\"intro-text\">1. Drop a Status Tile onto the top left grid cell of the secondary grid layout, as shown. The Status Tile is in the Display <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\" \/> group.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-status-tile-2.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20946 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-status-tile-2.png\" width=\"1044\" height=\"357\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-status-tile-2.png 1044w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-status-tile-2-768x263.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-status-tile-2-150x51.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-status-tile-2-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-status-tile-2-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/drop-a-status-tile-2-48x16.png 48w\" sizes=\"auto, (max-width: 1044px) 100vw, 1044px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Configure the status tile.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-the-status-tile.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20948 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-the-status-tile.png\" width=\"355\" height=\"789\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-the-status-tile.png 355w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-the-status-tile-67x150.png 67w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-the-status-tile-11x24.png 11w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-the-status-tile-16x36.png 16w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-the-status-tile-22x48.png 22w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"750\">\n<table>\n<tbody>\n<tr>\n<td><strong>a) Title<\/strong>: Click the drop-down list, then use the Data Selector to select <a title=\"Using Value Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Value_Data\">Value Data<\/a>. Type in: <em>Oil Costs<\/em>.<\/td>\n<\/tr>\n<tr>\n<td><strong>b) Value<\/strong>: Click the drop-down list, then use the Data Selector to select <a title=\"Using Dataset Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\">Dataset Data<\/a>.<\/p>\n<ul style=\"columns: 2;\">\n<li><strong>Dataset Query<\/strong>: ProductionDataByLevel<\/li>\n<li><strong>Dataset Parameters<\/strong>, endDate: select the <em>endTime<\/em> variable, level: type <em>Region<\/em> as a fixed text value, startDate: select the <em>startTime<\/em> variable.<\/li>\n<li><strong>Filter Column<\/strong>: Select <em>Asset<\/em> column<\/li>\n<li><strong>Filter Value<\/strong>: Type in the <em>selectedEntity<\/em> variable (controlled by the Hierarchy component selection)<\/li>\n<li><strong>Value Column<\/strong>: Select <em>OilActualSum<\/em> column<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>c) Decimals<\/strong>: Click the drop-down list, then use the Data Selector to select <a title=\"Using Value Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Value_Data\">Value Data<\/a>. Type in: 0.<\/td>\n<\/tr>\n<tr>\n<td><strong>b) Limit<\/strong>: Click the drop-down list, then use the Data Selector to select <a title=\"Using Dataset Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\">Dataset Data<\/a>.<\/p>\n<ul style=\"columns: 2;\">\n<li><strong>Dataset Query<\/strong>: ProductionDataByLevel<\/li>\n<li><strong>Dataset Parameters<\/strong>, endDate: Select the <em>endTime<\/em> variable, level: type <em>Region<\/em> as a fixed text value, startDate: select the <em>startTime<\/em> variable.<\/li>\n<li><strong>Filter Column<\/strong>: Select <em>Asset<\/em> column<\/li>\n<li><strong>Filter Value<\/strong>: Select <em>selectedEntity<\/em> variable (controlled by the Hierarchy component selection)<\/li>\n<li><strong>Value Column<\/strong>: Select <em>OilPlannedSum<\/em> column<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>e) Description<\/strong>: Type in the following description: <em>Oil Actual VS Planned<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong>f) Link Action<\/strong>: Configure a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">link<\/a> to a new trend:<\/p>\n<ul style=\"columns: 2;\">\n<li><strong>Type<\/strong>: Select <em>New Trend<\/em> from the drop-down list<\/li>\n<li><strong>Tab Type<\/strong>: Select <em>Options<\/em> from the first drop-down list, and <em>New Explorer Tab<\/em> from the second<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>g) Variable Mapping<\/strong>: Add <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Variable Mapping<\/a> (<strong>*<\/strong> see note below):<\/p>\n<ul style=\"columns: 2;\">\n<li>Click <strong>Add<\/strong> to add the first variable:<\/li>\n<li>Select <em>Variable<\/em> from the first drop-down list<\/li>\n<li><strong>Source<\/strong>: Select <em>selectedEntity<\/em> from the drop-down list<\/li>\n<li><strong>Target<\/strong>: Type <em>selectedEntities<\/em>.<\/li>\n<\/ul>\n<ul style=\"columns: 2;\">\n<li>Click <strong>Add<\/strong> to add the second variable:<\/li>\n<li>Select <em>Text<\/em> from the first drop-down list<\/li>\n<li><strong>Source<\/strong>: Type <em>Oil Production<\/em>.<\/li>\n<li><strong>Target<\/strong>: Type <em>attributes<\/em>.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>h) Style<\/strong>: Select the <em>Tutorial Style 1<\/em> from the drop-down list. Or select a different style, if this one is unavailable.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"note\"><strong>* Note:<\/strong> Read more about parameters that can be used when opening a trend, in this <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/#Variable_Parameters\">Trend URL parameters<\/a> topic. These parameters can be defined as the <em>Target<\/em> in <em>Variable Mapping<\/em><\/p>\n<p class=\"no-toc-heading\">Try out the New Component<\/p>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li class=\"intro-text\"><em>Far North Coast<\/em> is already selected on the <strong>Hierarchy<\/strong>, because of the selectedEntity default variable.<\/li>\n<\/ul>\n<p class=\"note\"><strong>Note<\/strong> how the Status Tile shows a value. It is coloured in blue, indicating the value (oil costs) is lower than the planned amount for this period (colours depend on the status tile's style: for the style used in this tutorial, green indicates equal values, blue indicates a value under the limit, and red indicates a value that is over the limit).<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20957 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode.png\" width=\"878\" height=\"375\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode.png 878w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode-768x328.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode-150x64.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode-48x21.png 48w\" sizes=\"auto, (max-width: 878px) 100vw, 878px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Step 5. Make two copies of the status tile<\/p>\n<p class=\"intro-text\">Status tiles work well in sets, so we're going to add two more. We want these to use the same dataset query, parameter and filter value as the first one. The only difference is that one will use WaterActualSum and WaterPlannedSum, while the other will use GasActualSum and GasPlannedSum for their respective values and limits. We'll also change the <strong>Title<\/strong> and <strong>Description<\/strong> of each.<\/p>\n<p class=\"left-bar\">Read more: <a title=\"Cut\/Copy\/Paste\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/#CutCopyPaste\">Cut\/Copy\/Paste<\/a><\/p>\n<p class=\"intro-text\">1. Copy (Ctrl+C) the original status tile.<\/p>\n<p class=\"intro-text\">2. First copy: Click the grid cell directly below the original status tile and Paste (Ctrl+V).<\/p>\n<p class=\"intro-text\">3. Second copy: Click the grid cell directly below the new status tile and Paste (Ctrl+V).<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Copy-and-paste-status-tiles.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20962 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Copy-and-paste-status-tiles.png\" width=\"872\" height=\"696\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Copy-and-paste-status-tiles.png 872w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Copy-and-paste-status-tiles-768x613.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Copy-and-paste-status-tiles-150x120.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Copy-and-paste-status-tiles-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Copy-and-paste-status-tiles-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Copy-and-paste-status-tiles-48x38.png 48w\" sizes=\"auto, (max-width: 872px) 100vw, 872px\" \/><\/a><\/p>\n<p class=\"intro-text\">4. Adjust the first copied status tile to show Water Costs:<\/p>\n<ul class=\"intro-text\">\n<li>a. <strong>Title<\/strong>: Click the drop-down list to open. Type <em>Water Costs<\/em>.<\/li>\n<li>b. <strong>Value<\/strong>: Click the drop-down list to open. Select <em>WaterActualSum <\/em>from the <strong>Value Column<\/strong> drop-down list.<\/li>\n<li>c. <strong>Limit<\/strong>: Click the drop-down list to open. Select <em>WaterPlannedSum<\/em> from the <strong>Value Column<\/strong> drop-down list.<\/li>\n<li>d. <strong>Description<\/strong>: Type <em>Water Actual VS Planned<\/em> in the description text.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Water-Status-Tile.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20965 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Water-Status-Tile.png\" width=\"359\" height=\"347\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Water-Status-Tile.png 359w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Water-Status-Tile-150x145.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Water-Status-Tile-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Water-Status-Tile-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Water-Status-Tile-48x46.png 48w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/a><\/p>\n<p class=\"intro-text\">5. Adjust the second copied status tile to show Gas Costs:<\/p>\n<ul class=\"intro-text\">\n<li>a. <strong>Title<\/strong>: Click the drop-down list to open. Type <em>Gas Costs<\/em>.<\/li>\n<li>b. <strong>Value<\/strong>: Click the drop-down list to open. Select <em>GasActualSum <\/em>from the <strong>Value Column<\/strong> drop-down list.<\/li>\n<li>c. <strong>Limit<\/strong>: Click the drop-down list to open. Select <em>GasPlannedSum<\/em> from the <strong>Value Column<\/strong> drop-down list.<\/li>\n<li>d. <strong>Description<\/strong>: Type <em>Gas Actual VS Planned<\/em> in the description text.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Gas-Status-Tile.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20964 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Gas-Status-Tile.png\" width=\"357\" height=\"341\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Gas-Status-Tile.png 357w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Gas-Status-Tile-150x143.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Gas-Status-Tile-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Gas-Status-Tile-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Gas-Status-Tile-48x46.png 48w\" sizes=\"auto, (max-width: 357px) 100vw, 357px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Try out the New Component<\/p>\n<ul>\n<li class=\"intro-text\">Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li class=\"intro-text\">Select some of the other regions from the <strong>hierarchy,<\/strong> such as: <em>Central West, Far North <\/em>and <em>Barossa<\/em>.<\/li>\n<li class=\"intro-text\">Click on a region that has no data, such as <em>Murray.<\/em> The status tiles here are coloured in grey.<\/li>\n<li class=\"intro-text\">Now click on the first status tile to open the new trend. Note how the <em>Oil Production attribute<\/em> of the <em>selected entity<\/em> displays in the trend.<\/li>\n<\/ul>\n<p class=\"note\"><strong>Note<\/strong> how the Status Tiles all show a value. Note the colours indicating whether production costs are equal to, above or below planned costs for Oil, Water, or Gas. Hover over each tile to get the full value, including decimals values (if any).<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Select-regions-in-run-mode.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20966 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Select-regions-in-run-mode.png\" width=\"851\" height=\"645\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Select-regions-in-run-mode.png 851w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Select-regions-in-run-mode-768x582.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Select-regions-in-run-mode-150x114.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Select-regions-in-run-mode-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Select-regions-in-run-mode-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Select-regions-in-run-mode-48x36.png 48w\" sizes=\"auto, (max-width: 851px) 100vw, 851px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Status Tile displays a value, and is coloured according to the relationship between value and a defined limit. It also has a title and a description, and can include a hyperlink. This article describes how to configure a Status Tile in versions 4.4.4-4.5.3 of P2 Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-tile\/status-tile-4-4-4\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":31620,"parent":41526,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[441,521],"class_list":["post-31612","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-status","tag-tile","Version-4-5-0","Version-4-5-1","Version-4-5-2","Version-4-5-3","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31612","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=31612"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/31612\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41526"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/31620"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=31612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=31612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=31612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}