I created a widget and mapped in standard ticket actions of sc_req_item. The Widget is showing.

We want show the options as it is available for incident but for me its showing side by side.
After we clicking on actions, it showing the close option. This is OOB functionality.
Cancel button will appear if RITM state is open.
Need configure for Reopen button also, it will appear if the state is closed_complete and will show only for 5days from the closed_complete date. and all these button comes inside action dropdown  below i paste my widgets and script code. 

Custom Widget details.

HTML Body:

<div ng-if="data.showRITMCancelButton">


<button type="button" id="actions-button" class="btn btn-default dropdown-toggle action-btn" data-toggle="dropdown" style="width : 100%" aria-haspopup="true" ng-init="setFocusOnActionButtons()">
${Actions}
<span class="fa fa-caret-down"></span>
</button>
<button type="button"
name="reject"
ng-click="c.uiAction('cancelRequestItem')">

${Cancel Request} </button>
<button type="button"
name="reject"
ng-click="c.uiAction('ReopenRequestItem')">
${Reopen Request}</button>
</div>

 

Server Side Script:

(function() {
    //initialize the Request Item Cancel button, by default hidden:
    data.showRITMCancelButton = false;
   
  // Get table & sys_id  
  data.table = input.table || $sp.getParameter("table");  
  data.sys_id = input.sys_id || $sp.getParameter("sys_id");  
 
  // Valid GlideRecord  
  var gr = new GlideRecord(data.table);  
  if (!gr.isValid())  
  return;  
 
  // Valid sys_id  
  if (!gr.get(data.sys_id))  
  return;  
 
   
        // Get current record values
        var ritm_state = gr.getValue('state')
        var ritm_stateLabel = gr.getDisplayValue('state');
        var ritm_active = gr.getValue('active');
      var number = gr.getDisplayValue('number');
        //Debug print messages:
        //gs.addInfoMessage(gs.getMessage("RITM "+number+" state: "+ritm_state+" // "+ritm_stateLabel));
               
   
            //Check each RITM and verify if they still in the Open state.
                    //If yes, increase the counter which will be used later to decide to hide the button
                    //RITM state: 1 = Open, the initial state
                    if(ritm_state == 1 && ritm_active == true && data.table == "sc_req_item"){
                            //gs.addInfoMessage(gs.getMessage("RITM is in Open state, RITM can be cancelled"));
                            data.showRITMCancelButton = true;
                    }
                    else{
                            //gs.addErrorMessage(gs.getMessage("RITM is in different than Open state "));
                            data.showRITMCancelButton = false;
                    }
               
    if (input && input.action) {  
  var action = input.action;  
 
            // If Request Item table        
            if (data.table == "sc_req_item") {  
 
                    if (action == 'cancelRequestItem') {  
                    // Cancel Request Item  
                    gr.setValue('state', 4);
                        gr.setValue('approval','withdrawn');
                        gr.setValue('stage','Request Cancelled');
                        //gr.comments="Requested Item cancelled by "+gs.getUserDisplayName()+ " via Service Portal";
                    gr.update();  
                        //  ${Cancel this Request Item}</button>
                        //gs.addInfoMessage("Requested Item "+gr.number+" was withdrawn.");
                    }  
                    // if (action =='ReopenRequestItem'){
                        //gr.setValue('state', 1);
                        //gr.setValue('approval','withdrawn');
                        //gr.setValue('stage','Request Cancelled');
                        //gr.comments="Requested Item Reopend by "+gs.getUserDisplayName()+ " via Service Portal";
                    //gr.update();  

                    // }
            }
    }

})(data);
 
Client Controller Script:
 
function($uibModal, $scope, spUtil) {
var c = this;
    $scope.$on('record.updated', function(name, data) {
spUtil.update($scope);
})
c.uiAction = function(action) {
c.data.action = action;
c.server.update().then(function() {
c.data.action = undefined;
})
}
}