{"id":24724,"date":"2017-02-22T09:09:21","date_gmt":"2017-02-22T01:09:21","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=24724"},"modified":"2017-12-20T14:01:20","modified_gmt":"2017-12-20T06:01:20","slug":"precision-layout-4-4-1","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/precision-layout-4-4-1\/","title":{"rendered":"Precision Layout (4.4.1)"},"content":{"rendered":"\n<div id=\"toc_container\" class=\"toc_white no_bullets\">\n<p class=\"toc_title\">Contents<\/p>\n<ul class=\"toc_list\">\n<li><a href=\"#Overview\">Overview<\/a><\/li>\n<li><a href=\"#Tutorial_Creating_a_Schematic_Using_Precision_Layout\">Tutorial: Creating a Schematic Using Precision Layout<\/a><\/li>\n<li><a href=\"#Release_History\">Release History<\/a><\/li>\n<\/ul>\n<\/div>\n<p class=\"left-bar\">This article applies to versions 4.4.1 - 4.4.3 of P2 Explorer.\u00a0For 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. It offers more flexibility for single components\u00a0than a Grid Layout,\u00a0however because\u00a0it has a fixed size it doesn\u2019t scale between small and large resolutions.<\/p>\n<p class=\"intro-text\">A\u00a0Precision Layout can also be inserted into a\u00a0Grid Layout, and vice versa. You can use this feature to manipulate the resolution of the page so that it is fixed in one part and flexible in another.<\/p>\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 X and Y coordinates for the component, and also the exact width and height. 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\/2016\/06\/image012.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15652\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/image012.png\" alt=\"Precision layout 4.4.1\" width=\"270\" height=\"169\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/image012.png 270w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/image012-150x94.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/image012-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/image012-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/image012-48x30.png 48w\" sizes=\"auto, (max-width: 270px) 100vw, 270px\" \/><\/a><\/p>\n<p class=\"intro-text\">Another useful way of positioning a component is to use the <strong>arrow keys<\/strong> to move it up, down, left, and right.<\/p>\n<p class=\"left-bar-p2blue\">Related: Adding a new <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/styles\/#PrecisionLayout\">Precision\u00a0Layout\u00a0style<\/a><\/p>\n<hr \/>\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\/precision-tuta.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16780 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta.png\" width=\"1129\" height=\"633\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta.png 1129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta-768x431.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta-150x84.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta-48x27.png 48w\" sizes=\"auto, (max-width: 1129px) 100vw, 1129px\" \/><\/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\/precisionlayout-choose.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14475\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionlayout-choose.png\" alt=\"Precision Layout 4.4\" width=\"907\" height=\"587\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionlayout-choose.png 907w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionlayout-choose-768x497.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionlayout-choose-150x97.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionlayout-choose-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionlayout-choose-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionlayout-choose-48x31.png 48w\" sizes=\"auto, (max-width: 907px) 100vw, 907px\" \/><\/a><\/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\/precision-tut-2.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16782\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-2.png\" alt=\"precision-tut-2\" width=\"1431\" height=\"642\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-2.png 1431w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-2-768x345.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-2-150x67.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-2-1280x574.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-2-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-2-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-2-48x22.png 48w\" sizes=\"auto, (max-width: 1431px) 100vw, 1431px\" \/><\/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 <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" rel=\"lightbox[1429] lightbox-4\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\"><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\" data-pin-nopin=\"true\" \/><\/a>\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: 0<\/li>\n<li>Y: 0<\/li>\n<li>Width: 285<\/li>\n<li>Height: 60<\/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\/precision-tut-3.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16791\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-3.png\" alt=\"precision-tut-3\" width=\"1431\" height=\"643\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-3.png 1431w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-3-768x345.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-3-150x67.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-3-1280x575.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-3-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-3-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-3-48x22.png 48w\" sizes=\"auto, (max-width: 1431px) 100vw, 1431px\" \/><\/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<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchy.png\" rel=\"lightbox[1415] lightbox-6\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1850\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchy.png\" alt=\"hierarchy\" width=\"20\" height=\"17\" \/><\/a>\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: 80<\/li>\n<li>Width: 269<\/li>\n<li>Height: 540<\/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 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\/precision-tut-4.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16799\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-4.png\" alt=\"precision-tut-4\" width=\"1685\" height=\"678\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-4.png 1685w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-4-768x309.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-4-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-4-1280x515.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-4-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-4-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-4-48x19.png 48w\" sizes=\"auto, (max-width: 1685px) 100vw, 1685px\" \/><\/a><\/p>\n<p class=\"intro-text\">The background image provides the user with the ability to visualise the meaning behind the data. The image must be stored on a secure website (using https) accessible over the network.<\/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 <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" rel=\"lightbox[1429] lightbox-4\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\"><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\" \/><\/a>\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>Default Image URL:\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 Position in Precision Layout options, as follows:\n<ul class=\"intro-text\">\n<li>X: 300<\/li>\n<li>Y: 80<\/li>\n<li>Width:\u00a0800<\/li>\n<li>Height:\u00a0574<\/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\/precision-tut-5.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16805\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-5.png\" alt=\"precision-tut-5\" width=\"1685\" height=\"679\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-5.png 1685w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-5-768x309.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-5-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-5-1280x516.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-5-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-5-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-5-48x19.png 48w\" sizes=\"auto, (max-width: 1685px) 100vw, 1685px\" \/><\/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 <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/timeicon_sm.png\" rel=\"lightbox[13123] lightbox-10\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1865\" 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\" \/><\/a>\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 Position in Precision Layout options, as follows:\n<ul class=\"intro-text\">\n<li>X:\u00a01002<\/li>\n<li>Y:\u00a011<\/li>\n<li>Width: 100<\/li>\n<li>Height:\u00a035<\/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-tut-6.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16807\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-6.png\" alt=\"precision-tut-6\" width=\"1660\" height=\"841\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-6.png 1660w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-6-768x389.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-6-150x76.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-6-1280x648.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-6-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-6-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-6-48x24.png 48w\" sizes=\"auto, (max-width: 1660px) 100vw, 1660px\" \/><\/a><\/p>\n<p class=\"intro-text\">If we\u00a0don't set any default values, there will be no data displayed on the page when it is first loaded. 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 data in 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.\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><strong>selectedEntity<\/strong> is listed first, update it to specify \"Archer\".<\/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 text and data at various places on the image.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 7. Add the Text Label for the tubing head<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-7.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16817\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-7.png\" alt=\"precision-tut-7\" width=\"1684\" height=\"678\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-7.png 1684w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-7-768x309.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-7-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-7-1280x515.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-7-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-7-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-7-48x19.png 48w\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" \/><\/a><\/p>\n<p class=\"intro-text\">Now we'll start adding the components that will make our schematic show us relevant data. But a data point on its own is confusing if it's not labelled, so let's add a label first. We're going to start with the tubing head pressure.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <strong>Text Label<\/strong>\u00a0component\u00a0onto the canvas.<\/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, complete\u00a0the following:\n<ul class=\"intro-text\">\n<li>Content:\u00a0<strong>Tubing Head<\/strong><\/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:\u00a0453<\/li>\n<li>Y:\u00a030<\/li>\n<li>Width:\u00a0117<\/li>\n<li>Height:\u00a042<\/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<\/p>\n<p class=\"intro-text\"><strong>Step 8. Add the\u00a0Data\u00a0Label for the tubing head pressure data item<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16827\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8.png\" alt=\"precision-tut-8\" width=\"1684\" height=\"679\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8.png 1684w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8-768x310.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8-1280x516.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8-48x19.png 48w\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" \/><\/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 Data Label component\u00a0onto the canvas.\u00a0The Data Label is in the Display <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" rel=\"lightbox[1429] lightbox-14\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\" data-slimstat-tracking=\"false\" data-slimstat-type=\"2\" data-slimstat-clicked=\"false\"><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\" data-pin-nopin=\"true\" \/><\/a> group.<\/li>\n<li>Position it so that it sits above the tubing head in the background image, and below the tubing head Text Label.<\/li>\n<li>Resize it approximately.<\/li>\n<\/ul>\n<ul class=\"intro-text\">\n<li>In the Data Label editor, open the <strong>Value\u00a0<\/strong>Data Selector by clicking on the field. You will notice that the Value\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" rel=\"lightbox[1605] lightbox-15\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15215\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/dataselectorvalueicon.png\" alt=\"Data selector Value icon\" width=\"15\" height=\"15\" \/><\/a>\u00a0tab is automatically selected. However, for this tutorial, we want to get data from the <strong>Well Production\u00a0Data\u00a0<\/strong>dataset query, so click the Dataset <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/datasetquerydataicon.png\" rel=\"lightbox[1605] lightbox-16\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\"><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. Fill in the fields as follows:\u00a0\n<ul class=\"intro-text\">\n<li>Dataset Query: WellProductionData<\/li>\n<li>Filter Column: Entity<\/li>\n<li>Filter Value:\u00a0(Variable) selectedEntity<br \/>\n <em>Note: You will need to type this in, it will not be available for selection.<\/em><\/li>\n<li>Value Column: THP<br \/>\n <em>Note: See <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> for more information on how these fields\u00a0work.<br \/>\n \u00a0<br \/>\n <\/em><\/li>\n<li>EndDate: (Variable) endTime<\/li>\n<li>EntitiesList: (Variable) selectedEntity<br \/>\n <em>Note: You will need to type this in, it will not be available for selection.<\/em><\/li>\n<li>StartDate: (Variable) startTime<br \/>\n <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8b.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16829 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8b.png\" width=\"325\" height=\"434\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8b.png 325w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8b-112x150.png 112w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8b-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8b-27x36.png 27w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-8b-36x48.png 36w\" sizes=\"auto, (max-width: 325px) 100vw, 325px\" \/><\/a><\/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 class=\"intro-text\">Finally, refine the position and size of the Data Label using the Position in Precision Layout options, as follows:<\/p>\n<ul class=\"intro-text\">\n<li>X:\u00a0472<\/li>\n<li>Y: 60<\/li>\n<li>Width:\u00a062<\/li>\n<li>Height:\u00a043<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">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-callback=\"false\" data-slimstat-async=\"false\">Filter Column and Filter Value<\/a>,\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data\u00a0Label<\/a>\u00a0tutorial<\/p>\n<p class=\"intro-text\"><strong>Step 9.\u00a0Add the label for the measurement units<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-9.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16836\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-9.png\" alt=\"precision-tut-9\" width=\"1684\" height=\"679\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-9.png 1684w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-9-768x310.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-9-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-9-1280x516.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-9-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-9-36x15.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-9-48x19.png 48w\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" \/><\/a><\/p>\n<p class=\"intro-text\">We'll use another Text Label for the measurement units.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the <a title=\"Text Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a>\u00a0component\u00a0onto the canvas.<\/li>\n<li>Position it so that it sits to the right of the Data Label for the tubing head, and resize it appropriately.\u00a0You may notice that it starts to get a bit tricky to get the alignment just so. You can use the arrow keys to move the label up, down, left, or right.<\/li>\n<li>In the configuration options, complete\u00a0the following:\n<ul>\n<li>Content: <span style=\"color: #000000;\">psi<\/span><\/li>\n<li>Style: Small<\/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:\u00a0520<\/li>\n<li>Y:\u00a069<\/li>\n<li>Width:\u00a044<\/li>\n<li>Height:\u00a031<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 10. Add the labels for the remaining data\u00a0<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-16837\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10.png\" alt=\"precision-tut-10\" width=\"1129\" height=\"678\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10.png 1129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-768x461.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-48x29.png 48w\" sizes=\"auto, (max-width: 1129px) 100vw, 1129px\" \/><\/a><\/p>\n<p class=\"intro-text\">We have a few other values we'd like to display on this schematic, so let's go ahead and do that one by one. Refer to\u00a0the above image and follow steps 7-9 to add the following:<\/p>\n<ul class=\"intro-text\">\n<li>Choke Position<\/li>\n<li>Casing Pressure<\/li>\n<\/ul>\n<p class=\"intro-text\">Configure the data labels using the <strong>WellProductionData<\/strong> dataset, as follows:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-a1.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16841 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-a1.png\" width=\"334\" height=\"624\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-a1.png 334w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-a1-80x150.png 80w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-a1-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-a1-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-a1-26x48.png 26w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/a>\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-b1.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16840 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-b1.png\" width=\"334\" height=\"624\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-b1.png 334w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-b1-80x150.png 80w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-b1-13x24.png 13w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-b1-19x36.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tut-10-b1-26x48.png 26w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong><br \/>\n Step 11. All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16780 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta.png\" width=\"1129\" height=\"633\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta.png 1129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta-768x431.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta-150x84.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-tuta-48x27.png 48w\" sizes=\"auto, (max-width: 1129px) 100vw, 1129px\" \/><\/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<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-23\"><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\" width=\"13\" height=\"14\" \/><\/a>\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=\"intro-text\"><span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout-4-4-0\/\">Precision Layout 4.4.0<\/span><\/li>\n<li class=\"intro-text\"><span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout-4-3-2\/\">Precision Layout 4.3.2<\/span><\/li>\n<\/ul>\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.4.1 and later of P2 Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/precision-layout-4-4-1\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4668,"parent":1433,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[116,479,89,140,425],"class_list":["post-24724","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-layouts","tag-mimic","tag-precision-layout","tag-schematic","tag-xy-layout","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/24724","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=24724"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/24724\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1433"}],"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=24724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=24724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=24724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}