Community,
I need help to make choices selection and update button on a page works.
I have created a page and use a widget on the page. The requirement is to update state field on a record in the backend once the user select the state for the asset from the page on the portal side and click update.
I am unable to select the state choice or update\submit the record from the portal.
Below is my widget HTML, CSS Server and Client codes.
Body HTML template;
<div>
<!-- your widget template -->
<table>
<tr>
<th>Asset</th>
<th>Requested For</th>
<th>State</th>
</tr>
<tr ng-repeat="data in data.arr" >
<td>{{data.u_asset}}</td>
<td>{{data.u_requested_for}}</td>
<td>
<label for="cars">State: </label>
<select ng-model='1'>
<option value='1'>In Stock</option>
<option value='2'>Out Stock</option>
</select>
</td>
</tr>
</table>
<button type="button" ng-click="updatetable()">Update</button>
</div>
CSS:
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
Server Script:
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
var gar = new GlideRecord('u_asset_request');
var curruser = gs.getUserID();
gar.addEncodedQuery('u_requested_for='+curruser);
gar.query();
data.arr = [];
while(gar.next()){
var obj = {};
obj.u_asset = (gar.getDisplayValue('u_asset')+'');
obj.u_requested_for = (gar.getDisplayValue('u_requested_for')+'');
obj.u_state = (gar.getDisplayValue('u_state') +'');
obj.sys_id = (gar.sys_id +'');
data.arr.push(obj);
}
if(input && input.action == "updateState"){
var gr = new GlideRecord('u_asset_request');
gr.get(input.id);
gr.query();
while(gr.next()){
gr.u_state = input.optionvalue;
gr.update();
}
}
})();
Client Controller:
api.controller=function($scope) {
/* widget controller */
var c = this;
$scope.onSelectChange = function(p,sysid) {
console.log('Selected option:', p);
c.data.action = "updateState";
c.data.id = sysid;
c.data.optionvalue = p;
c.server.update().then(function(response){
console.log("data updated");
});
};
};
1 ACCEPTED SOLUTION
hi @Ken61 ,
can you try something like below.
Html:
<div>
<table>
<tr>
<th>Asset</th>
<th>Requested For</th>
<th>State</th>
</tr>
<tr ng-repeat="data in c.data.arr">
<td>{{data.u_asset}}</td>
<td>{{data.u_requested_for}}</td>
<td>
<select ng-model="data.selectedState">
<option value="1">In Progress</option>
<option value="2">New</option>
</select>
</td>
<td>
<button type="button" ng-click="updatetable('escalate', data)">Update</button>
</td>
</tr>
</table>
</div>
css :
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
server :
(function() {
var gar = new GlideRecord('incident');
var curruser = gs.getUserID();
gar.addQuery('caller_id', curruser);
gar.addEncodedQuery('state!=7^ORstate!=6^state!=NULL');
gar.query();
data.arr = [];
while (gar.next()) {
var obj = {}; // Create a new object for each record
obj.u_asset = gar.getDisplayValue('number');
obj.u_requested_for = gar.getDisplayValue('caller_id');
obj.u_state = gar.getDisplayValue('state');
obj.sys_id = gar.getUniqueValue(); // Get sys_id correctly
data.arr.push(obj); // Add the object to the array
}
if (input && input.action === "escalate") {
var gr = new GlideRecord('incident');
if (gr.get(input.id)) {
gr.state = input.optionvalue; // Assuming 'state' is a valid field in the table
gr.update();
}
}
})();
client :
api.controller = function($scope) {
var c = this;
// Function to update a single record
$scope.updatetable = function(action, record) {
c.data.action = action;
c.data.id = record.sys_id; // Use the specific record's sys_id
c.data.optionvalue = record.selectedState; // Get selected state
c.server.update().then(function(response) {
console.log("State updated for record:", record.sys_id);
});
};
// Function to update all records
$scope.updateAll = function() {
c.data.arr.forEach(function(record) {
if (record.selectedState) {
$scope.updatetable('escalate', record);
}
});
console.log("All states updated.");
};
};
before changing
after updating from portal
Please mark helpful & correct answer if it's really worthy for you.
Thanks,
BK
hi @Ken61 ,
can you try something like below.
Html:
<div>
<table>
<tr>
<th>Asset</th>
<th>Requested For</th>
<th>State</th>
</tr>
<tr ng-repeat="data in c.data.arr">
<td>{{data.u_asset}}</td>
<td>{{data.u_requested_for}}</td>
<td>
<select ng-model="data.selectedState">
<option value="1">In Progress</option>
<option value="2">New</option>
</select>
</td>
<td>
<button type="button" ng-click="updatetable('escalate', data)">Update</button>
</td>
</tr>
</table>
</div>
css :
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
server :
(function() {
var gar = new GlideRecord('incident');
var curruser = gs.getUserID();
gar.addQuery('caller_id', curruser);
gar.addEncodedQuery('state!=7^ORstate!=6^state!=NULL');
gar.query();
data.arr = [];
while (gar.next()) {
var obj = {}; // Create a new object for each record
obj.u_asset = gar.getDisplayValue('number');
obj.u_requested_for = gar.getDisplayValue('caller_id');
obj.u_state = gar.getDisplayValue('state');
obj.sys_id = gar.getUniqueValue(); // Get sys_id correctly
data.arr.push(obj); // Add the object to the array
}
if (input && input.action === "escalate") {
var gr = new GlideRecord('incident');
if (gr.get(input.id)) {
gr.state = input.optionvalue; // Assuming 'state' is a valid field in the table
gr.update();
}
}
})();
client :
api.controller = function($scope) {
var c = this;
// Function to update a single record
$scope.updatetable = function(action, record) {
c.data.action = action;
c.data.id = record.sys_id; // Use the specific record's sys_id
c.data.optionvalue = record.selectedState; // Get selected state
c.server.update().then(function(response) {
console.log("State updated for record:", record.sys_id);
});
};
// Function to update all records
$scope.updateAll = function() {
c.data.arr.forEach(function(record) {
if (record.selectedState) {
$scope.updatetable('escalate', record);
}
});
console.log("All states updated.");
};
};
before changing
after updating from portal
Please mark helpful & correct answer if it's really worthy for you.
Thanks,
BK
@Bhavya11 Is it possible that when I click on update from the portal, it save the choice and the record remove from the page? Because the record did not save on the page but update it from the backend.
