portal widget bulk update

[ganilyilmaz]

Hi everyone,

We have a custom solution that we created on Servicenow. But I'm stuck at a part.
I would like to express the situation as follows:
We have a widget where we list the information about the rhythms. In this widget, we show the line items of the recording. I have no problem listing the line items of the recording. However, I want the user to enter some values into these line items and update all of the line items with a single button. Before that, the user can access each line item. It was approving one by one. Now I want it to be approved collectively. However, I cannot match the rhythm with the values written on the line items.

MY HTML CODE

  <section class="intro" style="margin-left:15px;width:100%;">
  <div class="bg-image h-100" style="background-color: transparent;">
    <div class="mask d-flex align-items-center h-100">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-12">
            <div class="card mask-custom">
              <div class="card-body">
                <div class="table-responsive">
                  <form ng-submit="$event.preventDefault()" >
                  <table class="table table-bordered align-middle table-nowrap  mb-0" style="background-color: transparent;width:100%;">
                    <thead class="table-light">
                      <tr class="text-muted" style="background-color: transparent;">
                        <th class="kabartma"><a style="font-size:1.2rem; color:black;">Number</a></th>
                        <th class="kabartma"><a style="font-size:1.2rem; color:black;">Item Code</a></th>
                     ......
                      </tr>
                    </thead>
             <tbody>
  <tr ng-repeat="lpro in data.lprobs">
     <td><a href="">{{lpro.u_numb}}</a></td>
    <td><a style="font-size:1.4rem; color:black;">{{lpro.u_item_code}}</a></td>
 ......
     <td> 
      <select ng-model="c.data.input1" style="color:black;">
        <option ng-repeat="state in c.data.states" value="{{state.value}}">{{state.label}}</option>
      </select>
      <a style="font-size:1.4rem; color:black;"></a>
    </td>
    <td>
      <input type="text" ng-model="c.data.input2" style="color:black;">
      <a style="font-size:1.4rem; color:black;"></a>
    </td>
    <td>
      <input type="text" ng-model="c.data.input3" style="color:black;">
      <a style="font-size:1.4rem; color:black;"></a>
    </td>
    <td>
      <input type="text" ng-model="c.data.input4" style="color:black;">
      <a style="font-size:1.4rem; color:black;"></a>
    </td>
</tbody><tr>
  <button type="button" name="close" class="btn btn-success btn-question" ng-click="c.action()" style="width:120px;">Submit</button>
</tr>
                  </table>
                     </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>​

MY SERVER SCRİPT CODE 

var gr = $sp.getRecord();
var c = this;
if (gr.getTableName() == 'table_name') {
  
    var fields = $sp.getFields(gr, 'sys_created_on,u_tax_code,u_gl_account,u_wbs,u_cost_center,number,u_item_code,u_quantity,u_description,u_unit_price,u_vat_tax,u_vat_amount,u_discount,u_unit,u_amount,');

    if (gr) {
        data.Visible = true;
        if (gr.sys_mod_count > 0)
            fields.push($sp.getField(gr, 'sys_updated_on'));
        data.fields = fields;
        data.state = gr.state.toString();
        data.sys_updated_on = gr.sys_updated_on.toString();
        data.sys_id = gr.getUniqueValue();
        data.table = gr.getTableName();
        data.user = gs.getUserID();       
        data.states = []; 
        var incStates = new GlideRecord('table_name'); 
        incStates.orderByDesc('u_tax_code');
        incStates.query();
        while (incStates.next()) {
            var stateObj = {};
            stateObj.label = incStates.u_tax_code.toString();
            stateObj.value = incStates.getUniqueValue().toString();
            data.states.push(stateObj); // Çekilen veriyi diziye ekliyoruz
        }
        c.data.lprobs = [];
        var litem = new GlideRecord('table_name');
        litem.addQuery('u_req_number', data.sys_id);
        litem.query();
        var count = 0;
        while (litem.next()) {
            count = count + 1;
            var lpro = {};
            lpro.u_numb = litem.getDisplayValue('number');
            lpro.u_item_code = litem.getDisplayValue('u_item_code');
            lpro.u_quantity = litem.getDisplayValue('u_quantity');
            lpro.u_description = litem.getDisplayValue('u_description');
            lpro.u_unit_price = litem.getDisplayValue('u_unit_price');
            lpro.u_vat_tax = litem.getDisplayValue('u_vat_tax');
            lpro.u_vat_amount = litem.getDisplayValue('u_vat_amount');
            lpro.u_discount = litem.getDisplayValue('u_discount');
            lpro.u_unit = litem.getDisplayValue('u_unit');
            lpro.u_amount = litem.getDisplayValue('u_amount');
            lpro.u_gross_amount = litem.getDisplayValue('u_gross_amount');
            lpro.u_tax_code = litem.getDisplayValue('u_tax_code');
            lpro.u_gl_account = litem.getDisplayValue('u_gl_account');
            lpro.inputvalue = "input_" + litem.getDisplayValue('number');
            lpro.u_wbs = litem.getDisplayValue('u_wbs');
            lpro.u_cost_center = litem.getDisplayValue('u_cost_center');
            lpro.id = litem.getDisplayValue('sys_id');            
            c.data.lprobs.push(lpro);
            var lprobs = c.data.lprobs;
            var lsys_id = lpro.id;                     
            for (var i = 0; i < count; i++) {
                
                var record = lsys_id;
                var inputValue = record.inputValues;
                gs.addInfoMessage(records);               
                if (input.input1 || input.input2 || input.input3 || input.input4 && record ) {
                    gs.addInfoMessage(record);
                    var gr1 = new GlideRecord('table_name');
                    gr1.addQuery('sys_id', record);
                    while (gr1.next()) {
                        gr1.u_tax_code = input.input1;
                        gr1.u_cost_center = input.input2;
                        gr1.u_wbs = input.input3;
                        gr1.u_gl_account = input.input4;
                        gr1.u_controller_update = "Yes";
                        gr1.update();
                    }                  
                }                
            }
        }

    }
}

