5.2.1 - Procedimiento para realizar operaciones básicas con código de biblioteca de JavaScript en SharePoint 2013

Ejecutar tareas básicas en SharePoint 2013 con el modelo de objetos de cliente JavaScript

Al crear una aplicación auto-hosted en la nube, se puede agregar una referencia al modelo de objetos dentro de las etiquetas <script> de HTML.
Se recomienda hacer referencia a la web donde se hostea la aplicación para garantizar la existencia del contexto en las aplicaciones auto-hosted.
Para recuperar la dirección URL a la web donde se hostea la aplicación, puede hacerse obteniendo el parámetro SPHostUrl de los parámetros de la consulta.
Una vez obtenida la dirección URL de la web donde se hostea la aplicación, se puede utilizar código JavaScript para crear dinámicamente la referencia al modelo de objetos.

En el ejemplo siguiente se ejecutan estas tareas para referenciar al modelo de objetos JavaScript:

1. Hace referencia a la biblioteca AJAX desde la Microsoft Content Delivery Network (CDN)
2. Hace referencia a la biblioteca jQuery desde la CDN de Microsoft.
3. Extrae la dirección URL a la web donde se hostea la aplicación desde los parámetros de la  consulta. (http://www.w3schools.com/jsref/jsref_decodeuricomponent.asp)
4. Cargar los archivos SP.Runtime.js y SP.js a través de la función getScript de jQuery. Luego de cargar los archivos js, el programa obtendrá acceso al modelo de objetos JavaScript de SharePoint. (http://www.w3schools.com/jquery/ajax_getscript.asp )
5. La aplicación continúa en la función execOperation.

<script 
    src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" 
    type="text/javascript">
</script>
<script
    type="text/javascript"
    src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
    var hostweburl;

    // Load the required SharePoint libraries.
    $(document).ready(function () {

        // Get the URI decoded URLs.
        hostweburl =
            decodeURIComponent(
                getQueryStringParameter("SPHostUrl")
        );

        // The js files are in a URL in the form:
        // web_url/_layouts/15/resource_file
        var scriptbase = hostweburl + "/_layouts/15/";

        // Load the js files and continue to
        // the execOperation function.
        $.getScript(scriptbase + "SP.Runtime.js",
            function () {
                $.getScript(scriptbase + "SP.js", execOperation);
            }
        );
    });

    // Function to execute basic operations.
    function execOperation() {

        // Continue your program flow here.

    }

    // Function to retrieve a query string value.
    // For production purposes you may want to use
    // a library to handle the query string.
    function getQueryStringParameter(paramToRetrieve) {
        var params = document.URL.split("?")[1].split("&");
        var strParams = "";
        for (var i = 0; i < params.length; i = i + 1) {
            var singleParam = params[i].split("=");
            if (singleParam[0] == paramToRetrieve)
                return singleParam[1];
        }
    }
</script>

Una alternativa para obtener las referencias al modelo de objetos dentro de las etiquetas <script> de HTML es a través de la propia web de aplicación auto-hosted en SharePoint que permite usar rutas de acceso relativas para hacer referencia a los archivos necesarios para usar el modelo de objetos JavaScript

En el siguiente ejemplo se ejecutan las siguientes tareas para agregar una referencia al modelo de objetos JavaScript utilizando esta técnica:

1. Hacer referencia a la biblioteca AJAX desde la CDN de Microsoft.
2. Hacer referencia al archivo SP.Runtime.js con una dirección URL relativa a la web de aplicación.
3. Hace referencia al archivo SP.js con una dirección URL relativa a la web de aplicación.

<script 
    src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" 
    type="text/javascript">
</script>
<script 
    type="text/javascript" 
    src="/_layouts/15/sp.runtime.js">
</script>
<script 
    type="text/javascript" 
    src="/_layouts/15/sp.js">
</script>
<script type="text/javascript">

    // Continue your program flow here.

</script>