Add text to the banner/header frame in ServiceNow

[soumyadeep10]

Hello Everyone,

I would like to add some custom text to the banner/header frame of all tables. Any idea on how to do this?

[Ankur Bawiskar]

@soumyadeep10 

Not possible directly.

You can use UI script and use DOM manipulation to show that.

DOM is not recommended.

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[vignesh parthib]

Hi @soumyadeep10 

It's not highly recommend to use DOM manipulation , but below code can help to achieve your requirement

• Go to System UI > UI Scripts

• Click New

  • Global: Yes

  • Active: Yes

  • Script: (Paste the full script provided above)

addLoadEvent(function () {
  try {
    // Only on Incident form
    if (window.location.href.indexOf('/incident.do') !== -1) { //get Table name from url
      var interval = setInterval(function () {
        // Use the main form header or toolbar wrapper
        var headerWrapper = document.querySelector('#form_header') || 
                            document.querySelector('.navbar');

        if (headerWrapper && !document.getElementById('incident-custom-title-wrapper')) {
          // Create a wrapper div that spans full width
          var wrapper = document.createElement('div');
          wrapper.id = 'incident-custom-title-wrapper';
          wrapper.style.position = 'absolute';
          wrapper.style.top = '0';
          wrapper.style.left = '0';
          wrapper.style.width = '100%';
          wrapper.style.height = '100%';
          wrapper.style.display = 'flex';
          wrapper.style.justifyContent = 'center';
          wrapper.style.alignItems = 'center';
          wrapper.style.pointerEvents = 'none'; // Don't block UI buttons
          wrapper.style.zIndex = '9999';

          // Create title element
          var title = document.createElement('div');
          title.id = 'incident-custom-title';
          title.innerText = 'Testing TITLE'; //custom title
          title.style.fontSize = '18px';
          title.style.fontWeight = 'bold';
          title.style.color = '#000';

          // Add title into wrapper
          wrapper.appendChild(title);

          // Ensure parent is positioned
          headerWrapper.style.position = 'relative';

          // Append to header
          headerWrapper.appendChild(wrapper);

          clearInterval(interval);
        }
      }, 300);

      setTimeout(function () {
        clearInterval(interval);
      }, 10000);
    }
  } catch (e) {
    console.error('Error injecting custom Incident title:', e);
  }
});

Output

Note: DOM process is only option to achieve but it will affect performance

Thanks,
Vignesh
"If this solution resolves your issue, kindly mark it as correct."