Order Guide: Choose Options Button

[harish11]

On the Order guide form, we have a 'choose Options' button displayed on the Top right corner. And the users need to scroll up to be able to view the 'Choose Options' button.

Is it possible to display the 'Choose Options' at the bottom of the page or have a floating 'Choose Options' button?

[Ashish Kumar Ag]

Hi Abdul,

servicecatalog_checkout_one_v2   is the UI page. Here you can add a cancel button.

[brostoff17]

Ashish - do you know if there is a way to add the "checkout" button to the "describe needs" tab?

[Aka Guglielmo]

great! it was usefule also for me!

[Ashish Kumar Ag · Accepted solution]

I have done the changes. You can try the below code in the UI page. Have a copy of the UI page com.glideapp.servicecatalog_cat_item_guide_view before replacing.

<?xml version="1.0" encoding="utf-8"?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

      <g:requires name="scripts/js_includes_catalog.js" includes="true" />

      <g:requires name="styles/js_includes_catalog.css" includes="true" />

      <g:requires name="styles/sc_cat_only.css" includes="false"/>

      <g:inline template="sc_sanitize.xml"/>

      <j2:set var="sysparm_guide" value="$[JS:sysparm_guide]" />

      <g2:evaluate var="jvar_found_guide" jelly="true">

              var jvar_found_guide = new GlideRecord('sc_cat_item_guide').get(jelly.sysparm_guide);

              jvar_found_guide;

      </g2:evaluate>

      <g2:evaluate var="jvar_cat_item_authorized" jelly="true">

              var answer = true;

              var item = GlideappCatalogItem.get(jelly.sysparm_guide);

              if (jvar_found_guide $[AMP]$[AMP] !gs.hasRole('catalog_admin'))

              answer = item.canView();

              answer;

      </g2:evaluate>

      <j2:if test="$[jvar_cat_item_authorized]">

              <j2:if test="$[sysparm_guide == null || sysparm_guide == '' || !jvar_found_guide]">

                      <b>${gs.getMessage("Error:")}</b>

                      $[AMP]nbsp;${gs.getMessage('Order Guide Not Specified')}

              </j2:if>

              <j2:if test="$[sysparm_guide != null and sysparm_guide != '' and jvar_found_guide]">

                      <input type="HIDDEN" id="sysparm_no_checkout" value="$[sysparm_no_checkout]" />

                      <g2:inline template="output_messages.xml" />

                      <g2:evaluate var="jvar_item" jelly="true">

                              var initial = jelly.sysparm_initial;

                              var guide = '';

                              var active = SNC.GlideHTMLSanitizer.sanitize(jelly.sysparm_active);

                              var show_cart = true;

                              var show_tabs = true;

                              var c = GlideappCart.getCartForRhino();

                              if (initial == 'true') {

                                      c.newGuide();

                                      guide = jelly.sysparm_guide;

                                      active = guide;

                                      c.setGuide(guide);

                                      c.setGuideActive(active);

                                      c.update();

                                      show_cart = false;

                                      show_tabs = false;

                              } else {

                                      // UI reflects sc_cart's opinion of the active tab

                                      if (active == '')

                                              active = c.getGuideActive();

                                      else {

                                              // sc_cart's opinion of active tab updated to reflect UI's

                                              c.setGuideActive(active);

                                              c.update();

                                      }

                                      guide = c.getGuide();

                                      var index = c.getCrumbs().indexOf(active);

                                      if (index > -1) {

                                              var history = c.getCrumbHistory().get(parseInt(index));

                                              if (history == 'Z')

                                                      history = '';

                                      }

                              }

                              if (jelly.sysparm_cart_edit == 'guide_serial') {

                                      show_tabs = false;

                                      show_cart = false;

                              }

                              var sc_cat_item = new GlideRecord('sc_cat_item');

                              sc_cat_item.get(active);

                              active;

                      </g2:evaluate>

                      <j2:set var="sysparm_id" value="$[sc_cat_item.sys_id]" />

                      <j:set var="jvar_is_guide" value="true" />

                      <j2:set var="jvar_is_guide" value="true" />

                      <g:inline template="com.glideapp.servicecatalog_context_menu.xml" />

                      <j2:if test="$[sysparm_cart_edit != 'guide_serial']">

                              <j2:set var="sysparm_cart_edit" value="$[history]" />

                      </j2:if>

                      <input type="HIDDEN" id="no_proceed_checkout" value="$[sc_cat_item.no_proceed_checkout]" />

                      <input type="HIDDEN" id="current_item" value="$[sc_cat_item.sys_id]" />

                      <input type="HIDDEN" id="sysparm_crumbs" value="$[sysparm_crumbs]" />

                      <input type="HIDDEN" id="sysparm_crumb_history" value="$[sysparm_crumb_history]" />

                      <input type="HIDDEN" id="sysparm_active" value="$[sysparm_active]" />

                      <input type="HIDDEN" id="sysparm_guide" value="$[sysparm_guide]" />

                      <input type="HIDDEN" id="sysparm_catalog" value="$[sysparm_catalog]" />

                      <input type="HIDDEN" id="sysparm_catalog_view" value="$[sysparm_catalog_view]" />

                      <input type="HIDDEN" id="sysparm_cart_edit" value="$[sysparm_cart_edit]" />

                      <input type="HIDDEN" id="sysparm_processing_hint" name="sysparm_processing_hint" value="$[sysparm_processing_hint]" />

                      <form name="back_form" method="POST" action="service_catalog.do">

                              <j2:if test="$[show_tabs == true]">

                                      <input type="HIDDEN" name="sysparm_action" value="previous_guide" />

                              </j2:if>

                              <j2:if test="$[show_tabs == false]">

                                      <input type="HIDDEN" name="sysparm_action" value="sysverb_back" />

                              </j2:if>

                      </form>

                      <table class="wide" cellspacing="0" cellpadding="0" width="100%">

                              <table class="wide" cellspacing="0" cellpadding="0" width="100%">

                                      <tr class="header sc_header">

                                              <td style="white-space: nowrap;">

                                                      <g2:inline template="sc_header_back_button.xml" />

                                              </td>

                                              <td style="width: 100%; height: 40px; padding-right: 5px;">

                                                      <div class="caption sc_caption sc_caption_margin">

                                                              $[gs.getMessage('Order guide') + ' - ' + sc_cat_item.name.getDisplayValue()]

                                                      </div>

                                              </td>

                                              <td style="white-space: nowrap; padding-right: 5px;">

                                                      <g:inline template="com.glideapp.servicecatalog_guide_tabs_controls.xml" />

                                              </td>

                                      </tr>

                              </table>

                      </table>

                      <g:sc_banner />

                      <j2:if test="$[show_cart == false]">

                              <script>

                                      function calcPrice() {

                                      // this is a noop

                                      }

                                      addLoadEvent(function() {g_cart = new SCCart()});

                              </script>

                      </j2:if>

                      <j2:if test="$[show_tabs == true]">

                              <g:inline template="com.glideapp.servicecatalog_guide_tabs.xml" />

                      </j2:if>

                      <div class="sc_og_container">

                      <table width="100%" style="margin-top: 5px;">

                              <tr>

                                      <td>

                                              <table cellspacing="0" cellpadding="0" width="100%">

                                                      <tr class="io_label">

                                                              <td nowrap="true" class="guide_tray">

                                                                      $[sc_cat_item.short_description.getDisplayValue()]

                                                              </td>

                                                      </tr>

                                                      <tr>

                                                              <td colspan="2" class="catalog_description">

                                                                      <j2:if test="$[show_cart]">

                                                                              <j2:if test="$[!sc_cat_item.custom_cart.nil()]">

                                                                                      <j2:set var="sysparm_show_cart_guide" value="true" />

                                                                                      <g2:macro_invoke macro="$[sc_cat_item.custom_cart.name]" />

                                                                              </j2:if>

                                                                              <j2:if test="$[sc_cat_item.custom_cart.nil()]">

                                                                                      <g2:inline template="sc_cart_guide.xml" />

                                                                              </j2:if>

                                                                      </j2:if>

                                                                      <g2:evaluate var="jvar_has_image" >

                                                                              var image_src = sc_cat_item.picture.getDisplayValue();

                                                                              var has_image = true;

                                                                              if (image_src == null || image_src == '')

                                                                                      has_image = false;                      

                                                                              has_image;

                                                                      </g2:evaluate>

                                                                      <j2:if test="$[jvar_has_image]">

                                                                              <div style="float:left">

                                                                                      <img src="$[image_src]" alt="$[sc_cat_item.description.getDisplayValue()]"></img>

                                                                              </div>

                                                                      </j2:if>

                                                                      <g2:no_escape>$[sc_cat_item.description.getDisplayValue()]</g2:no_escape>

                                                              </td>

                                                      </tr>

                                              </table>

                                      </td>

                              </tr>

                      </table>

                      <table width="100%">

                              <tr>

                                      <td colspan="2">

                                              <table cellSpacing="0" cellPadding="0" border="0" class="wide">

                                                      <g:inline template="sc_cat_item_options.xml" />

                                                      <j2:if test="$[sc_cat_item.type == 'bundle']">

                                                              <tr>

                                                                      <td>

                                                                              <strong>${gs.getMessage('Also includes')}</strong>

                                                                      </td>

                                                              </tr>

                                                              <tr>

                                                                      <td> $[SP] </td>

                                                              </tr>

                                                              <g2:evaluate var="jvar_item" jelly="true">

                                                                      z = new GlideRecord('sc_cat_item_children');

                                                                      z.addQuery('parent', jelly.sysparm_id);

                                                                      z.orderBy('child.order');

                                                                      z.orderBy('child.name');

                                                                      z.query();

                                                              </g2:evaluate>

                                                              <j2:set var="jvar_start_closed" value="$[sc_cat_item.start_closed]" />

                                                              <j2:while test="$[z.next()]">

                                                                      <g2:evaluate var="jvar_item"

                                                                              expression="

                                                                              sc_cat_item = new GlideRecord('sc_cat_item');                                

                                                                              sc_cat_item.get(z.child);" />

                                                                      <j2:set var="jvar_is_child" value="true" />

                                                                      <g:inline template="sc_cat_item_options.xml" />

                                                              </j2:while>

                                                      </j2:if>

                                              </table>

                                      </td>

                              </tr>

  <td style="white-space: nowrap; padding-right: 5px; float: right">

                                                      <g:inline template="com.glideapp.servicecatalog_guide_tabs_controls.xml" />

                                              </td>

                      </table>

                      </div>

                      <g2:client_script type="catalog_item" catalogItem="$[sysparm_id]" />

                      <j2:set var="jvar_catalog_item" value="$[sysparm_id]" />

                      <g:inline template="catalog_ui_policy.xml" />

              </j2:if>

      </j2:if>

      <j2:if test="$[!jvar_cat_item_authorized]">

              Not Authorized

      </j2:if>

</j:jelly>

[harish11]

Hi Ashish Agrawal @ Thanks for the response.

It works, but the button seems to be cutting of at the bottom of the page (See Screenshot). Any suggestions on how this can corrected