Create new button in actions on portal

Luke James
Tera Contributor

‎05-26-2024 12:09 AM

Hi all,

 

I have a requirement to have to create new option within the actions aspect on the csm portal. How do you add a new button here? And this button when clicked would then need to set the comments mandatory on the case form in the portal and then update the action status value after.

 

Anyone have any ideas?

 

Many thanks,

 

Luke

0 Helpfuls
  • 725 Views
3 REPLIES 3

Kieran Anson
Kilo Patron

‎05-26-2024 08:26 AM

Hi Luke,

By actions, is this when viewing a case record?

 

KieranAnson_0-1716737049223.png

 

If so, the widget is the standard ticket header which takes its configuration from the following menu

KieranAnson_1-1716737106076.png

 

KieranAnson_2-1716737130931.png

You can clone the OOB widget and add the additional actions you wish

0 Helpfuls

Luke James
Tera Contributor
In response to Kieran Anson

‎05-27-2024 03:22 AM

@Kieran Anson Thanks for your reply. Yes, that is exactly it. Have you much experience in adding a new button here? Having difficulty with the code for it. Just need a button in an awaiting info state called "Provide Info". This when clicked will make comments mandatory for the end user and update the case action status to "Needs attention" and the case state moves back to open state. 

 

Many Thanks, 

 

Luke

0 Helpfuls

Kieran Anson
Kilo Patron
In response to Luke James

‎05-27-2024 10:48 AM

Hi Luke,

For the widget you'd add the following HTML to show an option in the drop down list

 

<li>
        <a ng-if="(c.data.showCaseAction) && c.data.state == '18'" href="javascript&colon;void(0)" ng-click="c.postComment()">${Provide Info}</a>
      </li>

 

KieranAnson_0-1716820561026.png

 

client controller update:

//add to controller
c.postComment = function(){
		c.showModal('case-provide-info');
	}
//Amend the below in existing controller to include the additional 'else' statement
	if(type == 'close')
			templateUrl = 'case-close-template.html';
		else if(type == 'reject_solution')
			templateUrl = 'case-reject-solution-template.html';
		else
			templateUrl = type;

We then need to add into the client script to add a modal for the mandatory comment addition. The Case actions controller is helpful whereby it has a showModal function, we just need to create a new ng-template.

<div class="modal-header">
  <h2 id="modal-title" class="modal-title h4">${Further Details}
  <i class="fa fa-close pull-right" ng-click="c.cancel()" aria-label="Close modal" role="button" tabindex="0"></i>
  </h2>
</div>
<div class="modal-body">
  <div class="msg-text"><span ng-bind-html="c.commentText"/></div>
  <textarea maxlength="4000" aria-label="${Further details for case}" autofocus="true" placeholder="${Supplementary data}" id="commentText" class="form-control textarea" ng-model="c.furtherCommentText" rows="5"/>
  <div class="btn-container">
    <div class="pull-right">
      <button type="button" class="btn btn-default" data-ng-click="c.cancel()">${Cancel}</button>
      <button type="button" tabindex="-1" id="postComment" class="btn btn-primary" ng-disabled="!c.furtherCommentText"
              ng-click="c.action(c.data.table, c.data.sys_id, '10', 'update', c.furtherCommentText);c.cancel()">
        <span tabindex="0">${Add Comment}</span></button>
    </div>
  </div>
</div>
<style>
 .modal-body, .modal-header {
    padding: 20px;
  }
  .modal-header .modal-title {
    line-height: 21px;
    font-weight: normal;
  }
  .modal-body .btn-container{
    overflow: hidden;
    padding-top: 15px;
  }
  .modal-body .btn-container button:not(:last-of-type){
    margin-right: 10px;
  }
  .modal-body .msg-text{
    padding-bottom:10px;
  }
  .modal-body .textarea {
	resize: vertical !important;
  }
</style>

 

0 Helpfuls