Portal widget customization

Community Alums
Not applicable

‎06-22-2023 10:06 PM

How to add the search boxes under columns of portal list view for the customized widget?

0 Helpfuls
  • 617 Views
3 REPLIES 3

Community Alums
Not applicable
In response to Community Alums

‎06-22-2023 11:43 PM

Thank you for your response. The URL provided above will be beneficial for the OOB widgets.  Do you know Solution  for Customized widgets? If so, kindly state your response.

0 Helpfuls

Amit Gujarathi
Giga Sage
Giga Sage

‎06-23-2023 02:15 AM

Hi @Community Alums ,
I trust you are doing great.

To add search boxes under columns of a portal list view for a customized widget in ServiceNow, you can follow these steps:

  1. Identify the portal and the widget where you want to add the search boxes.
  2. Open the ServiceNow instance and navigate to the portal designer.
  3. Locate the widget in the designer, and click on it to select it.
  4. In the properties pane on the right-hand side, find the "Columns" property.
  5. Expand the "Columns" property, and for each column where you want to add a search box, do the following: a. Click on the column name to select it. b. In the properties pane, find the "Display Type" property. c. Change the "Display Type" to "Search" from the dropdown menu.
  6. Save the changes to the widget.
  7. Publish the portal to make the changes visible on the portal.

Here's an example of how the code for the widget might look:

<!-- Widget XML -->
<widget>
  <name>My Custom Widget</name>
  <template>
    <html>
      <div class="widget-container">
        <table class="list-view">
          <thead>
            <tr>
              <th>
                <span>Column 1</span>
              </th>
              <th>
                <span>Column 2</span>
              </th>
              <th>
                <span>Column 3</span>
              </th>
            </tr>
            <tr>
              <th>
                <input type="text" placeholder="Search Column 1" />
              </th>
              <th>
                <input type="text" placeholder="Search Column 2" />
              </th>
              <th>
                <input type="text" placeholder="Search Column 3" />
              </th>
            </tr>
          </thead>
          <tbody>
            <!-- Widget data goes here -->
          </tbody>
        </table>
      </div>
    </html>
  </template>
</widget>

Was this answer helpful?


Please consider marking it correct or helpful.


Your feedback helps us improve!


Thank you!


Regards,


Amit Gujrathi



0 Helpfuls