1. Overview
This article shows how to customize a Joget inbox or datalist using JavaScript. The script moves row action columns, localizes filter labels and buttons, adds clear icons to text filters, and formats status cells with CSS-friendly labels.
2. How It Works
- Move action columns to the first position for easier access.
- Update filter placeholders using Joget hash variables.
- Rename inbox action links such as approve/reject or resubmission.
- Add clear buttons beside text filters.
- Convert status text into styled HTML labels.
- Prevent browser context-menu actions where the UI requires a locked-down experience.
3. Where to Use in Joget
- Userview: Inbox menu or datalist menu custom JavaScript.
- Datalist Builder: list UI customization for filters and row actions.
- Workflow Inbox: approval list screens that need clearer actions and translated labels.
4. Full Code
<script>
$(document).ready(function () {
//$('.row_action:odd').addClass('sticky-important');
//$('.row_action:even').addClass('sticky-important-first');
$('.row_action,.column_inboxAction ').each(function () {
$(this).insertBefore($(this).parent().children().eq(0));
});
$("input[name$='-fn_c_request_id']").attr("placeholder", "#beanshell.locale_messages[key=id]#");
$("input[name$='-fn_c_request_creator']").attr("placeholder", "#beanshell.locale_messages[key=applicant]#");
$("input[name$='-fn_requester_name']").attr("placeholder", "#beanshell.locale_messages[key=applicant]#");
$("input[name$='assignmentComplete']").attr("value", "#beanshell.locale_messages[key=submit]#");
$("input[name$='-fn_id']").attr("placeholder", "#beanshell.locale_messages[key=id]#");
$("input[name$='-fn_request_comment']").attr("placeholder", "#beanshell.locale_messages[key=request_comment]#");
$("select[name$='-fn_company'] option.label").text("#beanshell.locale_messages[key=company]#");
$('select[name$=-fn_business_unit] option.label').text("#beanshell.locale_messages[key=business_unit]#");
$('select[name$=-fn_target_unit] option.label').text("#beanshell.locale_messages[key=target_unit]#");
$('select[name$=-fn_request_status] option.label').text("#beanshell.locale_messages[key=request_status]#");
$('select[name$=-fn_request_type] option.label').text("#beanshell.locale_messages[key=request_type]#");
$('select[name$=-fn_request_department] option.label').text("#beanshell.locale_messages[key=request_department]#");
$('select[name$=fn_department_approver] option.label').text("#beanshell.locale_messages[key=department_approver]#");
$('select[name$=fn_reviewer_user] option.label').text("#beanshell.locale_messages[key=reviewer_user_name]#");
$('select[name$=-fn_next_approver] option.label').text("#beanshell.locale_messages[key=approver_name]#");
$('input[name$=-fn_completed_date].from').closest('.filter-cell').find('.dateRangeLabel').text('#beanshell.locale_messages[key=completed_date]#');
$('input[name$=-fn_target_date].from').closest('.filter-cell').find('.dateRangeLabel').text('#beanshell.locale_messages[key=target_date]#');
$('input[name$=-fn_created_date].from').closest('.filter-cell').find('.dateRangeLabel').text('#beanshell.locale_messages[key=created_date]#');
$('input[name$=-fn_dateCreated].from').closest('.filter-cell').find('.dateRangeLabel').text('#beanshell.locale_messages[key=created_date]#');
// $('input.datepicker.from.hasDatepicker').attr('placeholder',"#beanshell.locale_messages[key=from]#");
// $('input.datepicker.to.hasDatepicker').attr('placeholder',"#beanshell.locale_messages[key=to]#");
$("input[name$='customSaveAsDraft']").attr("value", "#beanshell.locale_messages[key=save_as_draft]#");
$("input[value=Show]").val("#beanshell.locale_messages[key=show]#");
$('button.CRUD_New').text("#beanshell.locale_messages[key=new]#");
$('button.CRUD_DELETE').text("#beanshell.locale_messages[key=delete]#");
$('input#submit').val("#beanshell.locale_messages[key=save]#");
$('button#cancel').text("#beanshell.locale_messages[key=cancel]#");
$('form#request_approval_form input#assignmentComplete').val("#beanshell.locale_messages[key=decision]#");
$('table tbody td.column_inboxAction a').each(function () {
if ($(this).text() != 'Resubmission') {
$(this).text("#beanshell.locale_messages[key=approve_reject]#")
} else if ($(this).text() == 'Resubmission') {
$(this).text("#beanshell.locale_messages[key=resubmission]#")
}
});
$('.filter-cell').each(function () {
if ($(this).find('input[type=text]').length > 0 && !$(this).find('input[type=text]').hasClass('datepicker')) {
$(this).append(`
<span class="clear" style="
position: absolute;
top: 6px;
width: 0;
height: 0;
right: 23px;
cursor: pointer;
">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="64px" height="64px" viewBox="0 0 32 32" version="1.1" fill="#000000" style="
width: 13px;
height: auto;
">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title>cross-circle</title>
<desc>Created with Sketch Beta.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-570.000000, -1089.000000)" fill="#878787">
<path d="M591.657,1109.24 C592.048,1109.63 592.048,1110.27 591.657,1110.66 C591.267,1111.05 590.633,1111.05 590.242,1110.66 L586.006,1106.42 L581.74,1110.69 C581.346,1111.08 580.708,1111.08 580.314,1110.69 C579.921,1110.29 579.921,1109.65 580.314,1109.26 L584.58,1104.99 L580.344,1100.76 C579.953,1100.37 579.953,1099.73 580.344,1099.34 C580.733,1098.95 581.367,1098.95 581.758,1099.34 L585.994,1103.58 L590.292,1099.28 C590.686,1098.89 591.323,1098.89 591.717,1099.28 C592.11,1099.68 592.11,1100.31 591.717,1100.71 L587.42,1105.01 L591.657,1109.24 L591.657,1109.24 Z M586,1089 C577.163,1089 570,1096.16 570,1105 C570,1113.84 577.163,1121 586,1121 C594.837,1121 602,1113.84 602,1105 C602,1096.16 594.837,1089 586,1089 L586,1089 Z" id="cross-circle" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>
</span>
`);
}
});
$('.clear').each(function () {
$(this).click(function () {
$(this).siblings('input').val('');
$('input[type=submit]').trigger('click');
});
});
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
});
let master_object = {
'Pending External Posting': '#beanshell.locale_messages[key=pending_external_posting]#',
'Pending with Additional Approver': '#beanshell.locale_messages[key=pending_with_additional_approver]#',
'Pending with Department Reviewer': '#beanshell.locale_messages[key=pending_with_department_supervisor]#',
'Pending with Reviewer': '#beanshell.locale_messages[key=pending_with_reviewer_user]#',
'Pending with Final Approver': '#beanshell.locale_messages[key=pending_with_accounting_approver]#',
'Reviewer Rejected': '#beanshell.locale_messages[key=reviewer_user_rejected]#',
'Additional Approver Rejected': '#beanshell.locale_messages[key=additional_approver_rejected]#',
'External Posting Errors Rejected': '#beanshell.locale_messages[key=external_posting_errors_rejected]#',
'Department Reviewer Rejected': '#beanshell.locale_messages[key=department_supervisor_rejected]#',
'Final Approver Rejected': '#beanshell.locale_messages[key=accounting_approver_rejected]#',
'Approved': '#beanshell.locale_messages[key=approved]#',
'Withdrawn': '#beanshell.locale_messages[key=withdrawn]#',
'Re-Apply': '#beanshell.locale_messages[key=re_apply]#',
'Draft': '#beanshell.locale_messages[key=draft]#'
};
$("table tbody td.column_request_status").each(function () {
let lowerCase_cellText = $(this).text().trim();
let translated_text = master_object[lowerCase_cellText];
var cellText = lowerCase_cellText.toLowerCase(); // Convert text to lowercase for case-insensitive comparison
if (cellText.indexOf("pending") !== -1) {
$(this).html(`<p class='pending status-css'>${translated_text}</p>`);
} else if (cellText.indexOf("rejected") !== -1) {
$(this).html(`<p class='rejected status-css'>${translated_text}</p>`);
} else if (cellText.indexOf("approved") !== -1) {
$(this).html(`<p class='approved status-css'>${translated_text}</p>`);
} else if (cellText.indexOf("draft") !== -1) {
$(this).html(`<p class='draft status-css'>${translated_text}</p>`);
} else if (cellText.indexOf("withdrawn") !== -1) {
$(this).html(`<p class='withdrawn status-css'>${translated_text}</p>`);
}
});
});
</script>
5. Example Use Cases
- Moving inbox actions to the left side of the list.
- Translating filter placeholders dynamically.
- Styling status values such as pending, approved, rejected, withdrawn, and draft.
- Adding clear-filter controls to improve usability.
6. Customization Tips
- Replace field suffixes with your own datalist filter names.
- Add your own status-to-label mapping in the master_object object.
- Keep CSS classes such as pending, pproved, and ejected aligned with your theme.
- Test the script after datalist column changes because generated column class names can change.
7. Key Benefits
- Makes inbox actions easier to find.
- Improves multilingual list usability.
- Reduces clicks when clearing filters.
- Gives workflow statuses a more readable visual style.
8. Security Note
Client-side UI customization should not replace server-side permissions. Use Joget permissions to control who can see or execute inbox actions.
9. Final Thoughts
Small inbox improvements can make repeated approval work much smoother. Keep the JavaScript generic, use locale messages for labels, and avoid hardcoding organization-specific field names in public examples.
