{"id":1433,"date":"2017-11-08T16:50:06","date_gmt":"2017-11-08T08:50:06","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1433"},"modified":"2024-10-23T14:20:56","modified_gmt":"2024-10-23T06:20:56","slug":"precision-layout","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/","title":{"rendered":"Precision Layout"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.5.2 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.<\/p>\n<h2 id=\"Overview\" class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">Precision Layout is typically used for pages that contain schematic diagrams, or for other designs where using a <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a> is too restrictive or complicated.<\/p>\n<p class=\"intro-text\">This layout lets you put components\u00a0anywhere on a page and make them any size.\u00a0However, each component\u2019s size and position is set during design mode, and therefore will not scale for different screen resolutions during display mode.<\/p>\n<p class=\"left-bar-p2blue\">Related: Adding a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-layouts\/\">Precision\u00a0Layout\u00a0style<\/a><\/p>\n<h3 id=\"When_to_Use_Precision_Layout\">When to Use Precision Layout<\/h3>\n<p class=\"intro-text\">You should use Precision Layout when:<\/p>\n<ul class=\"intro-text\">\n<li>You need to build schematic-style pages<\/li>\n<li>You need to build a mimic<\/li>\n<li>You want to have an image map where users can click on different parts to navigate to another page<\/li>\n<li>You don't need a page that resizes responsively<\/li>\n<li>Components need to be precisely positioned in relation to one another.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-resources\/explorer-studio-faq\/#How_do_I_choose_between_Precision_and_Grid_layout\">How to choose between Precision and Grid Layout<\/a><\/p>\n<h3 id=\"How_to_Use_Precision_Layout\">How to Use Precision Layout<\/h3>\n<p class=\"intro-text\">Precision Layout can mixed and matched with the Grid Layout for greater page layout manipulation. Here are some examples.<\/p>\n<p class=\"intro-text\"><strong>Manipulate page resolution<\/strong>: Inserting a Precision Layout into a\u00a0Grid Layout cell allows you to manipulate the resolution of the page so that it is fixed in one part and flexible in another.\u00a0<\/p>\n<p class=\"intro-text\"><strong>Add hotspots in a Grid Layout<\/strong>: Inserting a Precision Layout into a Grid Layout cell allows you to then overlay an image and a hotspot in that grid cell.<\/p>\n<p class=\"intro-text\"><strong>Add a legend to a mimic<\/strong>: Adding a Grid Layout over a Precision Layout allows you to neatly align components such as Text Labels and Images, to form a legend for the page.<\/p>\n<h4>Moving Components on the Precision Layout<\/h4>\n<p class=\"intro-text\">There are 2 ways to move components on a Precision Layout: using the mouse to click and drag, or using the arrow keys.<\/p>\n<p class=\"intro-text\"><strong>Using the mouse to click and drag\u00a0<\/strong><\/p>\n<p class=\"intro-text\">When added to a Precision Layout, components show a blue outline, and four squares at the corners. These squares are 'drag handles', which allows you to resize the component.<\/p>\n<p class=\"intro-text\">To move the whole component on the layout, click the middle of the component, hold the left mouse button down, and drag the component to the new location.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-move.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24800\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-move.png\" alt=\"\" width=\"295\" height=\"214\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-move.png 295w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-move-150x109.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-move-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-move-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-move-48x35.png 48w\" sizes=\"auto, (max-width: 295px) 100vw, 295px\" \/><\/a><\/p>\n<p class=\"intro-text\">To resize the component, click one of the drag handles and drag it in or out, until you have the desired size.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-resize.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24801\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-resize.png\" alt=\"\" width=\"274\" height=\"107\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-resize.png 274w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-resize-150x59.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-resize-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-resize-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-resize-48x19.png 48w\" sizes=\"auto, (max-width: 274px) 100vw, 274px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>Using the arrow keys<\/strong><\/p>\n<p class=\"intro-text\">In Precision Layout, you can move a component by clicking on it and then using the arrow keys. Use together with the Shift key to make larger moves.<\/p>\n<p class=\"intro-text\">Click a component, then:<\/p>\n<table>\n<tbody>\n<tr>\n<td style=\"width: 100px;\"><strong>Left<\/strong><\/td>\n<td style=\"width: 200px;\">Press left arrow key<\/td>\n<td>Moves component 1 pixel to the left<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>Press Shift+Left arrow<\/td>\n<td>Moves component 10 pixels to the left<\/td>\n<\/tr>\n<tr>\n<td><strong>Right<\/strong><\/td>\n<td>Press the Right arrow key<\/td>\n<td>Moves component 1 pixel to the right<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>Press Shift+Right arrow<\/td>\n<td>Moves component 10 pixels to the right<\/td>\n<\/tr>\n<tr>\n<td><strong>Up<\/strong><\/td>\n<td>Press the Up arrow key<\/td>\n<td>Moves component 1 pixel up<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>Press Shift+Up arrow<\/td>\n<td>Moves component 10 pixels up<\/td>\n<\/tr>\n<tr>\n<td><strong>Down<\/strong><\/td>\n<td>Press the down arrow key<\/td>\n<td>Moves component 1 pixel down<\/td>\n<\/tr>\n<tr>\n<td>&nbsp;<\/td>\n<td>Press Shift+Down arrow<\/td>\n<td>Moves component 10 pixels down<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3 id=\"Component_Properties_in_Precision_Layout\">Component Properties in Precision Layout<\/h3>\n<p class=\"intro-text\">After you have added a component to the Precision\u00a0Layout, you can reposition it without having to go into the precision layout\u00a0editor. Component editors have a \"<strong>Position in Precision\u00a0Layout<\/strong>\" section after the configuration options, which allows you to specify the layer, X-Y coordinates, and exact width and height of the component. The coordinates apply to the top left corner of the component.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-properties.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24795\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-properties.png\" alt=\"\" width=\"325\" height=\"225\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-properties.png 325w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-properties-150x104.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-properties-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-properties-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-properties-48x33.png 48w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/p>\n<ul>\n<li><strong>Layer<\/strong>: Foreground, Upper Middle, Middle, Lower Middle, or Background. When components are overlaid, this determines which component sits in front and which is at the back. If there are more than 3 overlaid components, you will need to play with this setting until you get the desired result.\u00a0<\/li>\n<li><strong>X<\/strong>: The distance of the component, in pixels, from the left of the\u00a0precision layout<\/li>\n<li><strong>Y<\/strong>: The distance of the component, in pixels, from the top of the precision layout<\/li>\n<li><strong>Width<\/strong>: The width of the component, in pixels<\/li>\n<li><strong>Height<\/strong>: The height of the component, in pixels<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr style=\"font-size: 12px;\" \/>\n<h2 id=\"Tutorial_Creating_a_Schematic_Using_Precision_Layout\" class=\"page-subheading\">Tutorial:\u00a0Creating a Schematic Using Precision Layout<\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article\u00a0<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\">Precision Layout has no specific parameters. You can begin using this layout by simply dragging the component\u00a0and dropping it onto the canvas.<\/p>\n<p class=\"intro-text\">In this topic, we'll show you how to use the Precision Layout to design a simple schematic.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"border-image alignnone wp-image-24841 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final.png\" width=\"939\" height=\"639\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final.png 939w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final-768x523.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final-150x102.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final-48x33.png 48w\" sizes=\"auto, (max-width: 939px) 100vw, 939px\" \/><\/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\u00a0and queries that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/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.png 438w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-150x37.png 150w, 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\" alt=\"New Page button on ribbon\" width=\"438\" height=\"109\" \/><\/p>\n<p class=\"intro-text\">Before you start, click the <strong>New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Precision\u00a0layout.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24775\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-1.png\" alt=\"\" width=\"1039\" height=\"662\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-1.png 1039w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-1-768x489.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-1-150x96.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-1-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-1-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-1-48x31.png 48w\" sizes=\"auto, (max-width: 1039px) 100vw, 1039px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add\u00a0the Text Label for the title<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut2-1.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-24777 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut2-1.png\" width=\"1235\" height=\"548\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut2-1.png 1235w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut2-1-768x341.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut2-1-150x67.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut2-1-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut2-1-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut2-1-48x21.png 48w\" sizes=\"auto, (max-width: 1235px) 100vw, 1235px\" \/><\/a><\/p>\n<p class=\"intro-text\">This step adds the\u00a0title to the page, and is located in the top left corner.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <strong>Text Label<\/strong>\u00a0component\u00a0onto the canvas.\u00a0The Text Label 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\" data-pin-nopin=\"true\" \/>\u00a0group.<\/li>\n<li>You will notice that by default it has a square shape, and 4 drag handles will appear in the corners.<\/li>\n<li>Move the label to the upper left corner, and resize it to the size that you think the text will need.<\/li>\n<li>In the configuration options, complete\u00a0the following:\n<ul class=\"intro-text\">\n<li>Content: Well Overview<\/li>\n<li>Style: Page Title<\/li>\n<\/ul>\n<\/li>\n<li>Refine the position and size using the Position in Precision Layout options, as follows:\n<ul class=\"intro-text\">\n<li>X: 1<\/li>\n<li>Y: 1<\/li>\n<li>Width: 250<\/li>\n<li>Height: 61<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">The X and Y options refer to the X-Y coordinates of the top left drag handle of the component.<\/p>\n<p class=\"intro-text\">The Width and Height of the component are specified in pixels.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\">Text\u00a0Label<\/a>\u00a0tutorial<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 3. Add\u00a0the Entity Selector<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut3-1.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-24784 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut3-1.png\" width=\"1231\" height=\"604\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut3-1.png 1231w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut3-1-768x377.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut3-1-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut3-1-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut3-1-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut3-1-48x24.png 48w\" sizes=\"auto, (max-width: 1231px) 100vw, 1231px\" \/><\/a><\/p>\n<p class=\"intro-text\">This step allows the user to select an entity, which will drive the data displayed on the schematic.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <strong>Entity Selector\u00a0<\/strong>onto the canvas.\u00a0The Entity Selector is in the Hierarchy\u00a0<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\" \/>\u00a0group.<\/li>\n<li>Move it to the left side\u00a0and resize it so that it's the approximate size you want.<\/li>\n<li>Click the <strong>Advanced<\/strong> button and configure it as follows:\n<ul class=\"intro-text\">\n<li>Select Mode: Single<\/li>\n<li>Selected Entity: selectedEntity<\/li>\n<li>Hierarchy Name: (Hierarchy) P2 Corporate<\/li>\n<li>Template Filter: (Text) Oil Producing Well<\/li>\n<li>Start Node: (Entity) Far North<\/li>\n<\/ul>\n<\/li>\n<li>Refine the position and size using the Position in Precision Layout options, as follows:\n<ul class=\"intro-text\">\n<li>X: 0<\/li>\n<li>Y: 71<\/li>\n<li>Width: 251<\/li>\n<li>Height: 458<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector<\/a>\u00a0tutorial<\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add\u00a0the\u00a0background image<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut4.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24779\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut4.png\" alt=\"\" width=\"1497\" height=\"620\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut4.png 1497w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut4-768x318.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut4-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut4-1280x530.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut4-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut4-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut4-48x20.png 48w\" sizes=\"auto, (max-width: 1497px) 100vw, 1497px\" \/><\/a><\/p>\n<p class=\"intro-text\">The background image provides the user with the ability to visualise the meaning behind the data.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <strong>Image<\/strong>\u00a0component\u00a0onto the canvas.\u00a0The Image 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\" \/>\u00a0group.<\/li>\n<li>Move it to the right of the Entity Selector\u00a0and resize it approximately.<\/li>\n<li>Configure the Image options as follows:\n<ul class=\"intro-text\">\n<li>Display: Stretch<\/li>\n<li>Default Image:\u00a0<em>https:\/\/oihelp.corporate.ifs.com\/help\/Images\/GasLift.gif<\/em><\/li>\n<\/ul>\n<\/li>\n<li>Refine the position and size using the <strong>Position in Precision Layout<\/strong> options, as follows:\n<ul class=\"intro-text\">\n<li>X: 253<\/li>\n<li>Y: 73<\/li>\n<li>Width: 664<\/li>\n<li>Height:\u00a0522<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/\">Image<\/a>\u00a0tutorial<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 5. Add\u00a0the Date Picker<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut5.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24780\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut5.png\" alt=\"\" width=\"1497\" height=\"621\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut5.png 1497w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut5-768x319.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut5-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut5-1280x531.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut5-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut5-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut5-48x20.png 48w\" sizes=\"auto, (max-width: 1497px) 100vw, 1497px\" \/><\/a><\/p>\n<p class=\"intro-text\">This step adds a date picker to the page, which will drive the data displayed on the schematic.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <strong>Date Picker<\/strong>\u00a0component\u00a0onto the canvas.\u00a0The Date Picker is in the Time <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1865 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/timeicon_sm.png\" alt=\"timeicon_sm\" width=\"18\" height=\"17\" data-pin-nopin=\"true\" \/>\u00a0group.<\/li>\n<li>Move it to the upper right corner and resize it. You don't need to change the configuration options - in the next step we will add defaults for these variables.<\/li>\n<li>Refine the position and size using the <strong>Position in Precision Layout<\/strong> options, as follows:\n<ul class=\"intro-text\">\n<li>X: 819<\/li>\n<li>Y: 6<\/li>\n<li>Width: 100<\/li>\n<li>Height:\u00a030<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-picker\/\">Date Picker<\/a>\u00a0tutorial<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 6. Set the Default Values<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-6.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-30450\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-6.png\" alt=\"\" width=\"1692\" height=\"845\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-6.png 1692w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-6-768x384.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-6-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-6-1280x639.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-6-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-6-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-6-48x24.png 48w\" sizes=\"auto, (max-width: 1692px) 100vw, 1692px\" \/><\/a><\/p>\n<p class=\"intro-text\">Using Default Values, we can specify the entity that will always be selected by default when the page is loaded.\u00a0<\/p>\n<div class=\"best-prac\"><i class=\"fa fa-trophy fa-2x fa-pull-left\"><\/i><span class=\"best-prac-text\">BEST PRACTICE<\/span><\/p>\n<p class=\"best-prac-desc\">You should specify the default values for the selected entity so you can see the right data on the page when it first loads.<\/p>\n<\/div>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\">Let\u2019s change the default data that is displayed. We are interested in the variable,\u00a0<strong>selectedEntity<\/strong>.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Click the <em><strong>Default Values<\/strong><\/em> button on the Studio toolbar.<\/li>\n<li>For<strong> selectedEntity<\/strong>, enter <em>archer<\/em>.<\/li>\n<\/ul>\n<p class=\"intro-text\">You should now see the Entity Selector change so that the check box is selected for the default entity, Archer. \u00a0\u00a0<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Variables<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Default Values<\/a><\/p>\n<p class=\"intro-text\">In the remaining steps, we will add data at various places on the image.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 7. Add a Text Label for the tubing head\u00a0temperature<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24842\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7.png\" alt=\"\" width=\"1497\" height=\"621\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7.png 1497w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7-768x319.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7-150x62.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7-1280x531.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7-48x20.png 48w\" sizes=\"auto, (max-width: 1497px) 100vw, 1497px\" \/><\/a><\/p>\n<p class=\"intro-text\">Now we'll start adding the components that will make our schematic show us relevant data. We'll add an advanced Text Label that is also configured to show the data for the Tubing Head Temperature of the selected entity.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <strong>Text Label<\/strong>\u00a0component\u00a0onto the canvas.\u00a0The Text Label 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\" data-pin-nopin=\"true\" \/> group<\/li>\n<li>Position it so that it sits above the tubing head in the background image, and resize it appropriately.<\/li>\n<li>In the configuration options for the Text Label:\n<ul class=\"intro-text\">\n<li>[A] In the Content box, type:\u00a0<strong>THT:\u00a0<\/strong><\/li>\n<li>[B] Click the <strong>Add Data<\/strong> button.<\/li>\n<li>[C] In the callout, choose the <strong>Type<\/strong> of <em>Number<\/em> (we want to display a number).<\/li>\n<li>[D] Click the Data drop-down, and choose the <strong>Attribute<\/strong>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17335 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Attribute-icon.png\" width=\"21\" height=\"19\" \/> tab in the Data Selector. For <strong>Template<\/strong>\u00a0choose <em>Oil Producing Well,<\/em> and for <strong>Attribute<\/strong> choose <em>THT<\/em>.<\/li>\n<\/ul>\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\">Click the Preview button to check that you are getting data. If the preview window is blank, you may have filled in a parameter incorrectly.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<ul class=\"intro-text\">\n<li>[E] Back in the callout, choose a <strong>Format<\/strong> of <em>Decimals<\/em>.<\/li>\n<li>[F] In the Decimals field, specify 0 decimal places.<\/li>\n<li>[G] Click the <strong>Add<\/strong> button to add the data to the Text Label. The Content will now look something like,\u00a0<strong>THT: {{6:number:decimals(0)}}<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7A.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24843\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7A.png\" alt=\"\" width=\"824\" height=\"493\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7A.png 824w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7A-768x459.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7A-150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7A-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7A-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-7A-48x29.png 48w\" sizes=\"auto, (max-width: 824px) 100vw, 824px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>Refine the position and size of the Text Label using the <strong>Position in Precision Layout<\/strong> options, as follows:\n<ul class=\"intro-text\">\n<li>X: 384<\/li>\n<li>Y: 48<\/li>\n<li>Width: 106<\/li>\n<li>Height: 37<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\">Text\u00a0Label<\/a>\u00a0tutorial, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a>,\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/filter-column-and-filter-value\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\">Filter Column and Filter Value<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 8. Add a Text Label for the tubing head\u00a0pressure<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-8.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24844\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-8.png\" alt=\"\" width=\"1506\" height=\"616\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-8.png 1506w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-8-768x314.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-8-150x61.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-8-1280x524.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-8-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-8-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-8-48x20.png 48w\" sizes=\"auto, (max-width: 1506px) 100vw, 1506px\" \/><\/a><\/p>\n<p class=\"intro-text\">The actual value of the tubing head pressure is displayed by a Data Label.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <strong>Text Label<\/strong>\u00a0component\u00a0onto the canvas.\u00a0The Text Label 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\" data-pin-nopin=\"true\" \/> group<\/li>\n<li>Position it so that it sits above the tubing head in the background image, and resize it appropriately.<\/li>\n<li>Configuration of this label is very similar to the previous step:\n<ul class=\"intro-text\">\n<li>In the Content box, type:\u00a0<strong>THP:\u00a0<\/strong><\/li>\n<li>Click the <strong>Add Data<\/strong> button.<\/li>\n<li>In the callout, choose the <strong>Type<\/strong> of <em>Number<\/em> (we want to display a number).<\/li>\n<li>Click the Data drop-down, and choose the <strong>Attribute<\/strong>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17335 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Attribute-icon.png\" width=\"21\" height=\"19\" \/> tab in the Data Selector. For <strong>Template<\/strong>\u00a0choose <em>Oil Producing Well,<\/em> and for <strong>Attribute<\/strong> choose <em>THP<\/em>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\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\">Click the Preview button to check that you are getting data. If the preview window is blank, you may have filled in a parameter incorrectly.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<ul class=\"intro-text\">\n<li>Back in the callout, choose a <strong>Format<\/strong> of <em>Decimals<\/em>.<\/li>\n<li>In the Decimals field, specify 0 decimal places.<\/li>\n<li>Click the <strong>Add<\/strong> button to add the data to the Text Label. The Content will now look something like,\u00a0<strong>THP: {{7:number:decimals(0)}}<\/strong><\/li>\n<li>Finally, refine the position and size of the Data Label using the <strong>Position in Precision Layout<\/strong> options, as follows:\n<ul class=\"intro-text\">\n<li>X: 291<\/li>\n<li>Y: 108<\/li>\n<li>Width: 90<\/li>\n<li>Height: 34<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 9. Manipulating Layers<\/strong><\/p>\n<p class=\"intro-text\">One of the most useful features of Precision Layout is the ability to specify the order in which overlaid objects appear. So you can specify which component sits in the front, and which one sits at the back.\u00a0This is also referred to as z-ordering or z-layering.<\/p>\n<p class=\"intro-text\">Click the THP label, and change the <strong>Layer<\/strong> to <em>Background<\/em>.\u00a0<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-9a.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-30465\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-9a.png\" alt=\"\" width=\"319\" height=\"142\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-9a.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-9a-150x67.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-9a-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-9a-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-452-tut-9a-48x21.png 48w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<p class=\"intro-text\">Observe what happens - the content of the label disappears, but you can still see its outline. This is because it is now <em>behind<\/em> the image.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9a.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-24850\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9a.png\" alt=\"\" width=\"290\" height=\"148\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9a.png 290w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9a-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9a-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9a-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9a-48x24.png 48w\" sizes=\"auto, (max-width: 290px) 100vw, 290px\" \/><\/a><\/p>\n<p class=\"intro-text\">If you try to click the label again, you will notice that you can't select it - clicking only allows you to select the uppermost layer.<\/p>\n<p class=\"intro-text\">To select a component that is in one of the lower layers, right-click and choose it from the menu. In the menu, as you hover over the options, watch how the highlighted section on the canvas corresponds to the layer you are hovering over in the menu. When you hover over Image, the image layer is highlighted in blue; when you hover over Text Label, the label is highlighted.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9b1.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-24852 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9b1.png\" width=\"278\" height=\"176\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9b1.png 278w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9b1-150x95.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9b1-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9b1-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-9b1-48x30.png 48w\" sizes=\"auto, (max-width: 278px) 100vw, 278px\" \/><\/a><\/p>\n<p class=\"intro-text\">Keep changing the layers so you can understand how it works.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 10. All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"border-image alignnone wp-image-24841 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final.png\" width=\"939\" height=\"639\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final.png 939w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final-768x523.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final-150x102.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision444-tut-final-48x33.png 48w\" sizes=\"auto, (max-width: 939px) 100vw, 939px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a schematic page with data that will update according to the selected date and entity.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview\u00a0<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\" \/>\u00a0button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li>Choose\u00a0different dates and entities and observe the changes in the data.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" alt=\"save\" width=\"48\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" \/> Don't forget to <a title=\"Saving Your Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save your page<\/a>!<\/p>\n<hr \/>\n<h2 id=\"Release_History\" class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Precision Layout 4.5.2 (this release)\n<ul>\n<li class=\"overview\">2 new layers available (Upper Middle and Lower Middle)<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/precision-layout-4-4-4\/\">Precision Layout 4.4.4<\/a>\n<ul class=\"intro-text\">\n<li>Added\u00a0layering within component editors<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/precision-layout-4-4-1\/\">Precision Layout 4.4.1<\/a><\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/precision-layout-4-4-0\/\">Precision Layout 4.4.0<\/a><\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/precision-layout-4-3-2\/\">Precision Layout 4.3.2<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Precision Layout is typically used for pages that contain schematic diagrams, or for other designs where using a Grid Layout is too restrictive or complicated. This article describes how to configure a precision layout in versions 4.5.2 and later of 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-studio\/controls\/precision-layout\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4668,"parent":1407,"menu_order":410,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[116,479,89,140,425],"class_list":["post-1433","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-layouts","tag-mimic","tag-precision-layout","tag-schematic","tag-xy-layout","Version-4-5-2","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1433","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=1433"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1433\/revisions"}],"predecessor-version":[{"id":67049,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1433\/revisions\/67049"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4668"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=1433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=1433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=1433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}