{"id":35643,"date":"2018-03-06T14:10:27","date_gmt":"2018-03-06T06:10:27","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=35643"},"modified":"2024-10-23T14:21:01","modified_gmt":"2024-10-23T06:21:01","slug":"status-indicator","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-indicator\/","title":{"rendered":"Status Indicator"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.5.4 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">The Status Indicator uses different icons to indicate the state of a represented numerical value (<em>Actual<\/em>), in relation to configured numerical limits.<\/p>\n<ul class=\"intro-text\">\n<li><em>Actual<\/em> is compared to the limits from smallest to largest, or from largest to smallest, depending on the selected <em>Direction<\/em>.<\/li>\n<li>If configured to use the <em>Percentage<\/em> option, <em>Actual<\/em> as a percentage of <em>Target<\/em> is compared against <em>percentage<\/em> limits.<\/li>\n<li>Define a single limit for a <em>2 States<\/em> status indicator (default), or define two limits for a <em>3 States<\/em> status indicator.<\/li>\n<li>Each state uses an icon, selected from a list, and assigned a colour (or left as black &amp; white).<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"200\">\n<table style=\"width: 1124px;\">\n<tbody>\n<tr>\n<td style=\"width: 100px; padding-left: 5px;\"><em>Actual is 30, Limit is 20<\/em><\/td>\n<td style=\"width: 100px; padding-left: 5px;\"><em>Actual is 40, Limit is 60<\/em><\/td>\n<td style=\"width: 868.42px;\">\u00a0<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 100px; padding-left: 5px;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35722 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1.png\" alt=\"\" width=\"53\" height=\"52\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1.png 53w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1-48x48.png 48w\" sizes=\"auto, (max-width: 53px) 100vw, 53px\" \/><\/td>\n<td style=\"width: 100px; padding-left: 5px;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35723 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2.png\" alt=\"\" width=\"60\" height=\"58\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2.png 60w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2-48x46.png 48w\" sizes=\"auto, (max-width: 60px) 100vw, 60px\" \/><\/td>\n<td style=\"width: 868.42px;\">\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\"><em>Example of two different states for a Status Indicator<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">The Status Indicator can be placed in a prominent position on a page to show high-level KPIs, but it also works well in a Table Layout, where each row contains a small icon (the Status Indicator), showing an immediate overview of the status for that row. If the Table Layout has been configured to update with child entities as you click an entity, you can work through the different levels guided by the status indicators. (See <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/table-layout\/#Tutorials_-_Hierarchy_Attributes\"> Tutorials - Hierarchy Attributes<\/a> for more on setting up an interactive Table Layout using child entities.)<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-in-a-table-layout.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36002 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-in-a-table-layout.png\" alt=\"\" width=\"752\" height=\"176\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-in-a-table-layout.png 752w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-in-a-table-layout-150x35.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-in-a-table-layout-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-in-a-table-layout-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-in-a-table-layout-48x11.png 48w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-the-status-displays\/\">Using the Status Displays<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-displays\/\">Status Indicator Styles<\/a><\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Quick Start<\/h2>\n<p class=\"intro-text\">You can configure a Status Indicator in just two steps.<\/p>\n<p class=\"intro-text\">In this example, we want to configure a status indicator with fixed values, where the <strong>Actual<\/strong> value is <em>greater<\/em> than the <strong>Limit<\/strong> value.<\/p>\n<p class=\"intro-text\">1. Set the <strong>Actual<\/strong> property to a fixed value <img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37509 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/03\/Value-icon.png\" alt=\"\" width=\"18\" height=\"18\" \/> of 30.<\/p>\n<p class=\"intro-text\">2. Set the <strong>Limit <\/strong>property to a fixed value <img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37509 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/03\/Value-icon.png\" alt=\"\" width=\"18\" height=\"18\" \/> of 20.<\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37507 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/03\/Status-Indicator-Quick-Start.png\" alt=\"\" width=\"513\" height=\"597\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/03\/Status-Indicator-Quick-Start.png 513w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/03\/Status-Indicator-Quick-Start-129x150.png 129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/03\/Status-Indicator-Quick-Start-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/03\/Status-Indicator-Quick-Start-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/03\/Status-Indicator-Quick-Start-41x48.png 41w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/p>\n<p class=\"intro-text\"><strong>All done!<\/strong><\/p>\n<p class=\"intro-text\">You now have a Status Indicator that shows the icon <img loading=\"lazy\" decoding=\"async\" class=\"wp-image-37508 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/03\/Icon-for-actual-above-limit.png\" alt=\"\" width=\"16\" height=\"19\" \/> for Actual above Limit.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<\/ul>\n<p class=\"note\"><strong>Note:<\/strong> See what happens when you change the Actual value to less than or equal to the Limit value (go back to Design mode to do this). Likewise, see what happens when you change the <strong>Direction<\/strong> to <em>Descending<\/em>.<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Configuration<\/h2>\n<p class=\"intro-text\">You can configure the Status Indicator to compare the <em>Actual<\/em> number to one or two <em>Limits<\/em>, or you can configure it to compare <em>Actual<\/em> as a percentage of <em>Target<\/em>, against percentage limits.<\/p>\n<p class=\"intro-text\">The following diagram shows a configured Status Indicator that does <em>not<\/em> use the Percentage option (the <em>Percentage<\/em> check box is unselected):<\/p>\n<table style=\"width: 1153px;\">\n<tbody>\n<tr>\n<td style=\"width: 671px; padding-left: 5px;\">\n<table style=\"width: 583.89px;\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Actual<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">The number represented by the Status Indicator, that is compared to either one or two limits (depending on <em>State Count<\/em>), to determine state. You can assign data from any of the following <a title=\"See how to assign data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Adding_Data\">Data Categories<\/a>: Dataset, Ad hoc Calculation, Attribute, Tag, or Value.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Percentage<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">Select this check box to use the percentage option.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Target<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">(Not shown here.) <br \/>\n<em><span style=\"color: #ff0000;\">If Percentage is selected, then type in a target number. Actual is then calculated as a percentage of Target, before being compared to limit percentages (<em>Limit %<\/em>).<\/span><\/em> You can assign data from any of the following <a title=\"See how to assign data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Adding_Data\">Data Categories<\/a>: Dataset, Ad hoc Calculation, Attribute, Tag, or Value.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>State Count<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">Select <em>2 States<\/em> or <em>3 States<\/em> for the Status Indicator. The default is <em>2 States<\/em>. If you select <em>3 States<\/em>, an extra <em>Limit<\/em> or <em>Limit %<\/em> is introduced, as well as a third state icon, which can be configured.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Direction<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">The default direction is <em>Ascending<\/em> (whereby actual and limits are compared from smallest to largest). To compare actual and limits from largest to smallest, select <em>Descending<\/em>. Note how the arrows change direction in the component editor, to visually clarify this.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>State icon (1)<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">If the value of <em>Actual<\/em> is positioned here (i.e. greater than the limit in <em>ascending<\/em> direction, or less than or equal to the limit in <em>descending<\/em> direction), then this is the icon that displays on the page.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Limit<\/strong> (<em>1st<\/em>):<\/td>\n<td style=\"width: 386.89px;\">The number that <em>Actual<\/em> is compared to, to determine State.<br \/>\n<span style=\"color: #ff0000;\">If <em>Percentage<\/em> is selected, then <em>Limit<\/em> changes to <em>Limit %<\/em>. Type in a percentage limit here.<\/span> You can assign data from any of the following <a title=\"See how to assign data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Adding_Data\">Data Categories<\/a>: Dataset, Ad hoc Calculation, Attribute, Tag, or Value.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>State icon (2)<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">If the value of <em>Actual<\/em> is positioned here (i.e. less than or equal to the limit in <em>ascending<\/em> direction, or greater than the limit in <em>descending<\/em> direction), then this is the icon that displays on the page.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Limit<\/strong> (<em>2nd<\/em>):<\/td>\n<td style=\"width: 386.89px;\">(Not shown here.) <br \/>\nThe number that <em>Actual<\/em> is compared to, to determine State.<br \/>\n<span style=\"color: #ff0000;\">If <em>Percentage<\/em> is selected, then <em>Limit<\/em> changes to <em>Limit %<\/em>. Type in a percentage limit here.<\/span><br \/>\nThis limit is available if you select a <strong>State Count <\/strong> of <em>3 State<\/em>. You can assign data from any of the following <a title=\"See how to assign data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Adding_Data\">Data Categories<\/a>: Dataset, Ad hoc Calculation, Attribute, Tag, or Value.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>State icon (3)<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">(Not shown here.) If the value of <em>Actual<\/em> is positioned here (i.e. less than or equal to the limit in <em>ascending<\/em> direction, or greater than the limit in <em>descending<\/em> direction), then this is the icon that displays on the page. This icon is available if you select a <strong>State Count <\/strong> of <em>3 State<\/em>.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Style<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">The style to apply to the status indicator component. If you are a Style Administrator, you can add a new Status Indicator style.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Alignment<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">Click on one of the boxes to override the selected style's alignment.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Size<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">Type in a positive integer to override the selected style's size.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 120px; padding-left: 5px;\"><strong>Position<\/strong>:<\/td>\n<td style=\"width: 386.89px;\">Defines the component's position in the grid layout\/precision layout.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-Configured-2-1.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35699 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-Configured-2-1.png\" alt=\"\" width=\"509\" height=\"873\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-Configured-2-1.png 509w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-Configured-2-1-87x150.png 87w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-Configured-2-1-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-Configured-2-1-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Indicator-Configured-2-1-28x48.png 28w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Demonstrating which Icons are Displayed<\/strong><\/p>\n<p class=\"intro-text\">The following examples demonstrate which icons are displayed, based on the position of <em>Actual<\/em> in relation to limits. Note the <em>Direction<\/em> used in each case.<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"600\">\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 340px; padding-left: 5px;\"><em>In the component editor<\/em><\/td>\n<td style=\"width: 132.46px; padding-left: 5px; border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid;\"><em>On the page<\/em><\/td>\n<td style=\"width: 347px; padding-left: 5px;\"><em>In the component editor<\/em><\/td>\n<td style=\"width: 135.68px; padding-left: 5px;\"><em>On the page<\/em><\/td>\n<td style=\"width: 3.86px;\">\u00a0<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 340px; padding-left: 5px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-1-1.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35785 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-1-1.png\" alt=\"\" width=\"340\" height=\"556\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-1-1.png 340w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-1-1-92x150.png 92w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-1-1-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-1-1-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-1-1-29x48.png 29w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/a><\/td>\n<td style=\"width: 132.46px; padding-left: 5px; border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35722 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1.png\" alt=\"\" width=\"53\" height=\"52\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1.png 53w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1-48x48.png 48w\" sizes=\"auto, (max-width: 53px) 100vw, 53px\" \/><\/a><\/td>\n<td style=\"width: 347px; padding-left: 5px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-2-1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35786 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-2-1.png\" alt=\"\" width=\"340\" height=\"558\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-2-1.png 340w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-2-1-91x150.png 91w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-2-1-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-2-1-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-2-1-29x48.png 29w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/a><\/td>\n<td style=\"width: 135.68px; padding-left: 5px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35723 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2.png\" alt=\"\" width=\"60\" height=\"58\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2.png 60w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-2-48x46.png 48w\" sizes=\"auto, (max-width: 60px) 100vw, 60px\" \/><\/a><\/td>\n<td style=\"width: 3.86px;\">\u00a0<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 340px; padding-left: 5px;\"><em>In the component editor<\/em><\/td>\n<td style=\"width: 132.46px; padding-left: 5px; border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid;\"><em>On the page<\/em><\/td>\n<td style=\"width: 347px; padding-left: 5px;\"><em>In the component editor<\/em><\/td>\n<td style=\"width: 135.68px; padding-left: 5px;\"><em>On the page<\/em><\/td>\n<td style=\"width: 3.86px;\">\u00a0<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 340px; padding-left: 5px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-3-1.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35787 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-3-1.png\" alt=\"\" width=\"333\" height=\"564\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-3-1.png 333w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-3-1-89x150.png 89w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-3-1-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-3-1-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-3-1-28x48.png 28w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/><\/a><\/td>\n<td style=\"width: 132.46px; padding-left: 5px; border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35722 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1.png\" alt=\"\" width=\"53\" height=\"52\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1.png 53w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/State-1-48x48.png 48w\" sizes=\"auto, (max-width: 53px) 100vw, 53px\" \/><\/a><\/td>\n<td style=\"width: 347px; padding-left: 5px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-4-1.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35788 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-4-1.png\" alt=\"\" width=\"347\" height=\"544\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-4-1.png 347w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-4-1-96x150.png 96w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-4-1-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-4-1-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-4-1-31x48.png 31w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/a><\/td>\n<td style=\"width: 135.68px; padding-left: 5px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Icon-3.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35776 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Icon-3.png\" alt=\"\" width=\"55\" height=\"54\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Icon-3.png 55w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Icon-3-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Icon-3-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Icon-3-48x48.png 48w\" sizes=\"auto, (max-width: 55px) 100vw, 55px\" \/><\/a><\/td>\n<td style=\"width: 3.86px;\">\u00a0<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 340px; padding-left: 5px;\"><em>In the component editor<\/em><\/td>\n<td style=\"width: 132.46px; padding-left: 5px; border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid;\"><em>On the page<\/em><\/td>\n<td style=\"width: 347px; padding-left: 5px;\"><em>In the component editor<\/em><\/td>\n<td style=\"width: 135.68px; padding-left: 5px;\"><em>On the page<\/em><\/td>\n<td style=\"width: 3.86px;\">\u00a0<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 340px; padding-left: 5px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-Percentage-1-1.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35822 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-Percentage-1-1.png\" alt=\"\" width=\"348\" height=\"582\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-Percentage-1-1.png 348w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-Percentage-1-1-90x150.png 90w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-Percentage-1-1-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-Percentage-1-1-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-Percentage-1-1-29x48.png 29w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/a><\/td>\n<td style=\"width: 132.46px; padding-left: 5px; border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-5.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35818 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-5.png\" alt=\"\" width=\"54\" height=\"52\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-5.png 54w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-5-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-5-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-ind-5-48x46.png 48w\" sizes=\"auto, (max-width: 54px) 100vw, 54px\" \/><\/a><\/td>\n<td style=\"width: 347px; padding-left: 5px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-percentage-2.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35817 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-percentage-2.png\" alt=\"\" width=\"352\" height=\"567\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-percentage-2.png 352w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-percentage-2-93x150.png 93w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-percentage-2-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-percentage-2-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Config-with-percentage-2-30x48.png 30w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/a><\/td>\n<td style=\"width: 135.68px; padding-left: 5px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-6.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35819 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-6.png\" alt=\"\" width=\"56\" height=\"56\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-6.png 56w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-6-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-6-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Status-Ind-6-48x48.png 48w\" sizes=\"auto, (max-width: 56px) 100vw, 56px\" \/><\/a><\/td>\n<td style=\"width: 3.86px;\">\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>The Icon Picker<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/icon-picker.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35774 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/icon-picker.png\" alt=\"\" width=\"60\" height=\"171\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/icon-picker.png 60w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/icon-picker-53x150.png 53w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/icon-picker-8x24.png 8w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/icon-picker-13x36.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/icon-picker-17x48.png 17w\" sizes=\"auto, (max-width: 60px) 100vw, 60px\" \/><\/a><\/p>\n<p class=\"intro-text\">When configuring a state icon, select from any of the icons available in the drop-down, and then colour the icon using the colour picker.<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36039 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Some-icon-examples.png\" alt=\"\" width=\"711\" height=\"44\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Some-icon-examples.png 711w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Some-icon-examples-150x9.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Some-icon-examples-24x1.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Some-icon-examples-36x2.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Some-icon-examples-48x3.png 48w\" sizes=\"auto, (max-width: 711px) 100vw, 711px\" \/><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><em>Examples of some of the icons that can be configured for the status indicator<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"best-prac\"><i class=\"fa fa-trophy fa-2x fa-pull-left\"><\/i><span class=\"best-prac-text\">BEST PRACTICE<\/span><\/p>\n<p>&nbsp;<\/p>\n<p class=\"best-prac-desc\">If there are company standards available, follow these when configuring your status icons, so that what they represent (favourable\/unfavourable) is clear and unambiguous.<\/p>\n<\/div>\n<hr \/>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial: Daily Production vs Target<\/span><\/h2>\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\/\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">In this tutorial, we'll build a Status Indicator that changes icon depending on whether actual THP is greater than 75% of planned THP, for the selected date.<\/p>\n<p class=\"intro-text\">At the end of the tutorial, your page should look something like this:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-intro.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35979 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-intro.png\" alt=\"\" width=\"756\" height=\"756\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-intro.png 756w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-intro-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-intro-252x252.png 252w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-intro-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-intro-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-intro-48x48.png 48w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><\/a><\/p>\n<p class=\"intro-text\">Let\u2019s go through this process, step-by-step.<\/p>\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=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-36024 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page.png\" alt=\"\" width=\"553\" height=\"113\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page.png 553w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-150x31.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page-48x10.png 48w\" sizes=\"auto, (max-width: 553px) 100vw, 553px\" \/><\/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<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-new-page.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35976 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-new-page.png\" alt=\"\" width=\"1317\" height=\"897\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-new-page.png 1317w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-new-page-768x523.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-new-page-150x102.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-new-page-1280x872.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-new-page-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-new-page-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-new-page-48x33.png 48w\" sizes=\"auto, (max-width: 1317px) 100vw, 1317px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Configure the page's Grid Layout<\/strong><\/p>\n<ul class=\"intro-text\">\n<li>Add two rows.<\/li>\n<li>Assign a <strong>Column Spacing<\/strong> of 25.<\/li>\n<li>Change the <strong>Height<\/strong> for the different rows: 10* for the first three rows, and 70* for the fourth row.<\/li>\n<li>Apply a grid layout <strong>Style<\/strong>, if there is one available. (The one used here has a cell margin and padding, as well as a contrasting cell background color.)<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Grid Layout tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 2. Add Text Labels<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Two-Text-Labels.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35975 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Two-Text-Labels.png\" alt=\"\" width=\"1317\" height=\"454\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Two-Text-Labels.png 1317w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Two-Text-Labels-768x265.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Two-Text-Labels-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Two-Text-Labels-1280x441.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Two-Text-Labels-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Two-Text-Labels-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Two-Text-Labels-48x17.png 48w\" sizes=\"auto, (max-width: 1317px) 100vw, 1317px\" \/><\/a><\/p>\n<p class=\"intro-text\">We will be using the right column of the grid layout, for the tutorial.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop a Text Label into each of the top two grid cells (on the right side of the page).<\/li>\n<li>For the first Text Label, type <em>Tutorial<\/em> into the <strong>Content<\/strong> property.<\/li>\n<li>For the second Text Label, type <em>Actual as Percentage of Planned<\/em> into the <strong>Content<\/strong> property.<\/li>\n<li>Apply a <strong>Style<\/strong> to both text labels, if there is one available. (The one used here has a larger font size than that of the default text style.)<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Text Label tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 3. Add a Date Picker<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Date-Picker.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35974 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Date-Picker.png\" alt=\"\" width=\"1318\" height=\"499\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Date-Picker.png 1318w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Date-Picker-768x291.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Date-Picker-150x57.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Date-Picker-1280x485.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Date-Picker-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Date-Picker-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Date-Picker-48x18.png 48w\" sizes=\"auto, (max-width: 1318px) 100vw, 1318px\" \/><\/a><\/p>\n<p class=\"instruct\">Drag and drop a Data Picker onto the right cell, second from the bottom, of the page's grid layout (no further configuration is required here, although you can right-align the component, as we have done here).<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-picker\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Date Picker tutorial<\/a><\/p>\n<p class=\"intro-text\"><strong>Step 4. Add a Status Indicator<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Status-Indicator.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35973 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Status-Indicator.png\" alt=\"\" width=\"1319\" height=\"892\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Status-Indicator.png 1319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Status-Indicator-768x519.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Status-Indicator-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Status-Indicator-1280x866.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Status-Indicator-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Status-Indicator-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Status-Indicator-48x32.png 48w\" sizes=\"auto, (max-width: 1319px) 100vw, 1319px\" \/><\/a><\/p>\n<p class=\"instruct\">Drag and drop a Status Indicator onto the bottom right cell of the page's grid layout. The Status Indicator 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 class=\"intro-text\"><strong>Step 5. Configure the Status Indicator<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-Status-Ind.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35977 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-Status-Ind.png\" alt=\"\" width=\"371\" height=\"901\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-Status-Ind.png 371w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-Status-Ind-62x150.png 62w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-Status-Ind-10x24.png 10w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-Status-Ind-15x36.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-Status-Ind-20x48.png 20w\" sizes=\"auto, (max-width: 371px) 100vw, 371px\" \/><\/a><\/p>\n<p class=\"intro-text\">We're going to configure the Status Indicator to compare Actual (using an entity's attribute) as a percentage of Target (using another attribute of the same entity) against a percentage limit of 75. To work with percentages, we need to first select the percentage mode. Next, we'll configure the appearance of the status indicator and its icons.<\/p>\n<p class=\"intro-text\"><strong>Setting to Percentage Mode<\/strong>:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Click-percentage.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35972 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Click-percentage.png\" alt=\"\" width=\"369\" height=\"620\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Click-percentage.png 369w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Click-percentage-89x150.png 89w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Click-percentage-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Click-percentage-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Click-percentage-29x48.png 29w\" sizes=\"auto, (max-width: 369px) 100vw, 369px\" \/><\/a><\/p>\n<p class=\"intro-text\">To work with percentages, we need to first select the percentage mode.<\/p>\n<p class=\"instruct\">Select the <strong>Percentage<\/strong> check box. This causes a <strong>Target<\/strong> property to appear, and sets <strong>Limit<\/strong> to <strong>Limit %<\/strong>.<\/p>\n<p class=\"intro-text\"><strong>Adding Actual and Target Data<\/strong>:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-data.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35971 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-data.png\" alt=\"\" width=\"1438\" height=\"747\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-data.png 1438w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-data-768x399.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-data-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-data-1280x665.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-data-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-data-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-data-48x25.png 48w\" sizes=\"auto, (max-width: 1438px) 100vw, 1438px\" \/><\/a><\/p>\n<p class=\"intro-text\">1. Click the <strong>Hierarchy<\/strong> button on the <strong>Studio<\/strong> ribbon.<\/p>\n<p class=\"intro-text\">2. In the hierarchy panel, select the <em>P2 Corporate<\/em> hierarchy, locate entity <strong>Beardy<\/strong>, then click to open the Attributes panel.<\/p>\n<p class=\"intro-text\">3. Drag and drop the <em>THP!Actual<\/em> attribute into the <strong>Actual<\/strong> property box on the Status Indicator.<\/p>\n<p class=\"intro-text\">4. Drag and drop the <em>THP!Planned<\/em> attribute into the <strong>Target<\/strong> property box on the Status Indicator.<\/p>\n<p class=\"note\"><strong>Note<\/strong>: Keep the default data settings for the <strong>Actual<\/strong> and <strong>Target<\/strong> data. Settings include a <strong>Time<\/strong> property of <em>endTime<\/em>. This means the data will refresh to the selected <em>endTime<\/em> every time a user selects a new date from the Date Picker.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-getting-started\/tag-search-and-hierarchy-navigation\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Tag Search and Hierarchy Navigation<\/a><\/p>\n<p class=\"intro-text\"><strong>Setting the Limit Percent<\/strong>:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-limit.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35969 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-limit.png\" alt=\"\" width=\"373\" height=\"591\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-limit.png 373w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-limit-95x150.png 95w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-limit-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-limit-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Add-limit-30x48.png 30w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><\/a><\/p>\n<p class=\"intro-text\">We're going to assign a fixed value of 75, for <strong>Limit %<\/strong>.<\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Limit % <\/strong>Data Selector by clicking on the field. Stay on the Value <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15215 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" alt=\"Data selector Value icon\" width=\"15\" height=\"15\" \/> tab.<\/li>\n<li>Type <strong>75<\/strong> into the <strong>Value<\/strong> field.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Configuring the Icons and Appearance<\/strong>:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-the-Icons.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35968 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-the-Icons.png\" alt=\"\" width=\"376\" height=\"442\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-the-Icons.png 376w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-the-Icons-128x150.png 128w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-the-Icons-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-the-Icons-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Configure-the-Icons-41x48.png 41w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>For the icon above the limit, keep the default icon, but select green from the colour picker.<\/li>\n<li>For the icon below the limit, keep the default icon, but select red from the colour picker.<\/li>\n<li>Centre-align the Status Indicator, by clicking on the center block in the alignment section.<\/li>\n<li>Resize the Status Indicator to 80 pixels, by typing <em>80<\/em> in the <strong>Size<\/strong> box.<\/li>\n<\/ul>\n<hr \/>\n<p class=\"intro-text\"><strong>Step 6. All done!<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-Conclusion.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-35978 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-Conclusion.png\" alt=\"\" width=\"677\" height=\"582\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-Conclusion.png 677w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-Conclusion-150x129.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-Conclusion-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-Conclusion-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/A-Tutorial-Conclusion-48x41.png 48w\" sizes=\"auto, (max-width: 677px) 100vw, 677px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a Status Indicator that changes icon depending on whether actual THP is greater than 75% of planned THP, for the selected date.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Select different dates and observe the changes in the status indicator's icon. Where actual THP is more than 75% of its target, the status indicator has an icon showing a white tick against a green background. Where actual THP is 75% or less of its target, the status indicator has an icon showing a white exclamation mark against a red background.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" alt=\"save\" width=\"48\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" \/> Don\u2019t forget to <a title=\"Saving Your Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save your page<\/a>!<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Status Indicator 4.5.4 (this release). The Status Indicator component has had extensive changes in the editor. Subjective and potentially ambiguous terms such as \u2018Good\u2019, \u2018Bad\u2019, \u2018Reversed\u2019, and so on, have been replaced by clear and unambiguous labels and graphical representations.\n<ul class=\"overview\">\n<li>The labels <em>Good, Average<\/em> and <em>Bad<\/em> have been replaced by state configuration options (symbols and colours), with arrows indicating progression from one state to the next.<\/li>\n<li>Instead of a <strong>Reversed<\/strong> option, you can now pick a <strong>Direction:<\/strong> \u2018Ascending\u2019 or \u2018Descending\u2019.<\/li>\n<li>Selecting <strong>Percentage<\/strong> changes the <strong>Limit<\/strong> label\/s from \u2018Limit\u2019 to \u2018Limit %\u2019; this makes it clear that the <strong>Actual<\/strong> value is calculated as a percentage of the <strong>Target<\/strong> and then evaluated against the Limit %<\/li>\n<li>Colours for the different \u2018States\u2019 are now set in the editor, rather than in the Styles. You are now also able to select an icon for each of the different states.<\/li>\n<li>When a new component editor is dragged onto a page, the default <strong>State Count<\/strong> is 2 States. For a more complex Status Indicator, you can choose 3 States. (Status Indicators from earlier versions will have 3 States selected.)<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-indicator\/status-indicator-4-4-1\/\">Status Indicator 4.4.1<\/a><\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-indicator\/status-indicator-4-3-2\/\">Status Indicator 4.3.2<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Status Indicator uses different icons to indicate the state of a represented numerical value (<em>Actual<\/em>), in relation to configured numerical limits.<\/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-indicator\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":35648,"parent":1407,"menu_order":432,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[441],"class_list":["post-35643","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-status","Version-4-5-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/35643","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=35643"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/35643\/revisions"}],"predecessor-version":[{"id":67055,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/35643\/revisions\/67055"}],"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\/35648"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=35643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=35643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=35643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}