How to add apex message in standard layout when custom button has been clicked?

Question

I already tried adding ApexPages.addMessage with custom button and apex class.
Here is the custom button js code

sforce.apex.execute("InvoiceBreakdownController","doGetInvoiceHeaderAndDetail",{"invoiceId":'{!Invoice__c.Id}'}); 

window.location.reload(true);

And here is the apex code

WebService static void doGetInvoiceHeaderAndDetail(String invoiceId) {
    String eId = getInvoiceEBPIdByInvoiceId(invoiceId);
    getInvoiceHeaderAndDetail(eId, invoiceId);
}

public static HttpResponse getInvoiceHeaderAndDetail(String ebpHeaderId, String invId) {
    ...
    ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO, 'Success syncing data from Another Source' ));
}

but showing this error:

Is there any workaround to show apex message (INFO/WARNING/ERROR) in standard layout? (not visualforce page)

Answer 1

If you are calling apex methods from your custom javascript buttons, there is a workaround but in that case you might need to make some changes in your controller because the statement ApexPage.addMessages() might still throw errors when the controller is being called from a standard layout, you will have to handle that exclusively.

1. You could directly return the error/success message from your apex controller and use the alert() to show your messages.

2. If you would like the error messages with same look and feel as the Apex Page messages, you will need to use third party css and may be jQuery.

Here is the sample code to walk you through it:

1. Include your third party css and jQuery like this

{!REQUIRESCRIPT("/soap/ajax/39.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/39.0/apex.js")}
{!REQUIRESCRIPT("/resource/1513608285000/MyResource/js/jquery.min.js")}
{!REQUIRESCRIPT("/resource/1513608285000/MyResource/js/bootstrap.min.js")}
requireCssFile("resource/1513608285000/MyResource/css/bootstrap.css");

Note the method requireCssFile method which is used to append the third party css files to your standard layout page.

function requireCssFile( filename ) {
    var fileref = document.createElement( 'link' );
    fileref.setAttribute( 'rel', 'stylesheet' );
    fileref.setAttribute( 'type', 'text/css' );
    fileref.setAttribute( 'href', filename );
    document.getElementsByTagName( 'head' )[ 0 ].appendChild( fileref );
}

2. Create the HTML String after you have received response from your apex method

Create an HTML string like this

var htmlString = '<div class="container">'
        + '<h2>Panel Heading</h2>'
        + '<div class="panel panel-default">'
            + '<div class="panel-heading">' + heading + '</div>'
            + '<div class="panel-body">' + message + '</div>'
        + '</div>'
    + '</div>';

3. Create your div

Create a method that would append your htmlString as an HTML element to the body of the page like:

function createDiv() {
    var el = document.createElement('div');
    el.innerHTML = htmlStr;
    j$('body').append( htmlStr );
}