Kategorija Arhiva: jQuery i SharePoint

Prevladati uznemirujući problem relativnim URL-ovima u SharePoint brzom pokretanju

Ostavite odgovor

I wanted to add a link to the quick launch navigation the other day and SharePoint told me:

image

Pure text version of that is:

Ensure that the URL is valid and begins with either a valid character (a number sign (#) or forward slash (/)) or a valid supported protocol (na primjer, ‘http://', ‘https://', ‘file://', ‘ftp://', ‘mailto:', ‘news:').

“Blech and pox!” I said.

A workaround to this is to use JavaScript to find a known link in the quick launch and override its behavior.

To test this, add a new link to your test site thusly:

image

I used jQuery. Da biste ga riješiti, get some JavaScript and jQuery onto the page using your favorite technique and with a line of code like this:

 

$(dokument).spreman( funkcija () {

    $("a:contains('Test URL replacement')").klik(funkcija () { oprezan("changed click behavior!"); povratak lažan;});

});

And Bob’s your uncle.

The jQuery selector finds every <a> tag that has “Test URL replacement” in its name. You may want to find-tune that depending on your link and such.

The .click(funkcija() overrides whatever SharePoint would have done when the user clicked. Make sure you “return false” or else it will do your stuff and then try to the href thing too, which is almost certainly not your goal.

This was done and test in a SharePoint online environment but should work well in 2010 and earlier too.

</kraj>

undefinedPretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin

Brzo i jednostavno: Riješite "Invalid URL parametar” Problem s UpdateListItems u lists.asmx

1 Odgovoriti

When working with UpdateListItems via lists.asmx, it’s easy to generate the error:

Invalid URL Parameter.

The URL provided contains an invalid Command or Value. Please check the URL again.

You can get this error when you forget to include ID in the the list of fields to update.  To, like a lot of these SP web services, is a bit counterintuitive since you need to include the ID in the ID attribute of the <Method> element.  And you’re not updated ID and probably never want to in the first place.

This SOAP envelope works:

<soapenv:Omotnica xmlns:soapenv ='http://schemas.xmlsoap.org/soap/envelope/'>
  <soapenv:Tijelo>                      
    <UpdateListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>                     
      <listname>{C712E2EA-54E1-47AD-9D99-1848C7773E2F}</listname>                     
        <updates>                     
         <Batch OnError="Continue">
          <Method ID="1" Cmd="Update">
            <Field Name="CooperativeLock">locked!</Polje>
            <Field Name="ID">1</Polje>
          </Method>
        </Batch>                     
        </updates>                
      </UpdateListItems>             
  </soapenv:Tijelo>         
</soapenv:Omotnica>

If you strip out the ID field reference then you’ll get the annoying “Invalid URL parameter” message.

</kraj>

undefinedPretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin

 

Siromah je Caching u JavaScriptu

1 Odgovoriti

[TL;DR version: use cookies to store the results of async calls; render the results of past async calls immediately and then validate them after page-load.]

I’ve been working on SharePoint intranet site for a client that features, između ostalog, a stylized secondary navigation whose menu options are managed via a regular old custom list.  The idea is that the client gets to control “their” site’s menu without affecting or being affected by the global navigation put out by IT.

(there is something incredibly subversive about adding a CEWP that points to an HTML file that loads some CSS and JS to fundamentally alter almost everything about a site’s behavior… but that’s for another post)

The code for this pretty simple:

The sore spot here is that every time anyone hits one of the site’s pages, that user’s web browser is reaching out to get items from the list.  Once dev is complete and testing has proven things to be stable and complete, this call is unnecessary more than 99% of the time since the menu rarely changes.  It also has a weird UI affect which is common in this brave new world of hyper-ajaxy web sites – the page renders and only then does the menu render.  It’s jittery and distracting in my view.  And jittery. Tako, caching. 

I modified the logic thusly:

  • Look for a cookie in the browser that contains the menu as I last read it
    • If found, render it immediately.  Don’t wait for the page to finish loading.  (You need to make sure your HTML is strategically placed here, but it’s not hard to do).
  • Wait for the page to finish loading and make an async call to load up menu items from a list using REST or lists.asmx or whatever
  • Compare what I got against the cookie
    • If it matches, STOP
    • Inače, using jQuery, dynamically populate a bunch if <Li>’s in a <Ulica>
  • Use CSS to do all the formatting
  • Profit!

Some of you are going to say, “hey! there’s no real caching going on here since you’re reading the menu anyway every single time."  And you’re right – I’m not giving the server any kind of break.  But because the call is async and happens after the page’s initial HTML payload fully renders, it “feels” more responsive to the user.  The menu renders pretty much as the page draws.  If the menu happens to the change, the user is subjected to a jittery re-draw of the menu, but only that one time.

There are some ways to make this caching more effective and help out the server at the same time:

  • Put in a rule that the “cookie cache” is valid for a minimum of 24 hours or some other timeframe. As long as there is no expired cookie, use the cookie’s menu snapshot and never hit the server.

Well … that’s all that come to mind right now :). 

If anyone has any clever ideas here I’d love to know them.

And lastly – this technique can be used for other stuff.  This client’s page has a number of data-driven things on various pages, many of them changing relatively rarely (like once a week or once a month).  If you target specific areas of functionality, you can give a more responsive UI by pulling content from the local cookie store and rendering immediately.  It feels faster to the user even if you’re not saving the server any cycles.  Vi moći save the server cycles by deciding on some conditions and triggers to invalidate this local cookie cache.  That’s all situational and artsy stuff and really the most fun :). 

</kraj>

undefinedPretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin

XSLT i Jquery Uzorci

2 Odgovori

Imam bio događaj puno XSLT i jQuery i pomislio bih podijeliti nekoliko isječaka da drugi mogu biti korisne u budućnosti.

Primjer 1: Šalji jednostavan JavaScript / jQuery u XSLT:

<XSL:Predložak utakmica = "nešto" xml:prostor = "sačuvati">

  <!– Blank iz upita prijateljski filteri skrivene polje –>
  <skripta type = "text / javascript">
    $(dokument).spreman(funkcija(){
      $("# QueryFriendlyFilters").Val("Prazan");
    });
  </skripta>

</XSL:predložak>

To malo emitira neke JavaScript da čeka na stranici završi učitavanje (zbog $(dokument).spreman(...)) a zatim postavlja vrijednost skrivenog polja pod nazivom QueryFriendlyFilters u doslovnom vrijednosti "prazan".

Primjer 2: Koristiti <XSL:ako> provjerite "veći od",  "Manje od", itd..

<XSL:Predložak utakmica = "nešto" xml:prostor = "sačuvati">

  <div id = "fdcAllFilters">
 
    <XSL:ako se test = "@ Točka>0">
      <span class = "fdcFilterLabel">Trenutni uvjeti:</raspon>
    </XSL:ako>

    <!– više stvari događa ovdje. –>

</XSL:predložak>

Gore isječak provjerava da li atribut pod nazivom "Grof" u "nešto" element je veći od nule.  XML iza toga će biti nešto poput:"

<nešto Count = "5" />

Primjer 3: Iteraciju kroz sve elemente, interspersing jQuery poziva.

<!– Iteraciju kroz sve filtere i prikazati točno  linkovi. –>
<XSL:za-svaki odaberite UserFilter = "">

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

  <span class = "fdcFilterLabel"><XSL:vrijednost od select = "@ FilterValue" /></raspon>

  <skripta type = "text / javascript">

    $(dokument).spreman(funkcija(){
        <XSL:tekst><![CDATA[$("# QueryFriendlyFilters").Val( ($("# QueryFriendlyFilters").Val() + " ]]></XSL:tekst>\"<XSL:vrijednost od select = "@ FilterValue" />\"<XSL:tekst><![CDATA["));]]></XSL:tekst>
    });

  </skripta>

</XSL:za-svakog>

Iznad isječak je najsloženiji i postoji svibanj biti lakši načini kako to učiniti.

XML iza to izgleda otprilike ovako:

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

Ovaj isječak Ponavljanje kroz <Upute za filter> čvorova. 

To je prvi emitira sidro oznaku da kada se pritisne poziva JavaScript funkciju koja je već na stranici, "MySubmitPage" i prelazi vrijednost atributa na <Upute za filter> čvor pod nazivom "ID". 

On je tada emitira neki jQuery koja čeka za stranicu za učitavanje.  To Jquery ažuriranja skrivene polje pod nazivom "QueryFriendlyFilters" dodavanjem vrijednosti FilterValue atribut.  Imajte na umu sve ludo <XSL:tekst> i <![CDATA[ ... ]]> stvari.

To je to, nadam se da pomaže!

</kraj>

Pretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin

Lists.asmx, GetListItems i mape

6 Odgovori

Sam bio događaj neki istraživanje za nekoga danas oko uslugu list.asmx web predviđeno kao dio sustava SharePoint 2010 (i ranije).  Ona je bila u mogućnosti da biste dobili stavke popisa na korijensku mapu (uključujući imena pod-mape), , ali nije mogao dobiti stavke u pod-mape.  Ja sam neki obličje okolo na internets i to je iznenađujuće zajedničko pitanje.  Još, Nisam mogao dobiti dobar odgovor na jednostavno pitanje, "Ako znam mapu, kako mogu dobiti stavke u mapi?"  Da budem iskren, Nisam pokušati sve što je teško jer sam želio shvatiti ovaj na moj posjedovati neko vrijeme Osmijeh.

Da biste postavili ovo gore, I stvorio je mjesto pod nazivom "Blogovi" Scenariji i prilagođeni popis pod nazivom "Custom Popis s podmape".  Tada sam stvorio mape pod nazivom:

  • Godina 2005
  • Godina 2006
  • Godina 2007

Dodao sam nekoliko stavki u mapu "Godina 2006".  To je ono što izgleda kao:

image

Moj prijatelj ne piše C # koda nego koristeći Java, tako da je SOAP omotnici je ono što je stvarno potrebno.  Da biste dobili da, Napisao sam malo jQuery i zatim koristiti Fiddler da biste dobili stvarni HTTP razgovor.

Evo relevantne jQuery (Ja kopirati kod ispod želite li copy / paste):

image

Oni su prvi ključ je da su oba <queryOptions> i <QueryOptions> čvor.  Drugi ključ je da <Mapa> čvor je URL koji klijent ima pristup.

Postoji svibanj biti drugih načina da se to, ali to je radio i za mene kada se koristi jQuery.

Ovdje je SOAP omotnice za gore:

<soapenv:Omotnica xmlns:soapenv =’http://schemas.xmlsoap.org / sapun / kuverta /’>                
  <soapenv:Tijelo>
    <GetListItems xmlns =’http://schemas.microsoft.com / SharePoint / sapun /’>
      <listname>Prilagođeni popis s podmape</listname>
      <viewFields>  
        <ViewFields>
          <FieldRef Ime = 'Naslov’ />
          <FieldRef Ime = 'EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Mapa>http://demoserver1/Blogging Scenariji / popisi / Custom List sa podmape / godine 2006</Mapa>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
  </soapenv:Tijelo>
</soapenv:Omotnica>

Puno primjera i diskusiju oko to je dovelo me da vjerujem da je sve što mi treba je <QueryOptions> i odredite naziv mape.  Za mene je, Trebam oba zamotajte ga u <queryOptions> kao i navesti u potpunosti kvalificirani za URL <Mapa> čvor.

Evo jQuery AJAX postava:

$(dokument).spreman(funkcija() {
       je soapEnv =
           "<soapenv:Omotnica xmlns:soapenv =’http://schemas.xmlsoap.org / sapun / kuverta /’> \
               <soapenv:Tijelo> \
                    <GetListItems xmlns =’http://schemas.microsoft.com / SharePoint / sapun /’> \
                       <listname>Prilagođeni popis s podmape</listname> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Ime = 'Naslov’ /> \
                              <FieldRef Ime = 'EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Mapa>http://demoserver1/Blogging Scenariji / popisi / Custom List sa podmape / godine 2006</Mapa> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Tijelo> \
           </soapenv:Omotnica>";

</kraj>

Pretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin

Lists.asmx, GetList i "Vrijednost ne može biti null”

1 Odgovoriti

Otkrio sam danas da GetList() metoda u lists.asmx web servis mora se zvati vrlo pažljivo ili je sklona baciti misteriozni "vrijednost ne može biti nula" iznimka (i da je pod pretpostavkom možete dobiti prošlosti još gore generički pogrešci, “Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ izbačena. ")  Posebno, Otkrio sam da ne mogu dati bilo kakve prefiksom na GetList metodom.  Sljedeći isječak jQuery oslikava:

image

Ako to učinite, web servis odgovara s "Vrijednost ne može biti null" po ovom violinista-uvjetom HTTP transkript:

<?xml version = "1,0" encoding="utf-8"?>
  <sapun:Omotnica
     xmlns:sapun ="http://schemas.xmlsoap.org / sapun / kuverta /"    
     xmlns:Rebel = "http://www.w3.org/2001/XMLSchema-instance"
     xmlns:XSD ="http://www.w3.org/2001/XMLSchema">

  <sapun:Tijelo>
    <sapun:Greška>
      <faultcode>sapun:Server</faultcode>
      <faultstring>
        Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ bačena.
      </faultstring>
      <detalj>
        <ErrorString xmlns ="http://schemas.microsoft.com / SharePoint / sapun /">
Vrijednost ne može biti nula.
        </ErrorString>
      </detalj>
    </sapun:Greška>
  </sapun:Tijelo>
</sapun:Omotnica>

Naravno, vjerojatno ne bi dodali da je "S0" prefiks na vlastite, No, neki alati su skloni to učiniti (kao što je Eclipse).

To je sve više zbunjuje / frustrirajuće, jer druge metode tolerirati prefiksa.  Na primjer, the GetListCollection Metoda ne smeta ako je bio postavljen ispred, čak i sa besmislenim prefiksima poput "xyzzy":

image

Ovaj "Vrijednost ne može biti null" Čini se prilično čest kod lists.asmx pa se nadam da će to pomoći nekome u budućnosti.

</kraj>

Pretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin

Beskrajno Gniježđenje <div> Oznake i Jquery

Ostavite odgovor

Ovo se čini kao takvog otkačen temu, Nisam siguran da je stvarno vrijedno bloganje o, ali to nikada me zaustavio prije, pa ovdje mi ići Osmijeh

Radim na projektu gdje sam povlačenjem neke podatke iz pretraživanja, to pakiranje se u XML poruke, a zatim da je XML konačnici se pretvara u HTML-u preko XSLT.  Postoji puno jQuery uključeni, jedan malo koji implementira neke tabbing funkcionalnost.  Kad kliknete na kartici (stvarno, a <div>), jQuery zaziva. skrivanje() a. serija() na raznim divs (početna stranica učitavanje preuzima sav sadržaj tako da ne postoje postbacks u ovom slučaju).

Gomila sati prije, Kartica prebacivanje logika počeo ponašati neizvjesno, a to ne bi pokazati jedan od mojih karticama.  I u konačnici to trag na činjenicu da Internet Explorer (barem) Mislio da je <div> tags uklopljeni sada, daleko dublje od intended.The developer alatnoj traci će se prikazati:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div>  <-Napokon pokazuje da je zatvorena skroz ovdje dolje!

Tako, ako jesam $("# Tab1Content").sakriti(), Također bih sakriti Tab2 a ja nikad ne bi mogla pokazati Tab2 ako nisam također pokazuju TAB1.  Ja kopirati i zalijepiti kôd se u Visual Studio, a to su pokazali sve DIV-a sluznice se lijepo, baš kao što su trebali raditi, izgleda ovako:

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

Pobijedio sam glavom o zid za vrijeme i primijetio da je u aktualnom HTML koda je generiranje puno prazna <div> tags, kao:

<tijelo>

  <div id = "Tab1Content">

    <div id = "ROW1" />
    <div id = "ROW2" />

  </div>

  <div id = "Tab2Content">

    <div id = "ROW1" />
    <div id = "ROW2" />

  </div>

</tijelo>

(Gore je waaaaaaaaaaaay pojednostavni.  Prazne div oznake su totalno vrijede. Neki od mojih <div> tags bili puni sadržaj, , ali mnogo više nije bilo.  Došao sam do spoznaje da je moja <XSL:za-svakog> Smjernice su emitiranjem na kratki upitnik div oznake kada XSL:za-jedni nije 'naći nikakve podatke.  Sam prisiljen HTML komentar na izlazu, kao što je prikazano:

image

 

Nakon što sam to učinio, Svi div je postrojilo se lijepo i moja kartica prebacivanje počeo raditi.

Kao i uvijek, Nadam se da ovo pomaže netko u slučaju krajnje nužde.

</kraj>

Pretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin

Ipak Više jQuery–Stanovati primjer slike

Ostavite odgovor

Sam naslijedila web dio od klijenta stare dobavljača i ima problema veličini slike.  Slike trebaju biti 60×50 ali iz nekog razloga ak, izvorni dobavljač ih je natjerao u 42×42, tako da izgledaju squashed:

 

Dobra slika

Bad Slika

Evo označavanje (nešto pojednostavljeno):

<table Class = 'proširenog izgledi'>
  <thead>
    <tr>
      <th  width = '100′>3 Utorak</th>
    </tr>
  </thead>

  <tbody>
    <tr class = 'prognoza'>
      <td width = '100′>
        <Ulica>
          <li class = "high">Visok: 72&vi;F</Li>
          <li class = 'niska'>Nisko: 44&vi;F</Li>
          <Li Class = 'stanje'>Sunčan
            <img src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ height = '42’ alt =” />
          </Li>
        </Ulica>
      </td>
    </tr>

  </tbody>

</stol>

Ćete primijetiti da, iako Put do same slike pokazuje pravilnu dimenziju (60×50) izvorni dobavljač je prisiljen u 42×42.  Zašto?  Lud.

U svakom slučaju, Htjela sam brzo i jednostavno rješenje za ovaj problem i okrenuo sam se jQuery.  Trik je pronaći sve potrebno <img> oznake.  Nisam želio da Ljenčariti s bilo kojim drugim IMG tagova (od kojih su mnogi).  Ovo malo jQuery je trik:

<skripta type = "text / javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></skripta>

<skripta type = "text / javascript">
     $(dokument).spreman(funkcija () {

         $(‘li.condition > IMG ').svaki(funkcija (indeks, stavka)
            {
             $(stavka).css("Širina", "60"); 
             $(stavka).css("Visina", "50");
            });
     }); // na dokumenta opterećenja
</skripta>

To malo koda pronalazi zbirka <Li> tags čija klasa je "stanje" i <img> djeca.  Tada ponovi kroz sve to.  Izrađen poput milina.

Vjerojatno sam mogao pojednostaviti, ali nikada nisam bio tip čovjeka koji je riješio Unix π na 18 znamenke preciznost pomoću Sed i awk i nisam takav tip, ako jQuery bilo Osmijeh.

</kraj>

Pretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin

Provesti globalnoj pop-up obavijesti sustava

2 Odgovori

Napisao sam gore jedan članak za www.sharepoint.briefing.com pod naslovom "Provesti globalnoj pop-up obavijesti sustava."  Ova funkcija je proveden u zajednici koledž za komunikaciju školske zatvaranja zbog snijega i tako dalje. 

Ona koristi prilagođeni popis, iz kutije SharePoint web-usluge i neke jQuery za obavljanje posla.

Evo teaser:

image

Pročitajte cijelu stvar ovdje: http://www.sharepointbriefing.com/features/article.php/3918471/Implement-a-Global-Pop-up-Notification-System.htm

</kraj>

Pretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin

Preuzmite kontrolu nad svojom OK i Cancel gumba

3 Odgovori

Napisao sam ovaj članak dok je povratak, ali izgleda da nisam link na njega iz mog bloga na vrijeme, pa ovdje ide:

image

Ovaj članak opisuje kako prisiliti newform.aspx preusmjeriti na jednu stranicu kad korisnik klikne OK i drugu stranicu kad klikne cancel.

</kraj>

Pretplatite se na moj blog.

Slijedite me na Twitter-u http://www.twitter.com/pagalvin