Service Portal Onclick functionality

sinu2 · ‎01-06-2022

Hi Team,

I have a requirement where i need to show users according to locations.Some how it is working but not as per the design.

Expected functionality: I want to display user records when user clicks on the button

Current working functionality: Directly it is displaying users with out clicking

HTML CODE

<div class="panel panel-primary">
 <div class="panel-body">

  <table border="1.5px">
    <span> <button ng-click="c.UsData">Team UnitedStates</span>
    <tr> 
    <th>Name</th>
    <th>Email</th>
    <th>Department</th> 
    </tr>
     
    <tr ng-repeat ="UsUser_Data in data.teamUS">
      <td>{{UsUser_Data.user_name}}</td>
      <td>{{UsUser_Data.email}}</td>
    <td>{{UsUser_Data.department}}</td>
    
   
    </tr>
  </table>
    </div>
</div>

  
  <div class="panel panel-primary">
 <div class="panel-body">
  
<!-- your widget template -->
   
  <table border = "1.5px">
     <span> <button>Team UnitedKingdom</span>
    <tr> 
    <th>Name</th>
    <th>Email</th>
    <th>Department</th> 
    </tr>
    
    <tr ng-repeat ="UKUser_Data in data.teamUk">
      <td>{{UKUser_Data.user_name}}</td>
      <td>{{UKUser_Data.email}}</td>
    <td>{{UKUser_Data.department}}</td>
    
   
    </tr>
  </table>
</div>
   
<div class="panel panel-primary">
 <div class="panel-body"> 
  <table border = "1.5px">
    <span> <button>Team Germany</span>
    <tr> 
    <th>Name</th>
    <th>Email</th>
    <th>Department</th> 
    </tr>
    
    <tr ng-repeat ="GermanUser_Data in data.teamGermany"><td>{{GermanUser_Data.user_name}}</td>
      <td>{{GermanUser_Data.email}}</td>
    <td>{{GermanUser_Data.department}}</td>
    
   
    </tr>
  </table>
</div>

client script

api.controller=function() {
  /* widget controller */
  var c = this;
	
	c.UsData = function(){
		
	
		c.server.update();
	}
	
	
};

Server code

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	data.teamGermany=[];
	data.teamUk=[];
	data.teamUS=[];
	
	var user= new GlideRecord('sys_user');
	user.addEncodedQuery('location=e57e157437d0200044e0bfc8bcbe5d3d^ORlocation=477e197437d0200044e0bfc8bcbe5d65^ORlocation=b30330019f22120047a2d126c42e70e5');
  user.query();
	while(user.next()){
		
		if(user.location.getDisplayValue()=="Germany"){
			
			var GermanUser_Data={};
			GermanUser_Data.user_name=user.getValue('user_name');
			GermanUser_Data.email=user.getValue('email');
			GermanUser_Data.department=user.getValue('department');
			
			
		data.teamGermany.push(GermanUser_Data);
			
		}
		
		if(user.location.getDisplayValue()=='United Kingdom'){
			
			var UKUser_Data={};
			UKUser_Data.name=user.getValue('user_name');
			UKUser_Data.email=user.getValue('email');
			UKUser_Data.department=user.getValue('department');
			
			data.teamUk.push(UKUser_Data);
		}
		
		if(user.location.getDisplayValue()=='United States'){
			
			var UsUser_Data={};
			UsUser_Data.name=user.getValue('user_name');
			UsUser_Data.email=user.getValue('email');
			UsUser_Data.department=user.getValue('department');
			
			data.teamUS.push(UsUser_Data);
		}
		
	
	}
})();

asifnoor · ‎01-06-2022

Here is how you can do it.

In the onclick function, call a client script function and create that function in the client controller.

Then in the server side script, keeep all this code inside a condition (which gets set in the client script, someting liek this)

if (data.flag==true) {

put all code of server side in this.

}

//declare the objects above the if conditon so taht when its not true, you get empty results.

Then in clinet controller, in the onclick function, set the value like this.

