Help Updating My Approvals Widget

[Wendy Peterson]

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>

<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 

[Brian Lancaster]

You probably need to modify the CSS section to change the colors of the buttons.

[Community Alums]

Hi @Wendy Peterson ,

I tried your problem it works for me. Please refer below code

HTML : 

<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 appButton" style="border-width:1px;" ng-click="approve(approval.sys_id, approval.requireEsigApproval);">${Approve}</button>

In class I added one more class - appButton and I added the CSS for that 

.appButton{
	background-color : green;
}

Result : 

You can add this two changes it will work for you. 

Please reach me out if you need anything. 

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

Thanks and Regards 

Sarthak

[Wendy Peterson]

That worked then how would I update the Red Button for Reject. I added a appButtonr which I gave it that extra character and then added it in the CSS but that didn't work. I wasn't sure if that was an actual thing or if I could just rename. The one you did worked for Green. Thanks so much

[Community Alums · Accepted solution]

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 : 

Please reach me out if you need anything. 

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

Thanks and Regards 

Sarthak