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>
<script></script>
<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">
<ol class="table_list">
<table align='center' cellspacing="3" cellpadding="5" id="data_table" border="5" >
<tr>
<th>
<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>
<td><td><td>
<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>
<th>SCI<input type="text" id="sci"/><input type="button" class="add btn btn-primary" onclick="+" value="+"/></th>
</tr>
</table>
</ol>
</div>
</body>
</html>
</j:jelly>
as of now I am able to get the below page:
as of now I am able to get the below page:
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
