Zaprite SharePoint pogovorno okno s tipko Esc

Kadar želimo v SharePointu preveriti ali urediti element s seznama brez navigacije med stranmi, lahko to storimo s pogovornim oknom. Pogovorno okno je na voljo od SharePointa 2010 naprej in je zelo uporabno, saj se uporabnik lahko hitro vrne na seznam, kjer je začel,  tako da zapre okno, brez krmarjenja med stranmi.

Uporabniki so se v zadnjih letih navadili, da če želijo zapreti pogovorno okno v brskalniku, ne glede na to ali je besedilo, slika ali video morajo le pritisniti tipko Escape in pogovorno okno se bo zaprlo.

SharePointovo pogovorno okno pa ni ravno uporabniško prijazno, saj uporaba tipke Escape ne zapre okna in se mora uporabnik vsakič, ko ga želi zapreti, z miškinim kazalcem premakniti na gumb za zaprtje okna.

To lahko preprosto rešimo z uporabo JavaScripta. Najprej moramo v projekt dodati modul, ki bo naložil JavaScript. V modulu nato v datoteko elements.xml dodamo sledečo kodo:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
    ScriptSrc="~sitecollection/Style Library/ZaznajTipko/ZapriZEsc.js"
    Location="ScriptLink" Sequence="102" >
  </CustomAction>
  <Module Name="ZaznajTipko" Url="Style Library">
    <File Path="ZaznajTipko\ZapriZEsc.js" 
          Url="ZaznajTipko/ZapriZEsc.js" />
  </Module>
</Elements>

Modul doda datoteko JavaScript (v primeru poimenovano ZapriZEsc.js) v knjižnico slogov (Style Library).

JavaScript je enostaven in vsebuje le nekaj vrstic. Najprej zazna, da je bila tipka pritisnjena, nato preveri če je bila pritisnjena tipka Escape, preveri če je pojavno okno odprto in ga zapre.

document.onkeypress = function(e) {
e = window.event || e;
if (e.keyCode == 27) {
    var dialog = SP.UI.ModalDialog.get_childDialog();
    if (dialog != null) {
        SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,
            "Closed by ESC");
    }
}

Po tem, ko naložimo projekt, je treba še aktivirati funkcijo, v katero smo dodali modul, saj bo takrat JavaScript datoteka dodana v knjižnico slogov.

Če pa želimo še bolj poenostaviti kodo in imamo možnost spreminjati matrico, lahko datoteko s sledečo kodo kličemo direktno iz matrice (pred tem moramo naložiti tudi jQuery):

$( document ).ready(function() {
    $(document).keydown(function (e) {
        e = window.event || e;
        if (e.keyCode == 27) {
            var dialog = SP.UI.ModalDialog.get_childDialog();
            if (dialog != null) {
                SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,
                    "Closed by ESC");
            }
        }
    });
});

S to enostavno rešitvijo si lahko malo izboljšamo in poenostavimo uporabo SharePointovih pogovornih oken in preverjanje elementov na seznamu.