Kategoriarkiv: jQuery og SharePoint

Overvinne irriterende Problem med Relative URL-adresser i Hurtigstart på SharePoint

Legg igjen et svar

Jeg ønsket å legge en link til hurtigstartlinjen navigasjon forleden og SharePoint fortalte:

image

Ren tekst-versjon som er:

Kontroller at URL-adressen er gyldig og begynner med enten et gyldig tegn (et nummertegn (#) eller skråstrek (/)) eller en gyldig støttet protokoll (for eksempel, ' http://’, ' https://’, ' fil://’, ' ftp://’, ' mailto:’, ' nyheter:’).

"Blech og pox!"Jeg sa.

En løsning på dette er å bruke JavaScript til å finne en kjent kobling i Hurtigstart og overstyre virkemåten.

Å teste dette, legge til en ny kobling til webområdet test thusly:

image

Jeg brukte jQuery. Du kan løse det., få noen JavaScript og jQuery på siden ved å bruke ditt favorittmetoden og med en linje med kode som dette:

 

$(dokumentet).klar( funksjonen () {

    $("en:inneholder("Test URL erstatning")").Klikk(funksjonen () { varsel("endrede Klikk virkemåte!"); avkastning USANN;});

});

Og Bob er din onkel.

JQuery velgeren finner alle <en> kode som har "Test URL erstatning" i navnet. Du kan finne-låt som avhengig av koblingen og slike.

Klikk(funksjonen() overstyrer hva SharePoint ville ha gjort når brukeren klikker. Sikre du "return false" eller ellers det vil gjøre ting og deretter prøve på href ting også, som er nesten helt sikkert ikke målet ditt.

Dette ble gjort og test i en SharePoint online-miljøet, men skal fungere godt i 2010 og tidligere for.

</slutten>

undefinedAbonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Rask og enkel: Løse "Ugyldig URL-Parameter” problemet med UpdateListItems i lists.asmx

1 Svar

Når du arbeider med UpdateListItems via lists.asmx, Det er lett å generere feilen:

Ugyldig URL-Parameter.

URL-adressen inneholder en ugyldig kommando eller verdi. Kontroller URL-adressen på nytt.

Du kan få denne feilmeldingen når du glemmer å inkludere ID i den listen skal oppdateres.  Dette, som mange av disse SP webtjenester, er litt counterintuitive siden du trenger å inkludere ID i ID-attributtet for den <Metoden> elementet.  Og du ikke oppdatert ID og trolig aldri vil i første omgang.

Denne SOAP-konvolutten fungerer:

<soapenv:Konvolutt xmlns:soapenv =' http://schemas.xmlsoap.org/SOAP/ENVELOPE/'>
  <soapenv:Kroppen>                      
    <UpdateListItems xmlns =' http://schemas.Microsoft.com/SharePoint/SOAP/'>                     
      <listName>{C712E2EA-54E1-47AD-9D99-1848C7773E2F}</listName>                     
        <oppdateringer>                     
         <Batch OnError ="Fortsett">
          <Metoden ID ="1" CMD ="Oppdatering">
            <Navnet på feltet ="CooperativeLock">låst!</Feltet>
            <Navnet på feltet ="ID">1</Feltet>
          </Metoden>
        </Satsvis>                     
        </oppdateringer>                
      </UpdateListItems>             
  </soapenv:Kroppen>         
</soapenv:Konvolutt>

Hvis du fjerner ut ID feltreferansen så får du det sjenerende "Ugyldige webadresseparameter" beskjed.

</slutten>

undefinedAbonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

 

Fattig mann er hurtigbufring i JavaScript

1 Svar

[TL;DR versjon: Bruk informasjonskapsler til å lagre resultatene av asynkrone samtaler; gjengi resultatet av siste asynkrone samtaler umiddelbart og deretter validere dem etter sideinnlastingen.]

Jeg har jobbet på SharePoint intranettområde for en klient som har, blant annet, en stilisert sekundær navigasjon som menyalternativer administreres via en vanlig gamle egendefinert liste.  Tanken er at klienten får Kontrollmenyen "sine" området uten å påvirke eller blir påvirket av global navigasjon satt ut av det.

(Det er noe utrolig samfunnsnedbrytende om å legge til en CEWP som peker til en HTML-fil som laster noen CSS og JS fundamentalt endre nesten alt om nettstedets oppførsel... men det er for en annen post)

Koden for denne pen enkel:

Sår spot her er at hver gang noen treff en av områdets sider, brukerens web-leser er nå for å få elementer fra listen.  Når dev er fullført og testing har vist ting å være stabil og fullføre, Denne samtalen er unødvendig mer enn 99% tiden siden menyen sjelden endres.  Det har også en merkelig UI innvirkning som er vanlig i denne brave new world av hyper-ajaxy nettsteder-siden gjør og deretter gjengir menyen.  Det er nervøs og forstyrrende i min mening.  Og nervøs. Så, hurtigbufring. 

Jeg endret logikken thusly:

  • Se etter en informasjonskapsel i nettleseren som inneholder menyen som jeg sist leste det
    • Hvis funnet, gjøre det umiddelbart.  Ikke vent til siden å slutten lessing.  (Du må kontrollere at HTML er strategisk plassert her, men det er ikke vanskelig å gjøre).
  • Vent til siden å slutten lessing og lage en asynkron behøve laste opp elementer fra en liste med resten eller lists.asmx eller hva
  • Sammenligne hva jeg fikk mot cookie
    • Samsvarer med, stopp
    • Ellers, hjelp jQuery, dynamisk fylle en haug hvis <Li>er i en <UL>
  • Bruk CSS til all formatering
  • Fortjeneste!

Noen av dere skal si, "Hei! Det er ingen reell skjulested vei her siden du leser menyen allikevel hver eneste gang.”  Og du har rett-jeg gi ikke serveren alle slags pause.  Men fordi samtalen er asynkrone og skjer etter siden første HTML nyttelast gjengir fullt, det føles"" mer mottagelig for brukeren.  Menyen gjør ganske mye som siden trekker.  Hvis menyen skjer endringen, brukeren er utsatt for en nervøs re-trekning av menyen, men den ene gangen.

Det er noen måter å gjøre dette hurtigbufring mer effektiv og hjelpe til serveren samtidig:

  • Innlegge en regel at "cookie cache" er gyldig i minst 24 timer eller noen andre tidsramme. Så lenge det er ingen opphøre koke, Bruk informasjonskapselen menyen bilde og aldri truffet serveren.

Vel... det er alt som kommer til hjernen akkurat nå :). 

Hvis noen har noen smarte ideer her ville jeg elske å kjenne dem..

Og til slutt-denne teknikken kan brukes til andre ting.  Denne klienten siden har en rekke data-drevet ting på forskjellige sider, mange av dem endre relativt sjelden (som en gang i uken eller en gang i måneden).  Hvis du målrette bestemte områder av funksjonalitet, Du kan gi en mer responsiv UI ved å trekke innhold fra lokale cookie store og gjengivelse umiddelbart.  Det føles raskere til brukeren selv om du ikke lagrer serveren noen sykluser.  Du kan Lagre server sykluser med å beslutter på noen betingelser og utløsere å oppheve denne lokale cookie cache.  Det er alle situasjonsforståelse og fancy ting og virkelig det morsomste :). 

</slutten>

undefinedAbonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

XSLT og jQuery gratisprøver

2 svar

Jeg har gjort mye av XSLT og jQuery og tenkte jeg ville dele noen utdrag som andre vil finne nyttig i fremtiden.

Eksempel 1: Avgi enkel JavaScript / jQuery i XSLT:

<XSL:malen kamp = "noe" XML:Space = "bevare">

  <!– Viske ut det skjulte feltet for spørring-vennlig filtre –>
  <script type = "text/javascript">
    $(dokumentet).klar(funksjonen(){
      $("#QueryFriendlyFilters").Val("tom");
    });
  </skriptet>

</XSL:mal>

At bit avgir noen JavaScript som venter på side å slutten lessing (grunn av den $(dokumentet).klar(…)) og deretter Sett verdien for et skjult felt kalt QueryFriendlyFilters til den litterale verdien "tom".

Eksempel 2: Bruk <XSL:Hvis> å sjekke "større enn",  "mindre enn", osv..

<XSL:malen kamp = "noe" XML:Space = "bevare">

  <div id = "fdcAllFilters">
 
    <XSL:Hvis test="@Count>0">
      <span class = "fdcFilterLabel">Gjeldende filtre:</utstrekningen>
    </XSL:Hvis>

    <!– flere ting som skjer her. –>

</XSL:mal>

Ovenfor snippeten kontrollerer Hvis et attributt kalt "Antall" av "noe"-elementet er større enn null.  XML bak dette ville være noe sånt som:”

<noe Count = "5" />

Eksempel 3: Gå gjennom alle elementer, Interspersing jQuery samtaler.

<!– Gå gjennom alle filtre og vise riktig  koblinger. –>
<XSL:for each Velg = "UserFilter">

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

  <span class = "fdcFilterLabel"><XSL:verdien av select="@FilterValue"/></utstrekningen>

  <script type = "text/javascript">

    $(dokumentet).klar(funksjonen(){
        <XSL:tekst><![CDATA[$("#QueryFriendlyFilters").Val( ($("#QueryFriendlyFilters").Val() + " ]]></XSL:tekst>\"<XSL:verdien av select="@FilterValue"/>\"<XSL:tekst><![CDATA["));]]></XSL:tekst>
    });

  </skriptet>

</XSL:for each>

Ovenfor snippeten er den mest kompliserte, og det kan være enklere måter å gjøre det.

XML bak dette ser omtrent slik ut:

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

Denne tekstutdrag veksle <UserFilter> noder. 

Den avgir først et anker kode som når klikket påkaller en JavaScript-funksjon som allerede finnes på siden, "mySubmitPage" og sender verdien av et attributt på den <UserFilter> kalt "ID"-noden. 

Den deretter avgir noen jQuery som venter på siden for å laste inn.  At jQuery oppdaterer et skjult felt som heter "QueryFriendlyFilters" ved å legge til verdien av attributtet FilterValue.  Legg merke til alle sprø <XSL:tekst> og <![CDATA[ … ]]> ting.

Det er det, håpe det hjelper!

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Lists.asmx, GetListItems og -mapper

6 svar

Jeg gjorde noen undersøkelser for noen i dag rundt list.asmx-webtjeneste som en del av SharePoint 2010 (og tidligere).  Hun var i stand til å få listeelementene i rotmappen (deriblant med navn på undermapper), men kunne ikke få elementer i undermapper.  Jeg gjorde noen ser på internets, og det er en overraskende vanlige spørsmål.  Ennå, Jeg kunne ikke få en bra svar pσ enkelt spørsmål, "Hvis jeg vet mappen, Hvordan får jeg elementene i mappen?”  For å være ærlig, Jeg gjorde ikke prøve alle at hardt siden jeg har ønsket å figur dette en ut på min egen for en stund Smil.

Sette opp dette, Jeg laget et nettsted som heter "Blogging scenarier" og en egendefinert liste som heter "Egendefinert liste med Sub mapper".  Jeg deretter opprettet mapper med navnet:

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

Jeg har lagt noen elementer til mappen "Year 2006".  Dette er hvordan det ser ut:

image

Min venn er ikke skrive C#-kode, men heller benytter Java, SOAP-konvolutten var så hva hun virkelig trengte.  Å få det, Jeg skrev en bit av jQuery og deretter brukt fiddler for å få faktiske HTTP samtale.

Her er den aktuelle jQuery (Jeg kopierte koden ned nedenfor hvis du vil kopiere/lime):

image

De første nøkkelen er å inkludere både en <queryOptions> og <QueryOptions> noden.  Den andre nøkkelen er at den <Mappen> noden er en URL-adresse som klienten har tilgang.

Det kan være andre måter å få dette, men dette jobbet godt for meg da ved hjelp jQuery.

Her er SOAP-konvolutten for det over:

<soapenv:Konvolutt xmlns:soapenv =’http://schemas.xmlsoap.org/SOAP/Envelope/’>                
  <soapenv:Kroppen>
    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’>
      <listName>Egendefinert liste med Sub-mapper</listName>
      <viewFields>  
        <ViewFields>
          <FieldRef navn =' tittel’ />
          <FieldRef navn ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Mappen>http://demoserver1/Blogging Scenarier, lister, egendefinert liste med Sub-mapper/år 2006</Mappen>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
  </soapenv:Kroppen>
</soapenv:Konvolutt>

Mange eksempler og diskusjon rundt dette førte meg til å tro at alt jeg trenger var <QueryOptions> og angi et mappenavn.  For meg, Jeg trenger både brytes det i <queryOptions> i tillegg til å angi et fullstendig kvalifisert for den <Mappen> noden.

Her er oppsettet jQuery AJAX:

$(dokumentet).klar(funksjonen() {
       var soapEnv =
           "<soapenv:Konvolutt xmlns:soapenv =’http://schemas.xmlsoap.org/SOAP/Envelope/’> \
               <soapenv:Kroppen> \
                    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’> \
                       <listName>Egendefinert liste med Sub-mapper</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef navn =' tittel’ /> \
                              <FieldRef navn ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Mappen>http://demoserver1/Blogging Scenarier, lister, egendefinert liste med Sub-mapper/år 2006</Mappen> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Kroppen> \
           </soapenv:Konvolutt>";

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Lists.asmx, GetList og "verdi kan ikke være null”

1 Svar

Jeg oppdaget i dag som GetList() metoden i lists.asmx webtjenesten har å bli kalt veldig nøye, eller det er utsatt for å kaste en mystisk "Verdi kan ikke være null"-unntak (og som er forutsatt du kan komme forbi enda verre generisk feilmelding, "Unntak av typen ' Microsoft.SharePoint.SoapServer.SoapServerException’ ble kastet.")  Spesielt, Jeg fant ut at du ikke kan tilby noen form for prefiks i GetList-metoden.  Følgende jQuery snippeten illustrerer poenget:

image

Hvis du gjøre det, Webtjenesten svarer med "Verdi kan ikke være null" i henhold til dette Fiddler-gitt HTTP transkripsjon:

<?XML version = "1.0" Encoding = "utf-8"?>
  <såpe:Konvolutt
     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">

  <såpe:Kroppen>
    <såpe:Feilårsak>
      <faultcode>såpe:Server</faultcode>
      <faultString:>
        Unntak av typen ' Microsoft.SharePoint.SoapServer.SoapServerException’ ble kastet.
      </faultString:>
      <detalj>
        <xmlns errorString ="http://schemas.Microsoft.com/SharePoint/SOAP/">
Verdien kan ikke være null.
        </errorString>
      </detalj>
    </såpe:Feilårsak>
  </såpe:Kroppen>
</såpe:Konvolutt>

selvfølgelig, du vil ikke sannsynligvis legge prefikset "s0" på egen hånd, men noen verktøy er tilbøyelig til å gjøre det. (som Eclipse).

Dette er alle mer forvirrende / frustrerende fordi andre metoder tolerere prefikser.  For eksempel, den GetListCollection metoden oppmerksom ikke på hvis det er blitt prefikset, selv med tull prefikser som "xyzzy":

image

Dette "verdi ikke kan være null" synes ganske vanlig med lists.asmx så forhåpentligvis vil dette hjelpe noen ut i fremtiden.

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Uendelige fuglefjell <div> Koder og jQuery

Legg igjen et svar

Dette virker som en så underlig tema, Jeg er ikke sikker på at det er virkelig verdt blogging om, men som har aldri stoppet meg før, så her gå vi Smil

Jeg arbeider på et prosjekt der jeg trekke noen data fra et søk, emballasje det i en XML-meldingen og deretter at XML er til slutt transformert til HTML via XSLT.  Det er mye av jQuery involvert, en bit av som implementerer noen tabulatornumre funksjonalitet.  Når du klikker på en kategori (virkelig, en <div>), jQuery påkaller .hide() og .show() på ulike divs (Startside belastningen laster ned alt innholdet slik at det er ingen postbacks i dette tilfellet).

En haug med timer siden, kategorien bytte logikk begynte å virke uregelmessig og det vil ikke vise en av Mine fliker.  Jeg til slutt spores det ned til faktum at internet explorer (minst) tenkte at den <div> koder som er nestet langt, langt dypere enn beregnet.Ville vise utviklerverktøylinjen:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           …………………………
                   </div>  <-til slutt viser det ble lukket hele veien ned her!

Så, Hvis jeg gjorde en $("# Tab1Content").Skjul(), Jeg ville også skjule Tab2 og jeg kunne aldri vise Tab2 hvis ikke jeg også vise Tab1.  Jeg kopierte og limte inn koden i visual studio og det viste alle div's lining opp pent, akkurat som de skulle gjøre, ser ut som dette:

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

Jeg slo hodet mot veggen for en stund, og la merke til at i den faktiske HTML koden var genererer mye er tom <div> Tags, som:

<kroppen>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</kroppen>

(Dette er waaaaaaaaaaaay oversimplified.  Tom div-koder er helt gyldig. Noen av mine <div> koder var fulle av innhold, men mange flere ble ikke.  Jeg kom til realisering som min <XSL:for each> direktiver var emitting kort-skjemaet div koder når xsl:for each gjorde ikke ' finne noen data.  Jeg tvunget en HTML-kommentar i utdataene, som vist:

image

 

Etter at jeg gjorde det, alle div lined opp pent og min kategorien bytte begynte å arbeide.

Som alltid, Jeg håper dette hjelper noen i en klemme.

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Ennå mer jQuery–Endre størrelsen på et bilde-eksempel

Legg igjen et svar

Jeg arvet en webdel fra en klient gamle leverandør, og den har en problem med bilde-filstørrelsen.  Bildene skal være 60×50 men for noen merkelig grunn, den originale forhandleren tvunget dem i 42×42, slik at de ser squashed:

 

God bilde

Dårlig bilde

Her er markup (noe forenklet):

<tabellen klasse = 'utvidet outlook'>
  <thead>
    <tr>
      <th  Bredde ='100′>3 Tirsdag</th>
    </tr>
  </thead>

  <tbody>
    <tr-klassen = 'Vær'>
      <TD bredde ='100′>
        <UL>
          <Li class = 'high'>Høy: 72&deg;F</Li>
          <Li class = "lav">Lav: 44&deg;F</Li>
          <Li class = "tilstand">Sunny
            <img src =’http://deskwx.WeatherBug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.PNG’ Bredde ='42’ høyde ='42’ alt =” />
          </Li>
        </UL>
      </TD>
    </tr>

  </tbody>

</tabell>

Vil du merke at selv om den banen til bildet selv viser den riktige dimensjonen (60×50) den originale forhandleren tvang det i 42×42.  hvorfor?  gal.

Allikevel, Jeg ønsket en rask og enkel løsning på dette problemet, og jeg slått til jQuery.  Trikset var å finne alle de riktige <IMG> koder.  Jeg ønsker ikke å muck med andre img-koder (som er det mange).  Denne bit av jQuery did kunsten:

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

<script type = "text/javascript">
     $(dokumentet).klar(funksjonen () {

         $(' li.condition > IMG').hver(funksjonen (index, element)
            {
             $(element).CSS("bredden", "60"); 
             $(element).CSS("høyde", "50");
            });
     }); // på dokument-Last
</skriptet>

At litt av koden finner samlingen <Li> koder som har klasse er "tilstand" og <IMG> barn.  Det går deretter gjennom alt dette.  Arbeidet like en ynde.

Jeg kunne sannsynligvis strømlinjeforme it, men jeg var aldri en type unix-fyr som løst π til 18 sifre samplepresisjon sed og awk og jeg er ikke det slag Hvis jQuery fyren enten Smil.

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Implementere en Global popup varslingssystem

2 svar

Jeg skrev en artikkel for www.SharePoint.Briefing.com med tittelen"Implementere en Global popup varslingssystem.”  Denne funksjonen ble implementert for en community college kommunisere skolen nedleggelser på grunn av snø og så videre. 

Den bruker en egendefinert liste, esken SharePoint web services og noen jQuery å gjøre arbeidet.

Her er en teaser:

image

Lese hele her: http://www.sharepointbriefing.com/features/article.php/3918471/Implement-a-Global-Pop-up-Notification-System.htm

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin

Ta kontroll over din OK og Avbryt-knappene

3 svar

Jeg skrev Denne artikkelen en stund tilbake, men ser ut som jeg ikke koble til den fra bloggen min på tiden, så her går:

image

Denne artikkelen beskriver hvordan du tvinger newform.aspx skal omadresseres til én side når brukeren klikker OK og en annen side når hun klikker på Avbryt.

</slutten>

Abonner på bloggen min.

Følg meg på Twitter på http://www.twitter.com/pagalvin