question Re: Order Guide: Choose Options Button in ServiceNow AI Platform forum

Order Guide: Choose Options Button

harish11 — Tue, 23 Jun 2015 09:56:19 GMT

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?

Re: Order Guide: Choose Options Button

Ashish Kumar Ag — Tue, 23 Jun 2015 10:14:54 GMT

Hi,

com.glideapp.servicecatalog_cat_item_guide_view is the UI page.

And below is the code in UI page for the Button. You have to place this code again in the end of the UI page to have the Choose button at buttom.

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

</td>

Re: Order Guide: Choose Options Button

Ashish Kumar Ag — Tue, 23 Jun 2015 10:19:22 GMT

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]">

<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>

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

</j2:if>

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

</j2:if>

</form>

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

</td>

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

</div>

</td>

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

</td>

</tr>

</table>

<g:sc_banner />

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

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>

<tr>

<td>

$[sc_cat_item.short_description.getDisplayValue()]

</td>

</tr>

<tr>

<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>

<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>

</j2:if>

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

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

<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>

</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>

<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 test="$[!jvar_cat_item_authorized]">

Not Authorized

</j2:if>

</j:jelly>

Re: Order Guide: Choose Options Button

harish11 — Tue, 23 Jun 2015 10:57:35 GMT

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

Re: Order Guide: Choose Options Button

Ashish Kumar Ag — Tue, 23 Jun 2015 11:51:51 GMT

You have to play with the CSS. You can add padding-bottom: 10px.

Like below.. Do the changes only in the 2nd part i.e is in end of page.

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

</td>

Please mark correct if it help to solve the issue. Let me know the outcome.

Re: Order Guide: Choose Options Button

harish11 — Tue, 23 Jun 2015 12:33:11 GMT

I will give it a try. Thanks for the help

Re: Order Guide: Choose Options Button

abdulmominkhan — Fri, 07 Aug 2015 11:54:03 GMT

Hi Ashish,

Thanks for posting this solution.

Can you please let me know which UI page/UI macro used for Order summery page.

I would like to implement cancel button and place on final screen so that user can submit request or cancel order.

Re: Order Guide: Choose Options Button

harish11 — Fri, 07 Aug 2015 12:22:58 GMT

Abdul @ If you are in the Fuji version, check Cart Layouts under Service Catalogue Module. You will find an option to add buttons and also rename them.

Re: Order Guide: Choose Options Button

abdulmominkhan — Fri, 07 Aug 2015 17:23:53 GMT

Thank You Harish,

Your solutions helps me but not 100%. I need to disable (not remove) shipping address and requested for field from last page (checkout screen) of two step order guide. I would like to know UI macro/ UI page used to display content.

Re: Order Guide: Choose Options Button

Ashish Kumar Ag — Mon, 10 Aug 2015 10:47:38 GMT

Hi Abdul,

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

Re: Order Guide: Choose Options Button

Aka Guglielmo — Fri, 21 Aug 2015 08:29:15 GMT

great! it was usefule also for me!

Re: Order Guide: Choose Options Button

ramak — Fri, 21 Oct 2016 05:01:06 GMT

Hi Ashish, thanks. But, how much ever I play around, the buttons are always getting placed on the bottom left corner of the page & not on the right. Somewhat like this :

Anything that I can do to move it to the bottom right corner ??

Re: Order Guide: Choose Options Button

faiji — Fri, 06 Jan 2017 04:51:57 GMT

Thanks Ashish to post this usefull for me.........

Re: Order Guide: Choose Options Button

Community Alums — Thu, 06 Apr 2017 20:44:11 GMT

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

Re: Order Guide: Choose Options Button

NathanStorm1 — Wed, 23 May 2018 19:30:36 GMT

Is this still applicable? and is the proposed above change a global change or does it to just apply to the order guide you made the changes to? Reading this, it appears to be a global change.

Re: Order Guide: Choose Options Button

Deepthi25 — Mon, 19 Nov 2018 05:56:15 GMT

hi nathan,

i am trying for single order guide did u achieved this?

Re: Order Guide: Choose Options Button

NathanStorm1 — Fri, 05 Apr 2019 18:39:55 GMT

No i never tried it. I think we're going back to using only Catalog Items. Ordered Guides dont seem to be worth it for us.