How to build grid table using the jelly script

Go to solution
Ketan Pandey
Tera Expert

‎08-07-2023 11:25 PM

How to build grid table using the jelly script 

 

Thank you,

Ketan

0 Helpfuls
  • 1,045 Views
1 ACCEPTED SOLUTION

Go to solution
Riya Verma
Kilo Sage
Kilo Sage

‎08-08-2023 12:53 AM

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:

 

  1. 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.
  2. 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

0 Helpfuls
3 REPLIES 3

Go to solution
Prince Arora
Tera Sage
Tera Sage

‎08-07-2023 11:28 PM

@Ketan Pandey 

 

What is your actual business requirement?

0 Helpfuls

Go to solution
Ketan Pandey
Tera Expert
In response to Prince Arora

‎08-07-2023 11:48 PM

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 

0 Helpfuls

Go to solution
Riya Verma
Kilo Sage
Kilo Sage

‎08-08-2023 12:53 AM

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:

 

  1. 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.
  2. 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
0 Helpfuls