Kategori Arkiv: jQuery och SharePoint

Övervinna irriterande Problem med relativa URL-adresser i SharePoint Quick Launch

Lämna ett svar

Jag ville lägga till en länk till Snabbstart navigeringen häromdagen och SharePoint berättade:

image

Ren textversion av som är:

Kontrollera att Webbadressen är giltig och börjar med antingen ett giltigt tecken (ett nummertecken (#) eller snedstreck (/)) eller ett giltigt protokoll som stöds (till exempel, "http://’, ' https://’, "filen://’, "ftp://’, "mailto:’, "nyheter:’).

"Blech och pox!"Jag sa.

En lösning på detta är att använda JavaScript för att hitta en känd länk i den snabb sjösätta och åsidosätta sitt beteende.

Att testa detta, lägga till en ny länk på webbplatsen test thusly:

image

Jag använde jQuery. Att lösa det, få lite JavaScript och jQuery till sidan med hjälp av din favorit teknik och med en kodrad som denna:

 

$(dokument).redo( funktionen () {

    $("en:innehåller("Test URL ersättning")").Klicka på(funktionen () { Alert("ändrade klicka beteende!"); återvändande falskt;});

});

Och Bob är din farbror.

JQuery väljaren finner varje <en> -tagg som har "Test URL ersättning" i namnet. Du kanske vill hitta-tune som beroende på din länk och sådant.

.click(funktionen() åsidosätter vad SharePoint skulle ha gjort när användaren klickar på. Se till att du "return false" annars det kommer att göra dina grejer och sedan försöka href saken alltför, vilket är nästan säkert inte ditt mål.

Detta gjordes och test i en SharePoint online-miljö men bör fungera bra i 2010 och tidigare alltför.

</slutet>

undefinedPrenumerera på min blogg.

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

Snabb och enkel: Lösa "Ogiltig URL-Parameter” problemet med UpdateListItems i lists.asmx

1 Svar

När du arbetar med UpdateListItems via lists.asmx, Det är lätt att generera fel:

Ogiltigt URL-Parameter.

Den URL försynt innehåller ett ogiltigt kommando eller värde. Kontrollera URL: igen.

Du kan få detta fel när du glömmer att ta ID i den listan över fält att uppdatera.  Detta, som många av dessa SP webbtjänster, är lite bakvända eftersom du behöver inkludera ID i attributet ID för den <Metoden> element.  Och du inte uppdateras ID och förmodligen aldrig vill i första hand.

Denna SOAP-kuvertet fungerar:

<soapenv:Kuvert xmlns:soapenv ="http://schemas.xmlsoap.org/SOAP/Envelope/ ">
  <soapenv:Organ>                      
    <UpdateListItems xmlns ="http://schemas.microsoft.com/SharePoint/SOAP/ ">                     
      <Listnamn>{C712E2EA-54E1-47AD-9D99-1848C7773E2F}</Listnamn>                     
        <uppdateringar>                     
         <Batch VidFel ="Fortsätt">
          <Metod-ID ="1" CMD ="Update">
            <Fältet Namn ="CooperativeLock">låst!</Fältet>
            <Fältet Namn ="ID">1</Fältet>
          </Metoden>
        </Batch>                     
        </uppdateringar>                
      </UpdateListItems>             
  </soapenv:Organ>         
</soapenv:Kuvert>

Om du tar bort ID-fältreferens så får du den irriterer "Ogiltiga URL-parametern"-meddelandet.

</slutet>

undefinedPrenumerera på min blogg.

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

 

Stackars mannen cachelagring i JavaScript

1 Svar

[TL;DR version: Använd cookies för att lagra resultaten av async samtal; göra resultaten av tidigare async samtal omedelbart och sedan validera dem efter sidan.]

Jag har jobbat på SharePoint intranät-webbplats för en klient som har, bland annat, en stiliserad sekundär navigering vars menyalternativ hanteras via en vanlig gammal anpassad lista.  Tanken är att klienten får styra "sina" webbplats-menyn utan att påverka eller påverkas av den globala navigeringen som tas ut av det.

(finns det något otroligt omstörtande om att lägga till en CEWP som pekar på en HTML-fil som laddar lite CSS- och JS att i grunden förändra nästan allt om en webbplats beteende... men det är för en annan tjänst)

Koden för denna ganska enkla:

Öm plats här är att varje gång någon träffar en av webbplatsens sidor, användarens webbläsare är att nå ut till få poster i listan.  När dev är komplett och tester har visat att vara stabil och komplett, denna uppmaning är onödigt mer än 99% av tiden eftersom menyn sällan ändras.  Det har också en konstig UI påverka som är vanligt i denna sköna nya värld av hyper-ajaxy webbplatser – sidan återger och först då gör menyn.  Det är skakis och störande i min mening.  Och skakis. Så, cachelagring. 

Jag ändrade logiken thusly:

  • Leta efter cookies i webbläsaren som innehåller menyn när jag senast läste det
    • Om hittade, göra det omedelbart.  Vänta inte på att sidan laddas.  (Du måste se till att din HTML är strategiskt placerad här, men det är inte svårt att göra).
  • Vänta på att sidan laddas och göra en asynkrona anrop till ladda upp menyn objekt från en lista med resten eller lists.asmx eller vad
  • Jämför vad jag fick mot cookie
    • Om det matchar, Stanna
    • Annars, med hjälp av jQuery, dynamiskt fylla ett gäng om <Li>är i en <UL>
  • Använd CSS för att göra all formatering
  • Vinst!

Några av er kommer att säga, "hey! Det finns ingen riktig caching pågår här eftersom du läser menyn ändå varenda gång.”  Och du har rätt – jag tänker inte ge servern någon form av paus.  Men eftersom samtalet är asynkrona och händer efter sidan inledande HTML-nyttolast gör helt, Det känns"" mer lyhörd för användaren.  Menyn gör ganska mycket som sidan drar.  Om menyn händer till förändring, användaren utsätts för en skakis åter dra på menyn, men bara att en gång.

Det finns några sätt att göra detta caching effektivare och hjälpa till servern samtidigt:

  • Sätta i en regel att den "cookie cachen" är giltigt i minst 24 timmar eller några andra tidsram. Så länge det finns ingen utgångna cookie, Använd Kakans menyn ögonblicksbild och aldrig träffa servern.

Tja... det är allt som kommer att tänka på just nu :). 

Om någon har några smarta idéer här skulle jag älska att veta dem.

Och slutligen – denna teknik kan användas för andra saker.  Denna klient sidan har ett antal datadrivna saker på olika sidor, många av dem ändra förhållandevis sällan (som en gång i veckan eller en gång i månaden).  Om du riktar särskilda områden av funktioner, Du kan ge en mer lyhörd UI genom att dra innehåll från lokala cookie butik och rendering omedelbart.  Det känns snabbare att användaren även om du inte sparar servern alla cykler.  Du kan Spara server cykler genom beslut på vissa villkor och utlösare att ogiltigförklara denna lokala cookie cache.  Det är alla situationsanpassat och konstnärliga saker och verkligen den roligaste :). 

</slutet>

undefinedPrenumerera på min blogg.

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

XSLT- med jQuery prover

2 svar

Jag har gjort mycket av XSLT- och jQuery och trodde jag skulle dela några kodavsnitt som andra kan vara användbara i framtiden.

Exempel 1: Släpper ut enkelt JavaScript / jQuery i XSLT:

<XSL:mallen matchning = "något" XML:mellanslag = "bevara">

  <!– Tomt ut frågan vänligt filter dolt fält –>
  <skript type = "text/javascript">
    $(dokument).redo(funktionen(){
      $("#QueryFriendlyFilters").val("Tom");
    });
  </skript>

</XSL:mall>

Denna bit avger några JavaScript som väntar på sidan Slutför lastning (på grund av den $(dokument).redo(…)) och sedan anger värdet av ett dolt fält namnet QueryFriendlyFilters teckenvärde "Tom".

Exempel 2: Användning <XSL:om> att kontrollera "större än",  "mindre än", m.m..

<XSL:mallen matchning = "något" XML:mellanslag = "bevara">

  <div id = "fdcAllFilters">
 
    <XSL:om test="@Count>0">
      <span class = "fdcFilterLabel">Aktuella filter:</Spänn>
    </XSL:om>

    <!– mer grejer händer här. –>

</XSL:mall>

Ovanstående kodutdrag kontrollerar om ett attribut med namnet "Greve" av elementet "något" är större än noll.  XML-koden bakom detta skulle vara ungefär:”

<något Count = "5" />

Exempel 3: Iterera genom alla element, sammanblandningarna jQuery samtal.

<!– Iterera genom alla filter och visa rätt  Länkar. –>
<XSL:för varje Välj = "UserFilter">

  <en klass = "FilterHref" href = "javascript:mySubmitPage("RemoveUserFilter",'{@ ID}’)">[X]</en>

  <span class = "fdcFilterLabel"><XSL:värde-av select="@FilterValue"/></Spänn>

  <skript type = "text/javascript">

    $(dokument).redo(funktionen(){
        <XSL:texten><![CDATA[$("#QueryFriendlyFilters").val( ($("#QueryFriendlyFilters").val() + " ]]></XSL:texten>\"<XSL:värde-av select="@FilterValue"/>\"<XSL:texten><![CDATA["));]]></XSL:texten>
    });

  </skript>

</XSL:för varje>

Ovanstående kodutdrag är den mest komplicerade och det kan finnas enklare sätt att göra det.

XML-koden bakom detta ser ut ungefär så här:

<UserFilter ID = "123" FilterValue = "xyzzy" />

Detta utdrag iterera genom <UserFilter> noder. 

Det första avger en fästpunkt etikett som när du klickar på åberopar en JavaScript-funktion som redan finns på sidan, "mySubmitPage" och skickar värdet av ett attribut på det <UserFilter> noden heter "ID". 

Det avger sedan några jQuery som väntar på sidan om du vill läsa in.  Att jQuery uppdaterar ett dolt fält med namnet "QueryFriendlyFilters" genom att lägga till värdet för attributet FilterValue.  Observera alla crazy <XSL:texten> och <![CDATA[ … ]]> grejer.

Det är det, hoppas det hjälper!

</slutet>

Prenumerera på min blogg.

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

Lists.asmx, GetListItems och mappar

6 svar

Jag gjorde lite forskning för någon dag runt webbtjänsten list.asmx som ingår i SharePoint 2010 (och tidigare).  Hon kunde få listobjekten i rotmappen (inklusive namnen på undermappar), men det gick inte att hämta objekt i undermappar.  Jag gjorde några titta på Internet och det är en förvånansvärt gemensamma fråga.  Ännu, Jag kunde inte få ett bra svar på den enkla frågan, "om jag vet att mappen, Hur skaffar jag objekten i mappen?”  Att vara ärlig, Jag försöker inte allt hårt eftersom jag har ville bild man ut på min egen ett tag Leende.

Att ställa in här, Jag har skapat en webbplats med namnet "Blogga Scenarios" och en anpassad lista med namnet "Anpassad lista med Sub mappar".  Mappar med följande namn skapas:

  • År 2005
  • År 2006
  • År 2007

Jag lade till ett par artiklar till mappen "År 2006".  Det är vad det ser ut:

image

Min vän inte skriva C#-kod utan snarare använda Java, SOAP-kuvertet var alltså det hon verkligen behövs.  Att få som, Jag skrev en bit av jQuery och sedan används Spelman för att få http-samtalet.

Här är den relevanta jQuery (Jag kopierade koden anges nedan om du vill kopiera och klistra in):

image

De första nyckeln är omfatta både en <queryOptions> och <QueryOptions> nod.  Den andra nyckeln är att den <Mappen> noden är en URL-adress som klienten har tillgång.

Det kan finnas andra sätt att få detta, men detta fungerat bra för mig när du använder jQuery.

Här är SOAP-kuvertet för ovanstående:

<soapenv:Kuvert xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’>                
  <soapenv:Organ>
    <GetListItems xmlns =’http://schemas.microsoft.com/SharePoint/SOAP/’>
      <Listnamn>Anpassad lista med undermappar</Listnamn>
      <viewFields>  
        <ViewFields>
          <FieldRef namn = "titel’ />
          <FieldRef namn ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Mappen>http://demoserver1/Blogging Scenarier/listor/Custom lista med Sub mappar/år 2006</Mappen>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
  </soapenv:Organ>
</soapenv:Kuvert>

En hel del exempel och diskussion kring detta ledde mig att tro att allt jag behöver var <QueryOptions> och ange ett mappnamn.  För mig, Jag behöver både radbryta det inuti <queryOptions> samt ange en fullständig URL för den <Mappen> nod.

Här är jQuery AJAX installationsprogrammet:

$(dokument).redo(funktionen() {
       var soapEnv =
           "<soapenv:Kuvert xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’> \
               <soapenv:Organ> \
                    <GetListItems xmlns =’http://schemas.microsoft.com/SharePoint/SOAP/’> \
                       <Listnamn>Anpassad lista med undermappar</Listnamn> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef namn = "titel’ /> \
                              <FieldRef namn ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Mappen>http://demoserver1/Blogging Scenarier/listor/Custom lista med Sub mappar/år 2006</Mappen> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Organ> \
           </soapenv:Kuvert>";

</slutet>

Prenumerera på min blogg.

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

Lists.asmx, GetList och "värde kan inte vara null”

1 Svar

Jag upptäckte idag att GetList() metod i lists.asmx webbtjänsten har att kallas mycket noggrant eller den är benägna att kasta en mystisk "Värdet får inte vara null" undantag (och som förutsatt att du kan komma förbi ännu värre allmänna felmeddelande, "-Undantag av typ" Microsoft.SharePoint.SoapServer.SoapServerException’ kastades.")  Särskilt, Jag tyckte att du inte kan tillhandahålla någon form av prefixet på metoden GetList.  Följande jQuery utdrag illustrerar punkten:

image

Om du gör det, webbtjänsten svarar med "Värdet får inte vara null" visas enligt detta Spelman-enligt HTTP avskrift:

<?XML-version = "1.0" Encoding = "utf-8"?>
  <tvål:Kuvert
     xmlns:SOAP ="http://schemas.xmlsoap.org/soap/envelope/"    
     xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance”
     xmlns:XSD ="http://www.w3.org/2001/XMLSchema">

  <tvål:Organ>
    <tvål:Fel>
      <faultcode>tvål:Servern</faultcode>
      <faultstring>
        -Undantag av typ "Microsoft.SharePoint.SoapServer.SoapServerException’ kastades.
      </faultstring>
      <detalj>
        <ErrorString xmlns ="http://schemas.microsoft.com/SharePoint/SOAP/">
Värdet får inte vara null.
        </ErrorString>
      </detalj>
    </tvål:Fel>
  </tvål:Organ>
</tvål:Kuvert>

Självklart, du skulle inte förmodligen till att "s0" prefix på egen, men vissa verktyg är benägna att göra det. (som Eclipse).

Detta är desto mer förvirrande / frustrerande eftersom andra metoder tolerera prefix.  Till exempel, den GetListCollection metoden hänsyn inte till om det är förutfastställt, även med nonsens prefix som "xyzzy":

image

Detta "värdet inte får vara null" verkar ganska vanligt med lists.asmx så förhoppningsvis detta kommer att hjälpa någon i framtiden.

</slutet>

Prenumerera på min blogg.

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

Oändligt kapsla <div> Märken och jQuery

Lämna ett svar

Detta verkar vara sådan en oddball-avsnittet, Jag är inte säker på att det verkligen är värt att blogga om, men det har aldrig hindrat mig innan, Så här går vi Leende

Jag arbetar med ett projekt där jag dra vissa data från en sökning, förpackning till ett XML-meddelande och sedan att XML till slut förvandlas till HTML via XSLT.  Det finns mycket av jQuery, en bit som implementerar tabbing funktionalitet.  När du klickar på en flik (Verkligen, en <div>), jQuery anropar .hide() och .show() på olika Divar (första sidan laddar hämtningar allt innehåll så det finns ingen postbacks i detta fall).

Ett gäng timmar sedan, fliken växling logik började bete sig underligt och det skulle inte visar en av Mina flikar.  Jag slutligen spårade det till faktum att internet explorer (minst) trodde att det <div> Märken som kapslade långt, mycket djupare än avsett.Verktygsfältet utvecklare skulle visa:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <— Slutligen visar det lades hela vägen ner här!

Så, om jag gjorde en $("# Tab1Content").Dölj(), Jag döljer också Tab2 och jag kunde aldrig visa Tab2 om jag inte visar också på Tab1.  Jag kopierade och klistrade in koden till visual studio och det visade alla den div beklädnad upp snyggt, precis som de ska göra, Titta här:

-<div id = "Tab1Content">
  +<div>
  +<div>
-<div id = "Tab2Content">
  +<div>
  +<div>

Jag slog mitt huvud mot väggen ett tag och märkte att koden i den faktiska HTML genererar mycket tom <div> Märken, liksom:

<organ>

  <div id = "Tab1Content">

    <div id = "row1" />
    <div id = "row2" />

  </div>

  <div id = "Tab2Content">

    <div id = "row1" />
    <div id = "row2" />

  </div>

</organ>

(Ovanstående är waaaaaaaaaaaay banaliseras.  Tom div-taggarna är helt giltiga. Några av mina <div> Märken var fulla av innehåll, men många fler var inte.  Jag kom till insikten att min <XSL:för varje> direktiven avger i kortform div-taggar när xsl:för varje inte "hitta några data.  Jag tvingas en HTML-kommentar till utdata, som visas:

image

 

När jag gjorde det, alla div uppradade snyggt och min fliken växling började arbeta.

Som alltid, Jag hoppas att detta hjälper någon i en nypa.

</slutet>

Prenumerera på min blogg.

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

Ännu mer jQuery–Ändra storlek på en bild-exempel

Lämna ett svar

Jag ärvt en webbdel från en gammal klienttillverkaren och har ett imageproblem storlek.  Bilderna ska vara 60×50 men av någon udda anledning, den ursprungliga leverantören tvingade dem till 42×42, så det ser ut squashed:

 

Bra bild

Dålig bild

Här är markering (något förenklat):

<tabell klass = "extended-outlook">
  <thead>
    <TR>
      <TH  bredd = 100′>3 Tisdag</TH>
    </TR>
  </thead>

  <tbody>
    <TR klass = "prognos">
      <TD bredd = "100′>
        <UL>
          <Li klass = 'hög'>Hög: 72&deg;F</Li>
          <Li klass = "låg">Låg: 44&deg;F</Li>
          <Li klass = "villkor">Soliga
            <img src =’http://deskwx.WeatherBug.com/images/Forecast/icons/Localized/60×50/en/trans/cond007.PNG’ Bredd ='42’ höjd ='42’ ALT =” />
          </Li>
        </UL>
      </TD>
    </TR>

  </tbody>

</tabell>

Du ska notera att även om den sökvägen till själva bilden visar korrekt (60×50) den ursprungliga leverantören tvingade det 42×42.  Varför?  Galen.

Hur som helst, Jag ville ha en snabb och enkel lösning på denna fråga och jag vände sig till jQuery.  Tricket var att hitta alla de tillämpliga <IMG> taggar.  Ville inte dölja med andra img-taggar (som finns det många).  Denna bit av jQuery gjorde tricket:

<skript type = "text/javascript" src ="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.5/jQuery.min.js"></skript>

<skript type = "text/javascript">
     $(dokument).redo(funktionen () {

         $("li.condition > IMG ").varje(funktionen (index, objekt)
            {
             $(objekt).CSS("bredd", "60"); 
             $(objekt).CSS("höjd", "50");
            });
     }); // Om dokumentet belastning
</skript>

Den biten av kod finner insamling <Li> Märken vars klass är "villkor" och <IMG> barn.  Det går sedan igenom allt detta.  Arbetade som en charm.

Jag skulle förmodligen effektivisera det, men jag aldrig var en slags unix kille som löst π till 18 siffror precision med hjälp av sed och awk och jag är inte sådan om jQuery guy antingen Leende.

</slutet>

Prenumerera på min blogg.

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

Genomföra ett globalt System för popup-anmälan

2 svar

Jag skrev upp en artikel för www.SharePoint.briefing.com rätt"Genomföra ett globalt System för popup-anmälan.”  Den här funktionen implementerades för ett community college att kommunicera skolan stängningarna beror på snö och så vidare. 

Den använder en anpassad lista, i rutan SharePoint web services och några jQuery att göra arbetet.

Här är en teaser:

image

Läs hela saken här: http://www.sharepointbriefing.com/features/article.php/3918471/Implement-a-Global-Pop-up-Notification-System.htm

</slutet>

Prenumerera på min blogg.

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

Ta kontroll över din OK och Avbryt knappar

3 svar

Jag skrev denna artikel ett tag tillbaka, men ser ut som jag inte länka till den från min blogg på gång, Så här går:

image

I denna artikel beskrivs hur du tvingar newform.aspx att omdirigera till en sida när användaren klickar på OK och en annan sida när hon klickar på Avbryt.

</slutet>

Prenumerera på min blogg.

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