Anyway to add a button in front of invoice/item to redirect it to service page or mention service id on the items?

sonuyos · January 14, 2020

Title.

Will make my life much easier.

brian! · January 14, 2020

a screenshot might be helpful here as to where you are talking about.... i'm unsure which page you're referring to! 😕

sonuyos · January 14, 2020

3 minutes ago, brian! said:

a screenshot might be helpful here as to where you are talking about.... i'm unsure which page you're referring to! 😕

Invoice itself, in admin area. in every invoice.

brian! · January 14, 2020

22 minutes ago, sonuyos said:

Invoice itself, in admin area. in every invoice.

to add a button on the left of each item on that page would be a jQuery hook (same would apply to appending the item content with the ID#) - kian is on a roll today with them, so I can leave that to him if you want to go down that path.

unless i'm missing something, you're almost certainly going to have to query the database to get the service/domain ID for each invoice item.

AdminInvoicesControlsOutput would be an alternative hook if you want to avoid using jQuery, but it would place the custom output below the buttons (top right) on the invoice page.

sonuyos · January 23, 2020

On 1/14/2020 at 7:22 PM, brian! said:

to add a button on the left of each item on that page would be a jQuery hook (same would apply to appending the item content with the ID#) - kian is on a roll today with them, so I can leave that to him if you want to go down that path.

unless i'm missing something, you're almost certainly going to have to query the database to get the service/domain ID for each invoice item.

AdminInvoicesControlsOutput would be an alternative hook if you want to avoid using jQuery, but it would place the custom output below the buttons (top right) on the invoice page.

Actually i wanted to put something right next to the the individual items? - https://prnt.sc/qrl9vv

That would be like, clicking on it and then it will open the service it is related to, like how in service id we have option to view invoices, similar but opposite.

Kian · January 23, 2020

Preview:

sample-220.png.3496987d9aab2b5f3b85362bfde0f989.png

Code:

use WHMCS\Database\Capsule;

add_hook('AdminAreaHeaderOutput', 1, function($vars)
{
    if ($vars['filename'] == 'invoices' AND $_GET['id'])
    {
        $Data = Capsule::select(Capsule::raw('SELECT id, type, relid FROM tblinvoiceitems WHERE invoiceid = "' . $_GET['id'] . '"'));
        $Data = json_encode($Data, true);

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Meoooow!');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-server';
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-globe';
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank"><i class="fas '+ faicon +'"></i></a>');
                                }
                                else
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="https://katamaze.com/templates/kata/img/stuff/nyan-cat.png" style="height: 27px;width: 100px;">');
                                }
                            })
                        })
                    </script>
HTML;

        return $output;
    }
});

For domains there's the "globe" icon and for hosting accounts "server" one. You can do the same for coupons, late fees, upgrades etc.

Edited January 23, 2020 by Kian

sonuyos · January 24, 2020

On 1/23/2020 at 8:04 PM, Kian said:

Preview:

Code:


use WHMCS\Database\Capsule;

add_hook('AdminAreaHeaderOutput', 1, function($vars)
{
    if ($vars['filename'] == 'invoices' AND $_GET['id'])
    {
        $Data = Capsule::select(Capsule::raw('SELECT id, type, relid FROM tblinvoiceitems WHERE invoiceid = "' . $_GET['id'] . '"'));
        $Data = json_encode($Data, true);

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Meoooow!');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-server';
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-globe';
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank"><i class="fas '+ faicon +'"></i></a>');
                                }
                                else
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="https://katamaze.com/templates/kata/img/stuff/nyan-cat.png" style="height: 27px;width: 100px;">');
                                }
                            })
                        })
                    </script>
HTML;

        return $output;
    }
});

For domains there's the "globe" icon and for hosting accounts "server" one. You can do the same for coupons, late fees, upgrades etc.

Thanks, that works marvelously ❤️

steph.hope · April 1, 2020

Thanks for this code, @Kian! It's been super helpful to me both to use in this form and to see how jquery hooks work.

baymax · May 4, 2020

