make a ui page to shows dynamic table rows

Aps1 · ‎08-14-2024

Hi All,
I have a requirement to make a UI Page which will have dynamic rows and called from a UI action like below.

above given table I need to make in UI page in which there is '+' sign which will add a row and '-' will remove the row.

I have a created a UI action and UI page with script but not completed fully.

Please help.

UI ACTION script:

function showPage()

{

var gdw = new GlideModal('module_details');

gdw.setSize(750,300);

gdw.render();

}

UI PAGE script:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<!-- <g:evaluate>

var tableName = RP.getWindowProperties().get('x_novrp_it_application_field_details'); // Getting the Target Table Name for which the operation needs to be done

tableName;

</g:evaluate> -->

<html>

<head>

<style>

.table_list{

margin: 0;

padding: 0;

padding-top: 50px;

list-style-position: inside;

}

.table_list_item{

margin: 0;

padding: 0;

}

</style>

</head>

<body>

<h1>Business Process</h1>

<tr>

<th>

<g:ui_choice_input_field id="choice_id" name="choice_name" label="${gs.getMessage('Module')}"> <option value="None">${gs.getMessage('--None--')}</option> <option value="1">Finance</option>

<option value="2">Logistics Inbound</option> <option value="3">Logistics Outbound</option> <option value="4">Logistics Manufacturing/Quality</option> <option value="5">Supply Chain Planning(APO/SCM/IBP)</option> </g:ui_choice_input_field>

</th></th>

<th>

<g:ui_choice_input_field id="choice_id" name="choice_name" label="${gs.getMessage('Criticality')}"> <option value="None">${gs.getMessage('--None--')}</option> <option value="1">Critical</option>

<option value="2">Normal</option> <option value="3">Low</option> </g:ui_choice_input_field>

</th>

<th>

<th>Incidents<input type="text" id="incident"/></th>

</th>

</td></td></td>

<th>

<th>Business Calls<input type="text" id="bus_call"/></th>

</th>

</tr>

</table>

</ol>

</div>

</body>

</html>

</j:jelly>

as of now I am able to get the below page:

Bhavya11 · ‎08-15-2024

Hi @Aps1 ,

you can try something like below script in ui page to add row and remove row

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">

<html>
<head>
<style>
.table_list {
    margin: 0;
    padding: 0;
    padding-top: 50px;
    list-style-position: inside;
}
.table_list_item {
    margin: 0;
    padding: 0;
}
</style>
</head>

<body>
<h1>Business Process</h1>

<div id="wrapper">
    <table align='center' cellspacing="3" cellpadding="5" id="data_table" border="5">
        <tr>
            <th>
                <g:ui_choice_input_field id="module_choice" name="module_name" label="${gs.getMessage('Module')}">
                    <option value="None">${gs.getMessage('--None--')}</option>
                    <option value="1">Finance</option>
                    <option value="2">Logistics Inbound</option>
                    <option value="3">Logistics Outbound</option>
                    <option value="4">Logistics Manufacturing/Quality</option>
                    <option value="5">Supply Chain Planning(APO/SCM/IBP)</option>
                </g:ui_choice_input_field>
            </th>
            <th>
                <g:ui_choice_input_field id="criticality_choice" name="criticality_name" label="${gs.getMessage('Criticality')}">
                    <option value="None">${gs.getMessage('--None--')}</option>
                    <option value="1">Critical</option>
                    <option value="2">Normal</option>
                    <option value="3">Low</option>
                </g:ui_choice_input_field>
            </th>
            <th>Incidents <input type="text" id="incident"/></th>
            <th>Business Calls <input type="text" id="bus_call"/></th>
            <th>SCI <input type="text" id="sci"/> 
                <input type="button" class="add btn btn-primary" onclick="addRow()" value="+"/>
                <input type="button" class="remove btn btn-danger" onclick="removeRow(this)" value="-"/>
            </th>
        </tr>
    </table>
</div>

<script>
// Function to add a new row to the table
function addRow() {
    // Get the table element
    var table = document.getElementById("data_table");

    // Insert a new row at the end of the table
    var newRow = table.insertRow(-1);

    // Create new cells in the row and add the content
    var moduleCell = newRow.insertCell(0);
    moduleCell.innerHTML = '<g:ui_choice_input_field id="module_choice" name="module_name"><option value="None">--None--</option><option value="1">Finance</option><option value="2">Logistics Inbound</option><option value="3">Logistics Outbound</option><option value="4">Logistics Manufacturing/Quality</option><option value="5">Supply Chain Planning(APO/SCM/IBP)</option></g:ui_choice_input_field>';

    var criticalityCell = newRow.insertCell(1);
    criticalityCell.innerHTML = '<g:ui_choice_input_field id="criticality_choice" name="criticality_name"><option value="None">--None--</option><option value="1">Critical</option><option value="2">Normal</option><option value="3">Low</option></g:ui_choice_input_field>';

    var incidentCell = newRow.insertCell(2);
    incidentCell.innerHTML = '<input type="text" id="incident"/>';

    var busCallCell = newRow.insertCell(3);
    busCallCell.innerHTML = '<input type="text" id="bus_call"/>';

    var sciCell = newRow.insertCell(4);
    sciCell.innerHTML = '<input type="text" id="sci"/> <input type="button" class="add btn btn-primary" onclick="addRow()" value="+"/> <input type="button" class="remove btn btn-danger" onclick="removeRow(this)" value="-"/>';
}

// Function to remove the row
function removeRow(button) {
    // Find the row containing the clicked button
    var row = button.parentNode.parentNode;

    // Remove the row from the table
    row.parentNode.removeChild(row);
}
</script>

</body>
</html>

</j:jelly>

Output :

if you click on remove

Please try in your code

Please mark helpful & correct answer if it's really worthy for you.

Thanks,

BK