Apex開發--自定義按鈕加Loading Spinner

學習目的
1，在自定義按鈕里加Loading Spinner提升客戶體驗

Salesforce Custom Button or Link Detail

在Salesforce中在Detail Page裏能夠自定義按鈕。然後由於中國網絡的因素或者後臺處理邏輯過長，可以添加一個Loading Spinner效果。

自定義按鈕里加Loading Spinner

上代碼

{!REQUIRESCRIPT("/soap/ajax/41.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/41.0/apex.js")}
// Create a background and show the image on top
div = document.createElement('div');
div.id = 'myDiv';
div.style.width = '100%';
div.style.height = '100%';
div.style.position = 'fixed';
div.style.top = document.body.scrollTop;
div.style.left = document.body.scrollLeft;
div.style.backgroundColor = 'black';
div.style.opacity = '0.5';
div.style.zIndex = '100';
document.body.appendChild(div);

img = document.createElement('img');
img.id = 'myImg';
img.src = '/resource/1535627232000/loading'; //把Loading Spinner的圖片放到你的靜態資源裏面
img.style.position = 'absolute';
img.style.top = '45%';
img.style.left = '45%';
img.style.zIndex = '101';
div.appendChild(img);
setTimeout(function () {
	var result = sforce.apex.execute("xxxxx Apex Class Name", "Apex Method",   {Param: "{!Trainning__c.Id}"});
	if (result == "ok") {
		window.location.reload();
	} else {
		alert('sync faliure,please contact IT support');
		div.style.display = 'none';
		img.style.display = 'none';
		window.location.reload();
	}
}, 500); //delay 500ms

使用的方式就是：使用js 的document去創建一個遮罩層。

如果內容有錯誤，請及時指出。一起學習，一起進步！