Snel en eenvoudig: Maak uw eigen jQuery Sandbox voor SharePoint

Dit is een andere post in mijn aan de gang zijnde reeks over hoe te gebruiken jQuery met SharePoint.
Als u wilt meer weten over jQuery, I recommend highly: jQuery in actie door Bear Bibeault en Yehuda Katz.

Aan de slag met jQuery in SharePoint is verrassend eenvoudig (voor mij). (Ik heb ernstige vragen over een "best practices"-benadering voor het implementeren van deze dingen tot productie, maar dat is voor een andere dag). Ik heb net begon te spelen met deze technologie en te dien einde, Ik heb gemaakt een sandbox-omgeving te gebruiken. Als u op zoek bent om te beginnen met jQuery, u kunt deze aanpak nuttig vinden.

1. Een lege Site maken

Maak een lege site ergens in uw site en noem het iets slim als "jQuery Sandbox".

2. JQuery downloaden

U kunt de jQuery javascript library downloaden vanaf hier: http://docs.jquery.com/Downloading_jQuery

Sla dat op uw bureaublad.

Mij zijn geweest using de "minified" versie.

3. Een SharePoint-documentbibliotheek maken

In uw sandbox-site, een documentbibliotheek maken.

4. De jQuery bibliotheek uploaden naar SharePoint

Toegang tot de documentbibliotheek die u zojuist hebt gemaakt en het uploaden van de bibliotheek jQuery.

5. Een aangepaste SharePoint-lijst maken

Ik ben begonnen met een aangepaste lijst, omdat ik wil muck over met standaard SharePoint-formulieren. U kunt ook een pagina in een bibliotheek van pagina's of pagina's met webonderdelen en waarschijnlijk een heleboel andere plaatsen.

Sommige kolommen toevoegen aan de aangepaste lijst zodat u iets om uit te voeren jQuery tegen hebben. Mijn oorspronkelijke doelstellingen moesten:

  1. Een veld verbergen.
  2. Een waarde aan een veld toewijzen.

Met dat doel voor ogen, Ik voegde twee tekstvelden. Na verloop van tijd, Ik zal spelen met links, afbeeldingen, zoekacties, etc.

6. De pagina NewForm.aspx Web te wijzigen en een webonderdeel Inhoudseditor toevoegen

Dit is een kleine zwarte magic-ish , in die zin dat het een nieuw concept aan me. Ik voor het eerst geleerd over dit van Paul Grenier, SharePoint jQuery Superstar, op zijn CodePlex projectsite: http://spff.codeplex.com/.

Volg deze stappen om een CEWP aan de zelfde pagina dat NewForm.aspx voor elke aangepaste lijst toont toevoegen:

  1. Toegang tot de aangepaste lijst en klik op nieuw.
  2. Het volgende aan de URL toevoegen: Paginaweergaves = gedeeld&ToolPaneView = 2

Dat zal transformeren uw saaie vanille formulier voor gegevensinvoer van iets als dit:

image

Daartoe:

image

Het webonderdeel Inhoudseditor toevoegen aan de pagina.

7. Schrijven van uw eerste jQuery Code

Open te stellen dat CEWP in de codeweergave en voeg het volgende toe:

image

Hier is de werkelijke code als u wilt kopiëren en plakken:

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

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

    $('#resultsID').HTML("Er zijn" + $('a').grootte() + 'een tags tags op deze pagina.');

  });
</script>

Resultaat:
<div id ='resultsID'></div>
/resultaat

Merk op dat de eerste <script> Label referencement de werkelijke jQuery bibliotheek. Vermoedelijk, deze dingen veranderen in de tijd, dus u zult willen ervoor zorgen u een) Gebruik de juiste naam en b) verwijzen naar de juiste SharePoint-documentbibliotheek.

Koesteren in de glorie

Als u het goed hebt gedaan, ziet u een resultaat vergelijkbaar met de volgende:

image

Het verpakken omhoog

Dit is niet de enige manier om te beginnen, maar het is snel, gemakkelijk en geïsoleerde van uw bestaande SharePoint-omgeving.

</einde>

Abonneren op mijn blog.

Volg mij op Twitter op http://www.twitter.com/pagalvin

2 gedachten over "Snel en eenvoudig: Maak uw eigen jQuery Sandbox voor SharePoint

  1. sujith krish

    Je heb gemerkt dat de pagina toe te voegen CEWP in editform.aspx breken zou en de sectie van de informatie van de versie wordt weergegeven in de Gebruikersinterface? Ieder oplossingen hiervoor?

    Iedereen ?

    Antwoord

Laat een antwoord achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *