Service Portal Widget to dynamically build out Request Items with Tasks

[Ashley]

Good Evening,

Think I need a second pair of eyes on this,

So I am trying to build a widget that dynamically builds out the Request Items and Tasks associated with the Request the user is viewing in the Service Portal.

I am getting the Request Items to build out correctly but can't figure out how to associate the Tasks with the right Request Items, right now it just shows all Tasks on both Request Items.

Server Side Code:

	var request_id = $sp.getParameter('sys_id');
	var query ="request.sys_id="+request_id;

	data.sc_reqitem = getReqItem();
	function getReqItem() {
		var sc_req_Arr = [];
		var gr_req_item = new GlideRecord('sc_req_item');
		gr_req_item.addEncodedQuery(query);
		gr_req_item.query();
		while (gr_req_item.next()) {
			var sc_req_Obj = {};
			$sp.getRecordDisplayValues(sc_req_Obj, gr_req_item, 'number,sys_id,cat_item');
			sc_req_Arr.push(sc_req_Obj);
		}
		return sc_req_Arr;
	}

	data.tasks = getTasks();

	function getTasks() {
		var taskArr = [];
		var task = new GlideRecord('sc_task');
		task.addEncodedQuery(query);
		task.query();
		while (task.next()) {
			var taskObj = {};
			$sp.getRecordDisplayValues(taskObj, task, 'number,short_description,state,assignment_group,assigned_to,sys_id, request_item');			
			taskArr.push(taskObj);
		}
		return taskArr;
	}

HTML Code:

<div class="row" ng-repeat="item in data.sc_reqitem">
  <div class="panel-group">
    <div class="panel panel-primary">
      <div class="panel-heading">{{item.cat_item}}</div>
      <table class="table" ng-show="data.tasks.length > 0">
        <thead>
          <tr>
            <th>${Number}</th>
            <th>${Short Description}</th>
            <th>${Assignemnt Group}</th>
            <th>${Assigned To}</th>
            <th>${State}</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="task in data.tasks | filter: request_item">
            <td>${task.number}</td>
            <td>${task.cat_item}</td>
            <td>${task.assignment_group}</td>
            <td>${task.assigned_to}</td>
            <td>${task.state}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Current Results

Database View:

So one of the Request Items should only have 1 Task where the other Request Item will show the other 4 tasks, think I am missing something.

Any suggestions would be appropriated,

Kind Regards

Ashley 

[Royal1]

same result, nthg changed  

[Ashley]

Good Morning,

I see what you mean now,

On the second ng-repeat, delete the '$' at the beginning of the <td> tags:

Change:

<td>${task.number}</td>
<td>${task.cat_item}</td>
<td>${task.assignment_group}</td>
<td>${task.assigned_to}</td>
<td>${task.state}</td>

To:

<td>{{task.number}}</td>
<td>{{task.short_description}}</td>
<td>{{task.assigned_to}}</td>
<td>{{task.state}}</td>

Kind Reagrds

Ashley

[Royal1]

Thank you very much its working now

need one more help, please tel me best wat to learn the widget editing and portal things 

[Ashley]

Glad its working now for you, so you need to learn HTML, CSS, Javascript and AngularJS to be able to use the widget editor.

W3Schools is a good place to start:

https://www.w3schools.com

ServiceNow User community ofc is a good place to get help with coding bugs.

To learn about the Widget Editor I recommend using Now Learning, lots of free courses from ServiceNow on there for all different subjects.

Here is the one for the Widget Editor and creating your first custom widget:

https://developer.servicenow.com/dev.do#!/learn/learning-plans/sandiego/servicenow_application_developer/app_store_learnv2_serviceportal_sandiego_creating_custom_widget_objectives

Its a lot to learn and take in at the beginning but don't lose hope, press on with it and I'm sure you will do well.

Kind Regards

Ashley

[Royal1]

now i am trying to add the same widget in the place marked in the screenshot, but no result, how can i configure the same in this page