How to add scrollbar for particular section in normal form

Le Son
Tera Contributor

I have 2 section on form 

I want add 2 scrollbar in each section.

Is there any way to do this?

This is my form

LeSon_0-1665648799652.png

 

 

2 ACCEPTED SOLUTIONS

Saurav11
Kilo Patron
Kilo Patron

Hello,

 

You need to write a onload client script on the form with the below code:-

 

var sec_el = document.getElementById("991f88d20a00064127420bc37824d385");//Sys ID of the section.

if(sec_el){

   sec_el.style.maxHeight = "100px"; //Update based on your need
   sec_el.style.overflow = "scroll";

}

 

Also make sure the isolate script checkbox is false on client script as it is DOM manipulation:-

 

Saurav11_0-1665648994196.png

 

For more info look at the below post:-

 

https://www.servicenow.com/community/service-management-forum/add-a-scroll-bar-for-particular-sectio...

 

Please mark my answer as correct based on Impact.

View solution in original post

For me it works perfectly fine:-

 

Saurav11_0-1665649861993.png

 

Btw I see you are using scoped application that means you cannot use document in scoped app

Saurav11_1-1665650141764.png

 

So to make it work do the below :-

 

Create a system property in that scope named :- glide.script.block.client.globals

 

Saurav11_2-1665650230887.png

 

This will make the document work in client script event.

 

For more info check the ServiceNow article:-

 

https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0551586

 

Please mark my answer as correct based on Impact.

View solution in original post

4 REPLIES 4

Saurav11
Kilo Patron
Kilo Patron

Hello,

 

You need to write a onload client script on the form with the below code:-

 

var sec_el = document.getElementById("991f88d20a00064127420bc37824d385");//Sys ID of the section.

if(sec_el){

   sec_el.style.maxHeight = "100px"; //Update based on your need
   sec_el.style.overflow = "scroll";

}

 

Also make sure the isolate script checkbox is false on client script as it is DOM manipulation:-

 

Saurav11_0-1665648994196.png

 

For more info look at the below post:-

 

https://www.servicenow.com/community/service-management-forum/add-a-scroll-bar-for-particular-sectio...

 

Please mark my answer as correct based on Impact.

Le Son
Tera Contributor

Yes i tried write a onload on form but it doesn't work. It message error (TypeError: Cannot read properties of null (reading 'getElementById')).

It only works on incident table

I think this only works on global

My section form have sys_id is ccb9ec4997621110ed287f5e6253af20.

LeSon_0-1665649455622.png

LeSon_1-1665649532174.png

 

 

For me it works perfectly fine:-

 

Saurav11_0-1665649861993.png

 

Btw I see you are using scoped application that means you cannot use document in scoped app

Saurav11_1-1665650141764.png

 

So to make it work do the below :-

 

Create a system property in that scope named :- glide.script.block.client.globals

 

Saurav11_2-1665650230887.png

 

This will make the document work in client script event.

 

For more info check the ServiceNow article:-

 

https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0551586

 

Please mark my answer as correct based on Impact.

Le Son
Tera Contributor

I tried create system properties. But it doesn't works

Is there any way to do this?

LeSon_0-1665651054269.png