{"id":16758,"date":"2016-07-11T07:46:35","date_gmt":"2016-07-10T23:46:35","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=16758"},"modified":"2019-09-24T10:33:36","modified_gmt":"2019-09-24T02:33:36","slug":"precision-layout-4-4-0","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/precision-layout-4-4-0\/","title":{"rendered":"Precision Layout (4.4.0)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to the Precision Layout in version 4.4.0 of P2 Explorer.\u00a0For help on the latest\u00a0version, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">Precision\u00a0Layout<\/a>.<\/p>\n<h3 class=\"page-subheading\">Overview<\/h3>\n<p class=\"intro-text\">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<hr \/>\n<h3 class=\"page-subheading\">Tutorial<\/h3>\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\/schematicpage2.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2049 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2.png\" alt=\"schematicpage2\" width=\"724\" height=\"651\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2.png 724w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2-150x135.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2-48x43.png 48w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><\/a><\/p>\n<p class=\"intro-text\">Let's look at how we're actually going to do this, step-by-step.<\/p>\n<hr \/>\n<h3 class=\"page-subheading\">Step by Step: Creating a Schematic Using Precision Layout<\/h3>\n<p class=\"intro-text\">Before you start, open a new tab in Explorer and click the \"Create a New Page in Studio Mode\" thumbnail.<\/p>\n<p class=\"intro-text\">If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Open a blank\u00a0page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/blanklayout.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2019 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/blanklayout.png\" alt=\"blanklayout\" width=\"468\" height=\"284\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/blanklayout.png 468w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/blanklayout-150x91.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/blanklayout-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/blanklayout-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/blanklayout-48x29.png 48w\" sizes=\"auto, (max-width: 468px) 100vw, 468px\" \/><\/a><\/p>\n<p class=\"intro-text\">If you want the entire display to be precision layout, \u00a0you would normally simply select <strong>Precision Layout<\/strong>. But for this tutorial, let's select <strong>Blank,<\/strong> so we can get a better understanding of how the Precision Layout works.<\/p>\n<ul class=\"intro-text\">\n<li>If you're feeling adventurous, you\u00a0could also start with a grid\u00a0layout and drag the Precision Layout component onto a grid cell. If you do this, the Precision Layout component can only extend to the maximum size of that cell.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 2.\u00a0Add a Precision Layout<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2953 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precision-800x417.png\" alt=\"\" width=\"800\" height=\"417\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the Precision Layout from the components\u00a0list. Precision Layout has no configuration options, so you don't need to do anything else here. It will automatically expand to take up the entire canvas.\u00a0The Precision\u00a0Layout is in the Layout\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/layouts.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1853\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/layouts.png\" alt=\"layouts\" width=\"20\" height=\"16\" \/><\/a>\u00a0group.<\/p>\n<ul class=\"intro-text\">\n<li>If you add a Precision Layout to a Grid Layout, it will also expand to take up the entire grid cell that you've added it to.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 3. Add\u00a0the Text Label for the title<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontext.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2954 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontext-800x417.png\" alt=\"\" width=\"800\" height=\"417\" \/><\/a><\/p>\n<p class=\"intro-text\">This step adds the\u00a0title to the page, which will automatically update depending on which entity the user selects.<\/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>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:<strong> Well Overview - {{selectedEntity}}<\/strong><\/li>\n<li>Select\u00a0the Title check box<\/li>\n<li>Select the Underline check box<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 4. Add\u00a0the Date Picker<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondate.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2955 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondate-800x416.png\" alt=\"\" width=\"800\" height=\"416\" \/><\/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 <a title=\"Date Picker\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-picker\/\">Date Picker<\/a>\u00a0component\u00a0onto the canvas.<\/li>\n<li>Move it to the upper right corner and resize it appropriately.<\/li>\n<\/ul>\n<p class=\"intro-text\">You don't need to change the configuration options if you don't want to - later we will add page defaults that match these events.<\/p>\n<p class=\"intro-text\"><strong>Step 5. Add\u00a0the Entity Selector<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionentities.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2960 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionentities-800x417.png\" alt=\"\" width=\"800\" height=\"417\" \/><\/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 <a title=\"Entity Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector<\/a> control onto the canvas.<\/li>\n<li>Move it to the left side\u00a0and resize it appropriately.<\/li>\n<li>Configure it as follows:\n<ul class=\"intro-text\">\n<li>Selected Entity: selectedEntity<\/li>\n<li>Template Filter: (Text) Well<\/li>\n<li>Number of Selections: 1<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">You don't need to change the Selected Entities and Hierarchy Name configuration options if you don't want to - in the next step we will add event\u00a0defaults for them.<\/p>\n<p class=\"intro-text\"><strong>Step 6.\u00a0Add\u00a0the data\u00a0<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondata.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2958 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondata-800x574.png\" alt=\"\" width=\"800\" height=\"574\" \/><\/a><\/p>\n<p class=\"intro-text\">Before we can display the data on the page, \u00a0we need to add the source data.<\/p>\n<ul class=\"intro-text\">\n<li>Below the canvas, click the button labelled \"<a title=\"Add Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/\">Add Data<\/a>\".<\/li>\n<li>Choose the data you are going to use. For this tutorial, we are using a <a title=\"Add a Relational Dataset\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/add-a-dataset\/\">dataset<\/a> called \"OilPressure\".<\/li>\n<li>In the configuration options, specify the following:\n<ul class=\"intro-text\">\n<li>Name: OilPressure1 (this is automatically added)<\/li>\n<li>Query: OilPressure (this is the query in P2 Server that is being used to return the data)<\/li>\n<li>Parameters - well: specify an event named selectedEntity<\/li>\n<li>Parameters - time: specify an event named endTime<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">These events correspond to the event\u00a0defaults we created earlier, and will feed the other components\u00a0on the page to display values\u00a0for\u00a0the selected date and entity.<\/p>\n<p class=\"intro-text\"><strong>Step 7. Add\u00a0the\u00a0background image<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionembed.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2962 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionembed-800x418.png\" alt=\"\" width=\"800\" height=\"418\" \/><\/a><\/p>\n<p class=\"intro-text\">The background image provides the user with the ability to visualise 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 <a title=\"Embed Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/embed-page\/\">Embed Page<\/a>\u00a0component\u00a0onto the canvas.<\/li>\n<li>Move it to the right of the Entity Selector\u00a0and resize it appropriately.<\/li>\n<li>In the Content box, type the full URL of the image e.g.\u00a0https:\/\/cadrondev01.petroleumplace.com\/explorerimages\/GasLift.gif<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 8. 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\/precisiontextlabel.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2963 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontextlabel-800x417.png\" alt=\"\" width=\"800\" height=\"417\" \/><\/a><\/p>\n<p class=\"intro-text\">Now we'll start adding the cool stuff 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 <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 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<li>Select\u00a0the Title check box<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 9. Set the event\u00a0defaults<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionevents.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2964 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionevents-800x516.png\" alt=\"\" width=\"800\" height=\"516\" \/><\/a><\/p>\n<p class=\"intro-text\">This step is where the first bit of magic happens. Click the <a title=\"Events\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/events\/\">Event Defaults<\/a> button in the top right of the toolbar, and add the following events:<\/p>\n<ul class=\"intro-text\">\n<li>startTime (of type Datetime) - select a start date that you know will contain data e.g.\u00a008\/01\/2011 12:00:00 AM<\/li>\n<li>endTime (of type Datetime) - select an end date that you know will contain data e.g.\u00a008\/02\/2011 12:00:00 AM<\/li>\n<li>selectedEntity (of type Text) - specify\u00a0an entity that you know is a well and has data associated with it e.g.\u00a0Schola-C-1<\/li>\n<\/ul>\n<p class=\"intro-text\">By doing this, the Entity Selector and Date Picker automatically take in these default values, so we will immediately see some actual data in the next step.<\/p>\n<p class=\"intro-text\"><strong>Step 10. Add the\u00a0Data\u00a0Label for the tubing head\u00a0<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondatalabel.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2965 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiondatalabel-800x418.png\" alt=\"\" width=\"800\" height=\"418\" \/><\/a><\/p>\n<p class=\"intro-text\">The actual value of the tubing head pressure is displayed by using a <a title=\"Data Label\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a>.<\/p>\n<ul class=\"intro-text\">\n<li>Drag and drop the Data Label component\u00a0onto the canvas.<\/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 appropriately.<\/li>\n<li>In the configuration options, type the following:\n<ul class=\"intro-text\">\n<li>Source Data: OilPressures1<\/li>\n<li>Value Column: THP_psi<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 11.\u00a0Add the label for the measurement units<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontextlabel2.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2966 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisiontextlabel2-800x418.png\" alt=\"\" width=\"800\" height=\"418\" \/><\/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.<\/li>\n<li>In the configuration options, type the following content: <b>psi<\/b>.<\/li>\n<\/ul>\n<p class=\"intro-text\">You may notice that it starts to get a bit tricky to get the alignment just so. Simply persevere and it will work out.<\/p>\n<p class=\"intro-text\"><strong>Step 12. 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\/precisionlayoutfin.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2967 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/precisionlayoutfin-800x568.png\" alt=\"\" width=\"800\" height=\"568\" \/><\/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 8-11 to add the following:<\/p>\n<ul class=\"intro-text\">\n<li>Casing A<\/li>\n<li>Casing B<\/li>\n<li>GL Choke (you will\u00a0need to add another dataset (Chokes) to get this value, see Step 6)<\/li>\n<li>Gas Lift<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong><br \/>\nStep 13. All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2049 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2.png\" alt=\"schematicpage2\" width=\"724\" height=\"651\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2.png 724w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2-150x135.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/schematicpage2-48x43.png 48w\" sizes=\"auto, (max-width: 724px) 100vw, 724px\" \/><\/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-15\"><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>Select different 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","protected":false},"excerpt":{"rendered":"<p>The Grid Layout allows you to neatly align elements on a page, and is useful for creating dashboard-style layouts. This article describes how to configure the grid layout in version 4.4.0 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-0\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4668,"parent":1433,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[],"tags":[116,479,89,140,425],"class_list":["post-16758","page","type-page","status-publish","has-post-thumbnail","hentry","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\/16758","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=16758"}],"version-history":[{"count":1,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/16758\/revisions"}],"predecessor-version":[{"id":44624,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/16758\/revisions\/44624"}],"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=16758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=16758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=16758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}