Fácil y rápida: Crear tu propio jQuery Sandbox para SharePoint

Este es otro post en mi en serie sobre cómo utilizar jQuery con SharePoint.
Si desea obtener más información sobre jQuery, Lo recomiendo: jQuery en acción por Bibeault de oso y Yehuda Katz.

Es sorprendentemente fácil comenzar con jQuery en SharePoint (Para mí). (Tengo serias dudas sobre un enfoque de "mejores prácticas" para la implementación de estas cosas a la producción, pero eso es para otro día). Apenas he empezado a jugar con esta tecnología y para ello, He creado un ambiente sandbox para utilizar. Si usted está buscando para empezar con jQuery, Este enfoque puede encontrar útil.

1. Crear un sitio en blanco

Crear un sitio en blanco en algún lugar en su sitio y llamarlo algo inteligente como "jQuery Sandbox".

2. Descargar jQuery

La biblioteca de javascript de jQuery puede descargar desde aquí: http://docs.jquery.com/Downloading_jQuery

Que guarde en el escritorio.

He estado utilizando la versión "".

3. Crear una biblioteca de documentos de SharePoint

En su sitio de sandbox, crear una biblioteca de documentos.

4. Cargar la biblioteca de jQuery en SharePoint

Acceder a la biblioteca de doc que acaba de crear y cargar la biblioteca jQuery.

5. Crear una lista personalizada de SharePoint

He empezado con una lista personalizada porque quiero la suciedad con formularios estándar de SharePoint. También se podrían crear una página en una biblioteca de páginas o páginas de elementos web y probablemente un montón de otros lugares.

Agregar algunas columnas a la lista personalizada para que usted tenga que ejecutar jQuery contra. Mi objetivo inicial fue:

  1. Ocultar un campo.
  2. Asignar un valor a un campo.

Con ese objetivo en mente, He añadido dos campos de texto. Con el tiempo, Yo voy jugando con enlaces, imágenes, búsquedas, etc..

6. Modificar la página de elementos Web NewForm.aspx y agregue un elemento Web Editor de contenido

Esto es un poco negro magic-ish , en es un concepto nuevo para mí. En primer lugar aprendí sobre esto de Paul Grenier, SharePoint jQuery Superstar, en su sitio de proyecto de CodePlex: http://spff.codeplex.com/.

Siga estos pasos para agregar un CEWP a la misma página que muestra NewForm.aspx para cualquier lista personalizada:

  1. Acceder a la lista personalizada y haga clic en nuevo.
  2. Añadir lo siguiente a la URL: PageView = compartido&ToolPaneView = 2

Transformará su inscripción datos vainilla aburrido de algo como esto:

image

A esto:

image

Añadir la WebPart de editor de contenido a la página.

7. Escribir jQuery primero su código

Abrir eso CEWP en la vista Código y agregue el siguiente:

image

Aquí está el código si desea copiar/pegar:

<la escritura de tipo ="text/javascript"
    src =".. /.. /jQuery Library/jQuery-1.3.2.min.js">
</secuencia de comandos>

<tipo de script ="text/javascript">
  $(función() {

    $('#resultsID').HTML('Hay' + $('a').tamaño() + 'una etiquetas etiquetas en esta página.');

  });
</secuencia de comandos>

Resultado:
<div id ='resultsID'></div>
/resultado

Tenga en cuenta que la primera <secuencia de comandos> etiqueta se hace referencia a la biblioteca de jQuery real. Probablemente, estas cosas cambian con el tiempo, así que usted querrá asegurarse de que un) Utilice el nombre correcto y b) apunte a la biblioteca de documentos de SharePoint correcta.

Disfrutar de la gloria

Si lo hiciste correctamente, verá un resultado similar al siguiente:

image

Terminando

Esta no es la única forma de empezar, pero es rápido, fácil y aislado de su entorno existente de SharePoint.

</final>

Suscribirse a mi blog.

Sígueme en Twitter en http://www.twitter.com/pagalvin

Etiquetas de Technorati: ,

Etiquetas de del.icio.US: ,

2 pensamientos sobre "Fácil y rápida: Crear tu propio jQuery Sandbox para SharePoint

  1. Sujith krish

    ¿Has notado que agregar CEWP en editform.aspx rompería la página y la sección de información de versión se muestra en la interfaz de usuario? Cualquier soluciones para esto?

    Nadie ?

    Respuesta

Contesta

su dirección de correo electrónico no será publicada. Los campos necesarios están marcados *