On 1/23/2020 at 10:34 PM, Kian said:

Preview:

Code:


use WHMCS\Database\Capsule;

add_hook('AdminAreaHeaderOutput', 1, function($vars)
{
    if ($vars['filename'] == 'invoices' AND $_GET['id'])
    {
        $Data = Capsule::select(Capsule::raw('SELECT id, type, relid FROM tblinvoiceitems WHERE invoiceid = "' . $_GET['id'] . '"'));
        $Data = json_encode($Data, true);

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Meoooow!');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-server';
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-globe';
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank"><i class="fas '+ faicon +'"></i></a>');
                                }
                                else
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="https://katamaze.com/templates/kata/img/stuff/nyan-cat.png" style="height: 27px;width: 100px;">');
                                }
                            })
                        })
                    </script>
HTML;

        return $output;
    }
});

For domains there's the "globe" icon and for hosting accounts "server" one. You can do the same for coupons, late fees, upgrades etc.

Hi, I managed to get this hook added and it did add a new column for me to the invoice. They're blank though and I suspect fa-server and fa-globe is the problem. Where do these images go or come from?

baymax · May 4, 2020

Figured it out. Works for 'Hosting' but the anything *Domains* is *not* showing the fa-globe icon nor the link.

Instead, it displays the image file per the code at the bottom OR shows the Services icon instead. Please assist 🙂

Edited May 4, 2020 by baymax

baymax · May 5, 2020

Here's mine:

<?php

use WHMCS\Database\Capsule;

add_hook('AdminAreaHeaderOutput', 1, function($vars)
{
    if ($vars['filename'] == 'invoices' AND $_GET['id'])
    {
        $Data = Capsule::select(Capsule::raw('SELECT id, type, relid FROM tblinvoiceitems WHERE invoiceid = "' . $_GET['id'] . '"'));
        $Data = json_encode($Data, true);

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Link');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-server';
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-globe';
                                }
                                else if (e.type.includes('Addon', 'Setup')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-sliders-h';
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank"><i class="fas '+ faicon +'"></i></a>');
                                }
                             //   else
                             //   {
                             //       $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="unknown.png" style="height: 16px;width: 16px;">');
                             //   }
                            })
                        })
                    </script>
HTML;

        return $output;
    }
});

Kian · May 5, 2020

In my example I used FontAwesome 5 but probably your WHMCS still uses FontAwesome 4. Open FA4 and look for the right class names to use. As a reference the "globe" icon on FA5 is:

<i class="fas fa-globe"></i>

While on FA4 is:

<i class="fa fa-globe"></i>

brian! · May 5, 2020

FWIW - both versions are working for me locally in v7.10... services and domains have the correct FA icons (using either FAS or FA);

for your tweaked version, addons invoiceitems are showing the correct icon too - though technically the URL would need to be changed to clientsservices.php?aid= if you wanted to link it to the client's product addons page.

baymax · May 6, 2020

Hey @Kian @brian!

Thanks for the feedback. I fixed the URL for addons. Since you've confirmed that both versions work on the latest WHMCS, I didn't bother changing the code for that.

What does this line do?

$('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="unknown.png" style="height: 16px;width: 16px;">');

The icon is still not appearing for anything *Domains* though. If I remove the code for Addons, Domains seems to be working but not when I include the code for Addons. See below.

<?php

use WHMCS\Database\Capsule;

add_hook('AdminAreaHeaderOutput', 1, function($vars)
{
    if ($vars['filename'] == 'invoices' AND $_GET['id'])
    {
        $Data = Capsule::select(Capsule::raw('SELECT id, type, relid FROM tblinvoiceitems WHERE invoiceid = "' . $_GET['id'] . '"'));
        $Data = json_encode($Data, true);

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Link');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-server';
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = 'fa-globe';
                                }
                                else if (e.type.includes('Addon', 'Setup')) {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = 'fa-sliders-h';
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank"><i class="fas '+ faicon +'"></i></a>');
                                }
                             //   else
                             //   {
                             //       $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<img src="unknown.png" style="height: 16px;width: 16px;">');
                             //   }
                            })
                        })
                    </script>
