How do I add a Search on each column?

wllmpeterson
Tera Contributor

yesterday

Hey guys!

I'm using a clone of OOTB widget "Data table from Instance Definition" and I need to improve that widget putting a search box.

 

Everyone can help me with a Server script to do that?

 

Thanks!

Preview file
9 KB
0 Helpfuls
  • 365 Views
1 REPLY 1

Itallo Brandão
Mega Guru

yesterday

Hi wllmpeterson,

Based on your screenshot, you are using a very stripped-down version of the data table.

The Challenge: Adding a specific search box inside each column header (like the Native UI List view) requires heavy customization of the HTML Template and Client Controller logic (AngularJS). It cannot be done via Server Script alone because standard Service Portal widgets do not support column-header inputs out-of-the-box.

The Solution (Best Practice): Instead of building custom inputs, you should enable the Native Filter features that are currently hidden in your widget. This allows users to filter by specific columns (e.g., "Assigned to" contains "X") easily.

In your Server Script, look for where the options are set (usually at the top) and add these lines:

JavaScript
 
(function() {
    /* populate the 'data' object */
    /* e.g., data.table = options.table; */

    // --- ADD THESE LINES TO ENABLE SEARCH ---
    options.show_breadcrumbs = true; // Shows the filter condition builder
    options.enable_filter = true;    // Shows the Funnel icon to create filters
    options.show_keywords = true;    // Adds a Global Search box at the top
    // ----------------------------------------

    // ... rest of your existing code
})();

Why this is better:

  • Global Search (show_keywords): Adds a search box that queries all columns.

  • Filter (enable_filter): Allows users to click the "Funnel" icon and construct precise queries like Assigned to | is | Brandão, which satisfies the requirement of searching by specific columns.


Hope this helps you enable the search capabilities!

If this response helps you solve the issue, please mark it as Accepted Solution.
This helps the community grow and assists others in finding valid answers faster.

Best regards, Brandão.

0 Helpfuls