Action Button Style Not Working - Please Help

Sam Jae · ‎09-25-2024

Hi,

I have an action button on my portal. Configuration is working as expected but styling issues are arising. See attachments on what it looks like now and what it is supposed to look like. First image is what it looks like now and second is what it needs to look lilke. Any help is appreciated. Thank you,

When I fix styling, then the configuration stops working. I have cloned the widget - See below, and here is my code.

Widget is called: Case Ticket Action

Bolded are the two lines I added

Server Script:

(function(data) {

var page_id = $sp.getParameter("id");

data.view_type = options.view_type;

data.options = options;

data.page_id = page_id;

data.project_task_id = "";

data.case_task_id = "";

data.caseFromProjectEntityHref = "";

data.showMarkAsCompleteButton = false;

data.showCaseTaskMarkAsCompleteButton = false;

data.showCaseAction = true;

data.callback_plugin_installed = pm.isActive("com.sn_omnichannel_callback");

var caserecord = new GlideRecord("sn_customerservice_case");

var case_sysid = $sp.getParameter("sys_id");

data.showActionWidget = false;

if (caserecord.isValid() && caserecord.get(case_sysid)) {

data.showActionWidget = hasAccessToCaseActions(caserecord);

}

data.hide_info_messages = options.hide_info_messages == 'true';

if (options.caseFromProjectEntityHref) {

// check for entity : if project or project task

var project_entity_id = $sp.getParameter("sys_id");

data.caseFromProjectEntityHref = options.caseFromProjectEntityHref + project_entity_id;

if (page_id == "project_task_detail") {

data.project_task_id = project_entity_id;

var task_record = new GlideRecord("customer_project_task");

task_record.get(data.project_task_id);

data.task_state = task_record.getValue("state");

if (data.task_state != '3' && data.task_state != '4' && data.task_state != '7' && task_record.assigned_to == gs.getUserID() && !task_record.rollup)

data.showMarkAsCompleteButton = true;

if (data.showMarkAsCompleteButton) {

data.markAsCompleteButtonClass = "btn btn-primary btn-question project-btn";

data.createCaseClass = "btn btn-default btn-question project-btn";

} else

data.createCaseClass = "btn btn-primary btn-question project-btn";

}

if (page_id == "csm_case_task_ticket") {

data.case_task_id = $sp.getParameter("sys_id");

var case_task_record = new GlideRecord("sn_customerservice_task");

case_task_record.get(data.case_task_id);

data.task_state = case_task_record.getValue("state");

if (data.task_state != '3' && case_task_record.assigned_to == gs.getUserID())

data.showCaseTaskMarkAsCompleteButton = true;

if (data.showCaseTaskMarkAsCompleteButton) {

data.caseTaskMarkAsCompleteButtonClass = "btn btn-primary btn-question project-btn";

}

data.confirmDeleteMessage = gs.getMessage("Are you sure that you want to close this case?<br />Once closed, this case cannot be reopened.");

data.rejectSolutionText = gs.getMessage("*What is the reason for rejecting this solution?");

if (input && input.action === 'update' && input.sys_id && input.table) {

data.hide_info_messages = input.hide_info_messages ? true : false;

var record = new GlideRecord(input.table);

if (record.isValid() && record.get(input.sys_id)) {

record.state = input.state;

var status;

if (hasAccessToCaseActions(record)) {

if (input.type == 'reject' && input.comments) {

record.comments = input.comments;

record.state =5; /* Set state to Under Review */

}

if (input.type == 'close') {

if (gs.hasRole('sn_customerservice.case_contributor_creator')) {

record.resolution_code = '27'; //Value of 'Solved by Contributor' choice in resolution code choices

record.close_notes = gs.getMessage("Closed by contributor : {0}", gs.getUserDisplayName());

} else {

record.resolution_code = '4'; //Value of 'Solved by Customer' choice in resolution code choices

record.close_notes = gs.getMessage("Closed by customer.");

}

record.notes_to_comments = true;

try {

if (input.table == 'sn_complaint_case') {

new global.StateFlow().processFlow(record, '9a8c1e160f160010b1f7f81417767e70', 'manual');

} else if (input.table == 'sn_onboarding_case') {

new global.StateFlow().processFlow(record, '1afe9720b7260010b1f7e74bee11a93c', 'manual');

} else {

new global.StateFlow().processFlow(record, 'd8069501c33231005f76b2c712d3aead', 'manual');

record.state =5; /* Set state to Under Review */

}

status = 'true';

} catch (exception) {

gs.error('Exception while closing case' + exception);

status = 'false';

}

} else if (input.type == 'accept' && input.table == 'sn_complaint_case') {

new global.StateFlow().processFlow(record, '7a62406f0f160010b1f7f81417767ed7', 'manual');

status = 'true';

} else if (input.type == 'accept' && input.table == 'sn_onboarding_case') {

new global.StateFlow().processFlow(record, '660d31dcb7e20010b1f7e74bee11a97d', 'manual');

status = 'true';

} else if (input.type == 'reject' && (input.table == 'sn_complaint_case' || input.table == 'sn_onboarding_case')) {

if (input.table == 'sn_complaint_case')

new global.StateFlow().processFlow(record, '59fcd2560f160010b1f7f81417767e3c', 'manual');

else

new global.StateFlow().processFlow(record, 'cc6fdb20b7260010b1f7e74bee11a96d', 'manual');

status = 'true';

} else {

status = record.update(); //TODO: FIXME: update returns sys_id instead boolean, why?

data.status = 'OK';

}

if (status == 'false') {

gs.addErrorMessage(gs.getMessage("Error in changing the status"));

} else if (input.state === '3') {

if (!input.redirect) {

showInfoMessage(gs.getMessage("This case has been closed"));

} else {

var assessmentSysId;

var gr;

var userID = gs.getUserID();

data.url = '';

gr = new GlideRecord("asmt_assessment_instance");

gr.addQuery("user", userID);

gr.addQuery("state", "ready");

gr.addQuery("trigger_id", record.sys_id);

gr.query();

if (gr.next()) {

assessmentSysId = gr.getValue("sys_id");

if (!gs.nil(assessmentSysId)) {

data.url = '?id=take_survey&instance_id=' + assessmentSysId;

}

if (input.type == 'close')

showInfoMessage(gs.getMessage("This case has been closed"));

else

showInfoMessage(gs.getMessage("You have accepted this solution"));

}

} else if (input.state === '10' || input.state === '21') {

showInfoMessage(gs.getMessage("You have rejected this solution"));

}

} else {

gs.addErrorMessage(gs.getMessage("Requested object not found {0} : {1}", [input.table, input.sys_id]));

}

} else if (input.action == "markTaskComplete") {

var result = new sn_csm_ppm.CSMProjectManagementUtil().markProjectTaskComplete(input.sys_id);

} else if (input.action == "markCaseTaskComplete") {

var taskGr = new GlideRecord("sn_customerservice_task");

taskGr.get(input.sys_id);

taskGr.state = '3';

taskGr.update();

}

var gr = $sp.getRecord();

if (gr) {

data.state = gr.getValue('state');

data.stateLabel = gr.getDisplayValue('state');

data.sys_updated_on = gr.sys_updated_on.toString();

data.label = gr.getLabel();

data.table = gr.getRecordClassName();

data.sys_id = gr.getUniqueValue();

if (data.table == 'customer_project' || data.table == 'customer_project_task' || data.table == 'sn_customerservice_task') {

data.showCaseAction = false;

data.showActionWidget = true;

}

var state = gr.getValue('state');

if (state == '18' && data.view_type == 'csm_standard_ticket')

showInfoMessage(gs.getMessage("This case requires additional information from you."));

}

function showInfoMessage(message) {

if (!data.hide_info_messages)

gs.addInfoMessage(message);

}

function hasAccessToCaseActions(caserecord) {

if (!gs.nil(caserecord) && caserecord.isValidRecord() && caserecord.canWrite() && GlideSecurityManager.get().hasRightsTo('record/' + caserecord.sys_class_name + '.state/write', caserecord)) {

if (!gs.hasRole("admin") && new global.CSMQueryRulesUtil().useQueryRules()) {

var userRoles = (gs.getUser().getRoles() + '').split(",");

//Array of roles to be excluded from user roles while checking access through query rules framework.

var userRolesToBeExcluded = options.userRolesToBeExcluded ? options.userRolesToBeExcluded.split(',') : ["sn_customerservice.case_viewer"];

var userRolesAfterExclusion = [];

for (var index = 0; index < userRoles.length; index++) {

var excludeUserRole = false;

for (var j = 0; j < userRolesToBeExcluded.length; j++) {

if (userRoles[index] == userRolesToBeExcluded[j]) {

excludeUserRole = true;

break;

}

if (!excludeUserRole)

userRolesAfterExclusion.push(userRoles[index]);

}

var filter = new sn_queryrules.QueryRuleGenerator().getEncodedQueryForRoles('sn_customerservice_case', userRolesAfterExclusion.join(","));

if (GlideFilter.checkRecord(caserecord, filter))

return true;

} else {

return true;

}

return false;

};

data.callback_rp = $sp.getWidget('widget-sc-cat-item-v2', {

sys_id: '956be09f77eb81104a07869b8d5a99d2',

show_less_description: false,

display_cart_on_right: false,

show_add_to_wishlist_button: false,

show_add_cart_button: false,

show_field_validation_messages: false

});

})(data);

amaradiswamy · ‎09-25-2024

Hi @Sam Jae

if configuration is working then I think server script is not needed.

can you please share the HTML & CSS to style the Action button to look like drop-down menu with options to Accept & reject

Sam Jae · ‎09-25-2024

CSS

CSS

.question {
    text-align: center;
    margin-top: 1em;
}
.dropdown-menu li {
    cursor: pointer;
}
.dropdown-menu-modal {
    z-index: 9000 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none;
}
.btn-primary {
    background-color: #0000FF;
    color: white;
    border-radius: 30px;
    border: none;
    padding: 6px 30px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
}
.caret {
    margin-left: 10px;
    font-size: 12px;
}

.b {
border: none;
}

.btn-default {
    color: #00396b;
    background-color: #ffffff;
    border-color: #eeeeee;
}

Sam Jae · ‎09-25-2024

HTML

<div>
<div class="dropdown" id="child-case-tabs" ng-if="c.data.view_type == 'csm_standard_ticket' && c.data.page_id != 'csm_case_task_ticket' && (c.data.state == '6' || c.data.state == '18' || c.data.state == '1' || c.data.state == '10' || c.data.state == '20' || c.data.state == '21') && data.showActionWidget">
<button type="button" class="btn btn-primary dropdown-toggle action-btn" data-toggle="dropdown" style="width : 100%">
${Actions}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-modal" id="actionList">
<li>
<a ng-if="(c.data.showCaseAction) && c.data.state == '6'" href="javascript&colon;void(0)" ng-click="$event.stopPropagation();c.action(data.table, data.sys_id, '3','accept')">${Accept Solution}</a>
</li>
<li>
<a ng-if="(c.data.showCaseAction) && c.data.state == '6'" href="javascript&colon;void(0)" ng-click="$event.stopPropagation();c.rejectSolution()">${Reject Solution}</a>
</li>
<li>
<a ng-if="(c.data.showCaseAction) && (data.state == '1' || data.state == '10' || data.state == '18' || data.state == '20' || data.state == '21')" href="javascript&colon;void(0)" ng-click="$event.stopPropagation();c.close()">${Close Case}</a>
</li>
<li ng-if="c.data.callback_plugin_installed">
<a id="requestCallback" ng-if="(c.data.showCaseAction) && (data.state == '1' || data.state == '10' || c.data.state == '6' || data.state == '18' || data.state == '20' || data.state == '21')" href="javascript&colon;void(0)" ng-click="c.launchCallbackModal($event)">${Request callback}</a>
</li>
</ul>
</div>

</div>
<div ng-if="c.data.page_id != 'csm_case_task_ticket' && c.data.view_type != 'csm_standard_ticket' && (c.data.state == '6' || c.data.state == '18' || c.data.state == '1' || c.data.state == '10' || c.data.state == '20' || c.data.state == '21' || data.caseFromProjectEntityHref != '') && data.showActionWidget" class="panel panel-primary b">
<div class="panel-heading">
<h2 class="panel-title">${Actions}</h2>

</div>
<div class="panel-body" >
<form ng-submit="$event.preventDefault()" class="form-horizontal" ng-if="c.data.page_id == 'project_task_detail' && c.data.showMarkAsCompleteButton">
<div class="question">
<button type="button" name="createCase" ng-class="c.data.markAsCompleteButtonClass" ng-click="c.markTaskComplete(c.data.project_task_id)">${Mark Complete}</button>
</div>
</form>
<form ng-submit="$event.preventDefault()" class="form-horizontal" ng-if="(c.data.showCaseAction) && c.data.state == '6'">
<div class="question">
<button type="button" name="accept" class="btn btn-primary btn-question" ng-click="c.action(data.table, data.sys_id, '3','accept')">${Accept Solution}</button>
</div>
<div class="question">
<button type="button" name="reject" class="btn btn-default btn-question" ng-click="c.rejectSolution()">${Reject Solution}</button>
</div>
</form>
<form ng-submit="$event.preventDefault()" class="form-horizontal" ng-if="(c.data.showCaseAction) && (data.state == '1' || data.state == '10' || data.state == '18' || data.state == '20' || data.state == '21')">
<div class="question">
<button type="button" name="close" class="btn btn-primary btn-question" ng-click="c.close()">${Close Case}</button>
</div>
</form>
<form ng-submit="$event.preventDefault()" class="form-horizontal" ng-if="data.caseFromProjectEntityHref != '' && data.page_id == 'project_detail'">
<div class="question">
<button type="button" name="createCase" class="btn btn-primary btn-question project-btn" ng-click="c.createCase()">${Create Case}</button>
</div>
</form>
<form ng-submit="$event.preventDefault()" class="form-horizontal" ng-if="data.caseFromProjectEntityHref != '' && data.page_id == 'project_task_detail'">
<div class="question">
<button type="button" name="createCase" ng-class="c.data.createCaseClass" ng-click="c.createCase()">${Create Case}</button>
</div>
</form>
</div>
</div>
<div ng-if="c.data.view_type != 'csm_standard_ticket' && c.data.page_id == 'csm_case_task_ticket' && c.data.showCaseTaskMarkAsCompleteButton" class="panel panel-primary b">
<div class="panel-heading">
<h2 class="panel-title h4">${Actions}</h2>

</div>
<div class="panel-body" >
<form ng-submit="$event.preventDefault()" class="form-horizontal">
<div class="question">
<button type="button" name="closeTask" ng-class="c.data.caseTaskMarkAsCompleteButtonClass" ng-click="c.markCaseTaskComplete(c.data.case_task_id)">${Mark Complete}</button>
</div>
</form>
</div>
</div>
<div class="dropdown" id="child-case-tabs" ng-if="c.data.view_type == 'csm_standard_ticket' && c.data.page_id == 'csm_case_task_ticket' && c.data.showCaseTaskMarkAsCompleteButton">
<button type="button" class="btn btn-primary dropdown-toggle action-btn" data-toggle="dropdown" style="width : 100%">
${Actions}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-modal" id="actionList">
<li>
<a ng-if="(c.data.showCaseTaskMarkAsCompleteButton)" href="javascript&colon;void(0)" ng-click="$event.stopPropagation();c.markCaseTaskComplete(c.data.case_task_id)">${Mark Complete}</a>
</li>
</ul>
</div>

amaradiswamy · ‎09-25-2024

<div>
<div class="dropdown" id="child-case-tabs" ng-if="c.data.view_type == 'csm_standard_ticket' && c.data.page_id != 'csm_case_task_ticket' && (c.data.state == '6' || c.data.state == '18' || c.data.state == '1' || c.data.state == '10' || c.data.state == '20' || c.data.state == '21') && data.showActionWidget">
<button type="button" class="btn btn-primary dropdown-toggle action-btn" data-toggle="dropdown" style="width : 100%">
            ${Actions}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-modal" id="actionList">
<li>
<a ng-if="(c.data.showCaseAction) && c.data.state == '6'" href="javascript&colon;void(0)" ng-click="$event.stopPropagation();c.action(data.table, data.sys_id, '3','accept')">${Accept Solution}</a>
</li>
<li>
<a ng-if="(c.data.showCaseAction) && c.data.state == '6'" href="javascript&colon;void(0)" ng-click="$event.stopPropagation();c.rejectSolution()">${Reject Solution}</a>
</li>
<li>
<a  ng-if="(c.data.showCaseAction) && (data.state == '1' || data.state == '10' || data.state == '18' || data.state == '20' || data.state == '21')" href="javascript&colon;void(0)" ng-click="$event.stopPropagation();c.close()">${Close Case}</a>
</li>
<li ng-if="c.data.callback_plugin_installed">
<a id="requestCallback" ng-if="(c.data.showCaseAction) && (data.state == '1' || data.state == '10' || c.data.state == '6' || data.state == '18' || data.state == '20' || data.state == '21')" href="javascript&colon;void(0)" ng-click="c.launchCallbackModal($event)">${Request callback}</a>
</li>
</ul>
</div>

</div>
<div ng-if="c.data.page_id != 'csm_case_task_ticket' && c.data.view_type != 'csm_standard_ticket' && (c.data.state == '6' || c.data.state == '18' || c.data.state == '1' || c.data.state == '10' || c.data.state == '20' || c.data.state == '21' || data.caseFromProjectEntityHref != '') && data.showActionWidget" class="panel panel-primary b">
<div class="panel-heading">
<h2 class="panel-title">${Actions}</h2>

 

  </div>
<div class="panel-body" >
<form ng-submit="$event.preventDefault()" class="form-horizontal" ng-if="c.data.page_id == 'project_task_detail' && c.data.showMarkAsCompleteButton">
<div class="question">
<button type="button" name="createCase" ng-class="c.data.markAsCompleteButtonClass" ng-click="c.markTaskComplete(c.data.project_task_id)">${Mark Complete}</button>
</div>
</form>
<form ng-submit="$event.preventDefault()" class="form-horizontal" ng-if="(c.data.showCaseAction) && c.data.state == '6'">
<div class="btn-group"> 
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   ${Action} &nbsp;     
  <span style="float:right"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
  </button>
 <ul class="dropdown-menu">
<button  class="btn btn-link dropdown-item" role="link" ng-click="c.action(data.table, data.sys_id, '3','accept')">${Accept Solution}</button>
<button t class="btn btn-link dropdown-item" role="link" ng-click="c.rejectSolution()">${Reject Solution}</button>
 </ul>  
</div>
</form>
<form ng-submit="$event.preventDefault()" class="form-horizontal" ng-if="(c.data.showCaseAction) && (data.state == '1' || data.state == '10' || data.state == '18' || data.state == '20' || data.state == '21')">
<div class="question">
<button type="button" name="close" class="btn btn-primary btn-question" ng-click="c.close()">${Close Case}</button>
</div>
</form>
<form ng-submit="$event.preventDefault()" class="form-horizontal" ng-if="data.caseFromProjectEntityHref != '' && data.page_id == 'project_detail'">
<div class="question">
<button type="button" name="createCase" class="btn btn-primary btn-question project-btn" ng-click="c.createCase()">${Create Case}</button>
</div>
</form>
<form ng-submit="$event.preventDefault()" class="form-horizontal" ng-if="data.caseFromProjectEntityHref != '' && data.page_id == 'project_task_detail'">
<div class="question">
<button type="button" name="createCase" ng-class="c.data.createCaseClass" ng-click="c.createCase()">${Create Case}</button>
</div>
</form>
</div>  
</div>
<div ng-if="c.data.view_type != 'csm_standard_ticket' && c.data.page_id == 'csm_case_task_ticket' && c.data.showCaseTaskMarkAsCompleteButton"  class="panel panel-primary b">
<div class="panel-heading">
<h2 class="panel-title h4">${Actions}</h2>

 

  </div>
<div class="panel-body" >
<form ng-submit="$event.preventDefault()" class="form-horizontal">
<div class="question">
<button type="button" name="closeTask" ng-class="c.data.caseTaskMarkAsCompleteButtonClass" ng-click="c.markCaseTaskComplete(c.data.case_task_id)">${Mark Complete}</button>
</div>
</form>
</div>
</div>
<div class="dropdown" id="child-case-tabs" ng-if="c.data.view_type == 'csm_standard_ticket' && c.data.page_id == 'csm_case_task_ticket' && c.data.showCaseTaskMarkAsCompleteButton">
<button type="button" class="btn btn-primary dropdown-toggle action-btn" data-toggle="dropdown" style="width : 100%">
            ${Actions}
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-modal" id="actionList">
<li>
<a ng-if="(c.data.showCaseTaskMarkAsCompleteButton)" href="javascript&colon;void(0)" ng-click="$event.stopPropagation();c.markCaseTaskComplete(c.data.case_task_id)">${Mark Complete}</a>
</li>
</ul>
</div>

Try with above HTML