Question on my request widget

[Mani60]

Hello All,
I have a requirement related to my Request widget. In the OOB widget, currently three column fields are displayed. I want to add two more columns: Stage and Created.
Please guide me on what changes are required and which part of the widget code (HTML / Client Script / Server Script) needs to be modified to display these fields.

Thanks

[Ankur Bawiskar]

@Mani60 

that's coming from the OOTB Widget "My Requests" from HTML and Server side and it's not configured via property

You will have to clone that, make changes to it to accommodate new columns and show data

Then add this newly cloned widget to my_requests page

Note: I recommend not doing this requirement as it will add to your technical debt

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[Ankur Bawiskar]

@Mani60 

Hope you are doing good.

Did my reply answer your question?

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[AndersBGS]

Hi @Mani60 ,

I wouldn't recommending cloning the widget, as you then own it and don't get further update. Instead I would recommend you to opt in for the enhanced request experience, which will give you much more granularity according to what you would like. 

[vaishali231]

Hey @Mani60 

please clone the widgets and modify html and server code as following :
html

<script type="text/ng-template" id="myRequestsTemplate">

<div class="panels-container list-group">

  <div ng-if="c.data.request.req_list.length == 0 && !c.filterText" class="panel-body">
    You do not have any requests
  </div>

  <div ng-if="c.data.request.req_list.length == 0 && c.filterText" class="panel-body">
    Search did not match any requests
  </div>

  <div role="table" ng-if="c.data.request.req_list.length > 0" class="table">

    <div role="rowgroup" class="column-headers">
      <div role="row" class="list-group-item table-responsive">
        <span class="col-xs-4">Request</span>
        <span class="col-xs-2">Stage</span>
        <span class="col-xs-2">State</span>
        <span class="col-xs-2">Created</span>
        <span class="col-xs-2">Updated</span>
      </div>
    </div>

    <ul role="rowgroup" class="padder-l-none padder-r-none">

      <li role="row"
          class="list-group-item table-responsive"
          ng-repeat="item in c.data.request.req_list | limitTo:c.data.lastLimit track by item.sys_id">

        <div role="cell" class="col-xs-4 main-column">
          <a href="?id={{::item.url.id}}&table={{::item.url.table}}&sys_id={{::item.url.sys_id}}">
            {{::item.display_field}}
          </a>
        </div>

        <div role="cell" class="col-xs-2">
          {{::item.stage}}
        </div>

        <div role="cell" class="col-xs-2">
          {{::item.state}}
        </div>

        <div role="cell" class="col-xs-2">
          <sn-time-ago timestamp="::item.created_on"></sn-time-ago>
        </div>

        <div role="cell" class="col-xs-2">
          <sn-time-ago timestamp="::item.updated_on"></sn-time-ago>
        </div>

      </li>

    </ul>

  </div>

  <div class="col-sm-12" ng-if="c.data.hasMore">
    <button class="btn btn-default btn-show-more" ng-click="c.loadMore()">
      {{::data.messages.showMoreRequests}}
    </button>
  </div>

</div>
</script>

server 

