{"id":17004,"date":"2016-11-28T10:10:36","date_gmt":"2016-11-28T02:10:36","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=17004"},"modified":"2025-11-28T18:30:46","modified_gmt":"2025-11-28T10:30:46","slug":"best-practices","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-resources\/best-practices\/","title":{"rendered":"Explorer Best Practices"},"content":{"rendered":"\n<p class=\"intro-text\">Although there is no exact formula to making the perfect Explorer\u00a0page, there are some rules you should follow to make sure your page works well. \u00a0This page provides a list of best practices to follow when creating a page using Explorer Studio.<\/p>\n<div class=\"best-prac\">\n<p class=\"best-prac-desc\"><i class=\"fa fa-download fa-2x fa-pull-left\"><\/i> \u00a0\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2025\/11\/IFSBestPractices.pdf\">Download the cheat sheet!<\/a><\/p>\n<\/div>\n<h2 class=\"page-subheading\">Variables<\/h2>\n<ul class=\"intro-text\">\n<li>Use <strong>variables<\/strong> rather than static values to make your pages dynamic.<\/li>\n<li>Assign <strong>default values<\/strong> to the default variables, so that when a page is loaded data appears immediately.<\/li>\n<li>To simplify your work, keep the <strong>preconfigured<\/strong> default variables and do not change their names. If you do, you will need to change them in every component on the page.<\/li>\n<\/ul>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">Variables<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Page Properties<\/h2>\n<p class=\"intro-text\">Assign your page a <strong>thumbnail<\/strong> and <strong>description<\/strong> in the page properties to make it easier for users to find the page they are looking for.<\/p>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/page-properties\/\">Page Properties<\/a><\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Layouts<\/h2>\n<ul class=\"intro-text\">\n<li>Use the <strong>Grid Layout<\/strong> to organise your components in rows and columns.<\/li>\n<li>Use the <strong>Precision Layout<\/strong> when you want to create a schematic-style page or use hotspots.<\/li>\n<li>You can add a Grid Layout to a Precision Layout, and vice-versa.\u00a0If you drag a Precision Layout onto a Grid cell, you will be able to move a\u00a0'set' of components in the Precision Layout by moving the grid cell around.<\/li>\n<li>Use the <strong>Switch layout<\/strong> if your page has complex logic around which elements should appear.<\/li>\n<li>When mixing row heights in the <strong>Grid Layout<\/strong>, use either\u00a0fixed and dynamic\u00a0or\u00a0fixed and proportional\u00a0heights. Do not use proportional and dynamic heights together as proportions cannot be calculated accurately when the height changes\u00a0dynamically.<\/li>\n<\/ul>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">Precision Layout<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/switch\/\">Switch Layout<\/a><\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Tables<\/h2>\n<ul class=\"intro-text\">\n<li>Use <strong>Data Tables<\/strong> for looking at large amounts of data where it can be sorted, filtered, etc.<\/li>\n<li>Use the <strong>Table Layout<\/strong> for small amounts of data (&lt;15 rows) with embedded graphics in each row, such as images and charts.<\/li>\n<li>When configuring rows and columns in the <strong>Pivot Table\u2019s<\/strong> component editor, list columns and rows in descending order of magnitude, as this is how they will appear in the table. E.g. Country, State, City.<\/li>\n<\/ul>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-table\/\">Data Tables<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/feature-preview-explorer-table-layout\/\">Table Layout<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/pivot-table\/\">Pivot Table<\/a><\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Date and Time<\/h2>\n<ul class=\"intro-text\">\n<li>When using any of the time components, set at least the <strong>end date<\/strong> as a variable, otherwise the component has no effect on the page at all.<\/li>\n<li>Tags and attributes have\u00a0<strong>endTime\u00a0<\/strong>as their preconfigured time\u00a0when they are dragged onto a page.<\/li>\n<li>When using <strong>multiple <\/strong>time components on a page, be aware of what other date and time components already exist on a page, as these often share the same variables, and may affect or be affected by your new component.<\/li>\n<\/ul>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/current-time-toggle\/\">Current Date\/Time Toggle<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-picker\/\">Date Picker<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-picker\/\">Date\/Time Picker<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-menu\/\">Date\/Time Range Picker<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/duration-picker\/\">Duration Picker<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/month-picker\/\">Month Picker<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-time-pickers\/\">Using Time Pickers<\/a><\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Hierarchies &amp; Entities<\/h2>\n<p class=\"intro-text\">You should not use the <strong>Hierarchy<\/strong> control and <strong>Entity Selector<\/strong> on the same page, doing so may\u00a0result in the controls\u00a0competing with each other.<\/p>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy\/\">Hierarchy<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector<\/a><\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Embedding pages<\/h2>\n<p class=\"intro-text\">Do not use <strong>Embed Page<\/strong> to embed a website that has a responsive layout, as the browser will attempt to resize the page to fit the grid space. Embed Page works best with pages with a fixed layout.<\/p>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/embed-page\/\">Embed Page<\/a><\/p>\n<p class=\"page-subheading\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Page Effects<\/h2>\n<p class=\"intro-text\">To create the effect of a tabbed page, use the <strong>Option Links<\/strong> control at the top of the page.<\/p>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/option-links\/\">Option Links<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Although there is no exact formula to making a perfect Explorer page, there are some rules you should follow to make sure your page works well.  This page provides a list of best practices to follow when creating a page using Explorer Studio.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-resources\/best-practices\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":17065,"parent":447,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[482],"class_list":["post-17004","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-tips","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17004","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=17004"}],"version-history":[{"count":5,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17004\/revisions"}],"predecessor-version":[{"id":71639,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17004\/revisions\/71639"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/17065"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=17004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=17004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=17004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}