Help Updating My Approvals Widget

Wendy Peterson
Giga Guru

I need help updating the My Approvals Widget which I have cloned. I can't figure out what is making my approval buttons the background color. I want them to be Green for Approve and Red for Reject. Nothing I update in the HTML Posted below updates them. Can you let me know what can I do to update them to different colors. I thought if I updated these 2 lines to match the branding editor fields it would update them but it did not

<button ng-if="approval.state == 'approved'" class="btn btn-success btn-block">{{approval.stateLabel}}</button>
<button ng-if="approval.state == 'rejected'" class="btn btn-danger btn-block">{{approval.stateLabel}}</button>

 

2024-04-16_11-36-52.jpg

 

<div class="panel panel-{{::options.color}} b" ng-if="data.showApprovals">
  <div class="panel-heading">
    <h3 class="h4 panel-title">
      <fa ng-if="::options.glyph.length" name="{{::options.glyph}}" class="m-r-sm" ></fa>
      ${My Approvals}
      <label ng-if="data.pagination.showPagination && (data.pagination.from <= data.pagination.to)" class="pull-right text-info">
        <span ng-if="data.pagination.from != data.pagination.to">
          {{data.pagination.from}} ${to_lower}
        </span>
        {{data.pagination.to}} ${of} {{data.pagination.of}}
      </label>
    </h3>
  </div>
  <div class="panel-body" ng-class="{'padder-b-none': data.approvals.length != 0}">
    <div ng-if="data.approvals.length == 0 && data.pagination.of == 0" tabindex="-1" id="no-approval">
      ${You have no pending approvals}
    </div>
    <div ng-if="data.approvals.length == 0 && data.pagination.of != 0">
      ${Loading approvals...}
    </div>
    <div ng-repeat="approval in data.approvals" class="sp-approval m-b-xl">
      <div class="row">
        <div ng-class="contentColClass">
          <div ng-if="approval.task.number || approval.task.short_description">
            <a ng-href="?id=approval&table=sysapproval_approver&sys_id={{::approval.sys_id}}" id="approval_task_{{::approval.sys_id}}"title="{{data.ViewApprovalPageMsg}}">
              <span ng-if="approval.task.number">{{::approval.task.number}}</span>
              <span ng-if="approval.task.number && approval.task.short_description"> - </span>
              <span ng-if="approval.task.short_description">{{::approval.task.short_description}}</span>
            </a>
          </div>
          <div ng-if="approval.task.opened_by"><label>${Requestor}</label> {{::approval.task.opened_by}}</div>
          <div ng-if="approval.task.approver"><label>${Approver}</label> {{::approval.task.approver}}</div>
          <div ng-if="approval.task.start_date"><label>${Start}</label> {{::approval.task.start_date}}</div>
          <div ng-if="approval.task.end_date"><label>${End}</label> {{::approval.task.end_date}}</div>
          <div ng-if="approval.task.quantity"><label>${Quantity}</label> {{::approval.task.quantity}}</div>
          <div ng-if="approval.task.price"><label>${Price}</label> {{::approval.task.price}}
            <span ng-if="approval.task.recurring_price"><label>${Recurring price}</label> {{::approval.task.recurring_price}} {{::approval.task.recurring_frequency}}</span>
            <label ng-if="approval.task.quantity && approval.task.quantity > 1"> ${each}</label>
          </div>
          <div ng-if="approval.items.length == 1">
            <div ng-repeat="item in approval.items">
             <sp-widget ng-if="item.variableSummarizerWidget" widget="item.variableSummarizerWidget"></sp-widget> 
            </div>
          </div>
          <sp-widget ng-if="approval.variableSummarizerWidget" widget="approval.variableSummarizerWidget"></sp-widget>
          
          </div>
        <div ng-if="!options.portal" class="col-sm-4">
          <button name="approve" id="approve_button_{{::approval.sys_id}}" aria-labelledby=" approve_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" ng-if="approval.state == 'requested'" class="btn btn-primary btn-block" style="border-width:1px;" ng-click="approve(approval.sys_id, approval.requireEsigApproval);">${Approve}</button>
          <button name="reject" id="reject_button_{{::approval.sys_id}}" aria-labelledby=" reject_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" ng-if="approval.state == 'requested'" class="btn btn-default btn-block" ng-click="reject(approval.sys_id, approval.requireEsigApproval);">${Reject}</button>
          <button ng-if="approval.state == 'approved'" class="btn btn-success btn-block">{{approval.stateLabel}}</button>
          <button ng-if="approval.state == 'rejected'" class="btn btn-danger btn-block">{{approval.stateLabel}}</button>
          <button ng-if="approval.state != 'requested'" class="btn btn-default btn-block" style="visibility:hidden">{{approval.stateLabel}}</button>
        </div>
        <div ng-if="options.portal && approval.state == 'requested'" class="col-xs-6">
          <button name="reject" ng-disabled="approvalsInProgressFor.indexOf(approval.sys_id) > -1" id="reject_button_{{::approval.sys_id}}" aria-labelledby=" reject_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" class="btn btn-default btn-block" ng-click="reject(approval.sys_id, approval.requireEsigApproval);">${Reject}</button>
        </div>
        <div ng-if="options.portal && approval.state == 'requested'" class="col-xs-6">
          <button name="approve" ng-disabled="approvalsInProgressFor.indexOf(approval.sys_id) > -1" id="approve_button_{{::approval.sys_id}}" aria-labelledby=" approve_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" class="btn btn-primary btn-block" ng-click="approve(approval.sys_id, approval.requireEsigApproval);">${Approve}</button>
        </div>
        <div ng-if="options.portal && approval.state != 'requested'" class="col-xs-12">
          <button ng-if="approval.state == 'approved'" class="btn btn-success btn-block">{{approval.stateLabel}}</button>
          <button ng-if="approval.state == 'rejected'" class="btn btn-danger btn-block">{{approval.stateLabel}}</button>
        </div>
      </div>
    </div> <!-- body -->
       
  </div> 
  <div class="panel-footer clearfix" ng-if="data.pagination.showPagination">
    <a id="previous-btn" href="javascript&colon;void(0)" ng-click="previousPage()" ng-show="data.pagination.hasPrevious" class="pull-left btn btn-sm btn-default" aria-label="${Pagination button Previous}">
      <i class="fa fa-arrow-left m-r-sm" aria-hidden="true"></i>${Previous}</a>
    <a id="next_btn" href="javascript&colon;void(0)" ng-click="nextPage()" ng-show="data.pagination.hasNext" class="pull-right btn btn-sm btn-default " aria-label="${Pagination button Next}">
      ${Next}<i class="fa fa-arrow-right m-r-sm col-md-offset-3" aria-hidden="true"></i></a>
</div>
</div>

 

 I 

1 ACCEPTED SOLUTION

Community Alums
Not applicable

Hi @Wendy Peterson ,

I tried your problem for reject button as well please refer below code 

HTML 

<button name="reject" id="reject_button_{{::approval.sys_id}}" aria-labelledby=" reject_button_{{::approval.sys_id}} approval_task_{{::approval.sys_id}}" ng-if="approval.state == 'requested'" class="btn btn-default btn-block rejButton" ng-click="reject(approval.sys_id, approval.requireEsigApproval);">${Reject}</button>

I added rejButton  in the class 

CSS : 

.rejButton{
	background-color : red;
}

 

Result : 

SarthakKashya2_0-1713289406085.png

 

Please reach me out if you need anything. 

 

Please mark my answer correct and helpful if this works for you

 

Thanks and Regards 

Sarthak

 

View solution in original post

6 REPLIES 6

Thank you SOOOOOOO much . I suck at this stuff.

This is the other button for Reject still Navy2024-04-16_12-34-09.jpg