{"id":41526,"date":"2018-09-28T09:55:58","date_gmt":"2018-09-28T01:55:58","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=41526"},"modified":"2024-10-23T14:21:01","modified_gmt":"2024-10-23T06:21:01","slug":"status-tile","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-tile\/","title":{"rendered":"Status Tile"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.6.2 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 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 being displayed, as well as its current value, and can also contain a <em>link action<\/em> which you can configure to open a page, URL, or trend, or to set variables on the current page.<\/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 link, 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\/explorer-styles\/styling-displays\/\">Status Tile style<\/a><\/p>\n<p>&nbsp;<\/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\">Note: The colours here are for the default style; these may vary if a different style is used.<\/p>\n<table style=\"border: 1px 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<p>&nbsp;<\/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, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Value<\/strong>:<\/td>\n<td>Select the status tile's value data, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/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, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Limit<\/strong>:<\/td>\n<td>Select the status tile's limit, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/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> and <strong>Variable Mapping<\/strong>:<\/td>\n<td>The status tile incorporates a <em>link action<\/em> feature, with <em>variable mapping<\/em> to pass variables from the page. Depending on what type you select, there are different properties to configure. For a full description of these options, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Link Action, Variables, and Variable Mapping<\/a>.<br \/>\nNote that for the <em>Set Variables<\/em> Link Action type, <em>Variables<\/em> replaces <em>Variable Mapping<\/em>.<\/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\/explorer-styles\/styling-displays\/\">Status Tile style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td style=\"width: 20%;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/status-tile-454-1.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31729 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/status-tile-454-1.png\" alt=\"\" width=\"331\" height=\"615\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/status-tile-454-1.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/status-tile-454-1-81x150.png 81w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/status-tile-454-1-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/status-tile-454-1-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/status-tile-454-1-26x48.png 26w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/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\/link-action-and-variable-mapping\/\">Link Action, Variables, and Variable Mapping<\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorials<\/h2>\n<h3>Tutorial: Status Tiles Allowing Entity Selections<\/h3>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\" data-slimstat-tracking=\"false\" data-slimstat-type=\"2\" data-slimstat-clicked=\"false\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">In this tutorial, we'll drag and 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 link action 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-blue\"><i class=\"fa fa-eye fa-2x fa-pull-left\"><\/i> 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. Note how the user opens a new trend by clicking on the first status tile. The tutorial describes how to configure the status tiles shown in this video.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_1167082077\" class=\"video-js vjs-default-skin\" width=\"1003\" height=\"671\" controls preload=\"auto\" 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\">\nThere 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 a Link Action to open a new trend.<\/li>\n<li>Step 5. Make two copies of the status tile, and adjust the configuration of each.<\/li>\n<\/ul>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the <em>Sample Data <\/em>table and datasets that can be optionally made available during 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<p class=\"no-toc-heading\">Step 1. Prepare the Tutorial Page<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41541 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page.png\" alt=\"\" width=\"778\" height=\"111\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page.png 778w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page-768x110.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page-150x21.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page-48x7.png 48w\" sizes=\"auto, (max-width: 778px) 100vw, 778px\" \/><\/a><\/p>\n<p class=\"intro-text\">Before you start, click the <strong>New Page<\/strong> button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n<ul class=\"intro-text\">\n<li>Configure the grid layout to have two columns and two rows.<\/li>\n<li>Allocate a <strong>Column Spacing<\/strong> and <strong>Row Spacing<\/strong> of <strong>30<\/strong>, each.<\/li>\n<li>Resize the first column to <strong>25*<\/strong> and the second to <strong>75*<\/strong>.<\/li>\n<li>Resize the first row to <strong>80*<\/strong> and the second to <strong>20*<\/strong>.<\/li>\n<\/ul>\n<p class=\"intro-text\">Drag and drop a second Grid Layout component onto the top right cell of the 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 class=\"left-bar\">Related: <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a> tutorial<\/p>\n<p>&nbsp;<\/p>\n<p class=\"no-toc-heading\">Step 2. Update the <em>selectedEntity<\/em> 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=\"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\/09\/statustile-tut-2.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31744\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-2.png\" alt=\"\" width=\"1273\" height=\"604\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-2.png 1273w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-2-768x364.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-2-150x71.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-2-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-2-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-2-48x23.png 48w\" sizes=\"auto, (max-width: 1273px) 100vw, 1273px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related: <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"no-toc-heading\">Step 3. Add a Hierarchy<\/p>\n<p class=\"intro-text\">1. Drag and 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=\"left-bar\">Related: <a title=\"Hierarchy\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy\/\">Hierarchy<\/a><\/p>\n<p>&nbsp;<\/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 as follows:<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"250\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-4.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-31745\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-4.png\" alt=\"\" width=\"321\" height=\"638\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-4.png 321w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-4-75x150.png 75w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-4-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-4-18x36.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/09\/statustile-tut-4-24x48.png 24w\" sizes=\"auto, (max-width: 321px) 100vw, 321px\" \/><\/a><\/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>:<\/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<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/trends\/link-to-a-trend-via-a-url\/#Variable_Parameters\">Trend URL parameters<\/a> \u2014 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 <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<li class=\"intro-text\"><em>Far North Coast<\/em> is already selected on the <strong>Hierarchy<\/strong>, because of the <em>selectedEntity<\/em> default variable.<\/li>\n<\/ul>\n<p class=\"note\">Note 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). This is what your page should look like.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Tutorial-1-in-Preview-mode.png\" rel=\"lightbox-14\"><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. Copy 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=\"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 class=\"left-bar\">Related: <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><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Copy-and-paste-status-tiles.png\" rel=\"lightbox-15\"><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<p class=\"intro-text\">a. <strong>Title<\/strong>: Click the drop-down list to open. Type <em>Water Costs<\/em>.<br \/>\nb. <strong>Value<\/strong>: Click the drop-down list to open. Select <em>WaterActualSum <\/em>from the <strong>Value Column<\/strong> drop-down list.<br \/>\nc. <strong>Limit<\/strong>: Click the drop-down list to open. Select <em>WaterPlannedSum<\/em> from the <strong>Value Column<\/strong> drop-down list.<br \/>\nd. <strong>Description<\/strong>: Type <em>Water Actual VS Planned<\/em> in the description text.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Water-Status-Tile.png\" rel=\"lightbox-16\"><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<p class=\"intro-text\">a. <strong>Title<\/strong>: Click the drop-down list to open. Type <em>Gas Costs<\/em>.<br \/>\nb. <strong>Value<\/strong>: Click the drop-down list to open. Select <em>GasActualSum <\/em>from the <strong>Value Column<\/strong> drop-down list.<br \/>\nc. <strong>Limit<\/strong>: Click the drop-down list to open. Select <em>GasPlannedSum<\/em> from the <strong>Value Column<\/strong> drop-down list.<br \/>\nd. <strong>Description<\/strong>: Type <em>Gas Actual VS Planned<\/em> in the description text.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/10\/Configure-Gas-Status-Tile.png\" rel=\"lightbox-17\"><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 <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<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\">Note 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-18\"><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<h3>Tutorial: Status Tiles with Set Variables Link Action<\/h3>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\" data-slimstat-tracking=\"false\" data-slimstat-type=\"2\" data-slimstat-clicked=\"false\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">In this tutorial, we'll configure four status tiles to each represent a different Downtime Reason. Each status tile will use data from the selected month for <em>Values<\/em>, and data from the preceding month for <em>Limits<\/em>, for their respective downtime reasons. Each status tile will represent a different Downtime Reason.<\/p>\n<p class=\"intro-text\">We'll then configure each of the status tiles to have a Link Action type of <em>Set Variables<\/em>, setting a single variable, and then use the variable as a Dataset Parameter for the Chart below.<\/p>\n<p class=\"left-bar-blue\"><i class=\"fa fa-eye fa-2x fa-pull-left\"><\/i> Watch the video below to see how the status tiles change when a different month is selected, then watch how the chart below changes when the different status tiles are clicked. The tutorial describes how to configure the status tiles and the chart shown in this video.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_2001792743\" class=\"video-js vjs-default-skin\" width=\"1000\" height=\"570\" controls preload=\"auto\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/Tut2Video.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\">\nThere are seven steps in the tutorial:<\/p>\n<ul class=\"intro-text\">\n<li>Step 1. Prepare the new tutorial page in Precision Layout, and configure with Grid Layout components.<\/li>\n<li>Step 2. Add a default value for the text variable that each status tile will set: <em>DowntimeReason<\/em>.<\/li>\n<li>Step 3. Add two <em>Relative Time<\/em> triggers, for setting start and end dates of the preceding month.<\/li>\n<li>Step 4. Add a Month Picker and a Text Label.<\/li>\n<li>Step 5. Add and configure a Status Tile.<\/li>\n<li>Step 6. Make three copies of the status tile, and adjust the configuration of each.<\/li>\n<li>Step 7. Add and configure a chart.<\/li>\n<\/ul>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the <em>Sample Data <\/em>table and datasets that can be optionally made available during 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<p class=\"left-bar-blue\"><i class=\"fa fa-book fa-2x fa-pull-left\"><\/i> Read <a href=\"#Supplementary_Dataset_Query_Syntax\">Supplementary: Dataset Query Syntax<\/a> to see the syntax for two dataset queries used in this tutorial.<\/p>\n<p class=\"no-toc-heading\">Step 1. Prepare the Tutorial Page<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41541 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page.png\" alt=\"\" width=\"778\" height=\"111\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page.png 778w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page-768x110.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page-150x21.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/New-page-48x7.png 48w\" sizes=\"auto, (max-width: 778px) 100vw, 778px\" \/><\/a><\/p>\n<p class=\"intro-text\">Before you start, click the <strong>New Page<\/strong> button on the Home tab of the ribbon. Choose the Precision layout.<\/p>\n<p class=\"intro-text\">Now drag a Grid Layout component onto the page, and resize so that it fits the width of the page, approximately.<\/p>\n<ul class=\"intro-text\">\n<li>Configure the grid layout to have three rows.<\/li>\n<li>Allocate a <strong>Row Spacing<\/strong> of <strong>10<\/strong>.<\/li>\n<li>Resize the first row to <strong>40*<\/strong>, the second to <strong>10*<\/strong>, and the third to <strong>50*<\/strong>.<\/li>\n<\/ul>\n<p class=\"intro-text\">Drag and drop a second Grid Layout component onto the top row of the first Grid Layout. Give this four columns, with a <strong>Column Spacing<\/strong> of <strong>1<\/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\/2018\/09\/Grid-layouts-on-page-1.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41542 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layouts-on-page-1.png\" alt=\"\" width=\"939\" height=\"744\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layouts-on-page-1.png 939w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layouts-on-page-1-768x609.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layouts-on-page-1-150x119.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layouts-on-page-1-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layouts-on-page-1-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Grid-layouts-on-page-1-48x38.png 48w\" sizes=\"auto, (max-width: 939px) 100vw, 939px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related: <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a> tutorial<\/p>\n<p>&nbsp;<\/p>\n<p class=\"no-toc-heading\">Step 2. Add a Default Value<\/p>\n<p class=\"intro-text\">In this step we're going to add a default value for the text variable that each status tile will set: <em>DowntimeReason<\/em>.<\/p>\n<p class=\"intro-text\">1. Open the Default Values panel, by clicking <strong>Defaults<\/strong> on the Studio ribbon tab.<\/p>\n<p class=\"intro-text\">2. Click <strong>Add<\/strong>.<\/p>\n<p class=\"intro-text\">3. Configure the new default.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Variable Name<\/strong>: DowntimeReason<\/li>\n<li><strong>Drop-down for data type<\/strong>: Text<\/li>\n<li><strong>Text<\/strong>: Pump at End of Life<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-new-default-value-3.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41549 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-new-default-value-3.png\" alt=\"\" width=\"1249\" height=\"759\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-new-default-value-3.png 1249w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-new-default-value-3-768x467.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-new-default-value-3-150x91.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-new-default-value-3-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-new-default-value-3-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-new-default-value-3-48x29.png 48w\" sizes=\"auto, (max-width: 1249px) 100vw, 1249px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related: <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<p class=\"no-toc-heading\">Step 3. Add two <em>Relative Time<\/em> triggers<\/p>\n<p class=\"intro-text\">In this step, we're going to add two <em>Relative Time<\/em> triggers, for setting start and end dates of the preceding month. When the month picker has been added, the page startTime and endTime variables will be one month apart, so we'll use these, respectively, as <strong>Input Time<\/strong> to the two Relative Time triggers<\/p>\n<p class=\"intro-text\">1. Open the Triggers panel, by clicking <strong>Triggers<\/strong> on the Studio ribbon tab.<\/p>\n<p class=\"intro-text\">2. Click <strong>Add<\/strong> twice, next to <strong>Relative Time<\/strong>.<\/p>\n<p class=\"intro-text\">3. Configure the first Relative Time trigger.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Trigger Title<\/strong>: PreviousMonthStart<\/li>\n<li><strong>Input Time<\/strong>: startTime<\/li>\n<li><strong>Time Difference<\/strong>: 30 (Days)<\/li>\n<li><strong>Input Time<\/strong>: Before<\/li>\n<li><strong>Input Time<\/strong>: startTimeLessOneMonth<\/li>\n<\/ul>\n<p class=\"intro-text\">4. Configure the second Relative Time trigger.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Trigger Title<\/strong>: PreviousMonthEnd<\/li>\n<li><strong>Input Time<\/strong>: endTime<\/li>\n<li><strong>Time Difference<\/strong>: 30 (Days)<\/li>\n<li><strong>Input Time<\/strong>: Before<\/li>\n<li><strong>Input Time<\/strong>: endTimeLessOneMonth<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-two-relative-time-triggers.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41550 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-two-relative-time-triggers.png\" alt=\"\" width=\"1249\" height=\"834\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-two-relative-time-triggers.png 1249w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-two-relative-time-triggers-768x513.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-two-relative-time-triggers-150x100.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-two-relative-time-triggers-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-two-relative-time-triggers-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-two-relative-time-triggers-48x32.png 48w\" sizes=\"auto, (max-width: 1249px) 100vw, 1249px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related: <a title=\"Relative Time\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/triggers\/relative-time\/\">Relative Time Trigger<\/a><\/p>\n<p class=\"no-toc-heading\">Step 4. Add a Month Picker and Text Label<\/p>\n<p class=\"intro-text\">1. Drag a Month Picker component onto the top left corner of the page, and enlarge it slightly by clicking and dragging the corners.<\/p>\n<p class=\"intro-text\">2. Drag a Text Label component onto the second row of Grid 1.<\/p>\n<p class=\"intro-text\">3. Configure the first Text label.<\/p>\n<ul class=\"intro-text\">\n<li><strong>Content<\/strong>: Daily downtime hours for downtime reason: [click <strong>Add Data<\/strong> and add the <em>DowntimeReason<\/em> Text variable] for month ending [click <strong>Add Data<\/strong> and add the <em>endTime<\/em> Datetime variable]<\/li>\n<li><strong>Style<\/strong>: choose a title style if there is an available one, such as <em>Page Subtitle<\/em><\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Month-Picker-and-Text-Label-1-1.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41558 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Month-Picker-and-Text-Label-1-1.png\" alt=\"\" width=\"972\" height=\"763\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Month-Picker-and-Text-Label-1-1.png 972w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Month-Picker-and-Text-Label-1-1-768x603.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Month-Picker-and-Text-Label-1-1-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Month-Picker-and-Text-Label-1-1-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Month-Picker-and-Text-Label-1-1-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Month-Picker-and-Text-Label-1-1-48x38.png 48w\" sizes=\"auto, (max-width: 972px) 100vw, 972px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related: <a title=\"Month Picker tutorial\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/month-picker\/\">Month Picker<\/a>, <a title=\"Text Label tutorial\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"no-toc-heading\">Step 5. Add and Configure a Status Tile<\/p>\n<p class=\"intro-text\">1. Drop a Status Tile onto the leftmost 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\/2018\/09\/STatus-Tile-1.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41561 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/STatus-Tile-1.png\" alt=\"\" width=\"734\" height=\"610\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/STatus-Tile-1.png 734w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/STatus-Tile-1-150x125.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/STatus-Tile-1-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/STatus-Tile-1-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/STatus-Tile-1-48x40.png 48w\" sizes=\"auto, (max-width: 734px) 100vw, 734px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Configure the status tile as follows:<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"250\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-status-tile-2.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41625 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-status-tile-2.png\" alt=\"\" width=\"368\" height=\"784\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-status-tile-2.png 368w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-status-tile-2-70x150.png 70w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-status-tile-2-11x24.png 11w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-status-tile-2-17x36.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Configure-status-tile-2-23x48.png 23w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/a><\/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>No Truck<\/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>: OilDowntimeByReasonMonthly<\/li>\n<li><strong>Value Column<\/strong>: Select <em>SumDowntimeHours<\/em> column<\/li>\n<li><strong>Dataset Parameters<\/strong> Downtime Reason: type <em>No Truck<\/em>, EndDate: select <em>endTime<\/em> variable, startDate: select the <em>startTime<\/em> variable.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<p><!--\n\n\n<tr>\n                            \n\n\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Set-Dataset-Data-1.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41567\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Set-Dataset-Data-1.png\" alt=\"\" width=\"400\" height=\"357\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Set-Dataset-Data-1.png 511w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Set-Dataset-Data-1-150x134.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Set-Dataset-Data-1-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Set-Dataset-Data-1-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Set-Dataset-Data-1-48x43.png 48w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/td>\n\n\n\n                        <\/tr>\n\n\n--><\/p>\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>: OilDowntimeByReasonMonthly<\/li>\n<li><strong>Value Column<\/strong>: Select <em>SumDowntimeHours<\/em> column<\/li>\n<li><strong>Dataset Parameters<\/strong> Downtime Reason: type <em>No Truck<\/em>, EndDate: select <em>endTimeLessOneMonth<\/em> variable, startDate: select the <em>startTimeLessOneMonth<\/em> variable.<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><strong>e) Description<\/strong>: Type in the following description: <em>Monthly Downtime Hours<\/em><\/td>\n<\/tr>\n<tr>\n<td><strong>f) Link Action<\/strong>: Select <em>Set Variables<\/em>:<\/td>\n<\/tr>\n<tr>\n<td><strong>g) Variables <\/strong> <!--\n\n\n<ul style=\"columns: 2;\">--><\/p>\n<ul>\n<li>Click <strong>Add<\/strong> to add a variable:<\/li>\n<li>Select <em>Text<\/em> from the first drop-down list<\/li>\n<li><strong>Source<\/strong>: Type <em>No Truck<\/em>.<\/li>\n<li><strong>Target<\/strong>: Select <em>DowntimeReason<\/em> from the drop-down list<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Step 6. Copy the Status Tile<\/p>\n<p class=\"intro-text\">We're going to add three more status tiles, each representing a different Downtime Reason. We want these to use the same dataset query, value column and parameters (except for the different downtime reason) as the first one. We'll also change the <strong>Title<\/strong> of each one.<\/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 next to the status tile and Paste (Ctrl+V).<\/p>\n<p class=\"intro-text\">3. Second copy: Click the next grid cell to the right and Paste (Ctrl+V).<\/p>\n<p class=\"intro-text\">4. Third copy: Click the next grid cell to the right and Paste (Ctrl+V).<\/p>\n<p class=\"left-bar\">Related: <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><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Steps-one-to-four-1.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41582 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Steps-one-to-four-1.png\" alt=\"\" width=\"1316\" height=\"314\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Steps-one-to-four-1.png 1316w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Steps-one-to-four-1-768x183.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Steps-one-to-four-1-150x36.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Steps-one-to-four-1-1280x305.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Steps-one-to-four-1-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Steps-one-to-four-1-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Steps-one-to-four-1-48x11.png 48w\" sizes=\"auto, (max-width: 1316px) 100vw, 1316px\" \/><\/a><\/p>\n<p class=\"intro-text\">5. Adjust the first copied status tile to use 'Production not required' downtime reason:<\/p>\n<p class=\"intro-text\">a. <strong>Title<\/strong>: Click the drop-down list to open. Type <em>Production not required<\/em>.<br \/>\nb. <strong>Value<\/strong>: Click the drop-down list to open. Type <em>Production not required <\/em>in the <strong>DowntimeReason<\/strong> Dataset Parameter.<br \/>\nc. <strong>Limit<\/strong>: Click the drop-down list to open. Type <em>Production not required <\/em>in the <strong>DowntimeReason<\/strong> Dataset Parameter.<br \/>\nd. <strong>Link Action<\/strong>: Type <em>Production not required <\/em>in the variable's <strong>Source<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Production-Not-Required-2.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41576 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Production-Not-Required-2.png\" alt=\"\" width=\"370\" height=\"574\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Production-Not-Required-2.png 370w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Production-Not-Required-2-97x150.png 97w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Production-Not-Required-2-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Production-Not-Required-2-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Production-Not-Required-2-31x48.png 31w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/a><\/p>\n<p class=\"intro-text\">6. Adjust the first copied status tile to use 'Pump at end of life' downtime reason:<\/p>\n<p class=\"intro-text\">a. <strong>Title<\/strong>: Click the drop-down list to open. Type <em>Pump at end of life<\/em>.<br \/>\nb. <strong>Value<\/strong>: Click the drop-down list to open. Type <em>Pump at end of life <\/em>in the <strong>DowntimeReason<\/strong> Dataset Parameter.<br \/>\nc. <strong>Limit<\/strong>: Click the drop-down list to open. Type <em>Pump at end of life <\/em>in the <strong>DowntimeReason<\/strong> Dataset Parameter.<br \/>\nd. <strong>Link Action<\/strong>: Type <em>Pump at end of life <\/em>in the variable's <strong>Source<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Pump-at-end-of-life-1.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41577 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Pump-at-end-of-life-1.png\" alt=\"\" width=\"353\" height=\"565\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Pump-at-end-of-life-1.png 353w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Pump-at-end-of-life-1-94x150.png 94w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Pump-at-end-of-life-1-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Pump-at-end-of-life-1-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Pump-at-end-of-life-1-30x48.png 30w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/a><\/p>\n<p class=\"intro-text\">7. Adjust the first copied status tile to use 'Rust Issues' downtime reason:<\/p>\n<p class=\"intro-text\">a. <strong>Title<\/strong>: Click the drop-down list to open. Type <em>Rust Issues<\/em>.<br \/>\nb. <strong>Value<\/strong>: Click the drop-down list to open. Type <em>Rust Issues <\/em>in the <strong>DowntimeReason<\/strong> Dataset Parameter.<br \/>\nc. <strong>Limit<\/strong>: Click the drop-down list to open. Type <em>Rust Issues <\/em>in the <strong>DowntimeReason<\/strong> Dataset Parameter.<br \/>\nd. <strong>Link Action<\/strong>: Type <em>Rust Issues <\/em>in the variable's <strong>Source<\/strong>.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Rust-Issues-1.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41578 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Rust-Issues-1.png\" alt=\"\" width=\"357\" height=\"582\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Rust-Issues-1.png 357w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Rust-Issues-1-92x150.png 92w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Rust-Issues-1-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Rust-Issues-1-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Rust-Issues-1-29x48.png 29w\" sizes=\"auto, (max-width: 357px) 100vw, 357px\" \/><\/a><\/p>\n<p class=\"no-toc-heading\">Step 7. Add and configure a chart<\/p>\n<p class=\"intro-text\">In this step, we're going to add a chart that shows daily downtime hours for the month. The chart's dataset uses the variable <em>DowntimeReason<\/em> as one of its parameters. Every time a user clicks on a status tile, the <em>DowntimeReason<\/em> variable is updated, and the chart refreshes to show new data.<\/p>\n<p class=\"intro-text\">1. Drag a Bar Chart component onto the third row of Grid 1.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-chart-to-page.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41584 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-chart-to-page.png\" alt=\"\" width=\"998\" height=\"654\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-chart-to-page.png 998w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-chart-to-page-768x503.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-chart-to-page-150x98.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-chart-to-page-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-chart-to-page-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Add-chart-to-page-48x31.png 48w\" sizes=\"auto, (max-width: 998px) 100vw, 998px\" \/><\/a><\/p>\n<p class=\"intro-text\">2. Configure the chart:<\/p>\n<ul>\n<li class=\"intro-text\"><strong>Chart Data<\/strong>:\n<ul class=\"intro-text\">\n<li>Dataset Query: <em>OilDowntimeByReasonDaily<\/em><\/li>\n<li>Dataset Parameters:\n<ul class=\"intro-text\">\n<li><strong>DowntimeReason<\/strong>: Select <em>DowntimeReason<\/em> variable<\/li>\n<li><strong>EndDate<\/strong>: Select <em>endTime<\/em> variable<\/li>\n<li><strong>StartDate<\/strong>: Select <em>startTime<\/em> variable<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"intro-text\"><strong>Bar Series<\/strong>:\n<ul class=\"intro-text\">\n<li>Y Column: Select <em>SumDowntimeHours<\/em><\/li>\n<\/ul>\n<\/li>\n<li class=\"intro-text\"><strong>X Axis<\/strong>:\n<ul class=\"intro-text\">\n<li>Column: Select <em>DataColumn<\/em>, select <em>DowntimeDay<\/em><\/li>\n<li>Data Type: Select <em>String<\/em><\/li>\n<\/ul>\n<\/li>\n<li class=\"intro-text\"><strong>Other<\/strong>:\n<ul class=\"intro-text\">\n<li>Tooltip: Select the check box<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a title=\"Charts tutorial\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">Charts<\/a><\/p>\n<p class=\"no-toc-heading\">Preview the Page<\/p>\n<ul>\n<li class=\"intro-text\">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<li class=\"intro-text\">Select a month and year from the Month Picker (eg. <em>March 2018<\/em>).<\/li>\n<\/ul>\n<p class=\"note\">Note how the Status Tiles show a value. If downtime hours for the month are greater than for the previous month, the tile is coloured in red. If less, then the tile is coloured in blue. (Colours may vary if you have chosen a different style.)<\/p>\n<p class=\"intro-text\">This is how your page should look:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Page-in-preview-mode.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41594 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Page-in-preview-mode.png\" alt=\"\" width=\"1308\" height=\"644\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Page-in-preview-mode.png 1308w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Page-in-preview-mode-768x378.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Page-in-preview-mode-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Page-in-preview-mode-1280x630.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Page-in-preview-mode-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Page-in-preview-mode-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Page-in-preview-mode-48x24.png 48w\" sizes=\"auto, (max-width: 1308px) 100vw, 1308px\" \/><\/a><\/p>\n<p class=\"intro-text\">Now click on the second status tile.<\/p>\n<p class=\"intro-text\">The <em>DowntimeReason<\/em> variable is set to <em>Production not required <\/em>as you click on the status tile. The text label content updates to show the new value for the variable, and the chart data is refreshed to show data for the period and the new downtime reason.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-3.png\" rel=\"lightbox-33\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41599 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-3.png\" alt=\"\" width=\"1323\" height=\"637\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-3.png 1323w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-3-768x370.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-3-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-3-1280x616.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-3-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-3-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-3-48x23.png 48w\" sizes=\"auto, (max-width: 1323px) 100vw, 1323px\" \/><\/a><\/p>\n<p class=\"intro-text\">Try clicking the different status tiles to see how the variable updates each time, just as the startTime and endTime variables change when you select a different month from the Month Picker.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-1.png\" rel=\"lightbox-34\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41596 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-1.png\" alt=\"\" width=\"1315\" height=\"621\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-1.png 1315w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-1-768x363.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-1-150x71.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-1-1280x604.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-1-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-1-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/09\/Preview-1-48x23.png 48w\" sizes=\"auto, (max-width: 1315px) 100vw, 1315px\" \/><\/a><\/p>\n<h3>Supplementary: Dataset Query Syntax<\/h3>\n<p class=\"intro-text\">This is the syntax of the query in Server Management, that is used in Tutorial 2: <em>OilDowntimeByReasonMonthly<\/em>.<\/p>\n<p class=\"intro-text\"><em>Description: Get sum of downtimes hours oil downtime by reason for the month for a fixed selection of entities<\/em>.<\/p>\n<pre>select sum(DowntimeHours) as SumDowntimeHours\r\nfrom SampleData\r\nwhere StartDate Between PARAM(StartDate, datetime) and PARAM(EndDate, datetime)\r\nand Entity in ( 'Archer', 'Big Red', 'Brumby')\r\nand DowntimeReason = PARAM(DowntimeReason, string)<\/pre>\n<p class=\"intro-text\">This is the syntax of the query in Server Management, that is used in Tutorial 2: <em>OilDowntimeByReasonDaily<\/em>.<\/p>\n<p class=\"intro-text\"><em>Description: Get a daily total of downtime hours for the downtime reason, for the month, for a fixed selection of entities<\/em>.<\/p>\n<pre>select Sum(DowntimeHours) as SumDowntimeHours, Datepart(Day, StartDate) as DowntimeDay\r\nfrom SampleData\r\nwhere StartDate Between PARAM(StartDate, datetime) and PARAM(EndDate, datetime)\r\nand Entity in ( 'Archer', 'Big Red', 'Brumby')\r\nand DowntimeReason = PARAM(DowntimeReason, string)\r\ngroup by  Datepart(Day, StartDate)\r\norder by  Datepart(Day, StartDate)<\/pre>\n<p>&nbsp;<\/p>\n<p class=\"left-bar\">For more information, read this Server article on how to <a title=\"How to Write a dataset Query\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/connecting-your-data\/creating-a-dataset-datasource\/how-to-write-a-dataset-query\/\">write a dataset query.<\/a><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Status Tile 4.6.2 (this release)\n<ul class=\"overview\">\n<li>New Link Action type: Set Variables<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-tile\/status-tile-4-5-4\/\">Status Tile 4.5.4<\/a>\n<ul class=\"intro-text\">\n<li>Tab Action 'New Browser Tab' is now available for all Link Action Types<\/li>\n<li>Whenever HTTP content is accessed from an HTTPS instance of Explorer, a New Browser tab opens, regardless of the Tab Type specified in the Link Action editor<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-tile\/status-tile-4-4-4\/\">Status Tile 4.4.4<\/a>\n<ul class=\"intro-text\">\n<li>Initial release<\/li>\n<\/ul>\n<\/li>\n<\/ul>\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, or can be used to set page variables. This article describes how to configure a Status Tile.<\/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\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":31620,"parent":1407,"menu_order":435,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[441,521],"class_list":["post-41526","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-status","tag-tile","Version-4-6-2","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41526","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=41526"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41526\/revisions"}],"predecessor-version":[{"id":67056,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41526\/revisions\/67056"}],"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\/31620"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=41526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=41526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=41526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}