Facile et rapide: Créer votre propre jQuery Sandbox pour SharePoint

Il s'agit d'un autre poste dans mon série en cours Comment utiliser jQuery avec SharePoint.
Si vous souhaitez en savoir plus sur jQuery, Je recommande fortement: jQuery in Action par ours Bibeault et Yehuda Katz.

Pour commencer avec jQuery dans SharePoint est étonnamment facile (Pour moi). (J'ai de sérieuses questions sur une approche de « pratiques exemplaires » pour déployer ces choses à la production, mais c'est pour un autre jour). J'ai juste commencé à jouer avec cette technologie et à cette fin, J'ai créé un environnement sandbox à utiliser. Si vous cherchez à démarrer avec jQuery, Vous trouverez cette approche utile.

1. Créer un Site vierge

Créer un site vide quelque part dans votre site et appelez-la savants comme « jQuery Sandbox ».

2. Télécharger jQuery

Vous pouvez télécharger ici la bibliothèque javascript jQuery: http://docs.jquery.com/Downloading_jQuery

Pour enregistrer sur votre bureau.

J'ai utilisé la version « minified ».

3. Créer une bibliothèque de documents SharePoint

Dans votre site de la sablière, créer une bibliothèque de documents.

4. Télécharger la bibliothèque de jQuery dans SharePoint

Accéder à la doc library, que vous venez de créer et de charger la bibliothèque jQuery.

5. Créer une liste de SharePoint personnalisée

J'ai commencé avec une liste personnalisée, parce que je veux muck sur avec les formulaires SharePoint standard. Vous pouvez également créer une page dans une bibliothèque de pages ou des pages de composants WebPart et probablement beaucoup d'autres endroits.

Ajouter des colonnes à la liste personnalisée afin que vous ayez quelque chose à exécuter jQuery contre. Mes objectifs initiaux étaient à:

  1. Masquer un champ.
  2. Assignez une valeur à un champ.

Avec cet objectif à l'esprit, J'ai ajouté deux champs texte. Au fil du temps, Je vais jouer avec des liens, images, recherches, etc..

6. Modifier la Page WebPart NewForm.aspx et ajouter un composant WebPart éditeur de contenu

C'est un peu noir magic-ish , car il s'agit d'un nouveau concept pour moi. J'ai appris sur ce à partir de Paul Grenier, SharePoint jQuery Superstar, sur son site CodePlex du projet: http://spff.codeplex.com/.

Procédez comme suit pour ajouter un CEWP à la même page qui montre NewForm.aspx pour n'importe quelle liste personnalisée:

  1. Accéder à la liste personnalisée, puis cliquez sur nouveau.
  2. Ajouter ce qui suit à l'URL: Page vue = partagée&ToolPaneView = 2

Qui va transformer votre forme d'entrée de données vanille ennuyeux de quelque chose comme ça:

image

Pour cela:

image

Ajoutez le composant WebPart éditeur de contenu à la page.

7. Écrire votre premier jQuery Code

Ouvrir cette CEWP en mode code et ajoutez ce qui suit:

image

Voici le code réel si vous voulez copier/coller:

<script type ="text/javascript"
    SRC =".. /.. /jQuery Library/jQuery-1.3.2.min.js">
</script>

<script type ="text/javascript">
  $(fonction() {

    $(« #resultsID »).html(« Il existe » + $(« a »).taille() + « un tags tags sur cette page. »);

  });
</script>

Résultat:
<div id =« resultsID »></Div>
/résultat

Notez que la première <script> balise fait référence à la bibliothèque jQuery réelles. Sans doute, ces choses changent avec le temps, donc vous voudrez vous assurer que vous un) Utilisez le nom correct et b) pointer vers la bibliothèque de documents SharePoint correcte.

Se prélasser dans la gloire

Si vous l'avez fait correctement, vous verrez un résultat semblable à la suivante:

image

Récapitulation

Ce n'est pas le seul moyen pour commencer, mais c'est rapide, simple et isolé de votre environnement SharePoint existant.

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

2 réflexions sur "Facile et rapide: Créer votre propre jQuery Sandbox pour SharePoint

  1. Sujith krish

    Avez-vous remarqué qu'ajoutant CEWP dans editform.aspx briserait la page et section d'informations de version s'affiche dans l'interface utilisateur? Aucune solution de contournement pour cette?

    N'importe qui ?

    Réponse

Laisser une réponse

Votre adresse email ne sera pas publiée. les champs requis sont indiqués *