ServiceDesk Plus: una toolbar personalizzata sempre in vista

| |

Oggi si torna a parlare di ServiceDesk Plus e di un piccolo particolare che non apprezzo particolarmente nelle sue ultime versioni: la toolbar bassa che propone i comandi rapidi per lavorare sui ticket compare esclusivamente se gli stessi superano un certo numero, costringendo il tecnico a uno scroll verso il basso, parlo di questa:

ServiceDesk Plus: una toolbar personalizzata sempre in vista

Ho provato a chiedere lumi al forum della Community, per capire se ci fosse la possibilità di ritoccare qualcosa nella configurazione del software, e permettermi di tenere quella toolbar sempre visibile. Ho ricevuto un due di picche e nello stesso momento un suggerimento davvero ottimo: forums.manageengine.com/topic/show-bottom-toolbar, cito di seguito

Create your own toolbar.
Check:  http://sdpadmins.pl/49/dodajemy-cos-od-siebie-do-sdp-customscripts/#more-49

Te la facilito (il sito web è in polacco e ho usato un Google Translate per fare il lavoro sporco): qualcuno in ManageEngine ha ben pensato di includere la possibilità di richiamare uno script personalizzato (JS) per iniettare live alcune modifiche all’interfaccia principale, secondo necessità degli utilizzatori del prodotto. Cosa vuol dire? Vuol dire che con qualche riga di codice è stato possibile ottenere comunque il risultato sperato, nonostante non sia quello previsto da fabbrica. Ho creato una toolbar personalizzata e con posizione fixed in base alle indicazioni dell’utente che mi ha indicato la retta via.

Un piccolo telecomando di collegamenti rapidi posto in basso a destra nella schermata di ServiceDesk Plus ti permetterà di richiamare le funzioni più utili dello stesso, senza la necessità di avere 50 ticket nella stessa schermata, evitando così i molteplici movimenti e clic di mouse per arrivare allo stesso risultato tramite i pulsanti originali del software. Ho caricato il risultato funzionante su Gist:


jQuery(document).ready(function() {
/*
Custom "Shortcuts" toolbar for ManageEngine SDP
From an ideas of MKR @ SDPAdmins.pl
SDP Community: https://forums.manageengine.com/topic/show-bottom-toolbar#49000008012652
Master HEX To RGBA Color Chart: http://www.websitecodetutorials.com/code/css/master-hex-to-rgba-color-chart.php
GSolone, first release 7/7/16 ( CustomScripts.js @ https://gist.github.com/gioxx )
last mod. 10/11/16
10/11/16- I have added a new button to refresh the page.
8/7/16- I have included an array of possible words that you can "catch" in the URL (var checkURL) and a "for" cycle to check and show the custom toolbar (credits: http://stackoverflow.com/questions/15344413/how-to-check-if-one-of-the-strings-from-an-array-are-in-the-url-window-location).
*/
//Original idea
//var userLoc = location.pathname;
//if(userLoc == "/WOListView.do" && sdp_user["USERTYPE"] =="Technician"){
//My idea: intercept an array of possible URLs.
var checkURL = ['WOListView.do', 'CompleteRequest.do', 'SearchN.do'];
for (var i = 0; i < checkURL.length; i++) {
if( (document.URL.indexOf(checkURL[i]) != -1) && sdp_user["USERTYPE"] =="Technician"){
// Style
var toolbarStyle = '<style type="text/css">' +
' #rapidtools{' +
' bottom: 0;' +
' right: 0;' +
' margin-bottom: 10px;' +
' position: fixed;' +
' background-color: rgba(208,208,208,0.6);' +
' width: 310px;' +
' height: 50px;' +
' margin: 0 auto;' +
' }' +
' #rapidtoolscontent{' +
' text-align: center;' +
' margin-top: 8px;' +
' }' +
'</style>'
// Append Style
jQuery('head').append(toolbarStyle);
// Shortcuts
var buttons = '<div id="rapidtools">' +
'<strong style="padding-left: 10px; padding-right: 10px; background-color:#fff486;">Shortcuts</strong> <br />' +
'<div id="rapidtoolscontent">' +
// PICK UP
'<input type="button" title="Pickup" class="formStylebutton" style="width:auto;height:18" onclick="return checkWOSelection(document.getElementById(\'ReqListForm\'),\'checkbox\',\'pickUpRequest=Pick up&amp;\')" value="Pick up" name="pickUpRequest"> ' +
// MERGE
'<input type="button" title="Merge" class="formStylebutton" style="width:auto;height:18" onclick="return checkMergeSelection(document.getElementById(\'ReqListForm\'),\'checkbox\',\'mergeRequest=merge&amp;\',serReqId)" value="Merge" name="mergeRequest"> ' +
// DELETE
'<input type="button" title="Delete" class="formStylebutton" style="width:auto;height:18" onclick="return confirmRequestDeleteFromList(document.getElementById(\'ReqListForm\'),\'checkbox\',document.getElementById(\'confirmrequestdelete\'),document.getElementById(\'chooserequest\'),\'deleteRequest=Delete\',true)" value="Delete" name="deleteRequest"> ' +
// REFRESH
'<input type="button" title="Refresh" class="formStylebutton" style="width:auto;height:18" onclick="window.location.reload()" value="Refresh" name="refreshButton"> ' +
// CLOSE
'<input type="button" title="Close" class="formStylebutton" style="width:auto;height:18" onclick="return checkWOSelection(document.getElementById(\'ReqListForm\'),\'checkbox\',\'closeRequest=Close&amp;\')" value="Close" name="closeRequest"> ' +
// END OF TOOLBAR
'</div></div>';
// Show Toolbar
jQuery('body').append(buttons);
}
}
});

