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);

Sam Jae · ‎09-25-2024

Thank you so much