SharePoint Online - JavaScript

Problém

Potřebuji do SharePoint Online vložit vlastní jQuery/JavaScript script.

Řešení

  1. Nainstalovat PnP PowerShell Cmdlets for SharePoint Online
  2. Spustit PowerShell konzoli
  3. Spojit se SharePoint tenantem
    Connect-SPOnline https://tenant.sharepoint.com/sites/portal
  4. Připojit JavaScriptový soubor
    Add-SPOJavaScriptLink -Name JQuery -Url https://code.jquery.com/jquery.min.js
    Add-SPOJavaScriptLink -Name MyJS -Url https://tenant.sharepoint.com/sites/portal/muj-soubor.js
  5. Vložit JavaScript přímo do stránky
    Add-SPOJavaScriptBlock -Name MyScript -Script "alert('AHOJ');"

Poznámky

  • Pro vkládání je potřeba mít dostatečná práva
  • Vložený javascriptový kód vložený do stránky nelze jednoduše příkazem odstranit, ale je potřeba jej přepsat

Odkazy

JavaScript - Čtení parametrů z url adresy

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

Příklad volání

http://www.example.com/index.php?id=1&image=awesome.jpg

getQueryVariable("id") - vrátí "1".
getQueryVariable("image") - vrátí "awesome.jpg".

SharePoint 2013 - modalní okno

Při volání v javascriptové funkce openMyPage (zobrazení modálního okna) se modální okno neotevře a v javascriptu je následující chyba:

Unable to get property 'showmodaldialog' of undefined or null reference

Volaná funkce

function openMyPage(pageName, pageTitle) {
    var options = {
        url: '/_layouts/15/project.folder/' + pageName,
        title: pageTitle,
        allowMaximize: false,
        showClose: true,
        width: 600,
        height: 500,
        dialogReturnValueCallback: RefreshOnDialogClose
    };
    SP.UI.ModalDialog.showModalDialog(options);
}

Je potřeba upravit načítání SP.UI.ModalDialog.

Upravená funkce

function openMyPage(pageName, pageTitle) {
    var options = {
        url: '/_layouts/15/project.folder/' + pageName,
        title: pageTitle,
        allowMaximize: false,
        showClose: true,
        width: 600,
        height: 500,
        dialogReturnValueCallback: RefreshOnDialogClose
    };

    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}

Odkazy
http://sharepoint.stackexchange.com/questions/122812/unable-to-get-property-showmodaldialog-of-undefined-or-null-reference

CCS, HTML5, JavaScript atd.

CCS3 - fonty do HTML stránek

  • Vybrat typ písma ze seznamu http://www.google.com/fonts a kliknout na ikonu "Quick-use"
  • Do <HEAD> vložit vygenerovaný kod pro import fontu
    <link href='http://fonts.googleapis.com/css?family=Krona+One' rel='stylesheet' type='text/css'>
    
  • Do <HEAD> vložit javacript pro načtení fontu do stránky
    <script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Krona+One::latin' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })(); 
    </script>
  • Do CSS souboru vložit definici fontu, např.
    H1 {
        font-family: 'Krona One', sans-serif;
    }

Odkazy
http://www.w3schools.com/css/css3_fonts.asp
http://www.google.com/fonts

JavaScript (jQuery) - jak převzít existující funkci

Problém
Mám hotovu stránku, např. v SharePointu. Při ukládání (kliknutí na tlačítko "Uložit") potřebuji před odeslání provést ještě nějakou svoji akci.

Řešení
Musím převzít stávající funkci a vložit ji do nové funkce, která bude obsahovat moji část kódu.

Kód
HTML

<button .... OnSelectDate="function(resultfield, date);" />

JavaScript

$(document).ready(function() {
    window['oldDatePickerClose'] = OnSelectDate;
    OnSelectDate = function(resultfield, date){
        alert("Moje akce");
        window['oldDatePickerClose'](resultfield, date);
    };
});

Aplikace pro vývojáře I:

Ajax Control Toolkit

http://www.asp.net/ajaxlibrary/

.NET Reflector 8

http://www.red-gate.com/products/dotnet-development/reflector/

JSbin.com

http://jsbin.com/

ILSpy

.NET Decompiler
http://ilspy.net/

Zástupné znaky pro vlastní akce

Pokud potřebuji definovat přes SharePoint Designer nejaké kontextové akce, mohu do akcí doplnit následující zástupné znaky, do kterých SharePoint následně dynamicky doplní hodnoty.

ZnakyVýstup
~site/ SPContext.Current.Web.ServerRelativeUrl
~sitecollection/ SPContext.Current.Site.ServerRelativeUrl
{ItemId} item.ID.ToString()
{ItemUrl} item.Url
{SiteUrl} web.Url
{ListId} list.ID.ToString("B")
{RecurrenceId} item.RecurrenceID

JavaScript - IV.

Automatický reload stránky

HTML Control

<asp:dropdownlist id="DropDownList1" runat="server" onchange="SetClientRefresh(this);"> 
     <asp:listitem value="1000">1 second</asp:listitem> 
     <asp:listitem value="2000">2 seconds</asp:listitem> 
     <asp:listitem value="3000">3 seconds</asp:listitem> 
</asp:dropdownlist>  

JavaScript

<script language='javascript'> 
var cTimeOut = null; 
function SetClientRefresh(sel) 
{ 
  var newRefresh = sel.options[sel.selectedIndex].value; 
  if (cTimeOut != null) 
  { 
    window.clearTimeout(cTimeOut); 
  } 
  cTimeOut = window.setTimeout("ReLoadPage()", newRefresh); 
} 
  
function ReLoadPage() 
{ 
  window.location.reload(); 
} 
</script> 

JavaScript III.

Odesílání tlačítkem ENTER

Způsob odeslání formuláře tlačítkem "Enter" na klávesnici.Vše se musí udělat z JavaScriptu na straně klienta.

Button btn = new Button();
btn.Text = "Send";
 
TextBox txt = new TextBox();
txt.Attributes.Add("onkeydown", "if(event.keyCode==13) {document.getElementById('" + btn.UniqueID + "').click(); return false;}");

Detekce podpory JavaScriptu

Detekce z kódu, jestli prohlížeč podporuej JavaScript

if (Page.Request.Browser.JavaScript)
{
  ...
}
else
{
  ...
}

O blogu

Tento blog je místem, kde sdílím své zkušenosti, části zdrojových kódů, odkazy apod. Zdroje jsou zaměřeny převážně na problematiku portálového řešení SharePoint a vývoj webů v prostředí Microsoft. Mým cílem není úplně obsahnout konkrétní řešení, ale pouze tu část, kterou potřebuji. Pokud se problematika obsáhlejší, jsou pod článkem odkazy na související informace.

O autorovi

Oldřich Zátopek
Zabývám se vývojem webových aplikací internet/intranet na Microsoft technologiích. Hlavní specializace je SharePoint. LinkedIn