FEATURE: Logic hook that will allow adding custom javascript code in header without modifying template

[gboban]

Issue

Add logic hoot that will allow inserting custom javascript (or other) code in page header.

Currently, after_ui_frame, after_ui_footer and server_round_trip logic hooks add code towarde the end of the page and after_entry_point will add code on the top of the page, before any other processing.

For example, Google Analytis code should be placed at the top of the head tag and that requires modifying theme template (themes//tpls/_head.tpl)

[pstevens71]

I know this is an old post, but in case anyone else comes across this, you absolutely can add JS to head of editview without modifying the template. Here's an example ( I have a custom module billable hours where I want to calculate the total charge based on hours x hourly rate). Also, this is an application hook. You have to put it in custom/modules/logic_hooks.php

`$hook_version = 1;
$hook_array = array();

$hook_array['after_ui_frame'] = array();
$hook_array['after_ui_frame'][] = array(
1, // Processing order
'add_custom_js_to_editview', // Hook method
'custom/modules/bill_billable_hours/add_custom_js_to_editview.php', // Custom PHP file
'CustomJS', // Class name (if needed)
'addCustomJsToEditView' // Method name
);`

Then here's my PHP file:
`<?php
if (!defined('sugarEntry') || !sugarEntry) die('Not A Valid Entry Point');

class CustomJS {
public function addCustomJsToEditView($event, $arguments) {
if ($event == 'after_ui_frame') {
global $js_strings;
// limit to only the module you want it to fire on
if (!empty($_REQUEST['module']) && $_REQUEST['module'] == 'bill_billable_hours') {
$js = <<<EOT

<script type="text/javascript"> // Custom JavaScript code $(document).ready(function() { // Function to update total_billing based on bill_rate and hours function updateTotalBilling() { var billRate = parseFloat($('input[name="bill_rate"]').val()); var hours = parseFloat($('#hours').val()); if (!isNaN(billRate) && !isNaN(hours)) { var totalBilling = billRate * hours; $('#total_billing').text(totalBilling.toFixed(2)); } } // Attach event listeners to bill_rate and hours fields $('input[name="bill_rate"], #hours').on('input', updateTotalBilling); // Initialize total_billing field updateTotalBilling(); }); </script>

EOT;
echo $js;
}
}
}
}`

[chris001]

Same way for adding custom CSS to the head of all pages, not just editview, without modifying template, so it is for all templates?

[pstevens71]

Yes you could. I haven't tried it but my guess is yes. I've limited the function to only my custom module and edit view. Bit you could probably limit it to whatever you like.

…

On Sun, Aug 13, 2023, 10:45 p.m. Chris Coleman ***@***.***> wrote: Same way for adding custom CSS to the head of the page? — Reply to this email directly, view it on GitHub <#7158 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHBNDZ5K6K6YTC7QHQ234R3XVGGM7ANCNFSM4HEGAQDQ> . You are receiving this because you commented.Message ID: ***@***.***>

[pstevens71]

Actually, on further investigation it places the script close to the beginning of the body not in the . However, the functionality works of adding in JS to the page without having to edit the template. For CSS this would be a good place to put it too because it would override CSS in the head because it loads later. You just have to get creative about how you limit where it fires because the hook will fire on every page and you need limit the function to only output the JS or CSS on the pages you want.

[chris001]

@pstevens71 Thanks. Tried it here. You're right. It works well.