[Wybren1]

Alright here's a working example for you:

The trick is that ng-model of the specific records keeps track of all the changes in my example the category.
So if you do an ng-model="record.short_description" in the ng-repeat, it will keep track of this data within c.data.records
Once the button is clicked we simply "send" the client sided data (c.data.records) of the records to save.

Example is given when changing the "category" you will see the changed records in your console log.

Hope this helps! 😊

HTML Script:

<p>
  <button class="btn btn-primary" ng-click="c.submit()">
    <span ng-if="!c.saving">Submit changes</span>
    <span ng-if="c.saving"><i class="fa fa-spinner fa-spin"></i></span>
  </button>
</p>

<table class="table table-bordered">
<!-- your widget template -->
  <thead>
    <tr>
      <td>Number</td>
      <td>Short description</td>
      <td>Category</td>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="record in c.data.records">
      <td>{{::record.number}}</td>
      <td>{{::record.short_description}}</td>
      <td>
        <select name="singleSelect" ng-model="record.category" ng-change="c.log()">
          <option ng-repeat="option in c.data.choices" value="{{option.value}}">{{option.label}}</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Client Script

api.controller=function() {
  /* widget controller */
  var c = this;
	c.saving = false;
	
	//Show the c.data.record when changed
	c.log = function() {
		console.log('Records have changed', c.data.records);
	}
	
	//Save all the records
	c.submit = function() {
		
		c.saving = true;
		//Send the records to the server to update
		c.server.get({records: c.data.records}).then(function(r) {
			c.saving = false;
		});
	}
};

Server Script

(function() {
  
	if(!input) {
		data.records = [];
		//Get 5 incidents
		var incidentGR = new GlideRecord('incident');
		incidentGR.addActiveQuery();
		incidentGR.setLimit(5);
		incidentGR.query();

		while(incidentGR.next()) {
			var record = {};
			record.sys_id = incidentGR.getUniqueValue();
			record.number = incidentGR.getValue('number');
			record.short_description = incidentGR.getValue('short_description');
			record.category = incidentGR.getValue('category');
			data.records.push(record);
		}

		data.choices = [];
		//Get all choices
		var choiceGR = new GlideRecord('sys_choice');
		choiceGR.addEncodedQuery('nameSTARTSWITHincident^element=category');
		choiceGR.orderBy('sequence');
		choiceGR.query();
		while(choiceGR.next()) {
			var choice = {};
			choice.label = choiceGR.getValue('label');
			choice.value = choiceGR.getValue('value');
			data.choices.push(choice);
		}
	}
	
	if(input) {
		if(input.records) {
			//Loop through all of them
			for (var i = 0; i < input.records.length; i++) {
				var saveRecord = input.records[i];
				var saveGR = new GlideRecord('incident');
				if(saveGR.get(saveRecord.sys_id)) {
					saveGR.setValue('category', saveRecord.category);
					saveGR.update();
				}
			}
			gs.addInfoMessage('All records have been saved.');
		}
	}

})();