{"id":41896,"date":"2018-11-05T12:57:55","date_gmt":"2018-11-05T04:57:55","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=41896"},"modified":"2024-09-11T11:26:39","modified_gmt":"2024-09-11T03:26:39","slug":"action-button","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/action-button\/","title":{"rendered":"Action Button"},"content":{"rendered":"<p class=\"page-subheading\"><\/p>\n<p class=\"left-bar\">This article applies to version 4.6.4 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"intro-text\">IFS OI Explorer now allows you to add a button to a page that can be configured to change the status of a case.<\/p>\n<p class=\"intro-text\">The Case ID is passed to this component from a page variable, which the user can select (from, for example, a Combo Box), or which they can update by typing into a Text Input component.<\/p>\n<p class=\"intro-text\">When the user clicks the Action Button, the selected Case ID is updated to the Case Status selected for the component (such as <em>Investigating<\/em> or <em>Closed<\/em>).<\/p>\n<p class=\"intro-text\">After the button is clicked, a message appears to confirm that the action has been completed: \u2018Update Successful\u2019. If the Case ID does not exist, an error message appears.<\/p>\n<p class=\"intro-text\">The Action Button can have 3 states:<\/p>\n<ul>\n<li class=\"intro-text\"><strong>Disabled<\/strong>: The button will be disabled if no default value has been specified and the user has not specified a Case ID, or if the input Case ID is not a number.<br \/>\n<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image006.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41875\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image006.png\" alt=\"\" width=\"236\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image006.png 236w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image006-150x21.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image006-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image006-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image006-48x7.png 48w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/li>\n<\/ul>\n<ul>\n<li class=\"intro-text\"><strong>Enabled<\/strong>: The button will be enabled when a valid default has been specified, or if the user inputs a number for the Case ID.<br \/>\n<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image007.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41876\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image007.png\" alt=\"\" width=\"236\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image007.png 236w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image007-150x21.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image007-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image007-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image007-48x7.png 48w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/li>\n<\/ul>\n<ul>\n<li class=\"intro-text\"><strong>Hover<\/strong>: When a user hovers the cursor over an enabled button, the hover state is enabled. The button can be designed to show a different colour when the user hovers over it.<br \/>\n<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image008.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41877\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image008.png\" alt=\"\" width=\"236\" height=\"46\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image008.png 236w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image008-150x29.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image008-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image008-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image008-48x9.png 48w\" sizes=\"auto, (max-width: 236px) 100vw, 236px\" \/><\/a><\/li>\n<\/ul>\n<p class=\"intro-text\">The following diagram shows an Action Button being configured:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41944\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config.png\" alt=\"\" width=\"517\" height=\"350\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config.png 517w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-150x102.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-48x32.png 48w\" sizes=\"auto, (max-width: 517px) 100vw, 517px\" \/><\/a><\/p>\n<table style=\"height: 168px;\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 24px;\" width=\"130\"><strong>Button Text<\/strong>:<\/td>\n<td style=\"height: 24px;\">The text that appears on the button. Ideally, this should indicated the action that will be performed when the button is clicked (e.g. Close Case).<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 48px;\"><strong>Action Type<\/strong>:<\/td>\n<td style=\"height: 48px;\">The action that will be performed when the button is clicked. In version 4.6.4, the only action available is <em>Set Case Status<\/em>, which is used to change the status of a particular case.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 48px;\"><span style=\"color: #000000;\"><b>Target Case ID<\/b>:<\/span><\/td>\n<td style=\"height: 48px;\">The Case ID of the case whose status will change. This can only be a variable. Note that the button will not be able to be clicked if the user does not specify a Case ID or if there is no default set for the variable. If specifying the variable using Page Defaults, it should be a <em>Number<\/em> type.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 24px;\"><strong>Case Status<\/strong>:<\/td>\n<td style=\"height: 24px;\">The status that will be set when the button is clicked.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 24px;\"><strong>Style<\/strong>:<\/td>\n<td style=\"height: 24px;\">The style to apply to the Action Button.\u00a0If you are a Style Administrator,\u00a0you can\u00a0add a new Action Button style.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-controls\/\">Styling an Action Button<\/a>\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial: Closing a Case<\/span><\/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\">In this tutorial, we\u2019ll show you how to use the Action Button to close a case, which is specified by the user by entering the ID into a text box. At the end of the tutorial, your page should look something like this:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41946\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1.png\" alt=\"\" width=\"320\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1.png 320w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1-150x15.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1-36x4.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1-48x5.png 48w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><\/p>\n<p class=\"intro-text\">Let\u2019s go through this process, step-by-step.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\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-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, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png 438w\" 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 Grid layout.<\/p>\n<ul class=\"intro-text\">\n<li>For this exercise, we'll keep the 4 grid cells.<\/li>\n<li>Assign the first column a width of 200.<\/li>\n<li>Assign the second column a width of 100.<\/li>\n<li>Assign a column spacing of 20.<\/li>\n<li>Assign the first row a height of 30.<\/li>\n<li>Assign a row spacing of 20.<\/li>\n<\/ul>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Grid Layout tutorial<\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add\u00a0the Action Button<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41947\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-tut1.png\" alt=\"\" width=\"1215\" height=\"334\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-tut1.png 1215w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-tut1-768x211.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-tut1-150x41.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-tut1-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-tut1-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-config-tut1-48x13.png 48w\" sizes=\"auto, (max-width: 1215px) 100vw, 1215px\" \/><\/p>\n<p class=\"intro-text\">Drag and drop the Action Button component\u00a0onto a grid cell.\u00a0The Action Button is in the Control\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1840\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/controls_sm.png\" alt=\"Controls\" width=\"18\" height=\"16\" \/>\u00a0group.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 3. Configure the Action Button<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut2a.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41986 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut2a.png\" alt=\"\" width=\"773\" height=\"264\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut2a.png 773w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut2a-768x262.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut2a-150x51.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut2a-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut2a-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut2a-48x16.png 48w\" sizes=\"auto, (max-width: 773px) 100vw, 773px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this example, we want the Action Button to pass the status of 'Closed' to the specified Case ID. Configure the Action Button as follows.<\/p>\n<div>\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-async=\"false\" data-slimstat-callback=\"false\">Variables<\/a><\/p>\n<table style=\"height: 168px;\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 120px; height: 48px;\"><strong>Field<\/strong><\/td>\n<td style=\"width: 120px; height: 48px;\"><strong>Click This First<\/strong><\/td>\n<td style=\"width: 120px; height: 48px;\"><strong>Parameter to Enter<\/strong><\/td>\n<td style=\"height: 48px;\"><strong>Notes<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 24px;\"><span style=\"color: #000000;\"><b>Button Text<\/b><\/span><\/td>\n<td style=\"height: 24px;\"><em>Text<\/em><\/td>\n<td style=\"height: 24px;\">Close Case<\/td>\n<td style=\"height: 24px;\"><i>This text will be displayed on the button.<\/i><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 24px;\"><strong>Action Type<\/strong><\/td>\n<td style=\"height: 24px;\">\u00a0<\/td>\n<td style=\"height: 24px;\">Set Case Status<\/td>\n<td style=\"height: 24px;\"><em>This is the only action available.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 48px;\"><strong>Target Case ID<\/strong><\/td>\n<td style=\"height: 48px;\">\u00a0<\/td>\n<td style=\"height: 48px;\">caseid<\/td>\n<td style=\"height: 48px;\"><em>This is the variable that holds the Case ID. Later in the tutorial, we'll see that the user will be able to enter a Case ID into a box, which this button will be able to understand.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 24px;\"><strong>Case Status<\/strong><\/td>\n<td style=\"height: 24px;\">\u00a0<\/td>\n<td style=\"height: 24px;\">Closed<\/td>\n<td style=\"height: 24px;\"><em>Select this from the drop-down list<\/em><em>.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>Step 4. Add and Configure a Text Input<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut4a.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-41987 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut4a.png\" alt=\"\" width=\"1215\" height=\"361\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut4a.png 1215w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut4a-768x228.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut4a-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut4a-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut4a-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut4a-48x14.png 48w\" sizes=\"auto, (max-width: 1215px) 100vw, 1215px\" \/><\/a><\/p>\n<p class=\"intro-text\">This Text Input box will store the Case ID in the <em>caseid<\/em> variable, which will be used by the Action Button to understand which case to change the status for.<\/p>\n<p>Drag and drop a <strong>Text Input<\/strong>\u00a0component onto the page, and configure it as follows:<\/p>\n<table style=\"width: 1300px;\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 120px; height: 48px;\"><strong>Field<\/strong><\/td>\n<td style=\"width: 120px; height: 48px;\"><strong>Parameter to Enter<\/strong><\/td>\n<td style=\"height: 48px; width: 1060px;\"><strong>Notes<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 24px; width: 120px;\"><span style=\"color: #000000;\"><b>Variable Name<\/b><\/span><\/td>\n<td style=\"height: 24px; width: 120px;\">caseid<\/td>\n<td style=\"height: 24px; width: 1060px;\"><i>This must be the same variable used by the Action Button for the <strong>Target Case ID<\/strong> field.<\/i><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; height: 24px; width: 120px;\"><span style=\"color: #000000;\"><b>Hint Text<\/b><\/span><\/td>\n<td style=\"height: 24px; width: 120px;\">Enter a Case ID...<\/td>\n<td style=\"height: 24px; width: 1060px;\"><em>This will be displayed in the input box when waiting for the user to enter a Case ID.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-input\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\">Text Input tutorial<\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 5. All done!<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41946\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1.png\" alt=\"\" width=\"320\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1.png 320w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1-150x15.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1-36x4.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/action-button-tut1-48x5.png 48w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have am Action Button that will close a case specified by the user.<\/p>\n<ul class=\"intro-text\">\n<li>In the Cases Home page, find the Case ID of a case that you want to close.<\/li>\n<li>On the page you just created, click the preview\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/>\u00a0button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Type the Case ID into the Text Input box.<\/li>\n<li>Change back to the Cases Home page, and observe that the Status has changed to 'Closed'.<\/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\u2019t 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 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Action Button 4.6.4 (this release)\n<ul class=\"overview\">\n<li>Initial release of the component<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Action Button is a button on a page that can be configured to change the status of a case. The Case ID is passed to this component from a page variable, which the user can select (from, for example, a Combo Box), or which they can update by typing into a Text Input component.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/action-button\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":41953,"parent":1407,"menu_order":33,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[689],"class_list":["post-41896","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-button","Version-4-6-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41896","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=41896"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41896\/revisions"}],"predecessor-version":[{"id":67004,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41896\/revisions\/67004"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/41953"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=41896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=41896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=41896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}