This topic contains 4 replies, has 2 voices, and was last updated by Jasdeep Virmani 1 year, 8 months ago.

  • Author
    Posts
  • #23173 Score: 0

    dlindy
    • Contributions: 0
    • Level 1

    I reached out to a NetSuite insider for a way to lock the column headers on the items sub-lists on transactions. This is a big deal for us because many of our transactions have so many lines that the header disappears. This is what they provided me. I believe that this can work, but am at a bit of a loss for how to make it work. Thought perhaps I could share this in exchange for some feedback on how to make it work. Here it is:

    Need a browser add-on:

    Chrome: Tamper Monkey

    FireFox: Grease Monkey

    Allows you to inject java script to specific pages of websites at runtime

    Inject this script:

    NS: Transaction item sublist hover

    sublist_hover.ns.js

    // ==UserScript==

    // @name Whitlock Sublist Hover

    // @version 0.1

    // @description Float item sublist header on scroll

    // @match https://system.netsuite.com/*

    // grant none

    // @require http://code.jquery.com/jquery-latest.js

    // ==/UserScript==

    (function() {

    'use strict';

    var elem = $('#item_layer').append('<div id="floating_header" style="position:fixed;top:60px;display:none;"></div>');

    var header = $('#item_splits').closest('tr').find('.uir-machine-headerrow').clone();

    var fixed = $('#floating_header').append(header);

    var tableOffset = $("#item_splits").offset().top;

    $(window).bind("scroll", function() {

    var offset = $(this).scrollTop();

    if (offset >= tableOffset && fixed.is(":hidden")) {

    fixed.show();

    }

    else if (offset < tableOffset) {

    fixed.hide();

    }

    });

    })();

    This duplicates the header UI element presenting the column names during scroll
    This is a cached copy. Click here to see the original post.

  • #23174 Score: 0

    MikeBucklaew
    • Contributions: 0
    • Level 1

    This is very cool. I just installed it to test (Tamper Monkey for Chrome). As written it didn't work for me. I had to make a change to this line

    Code:
    var elem = $('#item_layer').append('<div id="floating_header" style="position:fixed;top:60px;display:none;"></div>');
    I needed to change the 60px to 90px in order to be able to see the column headers. The other issue I see right now is that not only do we have Sales Orders with lots of lines, we also have lots of columns and the header doesn't scroll horizontally. Something more to play with…

    Totally unsupported but seems generally harmless to me. Thanks for sharing!

  • #23175 Score: 0

    michoel
    • Contributions: 0
    • Level 1

    So I've improved this a bit using a different floating headers technique so that the columns match up properly and horizontal scrolling works too

    Code:
    // ==UserScript==
    // @name NetSuite Floating Headers
    // @version 0.1
    // @description Float item sublist header on scroll
    // @match https://*.netsuite.com/*
    // grant none
    // @require http://code.jquery.com/jquery-latest.js
    // ==/UserScript==

    (function() {
    'use strict';

    $('.uir-machine-table-container[data-machine-name="item"]')
    .css('height', '70vh')
    .bind('scroll', (event) => {
    const headerElem = $(event.target).find('.uir-machine-headerrow');
    headerElem.css('transform', translate(0, ${event.target.scrollTop}px));
    });

    })();


    dlindy replied on 07/30/2017, 09:35 AM: This works! Any way to make it work in View mode as well. It works for me in Edit mode, but not view. Would like folks to be able to use it without risking them making changes to the lines.

    Either way, a vast improvement over our current situation.

    Thanks,

  • #23176 Score: 0

    michoel
    • Contributions: 0
    • Level 1

    Here's an updated version with a couple more improvements:

    1) Works in View mode

    2) Works on all sublist types, not just the Item sublist

    3) Doesn't add extra space if the sublist is shorter than the screen height

    Code:
    // ==UserScript==
    // @name NetSuite Floating Headers
    // @version 0.2
    // @description Float item sublist header on scroll
    // @match https://*.netsuite.com/*
    // grant none
    // @require http://code.jquery.com/jquery-latest.js
    // ==/UserScript==

    (function ($, undefined) {
    $(function () {
    const windowHeight = $(window).height();

    $('.uir-machine-table-container')
    .filter((index, elem) => $(elem).height() > windowHeight)
    .css('height', '70vh')
    .bind('scroll', (event) => {
    const headerElem = $(event.target).find('.uir-machine-headerrow');
    headerElem.css('transform', translate(0, ${event.target.scrollTop}px));
    });
    });
    })(window.jQuery.noConflict(true));


    dlindy replied on 07/30/2017, 06:43 PM: Hi Michoel, This works perfectly! Thanks for adding the extra features. I think you are correct, it is not just the items sublist where a locked header will be beneficial. I suspect that many will find this solution useful.

    Best,

  • #26132 Score: 0

    Jasdeep Virmani
    Member
    • Contributions: 1
    • Level 1
    @jasdeep_virmani

    Hi All,

    I tried this solution and it seems to be working fine on the console but when i added  script in the tamper monkey to run it then script runs but there is no floating headers appear.

    Is there a way in which i enter this script into the NetSuite?

You must be logged in to reply to this topic.