Funciones SP.SOD.registerSod y SP.SOD.registerSodDep

SP.SOD.registerSod nos permite registrar un archivo de javascript de forma sincrónica. También podría utilizarse $includeScript, este método es similar, pero carga el script de forma asincrónica, lo cual a veces puede ocasionar problemas, Ej: llamar a una función que aún no se cargó.

La misma se define de la siguiente manera: SP.SOD.registerSod(key, url);

Es importante que el parámetro url sea una url relativa. Se recomienda usar la variable global definida por Sharepoint: this.L_Menu_BaseUrl. La misma se define desde el lado del servidor con el siguiente método: SP.Web.get_serverRelativeUrl()

Primero subo la librería jquery y myscript.js a la librería “Site Assets”

En una página agrego el webpart de Script Editor, y agrego el siguiente código:

<script>
SP.SOD.registerSod('jquery-1.11.1.min.js', this.L_Menu_BaseUrl + "/SiteAssets/jquery-1.11.1.min.js");
SP.SOD.registerSod('myscript.js', this.L_Menu_BaseUrl + "/SiteAssets/myscript.js");
SP.SOD.registerSodDep('myscript.js', 'jquery-1.11.1.min.js');

 SP.SOD.executeFunc("myscript.js", null, function() {
    console.log("SP.SOD.executeFunc called");
    Probando();
});  </script>

Cómo pueden ver hay dos funciones más utilizadas: SP.SOD.registerSodDep y SP.SOD.executeFunc. La primera permite registrar un archivo como una dependencia de otro archivo. En este caso lo que hice es que antes de registrar myscript.js, primero registro jquery-1.11.1.min.js, ya que myscript.js hace uso de funciones de jquery. La función SP.SOD.executeFunc(key, functionName, fn), permite asegurar que primero se carga el archivo definido con el parámetro key, antes de llamar a la función “fn”. Este métod ya lo había comentado en este post: http://todosharepoint.blogspot.com.ar/2014/07/funcion-spsodexecutefunc-en-sharepoint.html

Dentro de la función “fn”, llamo al método “Probando();”, el cual está definido dentro de myscripts.js.

El archivo myscript,js tiene el siguiente código

$( document ).ready(function() {
    alert("Se cargo la página...Listo Jquery");
});

function Probando()
{
    alert("Se Ejecutó Probando...");
}

Guardo la página y veo los resultados.

Primero me lanza el alert del método “Probando” y después el alert de $(document).ready

Más información:

http://msdn.microsoft.com/en-us/library/ff408081.aspx

Función “SP.SOD.executeFunc” en Sharepoint 2013

Es un método (SP.SOD.executeFunc(key, functionName, fn)) que nos disponibiliza Sharepoint que nos asegura que el archivo especificado (key) que contiene la función específica (functionName) es cargada y después ejecuta la callback function (fn). Un caso de uso para “SP.SOD.executeFunc” podría ser que se cargue la librería específica (Ej: jquery) antes de llamar a una función definida que hace uso de la misma. Esta forma de ejecución se llama “Script on Demand”.

Este método es el recomendado para Sharepoint 2013 en vez de el método “ExecuteOrDelayUntilScriptLoaded” que era el recomendado en 2010.

Veamos algunos ejemplos, e issues con algunas funciones relacionadas

Primero veo que en el sitio donde estoy haciendo las demos, la feature de publishing feature está deshabilitada. El site es de tipo “Developer Site”

Agrego un web part de script,

Agrego el siguiente código

<script language="javascript">
SP.SOD.executeOrDelayUntilScriptLoaded(function () { alert('SP.js se cargo bien'); }, 'SP.js');
</script>

El método SP.SOD.executeOrDelayUntilScriptLoaded(func, depScriptFileName) usa un procedimiento llamado “Delay until …” que ejecuta la función específica (func) si el archivo (depScriptFileName) contenido es cargado, lo agrega a una cola (queue) de carga.

Al guardar la página, veo que me lanza el popup

Pero que pasa si activo la feature “Sharepoint Server Publishing Infraestructure”

Veo que también se carga correctamente

Ahora activo la  feature “Sharepoint Server Publishing”

Entro a la librería “Pages”

y creo una publishing page (Article Page)

Agrego de nuevo un script web  part

y agrego de nuevo el código script

<script language="javascript">
SP.SOD.executeOrDelayUntilScriptLoaded(function () { alert('SP.js se cargo bien'); }, 'SP.js');
</script>

Y de nuevo se ejecutó bien.

Que pasa si yo uso solamente ExecuteOrDelayUntilScriptLoaded, sin SP.SOD. Este era el método en 2010 que se usaba para esperar hasta que se cargue la librería definida en el método.

El script de nuevo funciona perfecto.

Ahora voy a crear un sitio de tipo Publishing Portal

Y hago los mismos pasos, esta vez ejecuto con SP.SOD.executeOrDelayUntilScriptLoaded

IMPORTANTE: Sin publicar la página, el script anda perfecto. En estado draft anda bien.

IMPORTANTE: Una vez que publico la página (Publish this draft) y el script DEJO de funcionar por algún motivo. NO me lanza el popup que lanzaba antes.

Si yo edito la página, si me aparece el popup antes de pasar a diseño. “Cosas de Sharepoint”, jeje

Cómo podemos hacer que funcione nuestro código de javascript en cualquier sitio?? Usando el método “SP.SOD.executeFunc”

<script language="javascript">
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { alert('SP.js se cargo bien'); })
</script>

Ahora todo funciona perfecto, en cualquier sitio, y con cualquier feature activada.

Que pasa si ahora activo la feature “Minimal Download Strategy”, una feature que carga porciones solamente si tiene cambios. Es una feature que ocaciones a veces problemas con código javascript. La activo y veo que

Y veo que también funciona perfecto

IMPORTANTE: siempre usa SP.SOD.executeFunc para ejecutar tu código javascript. (Script on Demand)

Tips adicional: cómo cargar jquery y custom.js de forma correcta.

Subimos la librería de jquery a la librería “Site Assets”

Agrego un web part de script y agrego el siguiente código de javascript

<script language="javascript">
SP.SOD.registerSod('jquery', this.L_Menu_BaseUrl + "/SiteAssets/jquery.js");
SP.SOD.executeFunc("jquery", null, function () {
    alert('Se cargo bien jquery, ejecuto mi código jquery');   
});
</script>

Que pasa si tenemos nuestro código dentro de un archivo js, ej: app.js

Ej: en el archivo app.js tengo lo siguiente

function EjecutarCodigoJquery()
{
    $(document).ready(function() {
        document.title = 'Custom jquery title';
    });
}

Podemos cargar el código de la siguiente manera en el script web part:

<script language="javascript">
    SP.SOD.registerSod('jquery', this.L_Menu_BaseUrl + "/SiteAssets/jquery.js");
    SP.SOD.registerSod('appcustom', this.L_Menu_BaseUrl + "/SiteAssets/app.js");
    RegisterSodDep('appcustom', 'jquery');
    SP.SOD.executeFunc("appcustom", null, function () {
            EjecutarCodigoJquery();
    });

</script>

Guardando la página veo que se cambio el título de la página (document.title = 'Custom jquery title')