Hurtig og nem: Opret din egen jQuery sandkasse til SharePoint

Dette er en anden post i mit igangværende serie om hvordan man bruger jQuery med SharePoint.
Hvis du ønsker at lære mere om jQuery, Jeg kan varmt anbefale: jQuery i aktion af Bjørn Bibeault og Yehuda Katz.

Introduktion til jQuery i SharePoint er overraskende nemt (Til mig). (Jeg har alvorlige spørgsmål om en "bedste praksis" metode til implementering af disse ting til produktion, men det er til en anden dag). Jeg er lige begyndt at spille med denne teknologi og i forbindelse, Jeg skabt en sandkasse miljø at bruge. Hvis du søger at komme i gang med jQuery, Du kan finde denne tilgang nyttige.

1. Opret et tomt websted

Opretter et tomt websted et sted i dit websted og kalder det noget smart som "jQuery sandkasse".

2. Download jQuery

Du kan downloade jQuery javascript biblioteket fra her: http://docs.jquery.com/Downloading_jQuery

Gem det til på skrivebordet.

Jeg har blevet benytter den "minified" version.

3. Oprette et SharePoint-dokumentbibliotek

På webstedet sandkasse, oprette et dokumentbibliotek.

4. Uploade jQuery biblioteket til SharePoint

Adgang til biblioteket doc, du lige har oprettet, og uploade jQuery biblioteket.

5. Oprette en brugerdefineret SharePoint-liste

Jeg har startet med en brugerdefineret liste, fordi jeg ønsker at nusse rundt med SharePoint standardformularer. Du kan også oprette en side i et bibliotek for sider eller webdelssider og sandsynligvis en masse andre steder.

Tilføje nogle kolonner til den brugerdefinerede liste, så du har noget at køre jQuery mod. Mit oprindelige mål var at:

  1. Skjule et felt.
  2. Tildele en værdi til et felt.

Med dette mål for øje, Jeg har tilføjet to tekstfelter. Over tid, Jeg vil være at spille med links, billeder, opslag, osv.

6. Ændre siden NewForm.aspx webdel og føje webdelen Indholdsredigering

Dette er en lille sort magic-ish , i, at det er et nyt koncept til mig. Jeg første gang hørte om dette fra Paul Grenier, SharePoint jQuery Superstar, på hans CodePlex projektwebsted: http://spff.codeplex.com/.

Følg disse trin for at føje en CEWP til den samme side, der viser NewForm.aspx for enhver brugerdefineret liste:

  1. Få adgang til den brugerdefinerede liste og klik på ny.
  2. Føj følgende til URL-adressen: Sidevisning = delt&ToolPaneView = 2

Der vil omdanne din kedelige vanille dataindtastningsformular fra noget som dette:

image

Til dette:

image

Føje webdelen Indholdsredigering til siden.

7. Skriv din første jQuery kode

Lukke sig op CEWP i visningen kode og tilføje følgende:

image

Her er den faktiske kode hvis du copy/paste:

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

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

    $('#resultsID').HTML('Der er' + $(«en»).størrelse() + 'en tags tags på denne side.');

  });
</script>

Resultat:
<div id ='resultsID'></div>
/resultat

Bemærk, at først <script> Tag referencing faktiske jQuery biblioteket. Formentlig, disse ting ændrer sig over tid, så du ønsker for at sikre dig en) Brug højre og b) pege på den korrekte SharePoint-dokumentbibliotek.

Bask i herligheden

Hvis du gjorde det korrekt, du vil se et resultat svarende til følgende:

image

Indpakning

Dette er ikke den eneste måde at komme i gang, men det er hurtig, nem og isoleret fra din eksisterende SharePoint-miljø.

</slutningen>

Abonner på min blog.

Følg mig på kvidre på http://www.twitter.com/pagalvin

2 tanker om ”Hurtig og nem: Opret din egen jQuery sandkasse til SharePoint

  1. Sujith Inger

    Du har bemærket, at tilføje CEWP i editform.aspx ville bryde siden og gengivelse information sektion viser i UI? Nogen løsninger til dette?

    Nogen ?

    Svar

Efterlad et svar

Din e-mail adresse vil ikke blive offentliggjort. Krævede felter er markeret *