(function() {

    var localInput = input; //to safeguard pullution of "input" via BR or other scripts
    var itemsObj;
    if (localInput && localInput.action === "remove_item") {
        var cartRecord = new sn_sc.CartJS('draft_items');
        cartRecord.remove(localInput.removeItemID);
        itemsObj = getDraftItems(localInput.prevLimit);
        data.draftItems = itemsObj.items;
        data.hasMoreDrafts = itemsObj.hasMore;
        if (!gs.nil(localInput.attachmentTable))
          new global.GlobalServiceCatalogUtil().deleteAttachments(localInput.attachmentTable, localInput.removeItemID);

        return;
    }

    if (localInput && localInput.action == "fetch_more_draft_items") {
        itemsObj = getDraftItems(localInput.prevLimit + 100);
        data.draftItems = itemsObj.items;
        data.hasMoreDrafts = itemsObj.hasMore;
        return;
    }

    var alsoRequest = false;

    var msg = data.messages = {};
    msg.myRequestsTitle = options.title ? gs.getMessage(options.title) : gs.getMessage('My Requests');
    msg.openRequests = gs.getMessage('Open requests');
    msg.closedRequests = gs.getMessage('Closed requests');
    msg.showMoreRequests = gs.getMessage('Show More Requests');
    msg.requestsTabLabel = gs.getMessage("Submitted requests");
    msg.draftsTabLabel = gs.getMessage("Drafts");
    data.filterMsg = gs.getMessage("Search open requests");
    data.draftFilterMsg = gs.getMessage("Search draft items");
    data.draftItemsMsg = gs.getMessage("Draft Items");
    data.deleteDraftItemMsg = gs.getMessage("Are you sure you want to delete the draft item?");
    data.dialogCancel = gs.getMessage('Cancel');
    data.dialogDelete = gs.getMessage('Delete draft');
    data.draftSearchText = $sp.getParameter("draftSearchText");
    var selectDraftTab = $sp.getParameter('selectDraftTab');
    //localInput will be undefined only on the first load.
    if (gs.nil(localInput)) {
        data.isRequestsTabActive = !data.draftSearchText && !selectDraftTab;
        data.isDraftsTabActive = !!data.draftSearchText || selectDraftTab;
    } else {
        data.isRequestsTabActive = true;
        data.isDraftsTabActive = false;
    }
    if (gs.nil(data.draftSearchText))
        data.draftSearchText = "";
    else
        data.draftSearchText = decodeURIComponent(data.draftSearchText);

    data.hide_draft_tab = (gs.getProperty('glide.sc.disable.save_as_draft') == 'true') || (gs.getProperty('glide.sc.enable.save_as_draft.portal.' + $sp.getPortalRecord().getValue("url_suffix")) != 'true');

    var recordTable = options.record_table || $sp.getParameter("table");
    var recordId = options.record_id || $sp.getParameter("sys_id");

    data.is_associated_ticket_tab = options.is_associated_ticket_tab;

    if (localInput && localInput.view === 'open')
        data.filterMsg = gs.getMessage("Search open requests");
    else if (localInput && localInput.view === 'close')
        data.filterMsg = gs.getMessage("Search closed requests");

    data.is_new_order = (($sp.getParameter("is_new_order") + '') === "true");
    data.requestSubmitMsg = gs.getMessage('Thank You. Your request has been submitted');
    var draftItemsObj = getDraftItems(100);
    data.draftItems = draftItemsObj.items;
    data.hasMoreDrafts = draftItemsObj.hasMore;

    function getDraftItems(limit) {
        var userID = gs.getUser().getID();
        var cart = new SPCart("draft_items", userID);

        if (!gs.nil(cart) && typeof cart.getItemsWithPagination === "function")
            itemsObj = cart.getItemsWithPagination('sys_updated_on', limit);
        else {
            gs.info("Drafts tab is hidden as we are either unable to fetch the draft cart or the SPCart script include is customized.");
            data.hide_draft_tab = true;
            itemsObj = {};
        }

        return itemsObj;
    }

    function getField(gr, name) {
        var f = {};
        var id = gr.getUniqueValue();
        gr = new GlideRecord(gr.getRecordClassName());
        gr.get(id);
        f.display_value = gr.getDisplayValue(name);
        f.value = gr.getValue(name);
        var ge = gr.getElement(name);
        if (ge) {
            var ed = ge.getED();
            if (ed)
                f.type = ed.getInternalType();
            f.label = ge.getLabel();
        }
        return f;
    }

    function getMyRequestSysIds() {
        var ids = {};
        var rq_filter = new GlideRecord('request_filter');
        rq_filter.addActiveQuery();
        if (rq_filter.isValidField('applies_to'))
            rq_filter.addQuery('applies_to', 1).addOrCondition('applies_to', 10);
        rq_filter.query();
        while (rq_filter.next()) {
            var tableName = rq_filter.table_name;
            if (rq_filter.isValidField('table'))
                tableName = rq_filter.table;
            var gr = new GlideRecord(tableName);
            if (!gr.isValid())
                continue;

            gr.addQuery(rq_filter.filter);
            gr.enableSecurityFeature('data_filter');
            gr.query();
            if (tableName == 'sc_request')
                alsoRequest = true;
            while (gr.next()) {
                var portalSettings = {};
                portalSettings.page = rq_filter.portal_page.nil() ? '' : rq_filter.portal_page.getDisplayValue() + '';
                portalSettings.primary_display = rq_filter.primary_display.nil() ? '' : rq_filter.primary_display + '';
                portalSettings.secondary_displays = rq_filter.secondary_display.nil() ? '' : rq_filter.secondary_display + '';
                ids[gr.sys_id + ''] = portalSettings;
            }
        }
        return ids;
    }

    // retrieve the request's
    var myRequestMap = getMyRequestSysIds();
    var taskIDs = Object.keys(myRequestMap);

    var gr = new GlideRecordSecure('task');

    if (!data.is_associated_ticket_tab) {
        if (localInput && localInput.view === 'open')
            gr.addActiveQuery();
        else if (localInput && localInput.view === 'close')
            gr.addQuery('active', 0);
        else
            gr.addActiveQuery();
    } else {
        if (recordTable != 'universal_request') {
            //Check if universal_request field is present and it is a universal request
            var taskRecord = new GlideRecordSecure('task');
            taskRecord.get(recordId);
            if (taskRecord.isValid() && !taskRecord.universal_request.nil()) {
                var qc = gr.addQuery('parent', taskRecord.universal_request);
                qc.addOrCondition('parent', 'IN', new sn_uni_req.UniversalRequestUtilsSNC().getChildRequests(taskRecord.universal_request));
            } else
                gr.addQuery('parent', recordId);
        } else {
            var qc = gr.addQuery('parent', recordId);
            qc.addOrCondition('parent', 'IN', new sn_uni_req.UniversalRequestUtilsSNC().getChildRequests(recordId));
        }
    }

    gr.orderByDesc('sys_updated_on');
    if (localInput && localInput.search_text) {
        var req = [];
        var task = new GlideRecordSecure('task');
        task.addQuery('123TEXTQUERY321', localInput.search_text);
        if (localInput && localInput.view === 'open')
            task.addQuery('active', 1);
        else if (localInput && localInput.view === 'close')
            task.addQuery('active', 0);
        else
            task.addQuery('active', 1);
        task.addQuery('sys_id', taskIDs);
        task.query();

        while (task.next())
            req.push(task.getUniqueValue());

        var ritmGR = new GlideRecord('sc_req_item');
        if (alsoRequest && ritmGR.isValid()) {
            if (localInput && localInput.view === 'open')
                ritmGR.addQuery('request.active', 1);
            else if (localInput && localInput.view === 'close')
                ritmGR.addQuery('request.active', 0);
            else
                ritmGR.addQuery('request.active', 1);
            ritmGR.addQuery('123TEXTQUERY321', localInput.search_text);
            ritmGR.addQuery('request.sys_id', taskIDs);
            ritmGR.query();
            while (ritmGR.next())
                req.push(ritmGR.getValue('request'));
        }
        gr.addQuery('sys_id', req);
    } else
        gr.addQuery('sys_id', taskIDs);

    gr.enableSecurityFeature('data_filter');
    gr.query();

    data.request = {};

    data.request.req_list = [];
    var recordIdx = 0;
    var limit = options.items_per_page ? options.items_per_page : 15;
    if (localInput && localInput.action == 'fetch_more')
        data.lastLimit = localInput.lastLimit + limit;
    else
        data.lastLimit = limit;

    data.hasMore = false;
   
while (recordIdx != data.lastLimit && gr.next()) {

    var portalSettings = myRequestMap[gr.getUniqueValue()] || {};
    var record = {};

    record.sys_id = gr.getValue('sys_id');

    if (gr.getRecordClassName() == 'sc_request') {

        var ritm = new GlideRecord('sc_req_item');
        ritm.addQuery('request', gr.getUniqueValue());
        ritm.query();

        if (!ritm.hasNext())
            continue;

        if (ritm.getRowCount() > 1)
            record.display_field = gs.getMessage('{0} requested items', ritm.getRowCount());
        else {
            ritm.next();
            record.display_field = ritm.cat_item.getDisplayValue() || ritm.getDisplayValue('short_description');
        }

        record.url = {
            id: portalSettings.page ? portalSettings.page : 'sc_request',
            table: 'sc_request',
            sys_id: record.sys_id
        };

    } else {

        record.display_field = portalSettings.primary_display
            ? getField(gr, portalSettings.primary_display).display_value
            : getField(gr, 'number').display_value;

        record.url = {
            id: portalSettings.page ? portalSettings.page : 'ticket',
            table: gr.getRecordClassName(),
            sys_id: record.sys_id
        };
    }

    record.display_number = getField(gr, 'number').display_value || '';

    if (portalSettings.secondary_displays) {
        record.secondary_displays = [];
        portalSettings.secondary_displays.split(',').forEach(function(f) {
            record.secondary_displays.push(getField(gr, f));
        });
    } else {
        record.secondary_displays = getField(gr, 'short_description');
    }

    record.state = gr.getDisplayValue('state');
    record.updated_on = gr.getValue('sys_updated_on');
    record.created_on = gr.getValue('sys_created_on');

    if (gr.isValidField('stage'))
        record.stage = gr.getDisplayValue('stage');
    else
        record.stage = '';

    if ((recordIdx !== 0) && (data.lastLimit - limit === recordIdx))
        record.highlight = true;

    data.request.req_list.push(record);
    recordIdx++;
}

if (gr.next())
    data.hasMore = true;


})();

*************************************************************************************************************
If this response helps, please mark it as Accept as Solution and Helpful.
Doing so helps others in the community and encourages me to keep contributing.

Regards
Vaishali Singh