How can I call a function from a custom button in the header

[mr_t]

Hi, 

I have a UI script that adds a button next to user info dropdown on the header of the admin page.

window.top.addEventListener('load', addButton());

function addButton(){
	
	window.onload = (function(document){
		
		var elevate = "<button style='margin-bottom:10px;border:2px;background-color:orange; color:white' class='btn btn-warning' id='myBtn' type='button' ng-click='myFunction()'>Click me</button>";
		var btnUser = document.querySelector("#user_info_dropdown");
		
		if(!document.querySelector("#myBtn") && btnUser)
		{
			btnUser.insertAdjacentHTML('afterend', elevate);
		}
		
	})(window.top.document);

}

This button has an onclick property, and I want to call a script include function "myFunction" with it. How can I go about it?

Thanks, 

T.

[Pedro Grilo1]

Hi,

You can call a script include form your UI script.

Please keep in mind the script include needs to be client callable.

If you need an example, have a look at the UI Script "KBViewArticle" that comes Out-Of-Box with knowledge and is calling the KnowledgeAjax script include.

I hope it helps!

Pedro

[mr_t]

Hey Pedro, thanks for the reply. 

I've looked at the UI script you mentioned in your reply, but I can't get this to work...

Here's my UI script:

window.top.addEventListener('load', addButton());

function addButton(){
	
	window.onload = (function(document){
		
		var elevate = "<button style='margin-bottom:10px;border:2px;background-color:orange; color:white' class='btn btn-warning' id='elevateBtn' type='button' onclick='clickme()'>Elevate</button>";
		var btnUser = document.querySelector("#user_info_dropdown");
		
		if(!document.querySelector("#elevateBtn") && btnUser)
		{
			btnUser.insertAdjacentHTML('afterend', elevate);
		}
		
	})(window.top.document);

}

My client script with name elevateRole

function clickme(){
	var ajax = new GlideAjax('elevateRoleSI');
	ajax.addParam('sysparm_name', 'clickme');
	ajax.getXML(callback);
		function callback(response) {
			alert(response);
		}
}

And my script include with name elevateRoleSI 

var elevateRoleSI = Class.create();
elevateRoleSI.prototype = Object.extendsObject(AbstractAjaxProcessor, {
	clickme: function() {
		
		return "HELLO";
	},
    type: 'elevateRoleSI'
});

I can't get the alert to show. Am I correct to think that the button should execute clickme() function from client script? 

I also get this reference error.

Thanks in advance, 

T.

[Pedro Grilo1 · Accepted solution]

Hi!

I believe the issue lies with the scopes of the functions.

You can add an event listener instead of defining the onClick. I believe the following code should work:

function addButton () {
	if (typeof jQuery === 'function' && typeof top.$j === 'function') {
		jQuery(document).ready(function () {
			var top = window.top;
			if (typeof top.addButton != 'undefined') {
				return;
			}
			top.addButton = true;

			var elevate = "<button style='margin-bottom:10px;border:2px;background-color:orange; color:white' class='btn btn-warning' id='elevateBtn' type='button'>Elevate</button>";
			top.$j('#user_info_dropdown').after(elevate);
			top.$j('#elevateBtn').click(function() {
				var ajax = new GlideAjax('elevateRoleSI');
				ajax.addParam('sysparm_name', 'clickme');
				ajax.getXML(callback);
				function callback(response) {
					var answer = response.responseXML.documentElement.getAttribute("answer");
					alert(answer);
				}
			});
		});
	}
}
addButton();

Please mark correct/helpful if it helps!

Pedro

[mr_t]

Yes, this works. Thanks Pedro. I appreciate it.