Order Guide: Choose Options Button

harish11 · ‎06-23-2015

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 · ‎06-23-2015

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>

View solution in original post

Ashish Kumar Ag · ‎06-23-2015

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.

harish11 · ‎06-23-2015

I will give it a try. Thanks for the help

ramak · ‎10-20-2016

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

faiji · ‎01-05-2017

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

NathanStorm1 · ‎05-23-2018

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.