c.server.flag=true; //put this in client script.

Mark the comment as a correct answer and also helpful if this helps to solve the problem.

sinu2 · ‎01-06-2022

HI Asif,

Not understanding clearly, Could you please help me ?

Thanks

sinu2 · ‎01-06-2022

Asif for testing purpose i have updated script like that but not working

@note: i have updated only for Germany location for testing purpose

Server

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	data.teamGermany=[];
	data.teamUk=[];
	data.teamUS=[];
	
	var user= new GlideRecord('sys_user');
	user.addEncodedQuery('location=e57e157437d0200044e0bfc8bcbe5d3d^ORlocation=477e197437d0200044e0bfc8bcbe5d65^ORlocation=b30330019f22120047a2d126c42e70e5');
  user.query();
	while(user.next()){
	
		if(user.location.getDisplayValue()=="Germany"){
				if(data.flag==true){
			
			var GermanUser_Data={};
			GermanUser_Data.user_name=user.getValue('user_name');
			GermanUser_Data.email=user.getValue('email');
			GermanUser_Data.department=user.getValue('department');
			
			
		data.teamGermany.push(GermanUser_Data);
			
		}
		}
		
		if(user.location.getDisplayValue()=='United Kingdom'){
			
			var UKUser_Data={};
			UKUser_Data.name=user.getValue('user_name');
			UKUser_Data.email=user.getValue('email');
			UKUser_Data.department=user.getValue('department');
			
			data.teamUk.push(UKUser_Data);
		}
		
		if(user.location.getDisplayValue()=='United States'){
			
			var UsUser_Data={};
			UsUser_Data.name=user.getValue('user_name');
			UsUser_Data.email=user.getValue('email');
			UsUser_Data.department=user.getValue('department');
			
			data.teamUS.push(UsUser_Data);
		}
		
	
	}
})();

CLient

api.controller=function() {
  /* widget controller */
  var c = this;
	
	c.UsData = function(){
		
	c.server.flag=true;
	
	}
	
	
};

HTML

<div class="panel panel-primary">
 <div class="panel-body">

  <table border="1.5px">
    <span> <button ng-click="c.UsData">Team UnitedStates</span>
    <tr> 
    <th>Name</th>
    <th>Email</th>
    <th>Department</th> 
    </tr>
     
    <tr ng-repeat ="UsUser_Data in data.teamUS">
      <td>{{UsUser_Data.user_name}}</td>
      <td>{{UsUser_Data.email}}</td>
    <td>{{UsUser_Data.department}}</td>
    
   
    </tr>
  </table>
    </div>
</div>

  
  <div class="panel panel-primary">
 <div class="panel-body">
  
<!-- your widget template -->
   
  <table border = "1.5px">
     <span> <button>Team UnitedKingdom</span>
    <tr> 
    <th>Name</th>
    <th>Email</th>
    <th>Department</th> 
    </tr>
    
    <tr ng-repeat ="UKUser_Data in data.teamUk">
      <td>{{UKUser_Data.user_name}}</td>
      <td>{{UKUser_Data.email}}</td>
    <td>{{UKUser_Data.department}}</td>
    
   
    </tr>
  </table>
</div>
   
<div class="panel panel-primary">
 <div class="panel-body"> 
  <table border = "1.5px">
    <span> <button>Team Germany</span>
    <tr> 
    <th>Name</th>
    <th>Email</th>
    <th>Department</th> 
    </tr>
    
    <tr ng-repeat ="GermanUser_Data in data.teamGermany"><td>{{GermanUser_Data.user_name}}</td>
      <td>{{GermanUser_Data.email}}</td>
    <td>{{GermanUser_Data.department}}</td>
    
   
    </tr>
  </table>
</div>

asifnoor · ‎01-06-2022

Where is your onclick function?

right now you are setting this to true onload, thats why its showing on load. You need to add onlcick fucntion in your client script and call taht from your html, and in the client script on click function, set the flag to true.

c.server.flag=true;

By default in onload, keep the flag as false

c.server.flag=false;