Page History

...

Open the App Center and log in as Administrator.
Click Design New App > Create New App.
Type in the App ID and App Name, and click Save.

Figure 5: Create a Sample App
Under Form Builder, Click Add New.

Figure 6: Add a New Form
Type in the Form ID, Form Name, and Table Name, and click Save.

Figure 7: Configure the Form Details
Drag a Text Field into the Form Builder, and use "name" as its ID.

Figure 8: Configure a Text Field
Drag a Date Picker into the Form Builder and label it as Due Date.

Figure 9: Configure a Date Picker
Under Properties for Due Date, select Date and Time stored in UTC for Field Type.

Figure 10: Configure the Field Type for the Date Picker
Click Apply Change > Save > Generate App.
Click the boxes next to GENERATE CRUD and GENERATE PROCESS - ASSIGNMENT PROCESS > Generate.

Figure 11: Generate CRUD and Process
Click Close.
Under List Builder, click the List - Sample Feedback Form from the Quick Navigator.

Figure 12: Open the List - Sample Feedback Form
Drag a new Name column from the palette into the List Builder and position it to the right of the Due Date column.

Figure 13: Add a New Column to the List Builder
Label the newly added Name column as Due In.

Figure 14: Label the New Column
Click the Due Date column.

Figure 15: Due Date Column
Under Properties, select JavaScript Condition from Formatter, and click Add.
Image RemovedImage Added
Figure 16: Add a New JavaScript Condition
Under Conditions, Type 1==1 inside Rule, and click the PROPERTY ASSISTANT icon at Formatting.

Figure 17: Configure the JavaScript Condition
Select the #date.dd-MM-yyyy HH:mm:ss# hash variable under Hash Variable and click Insert.

Figure 18: Insert the Hash Variable into the JavaScript Condition
Click Apply Change > Save.
Under UI Builder, click the UI from the Quick Navigator.
Image RemovedImage Added
Figure 19: Click the UI from the Quick Navigator
Drag a List Inbox into the sidebar inside UI Builder.

Figure 20: Add a List Inbox to the Sidebar
Use sampleFeedbackForm_inbox as the Menu ID for the List Inbox and select the List - Sample Feedback Form for List.

Figure 21: Configure the List Inbox

Under UI, copy the following JavaScript code and paste it into the List View Custom Header inside the UI of List Inbox.

Code Block

language	js
title	List View Custom Header

<script>

$(document).ready(function () {
    // Add custom class to the Due Date column
    $("table tbody tr").each(function () {
        // Find the right column: adjust the index (e.g., td:eq(1)) to match Due Date column
        const td = $(this).find("td:eq(1)"); // Change index as needed
        const text = td.text().trim();

        if (text.match(/^\d{4}-\d{2}-\d{2}/)) {
            td.addClass("due-date-column");
            td.attr("data-due-date", text);
        }
    });

    // Function to calculate the difference between current date and target date
    function getDateDifference(targetDateString) {
        const parts = targetDateString.split(/[- :]/);
        const targetDate = new Date(parts[0], parts[1] - 1, parts[2], parts[3] || 0, parts[4] || 0, 0);
        const currentDate = new Date();
        let differenceMs = targetDate - currentDate;
        let isPast = false;

        if (differenceMs < 0) {
            differenceMs = Math.abs(differenceMs);
            isPast = true;
        }

        let differenceSeconds = Math.floor(differenceMs / 1000);
        let differenceMinutes = Math.floor(differenceSeconds / 60);
        let differenceHours = Math.floor(differenceMinutes / 60);
        const differenceDays = Math.floor(differenceHours / 24);

        differenceHours %= 24;
        differenceMinutes %= 60;
        differenceSeconds %= 60;

        return {
            days: differenceDays,
            hours: differenceHours,
            minutes: differenceMinutes,
            seconds: differenceSeconds,
            isPast: isPast
        };
    }

    function getBackgroundColor(difference) {
        if (difference.isPast) {
            return 'red';
        } else if (difference.days > 1 || (difference.days === 1 && (difference.hours > 0 || difference.minutes > 0))) {
            return 'green';
        } else if (difference.hours >= 12) {
            return 'orange';
        } else {
            return 'red';
        }
    }

    // For each row with a due date, calculate and show "Due In"
    $('.due-date-column').each(function () {
        const span = $(this);
        const dueDateValue = span.text().trim();

        if (dueDateValue) {
            const difference = getDateDifference(dueDateValue);
            const trElement = span.closest('tr')[0];

            if (trElement) {
                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';

                // Insert into a specific column, adjust selector as needed
                const targetTd = trElement.querySelector('.column_body.column_name.body_column_2');
                if (targetTd) {
                    targetTd.innerHTML = ''; // Clear existing
                    targetTd.appendChild(divElement);
                }
            }
        }
    });
});



</script>

Figure 22: Configure the List View Custom Header

Under Redirection for New Sample Feedback Form, use the Menu ID of the List Inbox for Url Redirect After Process Started.

Figure 23: Configure the New Sample Feedback Form
Delete the "My Sample Feedback Form" and "My Audit Trail" components, as these are not required for the tutorial.
Image RemovedImage Added
Figure 24: Delete the "My Sample Feedback Form" and "My Audit Trail" Components
Click Apply Change > Save.

...

Space shortcuts

Page tree

Versions Compared

Old Version 7

New Version 8

Key