Modifying Templates

[rpierce]

Hi AppGeniuses,

I want to add the week number of the year in big bold red letters to a page in my App. I see in the template file that it says: To change the layout of the detail view form, we recommend using JS code in hooks/table-name-dv.js rather than editing this file.

I don't know how to edit the file and have used code found in this forum to do other modifications. I found the code below but have no idea of how to implement in in AppGini. If anyone has help to offer I'd be grateful. I simplw want to add the text: We are currently in week # 37 (or whichever week it is) for 2025 (Current Year).

Is this code any good? If so, how do I use in in table-name-dv.js??

Code: Select all

function getDateWeek(date) {
    const currentDate = 
        (typeof date === 'object') ? date : new Date();
    const januaryFirst = 
        new Date(currentDate.getFullYear(), 0, 1);
    const daysToNextMonday = 
        (januaryFirst.getDay() === 1) ? 0 : 
        (7 - januaryFirst.getDay()) % 7;
    const nextMonday = 
        new Date(currentDate.getFullYear(), 0, 
        januaryFirst.getDate() + daysToNextMonday);

    return (currentDate < nextMonday) ? 52 : 
    (currentDate > nextMonday ? Math.ceil(
    (currentDate - nextMonday) / (24 * 3600 * 1000) / 7) : 1);
}

const currentDate = new Date();
const weekNumber = getDateWeek();

console.log("Week number of " + currentDate + " is : " + weekNumber);

Thank you,
Ray

[pbottcher]

Hi Ray,

you may try to do something like the following:

go to the tablename.php in the hooks folder and go the _header function. Here you can add to the detailview something like:

Code: Select all

			case 'detailview':
				$calenderweek=date("W");
				$header='<%%HEADER%%><script>$j(function(){
					$j(".page-header h1 a").after("<div>'.$calenderweek.'</div>")
					})</script>';
				break;

This would add the calenderweek after the header. If you want to place it somewhere else, you need to modify the placement in $j(".page-header h1 a")

[rpierce]

Pascal,

THANK YOU!! It works.

[rpierce]

One question, can I make the text Red?

[saymaad]

To make the div containing the calendar week display as red bold text, you can simply apply inline CSS styles directly to the div element:

Code: Select all

case 'detailview':
	$calenderweek = date("W");
	$header = '<%%HEADER%%><script>
		$j(function(){
			$j(".page-header h1 a").after("<div style=\'color: red; font-weight: bold;\'>" + "'.$calenderweek.'" + "</div>");
		});
	</script>';
	break;