Service Portal form widget, collapsing section (Accordion)

faisal_dadabhoy
Giga Expert

‎07-13-2023 10:14 AM

Hi Community,

 

Service Portal is my weak spot:-). Need some help with form widget

Below is the screen shot of the change Request in Service Portal form widget.
The sections in form widget is displayed vertically which is fine.

 

I want to make the section as collapsable (bootstrap terminology is I believe Accordion).

so when you click it will show/hide the section.

I saw some community where people converted the sections to tabs, but i didn't see collapsable section.

Has anyone done anything like that, do you mind sharing the code? any help would be greatly appreciated.

 

Thanks, Faisal

 

faisal_dadabhoy_1-1689268053155.png

 

 

0 Helpfuls
  • 1,884 Views
2 REPLIES 2

Community Alums
Not applicable

‎07-14-2023 07:46 AM

Hi @faisal_dadabhoy ,

 

Here is an example to hide/show a particular section using HTML, CSS, and Javascript. Probably, you can utilize it on the respective widget.

 

 

<!DOCTYPE html>
<html>
<head>
  <title>Toggle Section Example</title>
  <style>
    #toggleSection {
      display: none;
    }
  </style>
</head>
<body>
  <button id="toggleButton">Toggle Section</button>
  <section id="toggleSection">
    <h2>Section Title</h2>
    <p>This is the content of the section.</p>
  </section>
  
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var section = document.getElementById("toggleSection");
      section.style.display = "none"; // Set initial state to hidden
      
      document.getElementById("toggleButton").addEventListener("click", function() {
        if (section.style.display === "none") {
          section.style.display = "block";
        } else {
          section.style.display = "none";
        }
      });
    });
  </script>
</body>
</html>

If this helped you in any way, please hit the like button/mark it helpful. So it will help others to get the correct solution.

 

regards,

Prasad

0 Helpfuls

Mark Roethof
Tera Patron
Tera Patron

‎07-14-2023 08:07 AM

Hi there,

 

Out-of-the-box there's nothing for that, so you need to clone and edit the widget.

 

Before even doing so, do answer: Is it worth it? Are you going to maintain the widget, when ServiceNow updates their own? Do you understand the consequences of cloning a widget?

 

Kind regards,
Mark

 

Kind regards,

 

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

 

~444 Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

LinkedIn