How to send data from Client controller to Server side?

Nikita28 · ‎12-03-2018

Hi,

I am a newbie to Service Portal.

I have to create a page on which there are 2 dropdowns and 1 button.

In the first drop-down, there are tables which extend the Task table.

In the second drop-down, there are options(xls,docx) in which format user wants to download the file.

On click of a button, a user should get the file downloaded with the 'list of column labels and names of the table choose from first drop-down and add/insert the data into the (xls,docx) file'.

My questions are:

1. How to send the chosen table to server from client OR is there any other alternative to get all the columns of the table at client side?

2. How to download a (docs,xls) file on click of a button with the column labels and names in it?

Please find below what I have coded.

HTML Template:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Green Folder</title>
  </head>
  <body>
    <div>
      <div class="form-group" >
        <select class="form-control" id="sel1" ng-model="optionText" ng-options="value for value in data.tables">
          <option value="" disabled selected hidden>Select Table</option>
        </select>
      </div>
      <div class="form-group" >
        <select class="form-control" id="format">
          <option value="" disabled selected hidden>Select Format</option>
          <option value="xls">xls</option>
          <option value="docx">docx</option>
        </select>
      </div>
      <div class="container">
        <button type="submit" class="btn btn-default" ng-click="c.getMergeFields();">Get Merge Fields</button>
      </div>
	</div>
</body>
</html>

Client Script:

function() {
  /* widget controller */
  var c = this;
	var optionText = c.data.tables;
	console.log("Option Text: " + optionText);
	
	c.getMergeFields = function(){
			var tableName= document.getElementById('sel1').value
		console.log("Table name: " + tableName);
		
		c.server.getmFields(tableName).then(function(resp){
			var getfields = resp.data.mFields;
		});
	}
}

Server Script:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	data.tables = getExtendTables();
	function getExtendTables(){
		//To fetch tables those extends Task table
		gs.include('TableUtils');
		
		var table = new global.TableUtils("task");
		var tableList = table.getAllExtensions();
		tableList = tableList.toString();
		
		gs.info("tableList of type " + typeof tableList + " == " + tableList);

		tableList = tableList.slice(1,-1);
		gs.info("Slicing of tableList of type: " + typeof tableList + " here: " + tableList);
		var arr = tableList.split(",");
		gs.info("Arr: " + arr);
		arr.sort();
		return arr;
	}
	
	//To fetch column labels and name of table selected by user
	 if(input){
		data.mFields = getmFields(input.tableName);
		gs.info("mFields: " + mFields);
	} 
	function getmFields(tableName){
		 gs.info("Input: " + tableName);
		var gr = new GlideRecord(tableName);
		gr.initialize();
    gr.query();
		gr.next();
		
		var elements = gr.getElements();
		var element;
		var result = [];
		for (var i=0; i<elements.length; i++) {
			element = elements[i];
			result[i]=element.getLabel();
    }		   
		result.sort();
		 gs.info("Result: " + result);
		return result; 
	 }
	 
})();

Is there any better approach or best practice for this?

Any help would be appreciated.

Thanks in advance!

rahulpandey · ‎12-05-2018

Hi Nikita,

The code I gave you exactly does the same thing. Please see below screenshot and updated code

if(input){
		columnArray = [];
data.fields = $sp.getListColumns(input.table, 'default');
	data.fields_array = data.fields.split(',');
	var grForLabels = new GlideRecord(input.table);
	for (var i in data.fields_array) {
		console.log('going here');
		var field = data.fields_array[i];
		var ge = grForLabels.getElement(field);
		if (ge == null)
			continue;
		var dataobj = {};
		dataobj.value = field.toString();
		dataobj.text = ge.getLabel().toString();
		columnArray.push(dataobj);
	}
	data.columnDetails = columnArray;
	}

View solution in original post

Omkar Mone · ‎12-03-2018

Hi

Using DOM manipulations is not a best practice. Instead you can pass your values from ng-model and then from client scrip to server you can do something like this :-

function($scope) {     


       var c = this;


   c.data.abc='Value';


       c.func_name= function() {


               c.server.update();





       }


}



Server side you can use


if(input)


{


gs.log(input.abc);


}

yadavanushree27 · ‎10-14-2024

Hello Mega Sage, Do you give training on service portal as well or know any one ?

Raj68 · ‎12-03-2018

Hi,

You can use c.server.update to send the data to server as mentioned below.

function($scope) {

var c = this;

c.data.abc='Any Name';

c.update = function() {

c.server.update().then(function (response) {

c.data = {};

})

}

Server side you can use

if(input)

{

gs.log(input.abc);

}

else

{

//Code for initial load

}

NOTE: Mark correct or helpful if it helps you.

Warm Regards,

Raj patel

rahulpandey · ‎12-03-2018

Hi Nikita,

To download the file you can build your button with href tag like below

<button href="/sys_attachment.do?sys_id="+sys_id_of_attachment>Download<button>

To send data do server or vice verca

Client side
$scope.data.abc ="hello";
$scope.server.update().then(function(response){
console.log(response.xyz);
});

server side
if(input.abc){
data.xyz = "hi";
}

Async Server call : $scope.server.update();

Sync call : $scope.server.update().then(function(response){

});