[dlindy Contributions: 0Level 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.

[MikeBucklaew Contributions: 0Level 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!

[michoel Contributions: 0Level 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,

[michoel Contributions: 0Level 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,

[Jasdeep VirmaniMember Contributions: 1Level 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?

[Author]

Posts