{"id":14902,"date":"2017-12-20T16:24:59","date_gmt":"2017-12-20T08:24:59","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=14902"},"modified":"2026-06-19T14:32:10","modified_gmt":"2026-06-19T06:32:10","slug":"building-an-explorer-page","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/","title":{"rendered":"Building An Explorer Page"},"content":{"rendered":"\n<p class=\"intro-text\">One of the most useful things you can do in Explorer is build a page. There are many types of pages you can build, from dashboards to schematics to mimics.\u00a0In this article, we'll show you how to build a page from scratch.<\/p>\n<p class=\"intro-text\">This video shows how you can build a page in less than 5 minutes.<\/p>\n<p class=\"intro-text\">\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_593301632\" class=\"video-js vjs-default-skin\" width=\"650\" height=\"500\" poster=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/BuildingAPage.png\" controls preload=\"none\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/BuildingaPage.mp4\" type='video\/mp4' \/>\r\n\t\t\r\n\t\t\r\n\t<\/video>\r\n\t<!-- End Video.js -->\r\n<\/p>\n<p class=\"intro-text\">The steps below explain this process in detail, and provide some tips and best practices.\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Part 1. Creating the Page<\/h2>\n<p class=\"intro-text\">Pages are created using Explorer Studio, which opens automatically when you create a new page or edit an existing one.\u00a0<\/p>\n<p class=\"intro-text\">To create a new page, click the <strong>New Page<\/strong>\u00a0button on the Home tab of the ribbon.<\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14281\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-400x100.png 400w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-250x62.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-48x12.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png 438w\" alt=\"New Page button on ribbon\" width=\"438\" height=\"109\" \/><\/p>\n<h3>Choosing the Layout<\/h3>\n<p class=\"intro-text\">Explorer Studio opens and you are presented with various layout options.\u00a0The layout types are Grid, Precision, and Blank. \u00a0<\/p>\n<ul class=\"intro-text\">\n<li><strong>Grid<\/strong>: Lay out the elements of your page in a grid format. Each component will fill the entire grid cell.<\/li>\n<li><strong>Precision<\/strong>: Place components anywhere on a page and make them any size.<\/li>\n<li><strong>Blank<\/strong>: Allows you to only add a single component to the page.<\/li>\n<\/ul>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-getting-started\/explorer-interactive-tour\/\">Tour of Explorer Studio<\/a>,\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a>\u00a0tutorial, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">Precision Layout<\/a>\u00a0tutorial<\/p>\n<p>&nbsp;<\/p>\n<div class=\"best-prac\"><i class=\"fa fa-star fa-2x fa-pull-left\"><\/i><span class=\"best-prac-text\">TOP TIP<\/span><\/p>\n<p class=\"intro-text\">You can nest layouts, allowing you to achieve some complex designs.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\">In this tutorial, let's select the <strong>grid layout<\/strong>. Grid layouts work well with\u00a0most browser sizes.<\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14282\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose.png\" sizes=\"auto, (max-width: 863px) 100vw, 863px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-150x93.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-400x248.png 400w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-768x475.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-800x495.png 800w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose-242x150.png 242w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/gridlayoutchoose.png 863w\" alt=\"Grid Layout 4.4\" width=\"863\" height=\"534\" \/><\/p>\n<p class=\"intro-text\">Click anywhere on the canvas to open the editor for the grid layout. This appears on the\u00a0right side of the screen. Configure the grid to have <strong>2 columns and 3 rows<\/strong>. \u00a0<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildinggrid.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14921\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildinggrid.png\" alt=\"buildinggrid\" width=\"336\" height=\"446\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildinggrid.png 336w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildinggrid-113x150.png 113w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildinggrid-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildinggrid-27x36.png 27w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildinggrid-36x48.png 36w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/a><\/p>\n<div class=\"best-prac\"><i class=\"fa fa-star fa-2x fa-pull-left\"><\/i><span class=\"best-prac-text\">TOP TIP<\/span><\/p>\n<p class=\"intro-text\">You can find detailed help on a component by clicking the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/helpicon.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14923\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/helpicon.png\" alt=\"helpicon\" width=\"19\" height=\"18\" \/><\/a>\u00a0help\u00a0icon in the top right\u00a0of the component editor.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<h3>Exploring Studio<\/h3>\n<p class=\"intro-text\">At this stage, it's worth familiarising yourself with the Studio ribbon and toolbar. Both contain various functions for editing a page.\u00a0<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/studio-ribbon.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16956 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/studio-ribbon.png\" width=\"1230\" height=\"197\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/studio-ribbon.png 1230w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/studio-ribbon-768x123.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/studio-ribbon-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/studio-ribbon-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/studio-ribbon-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/studio-ribbon-48x8.png 48w\" sizes=\"auto, (max-width: 1230px) 100vw, 1230px\" \/><\/a><\/p>\n<p class=\"intro-text\">Save your page by clicking the <strong>Save<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3365\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/saveicon1.png\" alt=\"saveicon1\" width=\"14\" height=\"13\" \/>\u00a0button on the toolbar. Save your page with the name\u00a0\"Building a Page\".<\/p>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">Saving Your Page<\/a><\/p>\n<blockquote>\n<p><strong>Let's Explore!<\/strong><\/p>\n<p>Before we move on to the next step, let's take a quick look at the page properties, as we will be coming back to this later. In the ribbon, click the page properties <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14982\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/propertiesicon.png\" alt=\"propertiesicon\" width=\"18\" height=\"16\" \/>\u00a0button.<\/p>\n<p>At the end of this tutorial, we will update the description and upload a thumbnail. However, it is worth noting here that if you want to build a page of a certain size, this is where you can enter the dimensions. This allows you to define when scrollbars appear when the browser is resized, and is useful for making sure your page elements remain readable.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15011\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/tut-properties1.png\" alt=\"tut-properties1\" width=\"311\" height=\"492\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/tut-properties1.png 311w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/tut-properties1-95x150.png 95w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/tut-properties1-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/tut-properties1-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/tut-properties1-30x48.png 30w\" sizes=\"auto, (max-width: 311px) 100vw, 311px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/page-properties\/\">Page Properties<\/a><\/p>\n<\/blockquote>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Part 2. Adding a Component<\/h2>\n<p class=\"intro-text\">Let's start building the page by adding a simple component to the page: the Text Label. This is commonly used for page titles, subheadings, and other text on a page.<\/p>\n<p class=\"intro-text\">The Text Label is a component in the Display group, indicated by\u00a0the Display <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1844\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/>\u00a0icon.\u00a0You can find a component in the toolbox in 3 ways:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Scroll<\/strong> down the component toolbox until you see it.<\/li>\n<li>Use the <strong>search<\/strong> box <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15028\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/searchcomponents.png\" alt=\"Search components\" width=\"188\" height=\"26\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/searchcomponents.png 188w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/searchcomponents-150x21.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/searchcomponents-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/searchcomponents-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/searchcomponents-48x7.png 48w\" sizes=\"auto, (max-width: 188px) 100vw, 188px\" \/>\u00a0at the top of the component toolbox.<\/li>\n<li>Click one of the <strong>group<\/strong> icons <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16958 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/group-icons.png\" width=\"181\" height=\"17\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/group-icons.png 181w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/group-icons-150x14.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/group-icons-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/group-icons-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/group-icons-48x5.png 48w\" sizes=\"auto, (max-width: 181px) 100vw, 181px\" \/>\u00a0to jump to the relevant group.<\/li>\n<\/ul>\n<p class=\"intro-text\">Drag and drop the Text Label from the component toolbox to the grid cell at the top left of the canvas.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-2.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16959 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-2.png\" width=\"1559\" height=\"760\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-2.png 1559w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-2-768x374.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-2-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-2-1280x624.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-2-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-2-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-2-48x23.png 48w\" sizes=\"auto, (max-width: 1559px) 100vw, 1559px\" \/><\/a><\/p>\n<p class=\"intro-text\">After dropping a component onto a page, you need to configure it in the component editor on the right of the canvas.<br \/>\nWith the Text Label, all you need to do is type some text into the content box.<\/p>\n<ul class=\"intro-text\">\n<li>In the <strong>Content<\/strong> box, type: <em>Building a Page<\/em><\/li>\n<li>The Text Label comes with several style options, and one of these is a page title. So from the <strong>Style<\/strong> drop-down list, choose <em>Page Title<\/em>. <br \/>\nNote that not all components come with predefined styles.<\/li>\n<\/ul>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a> tutorial<\/p>\n<p class=\"intro-text\">The first part of your page is done!<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Part 3. Exploring the Canvas<\/h2>\n<p class=\"intro-text\">While you are designing your page, you will be using the canvas a lot, as this is your main work area. It's worth familiarising yourself with 3 main functions that will help you to work faster:<\/p>\n<h3>Undo\/Redo<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15052\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undoredo.png\" alt=\"Undo redo\" width=\"528\" height=\"255\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undoredo.png 528w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undoredo-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undoredo-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undoredo-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undoredo-48x23.png 48w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/p>\n<p>&nbsp;<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" width=\"29\" height=\"25\" class=\"alignnone size-full wp-image-14969\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo.png\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-24x21.png 24w\" sizes=\"auto, (max-width: 29px) 100vw, 29px\" \/><\/div>\n<\/td>\n<td><strong>Undo<\/strong><\/td>\n<td>\n<p>Click to undo the latest change.\u00a0You can also use the keyboard shortcut <strong>CTRL+Z<\/strong>.\u00a0<\/p>\n<p>You can click repeatedly to undo previous changes, or click the downward-pointing arrow to select how far back you want to go.\u00a0The different steps are listed from most the recent activity.<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" width=\"258\" height=\"164\" class=\"alignnone size-full wp-image-14989\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop.png\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop.png 258w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop-150x95.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop-48x31.png 48w\" sizes=\"auto, (max-width: 258px) 100vw, 258px\" \/><\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" width=\"29\" height=\"25\" class=\"alignnone size-full wp-image-14970\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo.png\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-24x21.png 24w\" sizes=\"auto, (max-width: 29px) 100vw, 29px\" \/><\/div>\n<\/td>\n<td><strong>Redo<\/strong><\/td>\n<td>\n<p>Click to redo the latest change. You can also use the keyboard shortcut <strong>CTRL+Y<\/strong>.\u00a0<\/p>\n<p>You can click repeatedly to redo previous changes, or click the downward-pointing arrow to select how far back you want to go.\u00a0The different steps are listed from most the recent undo action.<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" width=\"257\" height=\"145\" class=\"alignnone size-full wp-image-14990\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop.png\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop.png 257w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop-48x27.png 48w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3>Preview vs Finish and Open<\/h3>\n<p class=\"intro-text\">As you design your page, you will probably want to know what it looks like to your users. There are 2 ways of doing this: <em>Preview<\/em> or <em>Finish and Open<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15054\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/previewfinish.png\" alt=\"Preview vs finish and open\" width=\"528\" height=\"255\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/previewfinish.png 528w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/previewfinish-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/previewfinish-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/previewfinish-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/previewfinish-48x23.png 48w\" sizes=\"auto, (max-width: 528px) 100vw, 528px\" \/><\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" width=\"29\" height=\"25\" class=\"alignnone size-full wp-image-14968\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/preview.png\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/preview.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/preview-24x21.png 24w\" sizes=\"auto, (max-width: 29px) 100vw, 29px\" \/><\/div>\n<\/td>\n<td><strong>Preview<\/strong><\/td>\n<td>\n<p>Click the Preview\u00a0button above the canvas to see how your page will look in run time<i>.\u00a0<\/i>When previewing your page, you can also interact with all the elements on the page, as if you were in run time. While you are previewing the page, you remain inside Explorer Studio.<\/p>\n<p>Click the Preview button again to make further changes to the page.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2978\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" alt=\"livemode\" width=\"14\" height=\"16\" \/><\/td>\n<td><strong>Finish &amp; Open<\/strong><\/td>\n<td>\n<p>Click the Finish and Open button on the component toolbar to save the page first, and then open it in run time.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3>Cut\/Copy\/Paste<\/h3>\n<p class=\"intro-text\">The familiar cut, copy, and paste functions are available on the component toolbar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15056\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/cutcopypaste.png\" alt=\"Cut copy paste\" width=\"529\" height=\"255\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/cutcopypaste.png 529w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/cutcopypaste-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/cutcopypaste-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/cutcopypaste-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/cutcopypaste-48x23.png 48w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/p>\n<p class=\"intro-text\">They are context-sensitive and are therefore only enabled when you are able to use them. You can also use the standard keyboard shortcuts for these functions:<\/p>\n<table style=\"width: 100px;\">\n<tbody>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14961\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/cuticon.png\" alt=\"cuticon\" width=\"16\" height=\"16\" data-pin-nopin=\"true\" \/><\/div>\n<\/td>\n<td>Cut<\/td>\n<td>CTRL+X<\/td>\n<\/tr>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14960\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/copyicon.png\" alt=\"copyicon\" width=\"16\" height=\"16\" \/><\/div>\n<\/td>\n<td>Copy<\/td>\n<td>CTRL+C<\/td>\n<\/tr>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14962\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/pasteicon.png\" alt=\"pasteicon\" width=\"16\" height=\"16\" \/><\/div>\n<\/td>\n<td>Paste<\/td>\n<td>CTRL+V<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Part 4. Adding Data<\/h2>\n<p class=\"intro-text\">Now that we're familiar with the basics of Explorer Studio, let's add some real data to the page.<\/p>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/explorers-data\/\">Explorer's Data<\/a><\/p>\n<p class=\"intro-text\">We're going to add a\u00a0component that is commonly used to display data: a data table.<\/p>\n<p class=\"intro-text\">First, let's add and configure the Data Table component.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-4.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16961 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-4.png\" width=\"1541\" height=\"936\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-4.png 1541w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-4-768x466.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-4-150x91.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-4-1280x777.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-4-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-4-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-4-48x29.png 48w\" sizes=\"auto, (max-width: 1541px) 100vw, 1541px\" \/><\/a><\/p>\n<p class=\"intro-text\">1. Drag and drop the Data\u00a0Table\u00a0from the component toolbox to the grid cell below the page title.<\/p>\n<p class=\"intro-text\">2. Configuring any component that retrieves data is done by using the <strong>Data Selector<\/strong>. The Data Selector is a sub-component which allows you to retrieve all sorts of data. You can tell when the Data Selector is available by this input box:\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15063\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/clicktoconfiguredataselector.png\" alt=\"Click to configure data selector\" width=\"207\" height=\"26\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/clicktoconfiguredataselector.png 207w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/clicktoconfiguredataselector-150x19.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/clicktoconfiguredataselector-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/clicktoconfiguredataselector-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/clicktoconfiguredataselector-48x6.png 48w\" sizes=\"auto, (max-width: 207px) 100vw, 207px\" \/><\/p>\n<p class=\"intro-text\">Clicking the box opens the Data Selector:<\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15064\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/dataselectorempty.png\" alt=\"Data Selector\" width=\"325\" height=\"114\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/dataselectorempty.png 325w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/dataselectorempty-150x53.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/dataselectorempty-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/dataselectorempty-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/dataselectorempty-48x17.png 48w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/p>\n<p class=\"intro-text\">When the Data Selector is first opened, you will see 5 tabs. Sometimes, depending on the component, you only be able to choose from a subset of the tabs. In this case, as the component is expecting tabular data, the Value tab is unavailable, and the Dataset tab is active.<\/p>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\">For this tutorial, we want to get data from the <strong>OilDowntimeByReason<\/strong> dataset query.<\/p>\n<ul class=\"intro-text\">\n<li>In the <strong>Dataset Query\u00a0<\/strong>box, type: <em>OilDowntimeByReason<br \/>\n<\/em>Notice that as you type, the matching queries from IFS OI Server are displayed. You can select the query from this list if you wish.<\/li>\n<\/ul>\n<p class=\"intro-text\">After you've typed the query name, the dataset parameters for the query are displayed. You need to complete all of these queries to retrieve data from the dataset.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15065\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparameters.png\" alt=\"Data Selector dataset parameters\" width=\"327\" height=\"312\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparameters.png 327w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparameters-150x143.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparameters-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparameters-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparameters-48x46.png 48w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/p>\n<p class=\"intro-text\">These parameters can either be a static value or variables. Initially, they will be set to use static values, as indicated by the selected icon to the right of the fields.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15066\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variableicons.png\" alt=\"Icons for variables\" width=\"328\" height=\"42\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variableicons.png 328w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variableicons-150x19.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variableicons-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variableicons-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variableicons-48x6.png 48w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/p>\n<p class=\"intro-text\">We want to use variables, however, so go ahead and click the variable icons for each of the parameters. Using variables will allow us to create a more dynamic page (we will elaborate on this in the next section).<\/p>\n<p class=\"intro-text\">IFS OI Explorer provides a number of commonly used variables by default. We are going to use two of these here, for the <em>EndDate<\/em> and <em>StartDate<\/em> parameters.\u00a0In the drop-down list for each parameter, only variables of the appropriate data type are presented.\u00a0<\/p>\n<p class=\"intro-text\">For each of the <strong>dataset parameters<\/strong>, select the appropriate variable, as follows:<\/p>\n<ul class=\"intro-text\">\n<li>EndDate: <strong>endTime<br \/>\n<\/strong>This is supplied by default, so select it from the drop-down list.<\/li>\n<li>EntitiesList: <strong>selectedEntities<br \/>\n<\/strong>This is not supplied by default, so you will need to manually type it in.<\/li>\n<li>StartDate: <strong>startTime<br \/>\n<\/strong>This is supplied by default, so select it from the drop-down list.<strong><br \/>\n<\/strong><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15067\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparamvariables.png\" alt=\"Dataset parameter variables\" width=\"328\" height=\"314\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparamvariables.png 328w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparamvariables-150x144.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparamvariables-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparamvariables-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetparamvariables-48x46.png 48w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/p>\n<p class=\"intro-text\">When you have finished, click the <strong>Preview<\/strong> button at the bottom right of the Data Selector.\u00a0<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15070\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetpreview.png\" alt=\"Dataset preview\" width=\"513\" height=\"324\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetpreview.png 513w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetpreview-150x95.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetpreview-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetpreview-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datasetpreview-48x30.png 48w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/p>\n<p class=\"intro-text\">This is the data that you will see in the Data Table after you have finished configuring it. To finish configuring the Data Table, click somewhere outside of the Data Selector. We're going to take the easy way out and display all the rows and columns in the data table. We do this by clicking the <strong>Autofill<\/strong> button:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15071\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/autofill.png\" alt=\"Data Table autofill\" width=\"346\" height=\"481\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/autofill.png 346w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/autofill-108x150.png 108w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/autofill-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/autofill-26x36.png 26w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/autofill-35x48.png 35w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/p>\n<p class=\"intro-text\">You will now see the Data Table contains the same data as shown in the Preview window:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datatableonpage.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15072\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datatableonpage.png\" alt=\"Data Table on Page\" width=\"1567\" height=\"871\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datatableonpage.png 1567w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datatableonpage-768x427.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datatableonpage-150x83.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datatableonpage-1280x711.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datatableonpage-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datatableonpage-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datatableonpage-48x27.png 48w\" sizes=\"auto, (max-width: 1567px) 100vw, 1567px\" \/><\/a><\/p>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table\/\">Data Table<\/a>\u00a0tutorial<\/p>\n<p class=\"intro-text\">Now you have some data on your page!<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Part 5. Variables<\/h2>\n<p class=\"intro-text\">Variables are the key to creating dynamic pages, where users can pick and choose things like the date or the entity they are interested in. In this example, we will get the user to choose which downtime reason they are interested in.<\/p>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">Variables<\/a><\/p>\n<p class=\"intro-text\">We'll start by adding an Option Links component, which is a common component that is used to allow users to select different options.\u00a0<\/p>\n<h3>Adding the Option Links<\/h3>\n<p class=\"intro-text\">The Option Links\u00a0is a component in the Control\u00a0group, indicated by\u00a0the Control\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/controls_sm.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1840\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/controls_sm.png\" alt=\"Controls\" width=\"18\" height=\"16\" \/><\/a>\u00a0icon.\u00a0<\/p>\n<p class=\"intro-text\">Drag and drop the <strong>Option Links<\/strong> from the component toolbox to the grid cell at the top right\u00a0of the canvas.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addoptionlinks.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15076\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addoptionlinks.png\" alt=\"Adding option links\" width=\"1670\" height=\"853\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addoptionlinks.png 1670w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addoptionlinks-768x392.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addoptionlinks-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addoptionlinks-1280x654.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addoptionlinks-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addoptionlinks-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addoptionlinks-48x25.png 48w\" sizes=\"auto, (max-width: 1670px) 100vw, 1670px\" \/><\/a><\/p>\n<p class=\"intro-text\">We will now configure the option links to display all the downtime reasons, so the user can choose which one they want. We do this by using the Data Selector for the Option Values field.<\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Option Values<\/strong> Data Selector by clicking on the field. You will notice that the Values tab is automatically selected. Now, we could type in our values manually, but it will be easier to pull it directly from the dataset.<\/li>\n<li>Click the Dataset <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14669\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/><\/a>\u00a0tab in the Data Selector. Fill in the fields as follows:\n<ul class=\"intro-text\">\n<li>Dataset Query: <strong>OilDowntimeByReason<\/strong><\/li>\n<li>Value Column: <strong>DowntimeReason<br \/>\n<\/strong>Notice that the Value Column offers you a drop-down list with the names of all the columns available.\u00a0<\/li>\n<li>The Dataset Parameters are not relevant on this occasion, so you may leave them blank.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 120px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksdowntime.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15079\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksdowntime.png\" alt=\"Option Links showing downtime reasons\" width=\"351\" height=\"449\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksdowntime.png 351w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksdowntime-117x150.png 117w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksdowntime-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksdowntime-28x36.png 28w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksdowntime-38x48.png 38w\" sizes=\"auto, (max-width: 351px) 100vw, 351px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click away from the Data Selector.\u00a0<\/p>\n<p class=\"intro-text\">There is one important thing to notice here, and that is the Selected Option variable. This is where the value of the user's selection is stored, when they click an option.\u00a0<\/p>\n<p class=\"intro-text\">We will be making use of this variable in the rest of this tutorial.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksproperties.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15080\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksproperties.png\" alt=\"Option Links Properties\" width=\"338\" height=\"241\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksproperties.png 338w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksproperties-150x107.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksproperties-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksproperties-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/optionlinksproperties-48x34.png 48w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/a><\/p>\n<p class=\"intro-text\">There's no need to fill in any other properties for the Option Links.\u00a0<\/p>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/option-links\/\">Option Links<\/a> tutorial<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<h3>Adding a Data Label<\/h3>\n<p class=\"intro-text\">Next, we will add a Data Label. This will give us the number of downtime incidents for the reason that the user selects.<\/p>\n<p class=\"intro-text\">Drag and drop the <strong>Data Label\u00a0<\/strong>from the component toolbox to the grid cell at the top right\u00a0of the canvas.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/adddatalabel1.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15085 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/adddatalabel1.png\" alt=\"Add Data Label\" width=\"1670\" height=\"853\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/adddatalabel1.png 1670w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/adddatalabel1-768x392.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/adddatalabel1-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/adddatalabel1-1280x654.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/adddatalabel1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/adddatalabel1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/adddatalabel1-48x25.png 48w\" sizes=\"auto, (max-width: 1670px) 100vw, 1670px\" \/><\/a><\/p>\n<p class=\"intro-text\">We will now configure the data label\u00a0to display the downtime hours for the selected downtime reason. We do this by again using the Data Selector for the Value field.<\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>\u00a0Value<\/strong>\u00a0Data Selector by clicking on the field. \u00a0<\/li>\n<li>Click the Dataset <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14669\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/><\/a>\u00a0tab in the Data Selector. Fill in the fields as follows:\n<ul class=\"intro-text\">\n<li>Dataset Query: <strong>OilDowntimeByReason<br \/>\n<\/strong>Tip: Click the Preview button so you can see the dataset, it will help you to better understand the data you are dealing with.<\/li>\n<li>Filter\u00a0Column: <strong>DowntimeReason<br \/>\n<\/strong>This is the column that provides the options for the filter, which the user will select.\u00a0<\/li>\n<li>Filter Value: <strong>selectedOption<\/strong><br \/>\nClick the variable icon and choose this from the drop-down list. This is the variable that stores the user's selection from the Option Links.<\/li>\n<li>Value Column: <strong>SumDowntimeHours<\/strong><br \/>\nThis is the column that provides the value that corresponds to the selected option.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datalabelfilters.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15086\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datalabelfilters.png\" alt=\"Data Label filters\" width=\"1076\" height=\"531\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datalabelfilters.png 1076w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datalabelfilters-768x379.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datalabelfilters-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datalabelfilters-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datalabelfilters-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/datalabelfilters-48x24.png 48w\" sizes=\"auto, (max-width: 1076px) 100vw, 1076px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>For the <strong>Dataset Parameters<\/strong>, choose the corresponding variables, which will be the same ones you used in the Data Table.<br \/>\nThis is important to make sure you are getting the same numbers as what is shown in the Data Table. If you don't specify these parameters, they take on the default values for the dataset as it was defined in IFS OI Server.<br \/>\nNote that because you have already manually added the <strong>selectedEntities<\/strong> variable, this is now available for selection from the drop-down list.<\/li>\n<\/ul>\n<p class=\"intro-text\">Click away from the Data Selector. \u00a0There is no need to fill in the rest of the properties for the Data Label.<\/p>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a> tutorial<\/p>\n<p>&nbsp;<\/p>\n<h3>Adding a Pie Chart<\/h3>\n<p class=\"intro-text\">Finally, we will add a Pie Chart. This will do 2 things: it will provide another way for the user to select a downtime reason by clicking on a segment of the pie, and it will also reflect when a user selects an option from the Option Links. It also provides a bit of visual interest to the page!<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addpiechart.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15089\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addpiechart.png\" alt=\"Adding a pie chart\" width=\"1670\" height=\"853\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addpiechart.png 1670w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addpiechart-768x392.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addpiechart-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addpiechart-1280x654.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addpiechart-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addpiechart-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/addpiechart-48x25.png 48w\" sizes=\"auto, (max-width: 1670px) 100vw, 1670px\" \/><\/a><\/p>\n<p class=\"intro-text\">We will now configure the pie chart to display the downtime hours for the selected downtime reason. We do this by again using the Data Selector for the Data\u00a0field.<\/p>\n<ul class=\"intro-text\">\n<li>Open the<strong>\u00a0Data<\/strong>\u00a0Data Selector by clicking on the field. \u00a0<\/li>\n<li>Click the Dataset <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14669\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" alt=\"Dataset icon\" width=\"16\" height=\"13\" \/><\/a>\u00a0tab in the Data Selector. Fill in the fields as follows:\n<ul class=\"intro-text\">\n<li>Dataset Query: <strong>OilDowntimeByReason<\/strong><\/li>\n<li>EndDate: <strong>endTime<\/strong><\/li>\n<li>EntitiesList:\u00a0<strong>selectedEntities<\/strong><\/li>\n<li>StartDate: <strong>startTime<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartdata.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15090\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartdata.png\" alt=\"piechartdata\" width=\"335\" height=\"402\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartdata.png 335w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartdata-125x150.png 125w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartdata-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartdata-30x36.png 30w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartdata-40x48.png 40w\" sizes=\"auto, (max-width: 335px) 100vw, 335px\" \/><\/a><\/p>\n<p class=\"intro-text\">Click away from the Data Selector. \u00a0Fill in the rest of the properties for the Pie Chart as follows:<\/p>\n<ul class=\"intro-text\">\n<li>Name Column: \u00a0<strong>DowntimeReason<br \/>\n<\/strong>This is the column that contains the values that will be used as the labels of each slice (i.e. the legend).<strong><br \/>\n<\/strong><\/li>\n<li>Value Column: <strong>SumDowntimeHours<br \/>\n<\/strong>This is the column that contains the values that will be represented as a slice of the pie.<strong><br \/>\n<\/strong><\/li>\n<li>Selected: <strong>selectedOption<br \/>\n<\/strong>This will hook into the Option Links.<\/li>\n<\/ul>\n<p style=\"padding-left: 60px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartproperties.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15091\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartproperties.png\" alt=\"Pie Chart Properties\" width=\"324\" height=\"314\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartproperties.png 324w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartproperties-150x145.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartproperties-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartproperties-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/piechartproperties-48x48.png 48w\" sizes=\"auto, (max-width: 324px) 100vw, 324px\" \/><\/a><\/p>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/pie-chart\/\">Pie Chart<\/a> tutorial<\/p>\n<p>&nbsp;<\/p>\n<h3>More on Variables<\/h3>\n<p class=\"intro-text\">There are a few more things worth noting about variables.<\/p>\n<p class=\"intro-text\">A number of variables are always added to a page by default. These are:<\/p>\n<ul class=\"intro-text\">\n<li>selectedEntity<\/li>\n<li>pageSampleMethod<\/li>\n<li>pageSampleInterval<\/li>\n<li>startTime<\/li>\n<li>endTime<\/li>\n<li>confidenceThreshold<\/li>\n<\/ul>\n<p class=\"intro-text\">Some components have their own variables that can also be used by other components, such as the <em>selectedOption<\/em> variable we used just now. These are not added to the page defaults, you will need to manually specify the default values.<\/p>\n<p class=\"intro-text\">The most useful\/popular components that use variables to change user selections include:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Time<\/strong> controls, for changing the date and time: <a title=\"Month Picker\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/month-picker\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Month Picker<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-picker\/\">Date Picker<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-picker\/\">Date\/Time Picker<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-menu\/\">Date\/Time Range Picker<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/duration-picker\/\">Duration Picker<\/a><\/li>\n<li><strong>Hierarchy<\/strong> controls, for changing the selected entities:\u00a0<a title=\"Entity Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Entity Selector<\/a>,\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy\/\">Hierarchy<\/a><\/li>\n<li><strong>Selection<\/strong> controls, for providing specific choices:\u00a0<a title=\"Combo Box\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Combo Box<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/option-links\/\">Option Links<\/a>, <span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/multi-select-list\/\">Multi Select List<\/span><\/li>\n<\/ul>\n<p class=\"left-bar\"><strong>Read More<\/strong>: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">Variables<\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Part 6. Finishing off the Page<\/h2>\n<p class=\"intro-text\">Before we can call our page done, it is best practice to make a couple of final checks.<\/p>\n<div class=\"best-prac\"><i class=\"fa fa-trophy fa-2x fa-pull-left\"><\/i> BEST PRACTICE<\/p>\n<p class=\"intro-text\">Assign <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Page Defaults<\/a> and complete the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/page-properties\/\">Page Properties<\/a> before finishing off your page.<\/p>\n<\/div>\n<p class=\"intro-text\">\u00a0<\/p>\n<h3>Page Defaults<\/h3>\n<p class=\"intro-text\">Page defaults allow you to set the initial values of your variables so that when a user opens the page, they see a useful view of the page data.<\/p>\n<p class=\"intro-text\">Click the <strong>Defaults\u00a0<\/strong><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/defaultvaluesicon.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14981\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/defaultvaluesicon.png\" alt=\"defaultvaluesicon\" width=\"18\" height=\"16\" \/><\/a>\u00a0button in the ribbon.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16963 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6.png\" width=\"1542\" height=\"936\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6.png 1542w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6-768x466.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6-150x91.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6-1280x777.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6-48x29.png 48w\" sizes=\"auto, (max-width: 1542px) 100vw, 1542px\" \/><\/a><\/p>\n<p class=\"intro-text\">First, we need to update 2 variables:\u00a0<\/p>\n<ul class=\"intro-text\">\n<li><strong>endTime<\/strong>: This is initially set to today's date. You can change it if you want, but it's OK to leave it for this exercise.<\/li>\n<li><strong>startTime<\/strong>: This is initially set to one week\u00a0before today.\u00a0You can change it if you want, but it's OK to leave it for this exercise.<\/li>\n<\/ul>\n<p class=\"intro-text\">Then, we need to add\u00a02 new variables:<\/p>\n<ul class=\"intro-text\">\n<li>Click the <strong>Add<\/strong> button twice.<\/li>\n<li>Add the variable called <strong>selectedEntities<\/strong>,<strong><i>\u00a0<\/i><\/strong>with a type of <em>EntityList.<\/em>\u00a0Type in the following entities, pressing the Enter key after each one: <em>Big Red, Archer, Ibis.<\/em><\/li>\n<li>Add the variable called <strong>selectedOption<\/strong><em>,<\/em> with a type of <em>Text<\/em>. Type <em>No Issues<\/em> into the box.<\/li>\n<\/ul>\n<p class=\"intro-text\">You should see the page update to reflect the new data and selected option. \u00a0\u00a0<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<h3>Page Properties<\/h3>\n<p class=\"intro-text\">In the ribbon, click the <strong>Properties<\/strong> <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/propertiesicon.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14982\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/propertiesicon.png\" alt=\"propertiesicon\" width=\"18\" height=\"16\" \/><\/a>\u00a0button.<\/p>\n<p class=\"intro-text\">There are 2 sections you should fill out: Description and Thumbnail.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6a.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16964 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6a.png\" width=\"352\" height=\"648\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6a.png 352w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6a-81x150.png 81w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6a-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6a-20x36.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/buildpage-tut-6a-26x48.png 26w\" sizes=\"auto, (max-width: 352px) 100vw, 352px\" \/><\/a><\/p>\n<p class=\"intro-text\">For the <strong>Description,<\/strong> type a short sentence on what this page is used for.<\/p>\n<p class=\"intro-text\">For the <strong>Thumbnail,<\/strong> take a screenshot of your page in run time (you can use the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"Preview Button\" width=\"13\" height=\"14\" \/><\/a>\u00a0button), resize it to 414x262 px, and upload it.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/pagepropertiesthumb.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15101\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/pagepropertiesthumb.png\" alt=\"Page properties with thumbnail\" width=\"347\" height=\"541\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/pagepropertiesthumb.png 347w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/pagepropertiesthumb-96x150.png 96w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/pagepropertiesthumb-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/pagepropertiesthumb-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/pagepropertiesthumb-31x48.png 31w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/a><\/p>\n<p class=\"intro-text\">Finally, click the <strong>Finish and Open<\/strong>\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2978\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" alt=\"livemode\" width=\"14\" height=\"16\" \/><\/a>\u00a0button and your page is complete!<\/p>\n<p class=\"intro-text\">Now, click around on your page and observe the changes in the Option Links, Data Label, and Pie Chart components.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/BuildingAPage.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14908\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/BuildingAPage.png\" alt=\"BuildingAPage\" width=\"1002\" height=\"632\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/BuildingAPage.png 1002w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/BuildingAPage-768x484.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/BuildingAPage-150x95.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/BuildingAPage-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/BuildingAPage-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/BuildingAPage-48x30.png 48w\" sizes=\"auto, (max-width: 1002px) 100vw, 1002px\" \/><\/a><\/p>\n<p class=\"note\">Well done! You have completed the tutorial on building a page in Explorer. Look through the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/\">complete list of components<\/a> to find more ways you can build a page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article takes you through a detailed step-by-step process of building a useful page in IFS OI Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":15115,"parent":1401,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[442,92],"class_list":["post-14902","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-display","tag-page","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14902","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=14902"}],"version-history":[{"count":12,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14902\/revisions"}],"predecessor-version":[{"id":72268,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14902\/revisions\/72268"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/15115"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=14902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=14902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=14902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}