Lo script è in grado di riconoscere l’URL attuale e far comparire la barra esclusivamente durante la visualizzazione dei ticket (quella tabellare, WOListView.do), la ricerca (SeachN.do) e la vista tabellare in seguito a chiusura di un ticket (CompleteRequest.do), il tutto sfruttando un semplice array che dietro un ciclo for verificherà ogni volta il contenuto dell’URL visitato nel momento dell’esecuzione dello script.

Un tocco di abbellimento (si fa quel che si può) via CSS, poi una serie di funzioni secondo me fondamentali, riproducendo esattamente ciò che fanno i pulsanti della toolbar proposta da fabbrica: Pick Up del ticket, Merge, Delete e Close. Ho incluso anche l’Edit ma l’ho tenuto commentato, non è il tipo di edit che mi interessa (richiama quello multiplo, non quello del ticket specifico) e probabilmente lo modificherò in futuro, non necessario esclusivamente perché viene già proposto un pulsante di Edit in corrispondenza di ogni singolo ticket riportato in visualizzazione tabellare.

Per poter funzionare, questo codice andrà salvato in un file nominato CustomScripts.js, che dovrà trovarsi nella cartella [TUOSERVERSDP]\ServiceDesk\custom\scripts. Non è necessario riavviare il servizio relativo a ServiceDesk Plus, ti basterà fare un aggiornamento forzato della pagina web visitata in quel momento (CTRL+R o Shift + F5, in base al browser utilizzato).

Come ogni cosa da me realizzata o ritoccata, non è certo priva di errori e può essere sicuramente migliorata. Se hai proposte o critiche, l’area commenti è a tua totale disposizione.

Buon lavoro!

Correzioni, suggerimenti? Lascia un commento nell'apposita area qui di seguito o contattami privatamente.
Ti è piaciuto l'articolo? Offrimi un caffè! ☕ :-)

L'articolo potrebbe non essere aggiornato

Questo post è stato scritto più di 5 mesi fa, potrebbe non essere aggiornato. Per qualsiasi dubbio ti invito a lasciare un commento per chiedere ulteriori informazioni! :-)

Condividi l'articolo con i tuoi contatti:
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

3 Commenti
Oldest
Newest Most Voted
Inline Feedbacks
View all comments