Snabb och enkel: Skapa din egen jQuery sandlåda för SharePoint

Detta är en annan post i min pågående serie om hur du använder jQuery med SharePoint.
Om du vill veta mer om jQuery, Jag rekommenderar: jQuery i aktion av Björn Bibeault och Yehuda Katz.

Det är förvånansvärt enkelt att komma igång med jQuery i SharePoint (Till mig). (Jag har allvarliga frågor om en "best practices" metod att distribuera dessa saker till produktion, men det är för en annan dag). Jag har precis börjat spela med denna teknik och därför, Jag skapade en sandlåda miljö att använda. Om du vill komma igång med jQuery, Du kan hitta detta tillvägagångssätt användbara.

1. Skapa en tom webbplats

Skapa en tom webbplats någonstans i din webbplats och kallar det något smart som "jQuery Sandbox".

2. Hämta jQuery

Du kan hämta den jQuery javascript biblioteket här: http://docs.jquery.com/Downloading_jQuery

Spara det till på skrivbordet.

Jag har blitt användande den "minified" versionen.

3. Skapa ett SharePoint-dokumentbibliotek

I din sandlåda webbplats, skapa ett dokumentbibliotek.

4. Ladda jQuery biblioteket till SharePoint

Åt doc biblioteket du just skapade och ladda jQuery biblioteket.

5. Skapa en anpassad SharePoint-lista

Jag har börjat med en anpassad lista eftersom jag vill slänga med SharePoint standardformulären. Du kan också skapa en sida i ett bibliotek för sidor eller webbdelssidor och förmodligen en massa andra ställen.

Lägga till vissa kolumner i listan anpassad så att du har något att köra jQuery mot. Min ursprungliga mål var att:

  1. Dölja ett fält.
  2. Tilldela ett värde till ett fält.

Med detta mål i åtanke, Jag la två textfält. Över tid, Jag ska spela med länkar, bilder, uppslag, m.m..

6. Ändra webbdelssidan NewForm.aspx och lägga till webbdelen Innehållsredigeraren

Detta är en liten svart magic-ish , att det är ett nytt koncept för mig. Jag lärde mig först om detta från Paul Grenier, SharePoint jQuery Superstar, på hans CodePlex project-webbplats: http://spff.codeplex.com/.

Följ dessa steg för att lägga till en CEWP på samma sida som visar NewForm.aspx för någon anpassad lista:

  1. Få tillgång till den anpassade listan och klicka på ny.
  2. Lägga till följande URL:: Sidvisning = delade&ToolPaneView = 2

Som kommer att förvandla din tråkiga vanilj datainmatningsformulär från något sådant:

image

Till detta:

image

Lägga till webbdelen Innehållsredigeraren på sidan.

7. Skriva din första jQuery kod

Öppna det CEWP i kodvyn och lägga till följande:

image

Här är den faktiska koden om du vill klistra in:

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

<script typ ="text/javascript">
  $(funktionen() {

    $("#resultsID").HTML("Det finns" + $("a").storlek() + "en Taggar Taggar på denna sida.");

  });
</skript>

Resultat:
<DIV id ="resultsID"></div>
/resultat

Observera att först <skript> tag refererar till faktiska jQuery biblioteket. Förmodligen, dessa saker förändras över tiden, så ska du se till att du en) använda den rätt namn och b) Peka på korrekt SharePoint-dokumentbiblioteket.

Sola sig i glansen

Om du gjorde det rätt, du ser ett resultat som liknar följande:

image

Inslagning

Detta är inte det enda sättet att komma igång, men det är snabbt, lätt och isolerade från befintliga SharePoint-miljön.

</slutet>

Prenumerera på min blogg.

Följ mig på Twitter vid http://www.twitter.com/pagalvin

del.icio.us Taggar: ,

2 tankar på "Snabb och enkel: Skapa din egen jQuery sandlåda för SharePoint

  1. Linnéa krish

    Du har märkt att lägga CEWP i editform.aspx skulle bryta sidan och version informationen avsnitt visar upp i UI? Alla lösningar för detta?

    Någon ?

    Svar

Lämna svar

Din e-postadress kommer inte att publiceras. behövliga fält är markerade *