Adding functionality on ticket page to downgrade or upgrade the incident priority.

I have used ng-options to show incident priority field value, but instead of directly updating the priority field value, I have updated the impact and urgency first and based on that priority get changed automatically.

OOTB, based on impact and urgency priority get changed so I followed the same behavior.

Technical Details :

• Create Widget.
• Include Angular ng-template on your widget.
• Add your widget on ticket page ( you can change it based on your need ).

widget Details:

HTML:

<div class="panel b" ng-if="data.showWidget">
  <div class="panel-heading bg-primary">Downgrade Priority</div>
  <div class="panel-body">
    <button type="button" class="btn btn-success btn-block" ng-click="c.openModal()" ng-if="data.show">Priority</button>
    <div ng-if="data.response1" class="alert alert-info">{{::data.response1}}</div>
  </div>
</div>

Client Controller:

function ($uibModal, $scope, spUtil) {
    var c = this;

    $scope.$on('record.updated', function(name, data) {
        if(c.data.action == 'down'){
            c.data.action = undefined;
        }
        spUtil.update($scope);
    });

    c.downP = function(action) {
        c.data.action = action;
        c.server.update().then(function() {
            c.data.action = undefined;
            spUtil.addInfoMessage("Priority has been Changed", 3000);
            c.modalInstance.close();
        }); 
    };
    c.openModal = function() {
        c.modalInstance = $uibModal.open({
            templateUrl: 'modalTemplate',
            scope: $scope
        });
    };
    c.closeModal = function() {
        c.modalInstance.close();
    };
}

Server Script:

(function() {

    // Get table & sys_id
    data.table = input.table || $sp.getParameter("table");
    data.sys_id = input.sys_id || $sp.getParameter("sys_id");
    var arr = [];
    var grc = new GlideRecord('sys_choice');
    grc.addEncodedQuery('element=priority^name=task');
    grc.query();
    while (grc.next()){
        var obj={};
        obj.value=grc.getValue('value');
        obj.text=grc.getValue('label');
        arr.push(obj);
    }
    data.choices = arr;
    // Valid GlideRecord
    var gr = new GlideRecord (data.table);
    if (!gr.isValid())
        return;

    // Valid sys_id
    if (!gr.get(data.sys_id))
        return;

    //Button Visibility
    if (data.table == 'incident' && gr.active == true && (gr.incident_state != 6 || gr.incident_state != 7) && (gr.caller_id == gs.getUserID() || gr.opened_by == gs.getUserID())) {
        data.showWidget = true;
        data.show = true;

    } else {
        data.showWidget = false;
        data.show = false;
    }

    //input
    if (input && input.action === 'down') {

        // If Incident table
        if (data.table == 'incident') {
            var grdl = new GlideRecord('dl_u_priority');
            grdl.addQuery('priority',input.downP);
            grdl.query();
            if(grdl.next()){
                gr.setValue('impact',grdl.impact);
                gr.setValue('urgency',grdl.urgency);
                gr.update();
            }
        }
    }
})();

Angular ng-template

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">Downgrade Priority</h4>
  </div>
  <div class="panel-body wrapper-xl">
    <form name="modalTemplate" ng-submit="c.downP('down')">
      <div>
        <select
                ng-model="data.downP"
                ng-required="true"
                ng-options="obj.value as obj.text for obj in c.data.choices"
                class="form-control"
                id="downP"

                >
          <option value="">-- None --</option>
        </select>
        <br/>
      </div>

      <input class="btn btn-primary" type="submit" />
    </form>
  </div>
</div>

Quick Demo:

Note: some of existing blogs related to create popup on portal had helped me in past. So you can check them as well .