HTML;

        return $output;
    }
});

brian! · May 6, 2020

7 hours ago, baymax said:

What does this line do?

it's just a fallback image and should be shown for any invoiceitem type that isn't covered by the FA if statement - so the obvious one would be if it were a custom invoice, or an addfunds line item - under those circumstances, then it should display the "unknown" image.

it's worth noting that as you've written it in your version (and ignoring that it's commented out), the image path for unknown.png would be relative to your admin folder.

8 hours ago, baymax said:

The icon is still not appearing for anything *Domains* though. If I remove the code for Addons, Domains seems to be working but not when I include the code for Addons. See below.

what happens if you use the following...

        $output .= <<<HTML
                    <script type="text/javascript">
                    	$(document).ready(function(){
                            var rel = {$Data};
                        	var rows = $('.datatable td > input[name^="itemids"]').first().closest('tbody').children('tr');

                            $.each(rows, function(i,e){
                            	$(e).children('*').last().clone().html('').insertBefore($(e).children('*').last());
                            })

                            rows.first().children('th').eq(-2).text('Type');

                            $.each(rel, function(i,e){
                                if (e.type == 'Hosting') {
                                    var url = 'clientsservices.php?id=' + e.relid;
                                    var faicon = e.type;
                                }
                                else if (e.type.includes('DomainRegister', 'DomainTransfer', 'Domain')) {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = e.type;
                                }
                                else if (e.type == 'Addon') {
                                    var url = 'clientsservices.php?aid=' + e.relid;
                                    var faicon = e.type;
                                }						
                                else {
                                    var faicon = e.type;
                                }

                                if (url)
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('<a href="'+ url +'" target="_blank">'+ faicon +'</i></a>');
                                }
                                else
                                {
                                    $('input[name^="itemids"][value="'+ e.id +'"]').closest('tr').children('*').eq(-2).html('' + faicon + '');
                                }
                            })
                        })
                    </script>
HTML;

instead of trying to output an image, it should output the invoiceitem type as text (hyperlinked for hosting/domain/addon) - that should at least help you to determine whether domains are showing.

then once you get it working, you can replace the text with FA icons, images or whatever.

baymax · May 7, 2020

So strange... it's still working as hyperlinks for everything except Domains. Still just a text. And I've tested it on several domain invoices..

brian! · May 7, 2020

4 hours ago, baymax said:

So strange... it's still working as hyperlinks for everything except Domains. Still just a text. And I've tested it on several domain invoices..

on those unlinked domain items, what is it outputting in the text? DomainRegister etc or something else.

maybe for some unknown reason, it doesn't like 'includes' - if so, just split domains up into single element if statements like the others, e.g

                                else if (e.type == 'DomainRegister') {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = e.type;
                                }

and then repeat for each domain option... you shouldn't really need to do this, but it should work.

baymax · May 8, 2020

21 hours ago, brian! said:
on those unlinked domain items, what is it outputting in the text? DomainRegister etc or something else.

maybe for some unknown reason, it doesn't like 'includes' - if so, just split domains up into single element if statements like the others, e.g
                                else if (e.type == 'DomainRegister') {
                                    var url = 'clientsdomains.php?id=' + e.relid;
                                    var faicon = e.type;
                                }
                                
and then repeat for each domain option... you shouldn't really need to do this, but it should work.

It just outputted whatever the type was.

Your method worked 😛 THANKS BRIAN!!!!!!!!

TimRef · January 14, 2022

@brian! @Kian Hi, sir ,

Can I ask you a question here ?

I hope to list the dedicated or domain in the admin invoices.php list .could you please let me know whether AdminAreaHeaderOutput can be used for this . like this ,

Thanks in advanced. thanks .

11111.png.35ad68ac29bc6f5c4f3adc50af7c7170.png

Edited January 14, 2022 by TimRef

Anyway to add a button in front of invoice/item to redirect it to service page or mention service id on the items?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information