Introduction

This article discusses how to show time remaining of the assignment as separate column in datalist inbox with JavaScript.

Important

This JavaScript code will only work on Joget DX8.

How To

Add a List Inbox Menu in Userview Builder. 


Figure 1: Add List Inbox Menu in Userview Builder

The logic to Show Remaining Time of an Assingment

The following script shows the remainig time of an assingment in a seperate column using JS.

<script>
$("document").ready(function(){
    // Function to calculate date difference in days
    function getDateDifference(targetDateString) {
        // Split the date string into components
        const parts = targetDateString.split(/[- :]/);
        
        // Create a Date object from the components (months are 0-based)
        const targetDate = new Date(parts[2], parts[1] - 1, parts[0], parts[3], parts[4], 0);
    
        // Get the current date
        const currentDate = new Date();
    
        // Calculate the difference in milliseconds
        let differenceMs = targetDate.getTime() - currentDate.getTime(); // Difference in milliseconds
    
        // Check if targetDate is before currentDate
        if (differenceMs < 0) {
            // Calculate the difference by swapping targetDate and currentDate
            differenceMs = currentDate.getTime() - targetDate.getTime();
        }

        // Convert milliseconds to seconds, minutes, hours, and days
        let differenceSeconds = Math.floor(differenceMs / 1000);
        let differenceMinutes = Math.floor(differenceSeconds / 60);
        let differenceHours = Math.floor(differenceMinutes / 60);
        const differenceDays = Math.floor(differenceHours / 24);

        // Calculate remaining hours, minutes, and seconds
        differenceHours %= 24;
        differenceMinutes %= 60;
        differenceSeconds %= 60;

        // Return an object with the differences
        return {
            days: differenceDays,
            hours: differenceHours,
            minutes: differenceMinutes,
            seconds: differenceSeconds
        };
    }

    // Function to get background color based on time remaining
    function getBackgroundColor(difference) {
        if (difference.days > 1 || (difference.days === 1 && (difference.hours > 0 || difference.minutes > 0 || difference.seconds > 0))) {
            return 'green'; // More than 24 hours
        } else if (difference.days === 1 || difference.hours >= 12) {
            return 'orange'; // More than 12 hours
        } else {
            return 'red'; // Less than 12 hours
        }
    }

    // Get all elements with class 'sla-tooltip'
    const slaTooltips = document.getElementsByClassName('sla-tooltip');

    // Iterate through each element to extract and display the due date value
    Array.from(slaTooltips).forEach(span => {
        const titleContent = span.getAttribute('title');

        // Create a temporary element to parse HTML
        const tempElement = document.createElement('div');
        tempElement.innerHTML = titleContent;

        // Find all <p> elements within the temporary element
        const paragraphs = tempElement.querySelectorAll('p');

        // Initialize variable to store the due date value
        let dueDateValue = '';

        // Loop through each <p> element to find the one containing 'Due Date'
        paragraphs.forEach(paragraph => {
            const strongElement = paragraph.querySelector('strong');
            if (strongElement && strongElement.textContent.trim() === 'Due Date') {
                const spanElement = paragraph.querySelector('span');
                if (spanElement) {
                    dueDateValue = spanElement.textContent.trim();

                    // Calculate difference in days, hours, minutes, and seconds
                    const difference = getDateDifference(dueDateValue);

                    // Find the parent <tr> element
                    const trElement = span.closest('tr');
                    if (trElement) {
                        // Create a <div> element with appropriate background color
                        const divElement = document.createElement('div');
                        divElement.textContent = `${difference.days} days, ${difference.hours} hours, ${difference.minutes} minutes, ${difference.seconds} seconds`;
                        divElement.style.backgroundColor = getBackgroundColor(difference);
                        divElement.style.padding = '5px';
                        divElement.style.borderRadius = '5px';
                        divElement.style.color = 'white';
                        divElement.style.display = 'inline-block';

                        // Clear the existing content of <td> elements with class 'column_body column_name body_column_1'
                        const tdElementsToUpdate = trElement.querySelectorAll('.column_body.column_name.body_column_1');
                        tdElementsToUpdate.forEach(td => {
                            td.innerHTML = ''; // Clear existing content
                            td.appendChild(divElement); // Append the <div> element with the difference
                        });
                    } else {
                        console.log('Could not find the parent <tr> element.');
                    }
                }
            }
        });

        if (!dueDateValue) {
            console.log('Due Date not found.');
        }
    });
});

</script>

Colour of the box will change based on the the time remaining to due time.

Example Result

Time remaining for assignment in runtime.

Figure 2: Time remaining in Runtime

Sample App

app_kb_dx8_basicApprovalApp.jwa


  • No labels