How to remove No records to display image in san Diego version

piyush-kalra
Tera Contributor

How to remove this image? when no record found.

 

find_real_file.png

10 REPLIES 10

kenf
Tera Contributor

I have a solution, but not a good one. This is a simple styling problem, but it is difficult to inject CSS on every page and dashboard. The only way I was able to do this was to hijack the onCellEdit client script on a list view. I run some JavaScript that injects a stylesheet every time the specific list is displayed.

 

The stylesheet is stored in the content_css table. This is what the CSS looks like:

kenf_0-1693778956766.png

There's not much to the CSS. I'm just hiding that div that contains the satellite image. To inject that stylesheet into the page I create a onCellEdit client script that looks like the following:

kenf_2-1693779199391.png

 

 

/**
 * I am executing this function outside of the onCellEdit call because 
 * I want to always execute this function on the list view. I'm only 
 * using the onCellEdit as a mechanism to execute this code when the
 * list is displayed The code is adding a stylesheet that hides the
 * satelite background image when the list is empty. ServiceNow 
 * provides no way to do this. So I am manually hiding it by injecting
 * some CSS into the page. I need to do it this way because
 * lists are displayed on both dashboards and in normal list views. 
 * There really is no good mechanism to get arbitrary JavaScript to
 * run on a responsive dashboard, so I'm using the onCellEdit to run
 * this code every time the list is displayed
 */
(function() {
    if (!top.gsft_main) return;

    // Injects a stylesheet into the page that will hide the 
    // satelite image for an empty list
    // getting a reference to document. ServiceNow blocks 
    // this reference so I am going around to get the reference myself
    var document = top.gsft_main.document;
    // The sys_id is the sys_id of the stylesheet in content_css
    if (!document.getElementById('a1fcb8399745711024d7b066f053af11')) {
        var link = document.createElement('link');
        link.id = 'a1fcb8399745711024d7b066f053af11';
        link.type = "text/css";
        // hide_empty_list_satelite.css
        link.href = '/a1fcb8399745711024d7b066f053af11.cssdbx';
        link.rel = "stylesheet";
        document.head.appendChild(link);
    }
})();

// This is unused intentionally
function onCellEdit(sysIDs, table, oldValues, newValue, callback) {}

 

As you can see. That's rough just to hide an image, and it's not global. It's attached to a specific table also, so to get this to work you'd need to run it on every table you don't want to display the satelite image.

 

You can globalize this by making a global UI Script that injects the CSS, but you'll find that script does not run on responsive dashboards. So if you don't care about the responsive dashboards you can have on global UI Script that will hide the satellite image through injecting a stylesheet.

 

I'm not actually going to use this, but maybe someone can figure out a more elegant approach. I've spent enough time on it for now.