question How to send data from Client controller to Server side? in Developer forum

How to send data from Client controller to Server side?

NikitaAgarwal — Tue, 04 Dec 2018 07:34:28 GMT

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!

Re: How to send data from Client controller to Server side?

Omkar Mone — Tue, 04 Dec 2018 07:42:19 GMT

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);


}

Re: How to send data from Client controller to Server side?

RajP79032538207 — Tue, 04 Dec 2018 07:42:37 GMT

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

Re: How to send data from Client controller to Server side?

rahulpandey — Tue, 04 Dec 2018 07:45:16 GMT

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){

});

Re: How to send data from Client controller to Server side?

NikitaAgarwal — Wed, 05 Dec 2018 07:36:47 GMT

Hi Rahul,

I tried this but I am getting an error.

Please see my updated code below.

I have pointed error in server script as comments beside gr.query();

Client Script:

function() {
  /* widget controller */
  var c = this;
	var $scope = this;
//List of tables stored
	var optionText = c.data.tables;
	console.log("Option Text: " + optionText);
	

	$scope.getMergeFields = function(){
//Fetch the selected table value from HTML using ng-model
		$scope.data.tables = $scope.options;
		console.log("Scope table name:" + $scope.data.tables);
//Call to server
		$scope.server.update();
	}
}

Server Script:

if(input){
	gs.log("Input: " + input.tables);//Getting user selected table.
	var gr = new GlideRecord(input.tables);
	gr.initialize();

	gr.query(); //Error at this point.It says " org.mozilla.javascript.EvaluatorException: GlideRecord.addQuery() - invalid table name: incident (sp_widget.418270c1db0623005f151fc768961924.script; line 29)"

	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;
}

Re: How to send data from Client controller to Server side?

rahulpandey — Wed, 05 Dec 2018 09:36:00 GMT

Hi,

Do you want to get the labels of a tables ? is it your requirement ? if yes, please use below code

      if(input)
{data.fields = $sp.getListColumns(input.tables, input.view ||'default');
	data.fields_array = data.fields.split(',');
	var grForLabels = new GlideRecord(data.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;
}

Re: How to send data from Client controller to Server side?

NikitaAgarwal — Wed, 05 Dec 2018 11:35:47 GMT

No, I have already fetched table names.

I want column labels and column names of the table.

For eg.: Consider Incident Table, which has Assigned to column with a label as "Assigned to" and name as "assigned_to".

Likewise, I need all the columns of the selected table.

Re: How to send data from Client controller to Server side?

rahulpandey — Wed, 05 Dec 2018 11:48:36 GMT

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;
	}

Re: How to send data from Client controller to Server side?

NikitaAgarwal — Wed, 05 Dec 2018 13:56:09 GMT

Hi Rahul,

The code is working fine when tested with manually entering the table name as you did in the screenshot. But it is not working when I update the table name with input.tables.

Neither I got value for the data.fields nor fields_array and others also. As no fields are fetched, its giving error at line 9 (according to your screenshot).

Error at line 9: org.mozilla.javascript.EvaluatorException: GlideRecord.getElement() - invalid table name: incident (sp_widget.418270c1db0623005f151fc768961924.script;

Re: How to send data from Client controller to Server side?

rahulpandey — Wed, 05 Dec 2018 20:21:00 GMT

Hi Nikita,

there seems to be an issue, whether input.tables are returning table or not.

instead of directly using input.tables, fir store into a variable like

var Inouttable = input,tables; and try the code.

Re: How to send data from Client controller to Server side?

ChrisBurks — Thu, 06 Dec 2018 03:42:35 GMT

1) To answer the title of your post: How to send data from Client controller to Server side?
Normally these two methods on "this" or "c "are used:

.server.update() - Automatically sends this.data to the server as input
.server.get() - Sends a custom input object

A third option is via url

2) Looking at some of the threads in this post I'm not sure if you're just trying to download an attachment that is of xls/docx type or if you're trying to just download a xls/docx file based on give table/record information. In the below screencast, is this what you're trying to accomplish?

https://youtu.be/4_pTCOmZc1k

This may not be exactly what you're looking for but I think it has the same concepts where there is input and then it's sent to the server to return some information in order to download a file based on the input. This isn't downloading an attachment though. In this video the widget is downloading either an excel file of the all the incident lists, then a file of a list of incidents based on an encoded query and then finally downloads a single incident record based on the incident number.

This is just a basic MOC up of what I think what is discussed in this thread. Let me know if this is what you're looking for and I'll post the setup.

Re: How to send data from Client controller to Server side?

NikitaAgarwal — Thu, 06 Dec 2018 04:18:24 GMT

Hi Rahul,

input.tables is returning selected value as expected.

Yes, I did try this, but nothing worked out. I am getting the value printed correctly in logs.

I think methods are not able to understand the value from input.tables or something is missing in it.

Re: How to send data from Client controller to Server side?

NikitaAgarwal — Thu, 06 Dec 2018 08:32:49 GMT

Hi Rahul,

Your code worked out.

There was a space in input.tables value like " incident" instead of "incident", due to which it was not processing.

Thank you so much for the help! 🙂

In future, if anyone comes up for the same issue below is updated code:

Server Script:

if(input){
	columnArray = [];
	data.fields = $sp.getListColumns(input.tables, 'default');
	data.fields_array = data.fields.split(',');
	
	var grForLabels = new GlideRecord(input.tables);
	dataobj = function(){
		this.value="";
		this.text="";
		this.toString = function(){
			return "Data: " + this.value + ": " + this.text;
		};
	}
		
	for (var i in data.fields_array) {
		var field = data.fields_array[i];
		var ge = grForLabels.getElement(field);
		if (ge == null)
			continue;
		var col = new dataobj();
		col.value = field.toString();
		col.text = ge.getLabel().toString();
		columnArray.push(col);
	}
	data.columnDetails = columnArray;
	}

Client script:

$scope.getMergeFields = function(){
		$scope.data.tables = $scope.options;
		$scope.server.update().then(function(){
			for(var f in $scope.data.columnDetails){
				console.log("F: " + $scope.data.columnDetails[f].toString() + " : " + $scope.data.columnDetails[f].text + " : " + $scope.data.columnDetails[f].value);
			}
		})
	}

Re: How to send data from Client controller to Server side?

NikitaAgarwal — Thu, 06 Dec 2018 10:25:37 GMT

Hi Chris,

Thank you for the response! My issue to fetch column names and labels has been resolved now.

I am looking forward to inserting the fetched data into docx, xls file and get it to download as per user selection.

I check out the video link, it is somewhat similar to what the requirement is. I have mentioned my requirement below.

My requirement is Onclick of a button the column names and labels should be inserted in the document and it should be downloaded(xls, docx file which depends on user selection) directly.

Re: How to send data from Client controller to Server side?

ANUSHREEY — Mon, 14 Oct 2024 11:44:23 GMT

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