How to build grid table using the jelly script

Ketan Pandey · ‎08-07-2023

Thank you,

Ketan

Riya Verma · ‎08-08-2023

Hope you are doing great.

To achieve your requirement of building a grid table using Jelly script and displaying the data from two custom tables in a pop-up window upon clicking a UI action, you can follow these steps:

Create a UI Action to trigger the pop-up window. Navigate to "System Definition" > "UI Actions" and create a new UI action. Set the "Table" field to the table where you want to trigger this action. In the "Action name" field, provide a suitable name for your action.
Create a Jelly script that defines the structure of the pop-up window and the grid table. This script will be used to generate the HTML content for the pop-up. Place this script in a UI Page.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
  <html>
    <head>
      <title>Custom Grid Table</title>
      <!-- Add your CSS or other styling here -->
    </head>
    <body>
      <h2>Custom Grid Table</h2>
      <table border="1">
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <!-- Add more columns as needed -->
        </tr>
        <j:forEach var="record" items="${data}">
          <tr>
            <td>${record.column1}</td>
            <td>${record.column2}</td>
            <!-- Add more columns' data as needed -->
          </tr>
        </j:forEach>
      </table>
      <!-- Add other HTML content as needed -->
    </body>
  </html>
</j:jelly>

Create a server-side script include named 'FetchGridTableData'. In this script, fetch the data from your custom tables and return it as XML.

var FetchGridTableData = Class.create();

FetchGridTableData.prototype = Object.extendsObject(AbstractAjaxProcessor, {

  fetchData: function() {
    var data = []; // Fetch your data from the custom tables
    var xml = new XMLDocument('data');
    for (var i = 0; i < data.length; i++) {
      var record = data[i];
      var recordNode = xml.createElement('record');
      recordNode.setAttribute('column1', record.column1);
      recordNode.setAttribute('column2', record.column2);
      // Add more attributes as needed
      xml.appendChild(recordNode);
    }
    return xml.toString();
  },

  type: 'FetchGridTableData'
});

Attach the created UI action to the appropriate form or list view where you want to trigger the pop-up.

Please mark the appropriate response as correct answer and helpful, This may help other community users to follow correct solution.
Regards,
Riya Verma

View solution in original post

Prince Arora · ‎08-07-2023

@Ketan Pandey

What is your actual business requirement?

Ketan Pandey · ‎08-07-2023

On click of the UI Action",It will open the pop-up window and display the grid table ,Grid table will read the data from two table(Custom ) and show the data

Riya Verma · ‎08-08-2023

Hi @Ketan Pandey ,

Hope you are doing great.

To achieve your requirement of building a grid table using Jelly script and displaying the data from two custom tables in a pop-up window upon clicking a UI action, you can follow these steps:

Create a UI Action to trigger the pop-up window. Navigate to "System Definition" > "UI Actions" and create a new UI action. Set the "Table" field to the table where you want to trigger this action. In the "Action name" field, provide a suitable name for your action.
Create a Jelly script that defines the structure of the pop-up window and the grid table. This script will be used to generate the HTML content for the pop-up. Place this script in a UI Page.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
  <html>
    <head>
      <title>Custom Grid Table</title>
      <!-- Add your CSS or other styling here -->
    </head>
    <body>
      <h2>Custom Grid Table</h2>
      <table border="1">
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <!-- Add more columns as needed -->
        </tr>
        <j:forEach var="record" items="${data}">
          <tr>
            <td>${record.column1}</td>
            <td>${record.column2}</td>
            <!-- Add more columns' data as needed -->
          </tr>
        </j:forEach>
      </table>
      <!-- Add other HTML content as needed -->
    </body>
  </html>
</j:jelly>

Create a server-side script include named 'FetchGridTableData'. In this script, fetch the data from your custom tables and return it as XML.

var FetchGridTableData = Class.create();

FetchGridTableData.prototype = Object.extendsObject(AbstractAjaxProcessor, {

  fetchData: function() {
    var data = []; // Fetch your data from the custom tables
    var xml = new XMLDocument('data');
    for (var i = 0; i < data.length; i++) {
      var record = data[i];
      var recordNode = xml.createElement('record');
      recordNode.setAttribute('column1', record.column1);
      recordNode.setAttribute('column2', record.column2);
      // Add more attributes as needed
      xml.appendChild(recordNode);
    }
    return xml.toString();
  },

  type: 'FetchGridTableData'
});

Attach the created UI action to the appropriate form or list view where you want to trigger the pop-up.

Please mark the appropriate response as correct answer and helpful, This may help other community users to follow correct solution.
Regards,
Riya Verma