Display Recipient Details in a Table Based on First Name Input in web application | Community
Skip to main content
V
VaniVi1
Level 2
July 11, 2025
Solved

Display Recipient Details in a Table Based on First Name Input in web application

  • July 11, 2025
  • 1 reply
  • 351 views

Hi Team,

I'm working on a web application where I need to display recipient details in a table.

The table have columns for ID (Primary Key), First Name, and Last Name. and Above the table, there is an input field for the First Name. When a user enters a First Name and submit the button, the below table should dynamically populate with matching recipient records. for the column of (ID (Primary Key), First Name, and Last Name)

I've created a QueryDef to fetch recipient details, and the data is stored in ctx.vars.recipientDetails.

I want to filter this data based on the First Name input and display the records in the table.

FYI: Table and first name search both in the same page and configured Query def(JS Activity) before this page activity.

Can anyone help on the further enhancement.

Please let me know incase of further details.




Best answer by ccg1706

Hi @vanivi1,

 

If I am understanding you correctly, a possible solution since the data is already loaded into ctx.vars.recipientDetails the best way is to handle the filtering directly on the client side using JS in the HTML of the webapp page. There's no need to use the inizialitation or approval script of the page activity in this case, as the filtering and table rendering are fully managed in the browser.

 

Hope it helps, and if not don't doubt on sharing more info!

 

Best, 

Celia

1 reply

ccg1706
Community Advisor
ccg1706Community AdvisorAccepted solution
Community Advisor
July 16, 2025

Hi @vanivi1,

 

If I am understanding you correctly, a possible solution since the data is already loaded into ctx.vars.recipientDetails the best way is to handle the filtering directly on the client side using JS in the HTML of the webapp page. There's no need to use the inizialitation or approval script of the page activity in this case, as the filtering and table rendering are fully managed in the browser.

 

Hope it helps, and if not don't doubt on sharing more info!

 

Best, 

Celia

Rch_
Rch_
Level 3
August 29, 2025

Hey @vanivi1,

 

You can achieve the functionality you're aiming for using a two-page WebApp setup with a small JS script in between to handle the filtering.

Page 1: Accept input from the user

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h3>Search for Recipients by First Name</h3>
  <form method="post" autocomplete="off">
    <label for="firstName">First Name:</label>
    <input type="text" name="firstName" required />
    <br><br>
    <input type="submit" value="Search" data-nl-action="next" />
  </form>
</body>
</html>

JS Activity (runs between Page 1 and Page 2)

var firstNameInput = request.parameters.firstName;

logInfo("Searching for recipients with first name starting with: " + firstNameInput);

var recipients = xtk.queryDef.create(
  <queryDef schema="nms:recipient" operation="select">
    <select>
      <node expr="@id"/>
      <node expr="@firstName"/>
      <node expr="@lastName"/>
    </select>
    <where>
      <condition expr={"@firstName LIKE '" + firstNameInput + "%'"} />
    </where>
  </queryDef>
).ExecuteQuery();

var ids = [];
var firstNames = [];
var lastNames = [];

for each (var r in recipients) {
  ids.push(r.@id);
  firstNames.push(r.@firstName);
  lastNames.push(r.@lastName);
}

ctx.vars.recipientIds = ids.length ? ids : ["No matching recipients"];
ctx.vars.recipientFirstNames = firstNames.length ? firstNames : [""];
ctx.vars.recipientLastNames = lastNames.length ? lastNames : [""];

Page 2: Display the filtered results in a table

<!DOCTYPE html>
<html>
<head>
  <title>Recipient Info</title>
  <style>
    table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      padding: 8px;
    }
  </style>
</head>
<body>
  <form autocomplete="off">
    <h2>Recipient Info</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><%= ctx.vars.recipientIds %></td>
          <td><%= ctx.vars.recipientFirstNames %></td>
          <td><%= ctx.vars.recipientLastNames %></td>
        </tr>
      </tbody>
    </table>
  </form>
</body>
</html>

This setup passes the input from the first page to a JS that queries the recipient schema and displays the results in a table on the next page.


 

Hope this helps!

Thanks,

    Terms & ConditionsAccessibility statement

    Loading footer...