Service Portal displaying Requested Item

Brendan Hallida
Kilo Guru

Hi all,

Trying to make it a bit easier for navigation between REQ/RITM for the end users via the Service Portal.

Our users seem to have some dificulty finding their RITM details when they head into a REQ.   so I would like to edit the requested Items widget that displays this info.

How it is by default:

find_real_file.png

How I would like it: (edited with Chromes Inspect feature)

find_real_file.png

my javascript is non existent (looking to work on it I swear), so not sure where I should be making the changes?   Below is the server script (default Requested Items widget).   I have created a copy of the widget.

// populate the 'data' variable provided by caller

(function() {

  var gr = new GlideRecord("sc_req_item"); // does ACL checking for us

  gr.addQuery("request", $sp.getParameter("sys_id"));

  options.secondary_fields = options.secondary_fields || "";

  options.secondary_fields = options.secondary_fields.split(",");

  if (options.order_direction == "asc")

  gr.orderBy(options.order_by);

  else

  gr.orderByDesc(options.order_by);

  if (options.maximum_entries > 0)

  gr.setLimit(options.maximum_entries);

  gr.query();

  data.actions = [];

  data.list = [];

  while (gr.next()) {

          if (!gr.canRead())

          continue;

         

  if (gr.getRowCount() == 1)

  data.conversation_title = gr.request.getDisplayValue() + " - " + gr.getValue("short_description");

  var record = {};

  record.sys_id = gr.sys_id.getDisplayValue();

  if (options.image_field) {

  record.image_field = gr.getDisplayValue(options.image_field);

  if (!record.image_field)

  record.image_field = "/noimage.pngx";

  }

  if (options.display_field)

  record.display_field = gr.getDisplayValue(options.display_field);

  record.secondary_fields = [];

  options.secondary_fields.forEach(function(f) {

  record.secondary_fields.push(getField(gr, f));

  });

  if (options.sp_page_dv)

  record.url = "?id="+options.sp_page_dv+"&table="+options.table+"&sys_id="+record.sys_id+"&view=sp";

  else

  record.url = "";

  record.stage = gr.getValue("stage");

  // get appropriate Stage choices for this requested item

  var cl = new GlideChoiceList();

  GlideController.putGlobal("answer", cl);

  GlideController.putGlobal("current", gr);

  sc_req_item_stageGetChoices();

  record.cl = JSON.parse(cl.toJSON());

  data.list.push(record);

  }

  if (gr.getRowCount() > 1)

  data.conversation_title = gr.request.getDisplayValue() + " - " + gr.getRowCount() + " items";

  function getField(gr, name) {

  var f = {};

  f.display_value = gr.getDisplayValue(name);

  f.value = gr.getValue(name);

  var ge = gr.getElement(name);

  f.type = ge.getED().getInternalType()

  f.label = ge.getLabel();

  return f;

  }

})();

22 REPLIES 22

Here is an updated version of the HTML template to make it display more correctly on closed items or items waiting an approval



the correction is in line 11 and 32



          <div ng-if="item.cl.length > 0" ng-show="!item.expand" class="requested-items-flex-container">


              <div class="flex-item" ng-click="toggle($event, item)"><img src="images/filter_hide16.gifx" /></div>


              <div class="flex-item">


                      <span ng-repeat="stage in item.cl">


                          <span ng-if="stage.value == item.stage && item.active=='true' && stage.value !='request_approved'">


                              <img src="/images/heisenberg_icons/stage_icons/icon-arrow-right.png" data-toggle="tooltip" data-placement="top" ng-attr-title="{{stage.label}}" />


                          </span>


                          <span ng-if="stage.value !='request_approved' && (indexByKeyValue(item.cl,'value',item.stage) > $index || item.active=='false')">


                              <img src="/images/sp-icon-check-circle.png" data-toggle="tooltip" data-placement="top" ng-attr-title="{{stage.label}}" />


                          </span>


                          <span ng-if="indexByKeyValue(item.cl,'value',item.stage) < $index && indexByKeyValue(item.cl,'value',item.stage) && item.active=='false'">


                              <img src="/images/sp-icon-empty-circle.png" data-toggle="tooltip" data-placement="top" ng-attr-title="{{stage.label}}" />


                          </span>


                      </span>


              </div>


          </div>




          <div ng-if="item.cl.length > 0" ng-show="item.expand" class="requested-items-flex-container">


              <div class="flex-item" ng-click="toggle($event, item)"><img src="images/filter_reveal16.gifx" /></div>


              <div class="flex-item">


                  <div ng-repeat="stage in item.cl">


                      <div ng-if="stage.value !='request_approved'">


                          <div ng-if="stage.value == item.stage && item.active=='true'" class="stage-on">


                              <img src="/images/heisenberg_icons/stage_icons/icon-arrow-right.png" />


                              {{stage.label}}


                          </div>


                          <div ng-if="indexByKeyValue(item.cl,'value',item.stage) > $index || item.active=='false'" class="stage-on">


                              <img src="/images/sp-icon-check-circle.png" />


                              {{stage.label}}


                          </div>


                          <div ng-if="indexByKeyValue(item.cl,'value',item.stage) < $index && indexByKeyValue(item.cl,'value',item.stage) && item.active=='false'" class="stage-off text-muted">


                              <img src="/images/sp-icon-empty-circle.png" />


                              {{stage.label}}


                          </div>


                      <div>


                  </div>


              </div>


          </div>


Hi Lars, Thank you for the solution!



I just followed this as my requirement is same.Unfortunately widget is failing due to error.2016-10-27_11-00-56.png


cbester
Tera Contributor

I ran in to the same thing. You need to go to the widget instance, and add this code to the Additional options, JSON format:



{


  "always_show": {


  "displayValue": false,


  "value": false


  },


  "image_field": {


  "value": null,


  "displayValue": ""


  },


  "secondary_fields": {


  "value": "number",


  "displayValue": "number"


  },


  "panel_body_height": {


  "value": null,


  "displayValue": ""


  },


  "rounded_images": {


  "displayValue": false,


  "value": false


  }


}




(This is copied from the original Requested Items widget)


renukesh
Tera Contributor

Hi cbester



Thanks for the guidance! however still issue with displaying all the states as it is showing only current and previous states not the future stages. Can you please help me with the entire code just to check what i am missing.




SF_sp.JPG


I fixed this by changing the condition on line 32 to:


<div ng-if="indexByKeyValue(item.cl,'value',item.stage) < $index && indexByKeyValue(item.cl,'value',item.stage) && item.active=='true'" class="stage-off text-muted">



Specifically, item.active=='false', was returning false so I changed it to item.active=='true'