{"id":14841,"date":"2016-05-10T08:33:40","date_gmt":"2016-05-10T00:33:40","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=14841"},"modified":"2019-09-24T10:29:59","modified_gmt":"2019-09-24T02:29:59","slug":"status-indicator-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-indicator\/status-indicator-4-3-2\/","title":{"rendered":"Status Indicator 4.3.2"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.3.2 and earlier of P2 Explorer.\u00a0For help on the latest version of the Status Indicator, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-indicator\/\">Status Indicator<\/a>.<\/p>\n<h3 class=\"page-subheading\">Overview<\/h3>\n<p class=\"intro-text\">The Status Indicator displays different icons depending on whether set thresholds are reached. It is typically used for presenting KPI data in an easy to digest format.<\/p>\n<p class=\"intro-text\">The following diagram shows a Status Indicator configured to display different icons depending on threshold and target values of an Accounting Financial KPIs\u00a0dataset:<\/p>\n<div style=\"position: relative;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusconfig1.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2969 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusconfig1-693x600.png\" alt=\"\" width=\"693\" height=\"600\" \/><\/a><\/div>\n<div style=\"position: relative;\">\u00a0<\/div>\n<table>\n<tbody>\n<tr>\n<td width=\"130\"><strong>Source Data<\/strong>:<\/td>\n<td>The dataset from which the values are obtained.<\/td>\n<\/tr>\n<tr>\n<td><strong>Bad Threshold Column<\/strong>:<\/td>\n<td>The column in the dataset that provides the value below\u00a0which the indicator will show a bad value. The icon displays as a red triangle with an exclamation mark when the value in the Actual Column is equal to or falls below that in the Bad Threshold Column.<\/td>\n<\/tr>\n<tr>\n<td><strong>Average Threshold Column<\/strong>:<\/td>\n<td>The column in the dataset that provides the value at\u00a0which the indicator will show an\u00a0average\u00a0value. The icon displays as an orange square when the value in\u00a0the Actual Column falls between the values in the Bad Threshold Column and Average Threshold Column.<\/td>\n<\/tr>\n<tr>\n<td><strong>Good Threshold Column<\/strong>:<\/td>\n<td>The column in the dataset that provides the value at\u00a0which the indicator will show a good\u00a0value. The icon displays as a green circle with a tick when the value in the Actual Column\u00a0is equal to or greater than that in the Average Threshold Column.<\/td>\n<\/tr>\n<tr>\n<td><strong>Target Column<\/strong>:<\/td>\n<td>The column in the dataset that provides the value that we are aspiring to reach. For example, a sales target. This field is not used unless the threshold values are expressed as a percentage. The component\u00a0will use this field to calculate the actual percentage value for comparison with the thresholds. If the thresholds are expressed as actual values, Target Value is not required.<\/td>\n<\/tr>\n<tr>\n<td><strong>Actual Column<\/strong>:<\/td>\n<td>The column in the dataset that provides the actual value of a data point.<\/td>\n<\/tr>\n<tr>\n<td><strong>Filter Column<\/strong>:<\/td>\n<td>The column of the dataset that provides the values that will be assessed. This is used in conjunction with the <a title=\"Filter Column and Filter Value\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/filter-column-and-filter-value\/\">Filter Value<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Filter Value<\/strong>:<\/td>\n<td>The row of the dataset that provides the values that will be assessed.<\/td>\n<\/tr>\n<tr>\n<td><strong>Percentage<\/strong>:<\/td>\n<td>Select this check box if the threshold values are expressed as percentages.<\/td>\n<\/tr>\n<tr>\n<td><strong>Invert<\/strong>:<\/td>\n<td>Select this check box to invert the good and bad thresholds, so that lower is good and higher is bad.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">You can use this control in 2 ways:<\/p>\n<ul class=\"intro-text\">\n<li>Specify only the Bad Threshold. When the value in the Actual Column\u00a0is equal to or below that in the Bad Threshold Column, the red icon will appear, otherwise no icon will appear.<\/li>\n<li>Specify all three thresholds to display the red, orange and green icons accordingly.<\/li>\n<\/ul>\n<hr \/>\n<h3 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial<\/span><\/h3>\n<p class=\"intro-text\">In this tutorial, we\u2019ll look at adding a Status Indicator that changes depending on the KPI type that is selected from a combo box. This combo box will get a list of KPI types from a dataset.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2763\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive.png\" alt=\"statuslive\" width=\"262\" height=\"156\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive.png 262w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive-150x89.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive-48x29.png 48w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/p>\n<p class=\"intro-text\">Let\u2019s go through this process, step-by-step.<\/p>\n<hr \/>\n<h3 class=\"page-subheading\"><span id=\"Step_by_Step_Creating_an_Event_ControlledCombo_Box\">Step by Step: Creating an Event Controlled Status Indicator<\/span><\/h3>\n<p class=\"intro-text\">Before you start, open a new tab in Explorer and click the \u201cCreate a New Page in Studio Mode\u201d thumbnail. Choose the <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">grid<\/a>\u00a0layout \u2013 you can adjust the rows and columns if you like but it\u2019s not important for this exercise.<\/p>\n<p class=\"intro-text\">If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add the Source Data<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdataset.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2770 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdataset.png\" alt=\"statusdataset\" width=\"1071\" height=\"851\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdataset.png 1071w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdataset-150x119.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdataset-768x610.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdataset-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdataset-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdataset-48x38.png 48w\" sizes=\"auto, (max-width: 1071px) 100vw, 1071px\" \/><\/a><\/p>\n<p class=\"intro-text\">Normally we <a title=\"Add Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/\">add the data<\/a> later in a tutorial, however this time we're going to add it first, as things will make more sense this way.<\/p>\n<ul class=\"intro-text\">\n<li>Add the <em>AccountingFinancialKPIs\u00a0<\/em><a title=\"Add a Relational Dataset\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/add-a-dataset\/\">dataset<\/a>, and configure it as follows:\n<ul class=\"intro-text\">\n<li>amountType: (Text) Net<\/li>\n<li>currencyCode: (Text) CAD<\/li>\n<li>periodEndedMonth: (Number)\u00a011<\/li>\n<li>periodEndedYear:\u00a0(Number)\u00a02013<\/li>\n<li>periodType: (Text)\u00a0Accounting<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">You will also need to publish a List <a title=\"Events\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/events\/\">event<\/a> from this dataset, to populate the combo box. Configure the event as follows:<\/p>\n<ul class=\"intro-text\">\n<li>Event: optionValues<\/li>\n<li>Column: FINANCIAL<\/li>\n<li>Distinct: (unselected)<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 2. Add a\u00a0Combo Box<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuscombo.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2970 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuscombo-800x483.png\" alt=\"\" width=\"800\" height=\"483\" \/><\/a><\/p>\n<p class=\"intro-text\">This <a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\">Combo Box<\/a> will provide the list of values from the FINANCIAL column of the dataset, reading from the event published in the previous step. This allows the user to\u00a0select an item from the list, and the Status Indicator will change accordingly.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop a Combo Box\u00a0onto a cell on the page.<\/li>\n<li>Configure it as follows:\n<ul class=\"intro-text\">\n<li>Option Values: (Event) optionValues<\/li>\n<li>Option Names: (leave this blank)<\/li>\n<li>Selected Option: selectedOption<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 3. Add the Status Indicator\u00a0to the page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdrag1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2775 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdrag1-800x468.png\" alt=\"\" width=\"800\" height=\"468\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the Status Indicator component\u00a0onto a grid cell.<\/p>\n<p class=\"intro-text\"><strong>Step 4.\u00a0\u00a0Configure the\u00a0Status Indicator<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusconfig.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2768 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusconfig.png\" alt=\"statusconfig\" width=\"823\" height=\"520\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusconfig.png 823w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusconfig-150x95.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusconfig-768x485.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusconfig-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusconfig-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusconfig-48x30.png 48w\" sizes=\"auto, (max-width: 823px) 100vw, 823px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this example, we want the Status Indicator to change according to the\u00a0event generated from the combo box. The advantage in doing this is that other controls on the page can also subscribe to the same events, thus your charts and tables (for example)\u00a0can also be linked. Configure the Status Indicator\u00a0as follows:<\/p>\n<ul class=\"intro-text\">\n<li>Source Data: \u00a0AccountingFinancialKPIs1<\/li>\n<li>Actual Column:\u00a0(Text)\u00a0VALUE<\/li>\n<li>Target Column:\u00a0(Text)\u00a0TARGET<\/li>\n<li>Bad Threshold Column: (Text) TARGET_BAD_VALUE<\/li>\n<li>Average\u00a0Threshold Column: (Text) TARGET_OK_VALUE<\/li>\n<li>Good\u00a0Threshold Column: (Text) TARGET_GOOD_VALUE<\/li>\n<li>Filter Column: (Text) FINANCIAL<\/li>\n<li>Filter Value: (Event) selectedOption<\/li>\n<li>Percentage: (unselected)<\/li>\n<li>Reverse: (unselected)<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 5.\u00a0\u00a0Create the event defaults<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdefaults.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2777 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statusdefaults-800x580.png\" alt=\"\" width=\"800\" height=\"580\" \/><\/a><\/p>\n<p class=\"intro-text\">You can create an\u00a0<a title=\"Events\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/events\/\">event<\/a> at any time. Here we want to set a default value for the combo box so that some data is displayed when the page is first loaded.<\/p>\n<ul class=\"intro-text\">\n<li>Click the <em><strong>Event Defaults<\/strong><\/em> button on the far right side of the Studio toolbar.<\/li>\n<li>Create an event called <em>\u201cselectedOption\u201d<\/em> with a text\u00a0value of Sales.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 6. All done! \u00a0<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2763\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive.png\" alt=\"statuslive\" width=\"262\" height=\"156\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive.png 262w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive-150x89.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/statuslive-48x29.png 48w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a fully functioning Status Indicator that displays a different image depending on what has been selected from the combo box. When the page\u00a0first loads, the combo box displays \"Sales\" and the status indicator displays the KPI for Sales.<\/p>\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\" \/>\u00a0Don\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","protected":false},"excerpt":{"rendered":"<p>The Status Indicator displays different icons depending on whether set thresholds are reached. It is typically used for presenting KPI data in an easy to digest format. This article describes how to configure a status indicator, and applies to versions 4.3.2 and later of P2 Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/status-indicator\/status-indicator-4-3-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":2763,"parent":35643,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[112,441],"class_list":["post-14841","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-indicators","tag-status","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=14841"}],"version-history":[{"count":1,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14841\/revisions"}],"predecessor-version":[{"id":44620,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14841\/revisions\/44620"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/35643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/2763"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=14841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=14841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=14841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}