{"id":42186,"date":"2018-12-06T12:04:59","date_gmt":"2018-12-06T04:04:59","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=42186"},"modified":"2024-07-09T10:25:14","modified_gmt":"2024-07-09T02:25:14","slug":"using-the-ui-editor","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/sentinel\/sentinel-studio\/creating-user-processes\/using-the-ui-editor\/","title":{"rendered":"Using the UI Editor"},"content":{"rendered":"<p class=\"intro-text\">You use the UI editor when you want to configure <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/sentinel\/sentinel-studio\/sentinel-studio-features\/inputs\/\">Inputs<\/a> and <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/sentinel\/sentinel-studio\/sentinel-studio-features\/process-parameters\/\">Process Parameters<\/a> for your user process. These components will be configured by the user in Sentinel when the monitor is created.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-61.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-43097 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-61.png\" alt=\"\" width=\"136\" height=\"231\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-61.png 136w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-61-88x150.png 88w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-61-14x24.png 14w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-61-21x36.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-61-28x48.png 28w\" sizes=\"auto, (max-width: 136px) 100vw, 136px\" \/><\/a><\/p>\n<p class=\"intro-text\">As an example, the following process has 3 inputs: Oxygen, Temp, and Cl.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-62.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-43098 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-62.png\" alt=\"\" width=\"876\" height=\"381\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-62.png 876w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-62-768x334.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-62-150x65.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-62-24x10.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-62-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-62-48x21.png 48w\" sizes=\"auto, (max-width: 876px) 100vw, 876px\" \/><\/a><\/p>\n<p class=\"intro-text\">The labels and arrangements are configured in Sentinel Studio, using the UI Editor. The corresponding UI Editor for this process could look something like this:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-63.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-43099 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-63.png\" alt=\"\" width=\"893\" height=\"203\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-63.png 893w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-63-768x175.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-63-150x34.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-63-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-63-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-63-48x11.png 48w\" sizes=\"auto, (max-width: 893px) 100vw, 893px\" \/><\/a><\/p>\n<p class=\"intro-text\">When configuring a monitor in Sentinel to use this process, the Test Process would look like this:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-64.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-43100 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-64.png\" alt=\"\" width=\"670\" height=\"609\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-64.png 670w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-64-150x136.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-64-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-64-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-64-48x44.png 48w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>To switch to the UI Editor, select <em>View &gt; UI Editor<\/em> from the menu.<\/li>\n<\/ul>\n<p class=\"intro-text\">The entry fields are automatically added while you are using the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/sentinel\/sentinel-studio\/creating-user-processes\/using-the-logic-editor\/\">Logic Editor<\/a>.<\/p>\n<p class=\"intro-text\">All you need to do is rearrange the fields and add groupings and labels as appropriate.<\/p>\n<ul class=\"intro-text\">\n<li>To find out what input a field corresponds to, click the field and then refer to the <strong>Module<\/strong> tab on the right.<\/li>\n<\/ul>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-65.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-43101 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-65.png\" alt=\"\" width=\"1056\" height=\"395\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-65.png 1056w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-65-768x287.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-65-150x56.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-65-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-65-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-65-48x18.png 48w\" sizes=\"auto, (max-width: 1056px) 100vw, 1056px\" \/><\/a><\/p>\n<ul class=\"intro-text\">\n<li>To add <strong>grouping boxes and labels<\/strong>, right-click and then select the item from the shortcut menu. Drag and drop to rearrange as needed.<\/li>\n<\/ul>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-66.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-43102 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-66.png\" alt=\"\" width=\"282\" height=\"146\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-66.png 282w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-66-150x78.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-66-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-66-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/12\/word-image-66-48x25.png 48w\" sizes=\"auto, (max-width: 282px) 100vw, 282px\" \/><\/a><\/p>\n<h2 class=\"page-subheading\">Keyboard Shortcuts<\/h2>\n<p class=\"intro-text\">For a list of shortcuts for the UI Editor, see\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/sentinel\/sentinel-studio\/getting-started\/keyboard-shortcuts\/\">Keyboard Shortcuts<\/a>.<\/p>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/sentinel\/sentinel-studio\/creating-user-processes\/creating-a-new-user-process\/\">Creating a User Process<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/sentinel\/sentinel-studio\/sentinel-studio-primers\/\">Sentinel Studio Primers<\/a>,\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/sentinel\/sentinel-studio\/component-logic-functions\/\">Component Logic Functions<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You use the UI editor in Sentinel Studio when you want to configure Inputs and Process Parameters for your user process. These components will be configured by the user in IFS OI Sentinel when the monitor is created.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/sentinel\/sentinel-studio\/creating-user-processes\/using-the-ui-editor\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":43105,"parent":42146,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[9],"tags":[698,701,637,741,337,696,691,726,742,708,694],"class_list":["post-42186","page","type-page","status-publish","has-post-thumbnail","hentry","category-tech-ref","tag-components-sentinel","tag-inputs","tag-modules","tag-monitor","tag-parameters","tag-process-component","tag-shortcut","tag-studio-sentinel","tag-test-process","tag-ui-editor","tag-user-process","Version-4-6-1","Product-sen"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/42186","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=42186"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/42186\/revisions"}],"predecessor-version":[{"id":67965,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/42186\/revisions\/67965"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/42146"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/43105"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=42186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=42186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=42186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}