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

You are amazing thank you so much, it has gotten closer but the drop down is now not visible. I can click on accept and it does close the case

Sam Jae · ‎09-25-2024

I replied once but don't see it on the thread anymore. Thank you so much! It got us closer but now the dropdown is not completely visible and there seems to be a box around it. Any idea how to fix? Your script helped so so much

amaradiswamy · ‎09-25-2024

Can you share me the screenshot of how the page looks like with the data. You can blur the actual text, I need to see the layout. It looks like we need to add z-index or margin to show those drop-down menus

Sam Jae · ‎09-25-2024

Here you go!! Let me know if this is not what you're looking for.

Sam Jae · ‎09-25-2024

Here is what it looks like when the button is clicked