{"id":8560,"date":"2021-05-05T09:24:16","date_gmt":"2021-05-05T01:24:16","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=8560"},"modified":"2024-07-11T13:59:10","modified_gmt":"2024-07-11T05:59:10","slug":"explorer-studio-tour","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/explorer-studio-tour\/","title":{"rendered":"Explorer Studio Tour"},"content":{"rendered":"<p class=\"left-bar\">This article applies to versions 4.9.6 and later of IFS OI Explorer. For help on earlier versions, see <em>Release History<\/em> below.<\/p>\n<p class=\"intro-text\">Studio is your design interface for building Explorer pages.<\/p>\n<p class=\"intro-text\">To add or edit a page, you can:<\/p>\n<ul class=\"intro-text\">\n<li>Open the <strong>Home<\/strong> ribbon tab, and click <strong>New Page<\/strong><\/li>\n<li>Open the <strong>Page<\/strong> ribbon tab, and click <strong>Edit<\/strong>.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/05\/explorer-studio-tour-496.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49429\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/05\/explorer-studio-tour-496.png\" alt=\"\" width=\"1337\" height=\"744\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/05\/explorer-studio-tour-496.png 1337w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/05\/explorer-studio-tour-496-768x427.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/05\/explorer-studio-tour-496-150x83.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/05\/explorer-studio-tour-496-600x334.png 600w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/05\/explorer-studio-tour-496-1080x601.png 1080w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/05\/explorer-studio-tour-496-1280x712.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/05\/explorer-studio-tour-496-48x27.png 48w\" sizes=\"auto, (max-width: 1337px) 100vw, 1337px\" \/><\/a><\/p>\n<table class=\"intro-text\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td><strong>1<\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-getting-started\/explorer-ribbon\/#Studio_Tab\"><strong>Studio Ribbon<\/strong><\/a><\/td>\n<td>The Studio tab on the ribbon is activated whenever someone creates a new page or edits an existing page. For details on the functions available in the ribbon, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-getting-started\/explorer-ribbon\/#Studio_Tab\">Explorer Studio Ribbon<\/a>.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td><strong>2<\/strong><\/td>\n<td><strong>Toolbar<\/strong><\/td>\n<td>\n<p>Above the component toolbox is the toolbar. The toolbar contains common functions for editing pages.<\/p>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16987 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/toolbar-441-e1620374210764.png\" alt=\"toolbar-441\" width=\"422\" height=\"23\" \/><\/div>\n<table>\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3365\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/saveicon1.png\" alt=\"saveicon1\" width=\"14\" height=\"13\" \/><\/td>\n<td style=\"width: 80px;\">\n<p><strong>Save\u00a0<\/strong><\/p>\n<\/td>\n<td>Click to <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save changes to the page<\/a>. The date and time that you last saved is displayed, along with your user name, on the Explorer <a title=\"Page Properties Overview\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/page-properties\/\">page properties<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3363\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/saveasicon1.png\" alt=\"saveasicon1\" width=\"18\" height=\"13\" \/><\/div>\n<\/td>\n<td>\n<p><strong>Save As<\/strong><\/p>\n<\/td>\n<td>This is how you can copy your page. Type in a name, and select a workspace from the drop-down list, in the <em>Save Display As<\/em> window that appears. The original page is closed without any changes saved, while the new page (with most recent changes) remains open in Studio.<\/td>\n<\/tr>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14961\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/cuticon.png\" alt=\"cuticon\" width=\"16\" height=\"16\" \/><\/div>\n<\/td>\n<td><strong>Cut<\/strong><\/td>\n<td>Click any component on the page, and click <em>Cut<\/em>. You can also use the keyboard shortcut CTRL+X. Use in conjunction with <em>Paste<\/em>, unless you want to remove the component altogether.<\/td>\n<\/tr>\n<tr>\n<td>\n<div style=\"width: 16px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14960\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/copyicon.png\" alt=\"copyicon\" width=\"16\" height=\"16\" \/><\/div>\n<\/td>\n<td><strong>Copy<\/strong><\/td>\n<td>Click any component on the page, and click <em>Copy<\/em> or use the keyboard shortcut CTRL+C. Use in conjunction with <em>Paste<\/em>.<\/td>\n<\/tr>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14962\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/pasteicon.png\" alt=\"pasteicon\" width=\"16\" height=\"16\" \/><\/div>\n<\/td>\n<td><strong>Paste<\/strong><\/td>\n<td>If you have copied or pasted a component, you can paste it anywhere on the page (multiple times, if you want to). You can also use the keyboard shortcut CTRL+V.<\/td>\n<\/tr>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2978\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/livemode1.png\" alt=\"livemode\" width=\"14\" height=\"16\" \/><\/div>\n<\/td>\n<td><strong>Finish &amp; Open<\/strong><\/td>\n<td>Click this button to save a page, and open it in run time.<\/td>\n<\/tr>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14968\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/preview.png\" alt=\"preview\" width=\"29\" height=\"25\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/preview.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/preview-24x21.png 24w\" sizes=\"auto, (max-width: 29px) 100vw, 29px\" \/><\/div>\n<\/td>\n<td><strong>Preview<\/strong><\/td>\n<td>Click the Preview\u00a0button to see how your page will look in run time. When previewing your page, you can also interact with all the elements on the page, as if you were in run time.\u00a0<br \/>\nClick the Preview button again to make further changes to the page.<\/td>\n<\/tr>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14969\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo.png\" alt=\"undo\" width=\"29\" height=\"25\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-24x21.png 24w\" sizes=\"auto, (max-width: 29px) 100vw, 29px\" \/><\/div>\n<\/td>\n<td><strong>Undo<\/strong><\/td>\n<td>\n<p>Click to undo the latest change.\u00a0You can also use the keyboard shortcut <strong>CTRL+Z<\/strong>. You can click repeatedly to undo previous changes, or click the downward-pointing arrow to select how far back you want to go.\u00a0The different steps are listed from most the recent activity.<\/p>\n<div style=\"width: 258px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14989\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop.png\" alt=\"undo-drop\" width=\"258\" height=\"164\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop.png 258w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop-150x95.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop-36x23.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/undo-drop-48x31.png 48w\" sizes=\"auto, (max-width: 258px) 100vw, 258px\" \/><\/div>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14970\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo.png\" alt=\"redo\" width=\"29\" height=\"25\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-24x21.png 24w\" sizes=\"auto, (max-width: 29px) 100vw, 29px\" \/><\/div>\n<\/td>\n<td><strong>Redo<\/strong><\/td>\n<td>\n<p>Click to redo the latest change. You can also use the keyboard shortcut <strong>CTRL+Y<\/strong>.\u00a0You can click repeatedly to redo previous changes, or click the downward-pointing arrow to select how far back you want to go.\u00a0The different steps are listed from most the recent undo action.<\/p>\n<div style=\"width: 257px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14990\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop.png\" alt=\"redo-drop\" width=\"257\" height=\"145\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop.png 257w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop-150x85.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/redo-drop-48x27.png 48w\" sizes=\"auto, (max-width: 257px) 100vw, 257px\" \/><\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td><strong>3<\/strong><\/td>\n<td><strong>Component Toolbox<\/strong><\/td>\n<td>\n<p>The component toolbox is the area on the left of Studio that contains all the components that can be dropped onto the canvas.<\/p>\n<div><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/component-toolbox-441.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16985 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/component-toolbox-441-e1620374386112.png\" alt=\"component-toolbox-441\" width=\"685\" height=\"390\" \/><\/a><\/div>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td><strong>4<\/strong><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/\"><b>Component<\/b><\/a><\/td>\n<td>A component is an item that is added to the canvas. \u00a0When you drop a component onto a page, it has the same icon as what is shown in the component toolbox.\u00a0Click on a component to edit its properties.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td><strong>5<\/strong><\/td>\n<td><b>Canvas and grid lines<\/b><\/td>\n<td>Pale blue dotted lines are present on the canvas when the page uses a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">grid layout<\/a>. \u00a0When a grid cell is clicked, the focus changes to that cell and the outline changes to solid blue.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td><strong>6<\/strong><\/td>\n<td><b>Component Editor<\/b><\/td>\n<td>\n<p>When you select a component on the page, you can edit its properties in the component editor.<\/p>\n<p>You can see on the page which component is currently selected, by its outline. In a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">grid layout<\/a>, the <em>grid cell<\/em> is outlined in blue for the selected component. In <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">precision layout<\/a>, the <em>selected component<\/em> is outlined in blue.<\/p>\n<div style=\"width: 685px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/component-editor441a.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-16983 \" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/component-editor441a.png\" width=\"568\" height=\"297\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/component-editor441a.png 685w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/component-editor441a-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/component-editor441a-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/component-editor441a-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/component-editor441a-48x25.png 48w\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" \/><\/a><\/div>\n<p><strong>1. Name and description<br \/>\n<\/strong>This is the component name as it is in the components toolbox, and an accompanying short description. Click the Help button to open a tutorial for that component, in the Help Center.<\/p>\n<p><strong>2. Properties<br \/>\n<\/strong>These are the properties that allow you to configure this component for a specific purpose. For example, in a <em>Combo Box<\/em>, you have an\u00a0<em>Option Names\u00a0<\/em>property, which allows you to specify what appears in the drop-down list.\u00a0Properties with an asterisk are mandatory for the component to work.<\/p>\n<p><strong>3. Data Selector<\/strong><br \/>\nMany properties allow you to define a value through the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a>. The Data Selector is a powerful sub-control that allows you to specify dataset queries, tags, attribute values, calculations, and static values.\u00a0<\/p>\n<p><strong>4. Variable<\/strong><br \/>\nMany properties also allow you to set or use\u00a0a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-primers\/variables\/\">variable<\/a>\u00a0to provide an interactive page for your users. Variables are indicated by one of the following symbols:<\/p>\n<div style=\"width: 55px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14988 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variables.png\" alt=\"variables\" width=\"55\" height=\"21\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variables.png 55w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variables-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variables-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/05\/variables-48x18.png 48w\" sizes=\"auto, (max-width: 55px) 100vw, 55px\" \/><\/div>\n<p>With variables, users can change the type of data displayed on a page. Common uses include changing a date or an entity.\u00a0<\/p>\n<p><strong>5. Style Property<br \/>\n<\/strong>Some of the components allow you to apply a predefined style. All components come with a default style, and some allow you to choose from several other styles, specific to that component.<\/p>\n<p><strong>6. Position in Layout<\/strong><br \/>\nIf you are using a Grid Layout, you can reposition the component by specifying the row number and column number. <br \/>\nIf you are using a Precision Layout, you can reposition the component by specifying the X and Y coordinates, and you can also specify the exact height and width of the component.<\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td><strong>7<\/strong><\/td>\n<td><strong>Link to Contextual Help\u00a0<\/strong><\/td>\n<td>Many of the Explorer components have contextual help on the Help Center. Components such as this one have a help icon with a direct link to related help.<br \/>\nClick the icon to open the Explorer Help Center, in a new tab on your internet browser.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Explorer Studio Tour (this release)\n<ul class=\"overview\">\n<li>Explorer shortcut menu added to the left of the framework<\/li>\n<li>Other minor cosmetic changes<\/li>\n<\/ul>\n<\/li>\n<li class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/explorer-studio-tour\/studio-interactive-tour\/\">Studio Interactive Tour 4.0<\/a>\n<ul class=\"intro-text\">\n<li>Initial release<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn about IFS OI Explorer Studio, your design interface for building Explorer pages. <\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/explorer-studio-tour\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":14993,"parent":1401,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[351,725],"class_list":["post-8560","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-dashboard-design","tag-studio-explorer","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/8560","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=8560"}],"version-history":[{"count":11,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/8560\/revisions"}],"predecessor-version":[{"id":68103,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/8560\/revisions\/68103"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/14993"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=8560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=8560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=8560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}