{"id":38214,"date":"2018-05-22T14:41:34","date_gmt":"2018-05-22T06:41:34","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=38214"},"modified":"2018-12-13T08:55:40","modified_gmt":"2018-12-13T00:55:40","slug":"info-button-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/info-button\/info-button-2\/","title":{"rendered":"Info Button (4.6.0)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.6 and later of P2 Explorer. For the latest help, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/info-button\/\">Info Button<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"intro-text\">The Info Button is a component that a page designer can position alongside a specific component (such as a chart) or section of the page, so that a user can associate Knowledge Management with that component or section.<\/p>\n<p class=\"intro-text\">When a user clicks the configured Info Button in Display Mode, the <strong>Explore<\/strong> panel opens to show Knowledge Management relating to that chart, or area of the page. This initially holds no information (<em>Add some information...<\/em>).<\/p>\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-empty-Infor-Button.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-38995 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-empty-Infor-Button.png\" alt=\"\" width=\"521\" height=\"451\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-empty-Infor-Button.png 521w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-empty-Infor-Button-150x130.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-empty-Infor-Button-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-empty-Infor-Button-36x31.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-empty-Infor-Button-48x42.png 48w\" sizes=\"auto, (max-width: 521px) 100vw, 521px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><em>The Knowledege Management appears in the Explore panel<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">A user can read or edit the Knowledge Management fields. The standard fields are:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Purpose:<\/strong> What this area or specific component is intended for.<\/li>\n<li><strong>Instructions:<\/strong> Any special instructions applicable to this area of the page.<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-to-open-Knowledge-Managment-1.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-38915 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-to-open-Knowledge-Managment-1.png\" alt=\"\" width=\"584\" height=\"463\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-to-open-Knowledge-Managment-1.png 584w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-to-open-Knowledge-Managment-1-150x119.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-to-open-Knowledge-Managment-1-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-to-open-Knowledge-Managment-1-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Click-to-open-Knowledge-Managment-1-48x38.png 48w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><em>Here the Knowledge Management fields have already been captured by a user<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">Pages can have several info buttons, each with Knowledge Management designed to be relevant to its physical or conceptual area on the page.<\/p>\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Multiple-Info-Buttons-1.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-38898\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Multiple-Info-Buttons-1.png\" alt=\"\" width=\"900\" height=\"445\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Multiple-Info-Buttons-1.png 1364w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Multiple-Info-Buttons-1-768x380.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Multiple-Info-Buttons-1-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Multiple-Info-Buttons-1-1280x633.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Multiple-Info-Buttons-1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Multiple-Info-Buttons-1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Multiple-Info-Buttons-1-48x24.png 48w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><em>This page has six Info Buttons, each one for describing its separate area<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Context Key<\/p>\n<p class=\"intro-text\">Each Info Button on a page has a context key. Where Info Buttons on a single page use the same context key, the Knowledge Management is shared between them.<\/p>\n<p class=\"left-bar-yellow\"><i class=\"fa fa-star\"><\/i> <strong>Tip<\/strong>: It's best to use a context key that is unique to that page, to avoid sharing Knowledge Management, where users could unintentionally overwrite the wrong Info Button's Knowledge Management fields.<\/p>\n<p class=\"intro-text\">In the example below, two Info Button components on the same page share the same <em>Context Key<\/em> (Oil) which means they share their Knowledge Management.<\/p>\n<table style=\"width: 911.75px;\">\n<tbody>\n<tr>\n<td style=\"width: 679px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-2.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-38905 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-2.png\" alt=\"\" width=\"397\" height=\"442\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-2.png 397w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-2-135x150.png 135w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-2-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-2-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-2-43x48.png 43w\" sizes=\"auto, (max-width: 397px) 100vw, 397px\" \/><\/a><\/td>\n<td style=\"width: 135.75px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-38904 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-1.png\" alt=\"\" width=\"398\" height=\"444\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-1.png 398w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-1-134x150.png 134w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-1-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-1-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Context-1-43x48.png 43w\" sizes=\"auto, (max-width: 398px) 100vw, 398px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 679px;\"><em>Knowledge Management for Info Button \"Downtime Hours for Oil\"<\/em><\/td>\n<td style=\"width: 135.75px;\"><em>Knowledge Management for Info Button \"Production for Oil\"<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"note\">When you hover over an Info Button in Display Mode, the context key appears in the tooltip: \"Click to view\/edit '[context key]' information\".<\/p>\n<p>&nbsp;<\/p>\n<h3>Finding the Component<\/h3>\n<p class=\"intro-text\">The Info Button 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 of the Components Toolbox.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Where-is-the-info-button.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-39033 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Where-is-the-info-button.png\" alt=\"\" width=\"511\" height=\"511\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Where-is-the-info-button.png 511w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Where-is-the-info-button-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Where-is-the-info-button-252x252.png 252w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Where-is-the-info-button-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Where-is-the-info-button-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Where-is-the-info-button-48x48.png 48w\" sizes=\"auto, (max-width: 511px) 100vw, 511px\" \/><\/a><\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-the-info-button\/\">Using the Info Button<\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Quick Start<\/h2>\n<p class=\"intro-text\">You can very quickly configure an Info Button, by giving it a <em>Title<\/em>, and a fixed text <em>Context Key<\/em>.<\/p>\n<p class=\"intro-text\">In the <strong>Info Button<\/strong> component editor, assign a value to these two fields.<\/p>\n<p class=\"intro-text\">1. In the <strong>Title<\/strong> text box, type <em>Info for Charts<\/em>.<\/p>\n<p class=\"intro-text\">2. In the <strong>Context Key<\/strong> text box, type <em>Chart<\/em>.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Quick-start-config.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-38922 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Quick-start-config.png\" alt=\"\" width=\"376\" height=\"499\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Quick-start-config.png 376w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Quick-start-config-113x150.png 113w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Quick-start-config-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Quick-start-config-27x36.png 27w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Quick-start-config-36x48.png 36w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/a><\/p>\n<p class=\"intro-text\">3. Click <strong>Finish and Open<\/strong> on the Studio toolbar.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Finish-and-open-the-page-1.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-38976 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Finish-and-open-the-page-1.png\" alt=\"\" width=\"453\" height=\"170\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Finish-and-open-the-page-1.png 453w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Finish-and-open-the-page-1-150x56.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Finish-and-open-the-page-1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Finish-and-open-the-page-1-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Finish-and-open-the-page-1-48x18.png 48w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><\/a><\/p>\n<p class=\"intro-text\">4. In Display Mode, click the Info Button. The Knowledge Management appears in the <strong>Explore<\/strong> panel, with the Title: \"Info for Charts\".<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/step-4.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-38998 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/step-4.png\" alt=\"\" width=\"465\" height=\"439\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/step-4.png 465w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/step-4-150x142.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/step-4-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/step-4-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/step-4-48x45.png 48w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><\/a><\/p>\n<p class=\"intro-text\">Usually, your info button would be positioned next to the component it is describing, like this:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Next-to-a-chart-1.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-39008 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Next-to-a-chart-1.png\" alt=\"\" width=\"824\" height=\"440\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Next-to-a-chart-1.png 824w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Next-to-a-chart-1-768x410.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Next-to-a-chart-1-150x80.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Next-to-a-chart-1-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Next-to-a-chart-1-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Next-to-a-chart-1-48x26.png 48w\" sizes=\"auto, (max-width: 824px) 100vw, 824px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Configuration<\/h2>\n<p class=\"intro-text\">The following diagram shows a configured Info Button component:<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"1000\">\n<table>\n<tbody>\n<tr>\n<td width=\"180\"><strong>1. Title<\/strong><\/td>\n<td width=\"600\">This title will appear in the header of the Explore Panel when the Info Button is clicked. Ideally, this should relate to the specific area or component that the info button relates to.<\/td>\n<\/tr>\n<tr>\n<td><strong>2. Context Key<\/strong><\/td>\n<td>\n                                An identifier assigned to this info button and its related information. If you want multiple buttons on a page to display the same set of information, then use the same context key for those buttons.<br \/>\n                                The context key also appears in the info button's tooltip, on hover.\n                            <\/td>\n<\/tr>\n<tr>\n<td><strong>3. Add Context To Title<\/strong><\/td>\n<td>Select if you want the Context Key appended to the title in the Explore Panel header.<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Style<\/strong><\/td>\n<td>Select a suitable style from the drop-down list (no styles are available in the example).<\/td>\n<\/tr>\n<tr>\n<td><strong>5. Alignment <\/strong><\/td>\n<td>Click on one of the boxes to override the selected style's alignment.<\/td>\n<\/tr>\n<tr>\n<td><strong>6. Position<\/strong><\/td>\n<td>Select a position in <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/#Component_Properties_in_Precision_Layout\">Precision Layout<\/a> or <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a> (depending on where the component is placed).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"250\">\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Infor-Button-Config.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-38927\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Infor-Button-Config.png\" alt=\"\" width=\"460\" height=\"564\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Infor-Button-Config.png 496w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Infor-Button-Config-122x150.png 122w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Infor-Button-Config-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Infor-Button-Config-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Infor-Button-Config-39x48.png 39w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar-yellow\"><i class=\"fa fa-star\"><\/i> <strong>Tip<\/strong>: If you are using a variable Context Key, then appending it to the title will add meaning and context to the Explore panel.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial: Info Button for Selected Entity<\/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 add an Info Button and an Entity Selector. We'll configure the Info Button to use a variable Context Key (selectedEntity) which the user can change by selecting from the Entity Selector. We'll also set a default value for <em>selectedEntity<\/em>.<\/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\/05\/Info-Button-Tutorial-Intro-Screen-1.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-38944 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Info-Button-Tutorial-Intro-Screen-1.png\" alt=\"\" width=\"809\" height=\"440\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Info-Button-Tutorial-Intro-Screen-1.png 809w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Info-Button-Tutorial-Intro-Screen-1-768x418.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Info-Button-Tutorial-Intro-Screen-1-150x82.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Info-Button-Tutorial-Intro-Screen-1-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Info-Button-Tutorial-Intro-Screen-1-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Info-Button-Tutorial-Intro-Screen-1-48x26.png 48w\" sizes=\"auto, (max-width: 809px) 100vw, 809px\" \/><\/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\">\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/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\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/01\/Step-1-add-a-page.png\" rel=\"lightbox-12\"><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\"><strong>Step 2. Add and Configure an Entity Selector<\/strong><\/p>\n<p class=\"intro-text\">In this step, we want to configure an Entity Selector that will allow the user to select a <em>Business Unit<\/em> from the <em>P2 Corporate<\/em> hierarchy. We will use the Basic configuration for this.<\/p>\n<p class=\"intro-text\">Drag and drop the Entity Selector component onto the top left side of the page. The Entity Selector is in the Hierarchy <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1850 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchy.png\" alt=\"hierarchy\" width=\"20\" height=\"17\" \/> group.<\/p>\n<p class=\"intro-text\">Click the <strong>Basic<\/strong> button, and configure the fields as follows:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-entity-selector.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-38940 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-entity-selector.png\" alt=\"\" width=\"1254\" height=\"487\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-entity-selector.png 1254w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-entity-selector-768x298.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-entity-selector-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-entity-selector-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-entity-selector-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-entity-selector-48x19.png 48w\" sizes=\"auto, (max-width: 1254px) 100vw, 1254px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"width: 130px; padding-left: 5px;\"><strong>Select Mode<\/strong><\/td>\n<td style=\"width: 190px;\">Single<\/td>\n<td><em>Allow the user to select only one entity at a time.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Selected Entity<\/strong><\/td>\n<td>selectedEntity<\/td>\n<td><em>When a user selects an entity, this variable gets updated.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Hierarchy Name<\/strong><\/td>\n<td>P2 Corporate<\/td>\n<td><em>Only entities from this hierarchy are displayed.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Template Filter<\/strong><\/td>\n<td>(Text) Business Unit<\/td>\n<td><em>Only entities that have this template are displayed.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector tutorial<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Set the Default Values<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Default-Selected-Entity-1.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-38951\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Default-Selected-Entity-1.png\" alt=\"\" width=\"1000\" height=\"495\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Default-Selected-Entity-1.png 1364w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Default-Selected-Entity-1-768x380.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Default-Selected-Entity-1-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Default-Selected-Entity-1-1280x633.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Default-Selected-Entity-1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Default-Selected-Entity-1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Default-Selected-Entity-1-48x24.png 48w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/p>\n<p class=\"intro-text\">If you don't set any default values, the Entity Selector will not have an entity selected when the page is first loaded. We can set the initial selected entity here.<\/p>\n<p class=\"intro-text\">We are going to set a default for the <strong>selectedEntity<\/strong> variable.<\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Default Values<\/strong> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/defaults-icon.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-34380\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/defaults-icon.png\" alt=\"\" width=\"14\" height=\"23\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/defaults-icon.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/defaults-icon-14x24.png 14w\" sizes=\"auto, (max-width: 14px) 100vw, 14px\" \/><\/a> button on the Studio toolbar.<\/li>\n<li>For the <strong>selectedEntity<\/strong> variable, update it to specify <em>Western Australia<\/em>.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">Variables<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add and Configure an Info Button<\/strong><\/p>\n<p class=\"intro-text\">We're going to add an Info Button, and configure it to use the selected entity as its Context Key.<\/p>\n<p class=\"intro-text\">Drag and drop the Info Button component just to the right of the Entity Selector. The Info Button 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=\"note\">The positioning of the Info Button is important, as the user needs to know what area of the page it relates to.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Add-and-Configure-an-Info-Button.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-38942 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Add-and-Configure-an-Info-Button.png\" alt=\"\" width=\"716\" height=\"721\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Add-and-Configure-an-Info-Button.png 716w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Add-and-Configure-an-Info-Button-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Add-and-Configure-an-Info-Button-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Add-and-Configure-an-Info-Button-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Add-and-Configure-an-Info-Button-48x48.png 48w\" sizes=\"auto, (max-width: 716px) 100vw, 716px\" \/><\/a><\/p>\n<p class=\"intro-text\">Configure it as follows:<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Title<\/strong><\/td>\n<td>Information for entity:<\/td>\n<td><em>This forms the main title for the Explore panel's header when the Info Button is clicked.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Context Key<\/strong><\/td>\n<td>(Variable) <em>selectedEntity<\/em><\/td>\n<td><em>This will update when the user selects an entity.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Add Context To Title<\/strong><\/td>\n<td><em>Select this<\/em><\/td>\n<td><em>The context key will be appended to the title.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-Info-Button-Tutorial-1.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-39022 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-Info-Button-Tutorial-1.png\" alt=\"\" width=\"857\" height=\"637\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-Info-Button-Tutorial-1.png 857w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-Info-Button-Tutorial-1-768x571.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-Info-Button-Tutorial-1-150x111.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-Info-Button-Tutorial-1-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-Info-Button-Tutorial-1-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/Configure-the-Info-Button-Tutorial-1-48x36.png 48w\" sizes=\"auto, (max-width: 857px) 100vw, 857px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Step 5. All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/New-page.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-39025 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/New-page.png\" alt=\"\" width=\"552\" height=\"430\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/New-page.png 552w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/New-page-150x117.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/New-page-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/New-page-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/New-page-48x37.png 48w\" sizes=\"auto, (max-width: 552px) 100vw, 552px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a an Info Button that can hold Knowledge Management for any entity that the user selects.<\/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>Choose an entity, then click the Info Button. Note how the title contains the entity name. Now add text into the Knowledge Management fields, and save.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/In-Preview-mode-2.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-39023 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/In-Preview-mode-2.png\" alt=\"\" width=\"965\" height=\"455\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/In-Preview-mode-2.png 965w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/In-Preview-mode-2-768x362.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/In-Preview-mode-2-150x71.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/In-Preview-mode-2-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/In-Preview-mode-2-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/05\/In-Preview-mode-2-48x23.png 48w\" sizes=\"auto, (max-width: 965px) 100vw, 965px\" \/><\/a><\/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\" \/> Remember 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","protected":false},"excerpt":{"rendered":"<p>The Info Button is a component that a page designer can position alongside a specific component (such as a chart) or section of the page, so that a user can associate Knowledge Management with that component or section.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/info-button\/info-button-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":39030,"parent":40314,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[657,644],"class_list":["post-38214","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-information","tag-knowledge-management","Version-4-6-0","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/38214","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=38214"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/38214\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/40314"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/39030"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=38214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=38214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=38214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}