Category Archives: jQuery eta SharePoint

SharePoint Launch Quick URL erlatibo batera Annoying Arazoa gainditzeko

Utzi erantzun bat

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 (adibidez, ‘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. Konpondu nahi, get some JavaScript and jQuery onto the page using your favorite technique and with a line of code like this:

 

$(dokumentu).prest( funtzioa () {

    $("bat:contains('Test URL replacement')").sakatu(funtzioa () { ohartaraztea("changed click behavior!"); itzultzeko faltsuak;});

});

And Bob’s your uncle.

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

The .click(funtzioa() 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.

</amaiera>

undefinedNire blog Harpidetu.

Follow me on Twitter http://www.twitter.com/pagalvin

Azkarra eta sinplea: Konpontzeko "URL Parametroa baliogabea” lists.asmx in UpdateListItems arazoren

1 Erantzun

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.  Hau, 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:Gutun-azal xmlns:soapenv ='http://schemas.xmlsoap.org/soap/envelope/'>
  <soapenv:Body>                      
    <UpdateListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>                     
      <Hosto erorkorreko>{C712E2EA-54E1-47AD-9D99-1848C7773E2F}</Hosto erorkorreko>                     
        <updates>                     
         <Batch OnError="Continue">
          <Method ID="1" Cmd="Update">
            <Field Name="CooperativeLock">locked!</Eremu>
            <Field Name="ID">1</Eremu>
          </Method>
        </Batch>                     
        </updates>                
      </UpdateListItems>             
  </soapenv:Body>         
</soapenv:Gutun-azal>

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

</amaiera>

undefinedNire blog Harpidetu.

Follow me on Twitter http://www.twitter.com/pagalvin

 

Pobrea Man JavaScript Caching

1 Erantzun

[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, beste gauza batzuen artean, 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. Beraz,, 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
    • Besterik, using jQuery, dynamically populate a bunch if <li>’s in a <st>
  • 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.  Duzu can 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 :). 

</amaiera>

undefinedNire blog Harpidetu.

Follow me on Twitter http://www.twitter.com/pagalvin

XSLT eta jQuery Laginak

2 Erantzunak

Izan dut eta XSLT jQuery asko egiten eta pentsatu gutxi barru mozkinak beste batzuk erabilgarria aurkitu ahal izango etorkizun partekatu nuke.

Adibidea 1: Ikusteko Javascript-a igortzen simple / XSLT en jQuery:

<xsl:template match="something" xml:espazio = "mantendu">

  <!– Hutsik out kontsulta errespetatzen iragazkiak ezkutuko eremuan –>
  <script type="text/javascript">
    $(dokumentu).prest(funtzioa(){
      $("#QueryFriendlyFilters").Val("empty");
    });
  </script>

</xsl:txantiloia>

Ikusteko Javascript-a duten apur batzuk, orria kargatzen amaitu zain igortzen (delako $(dokumentu).prest(...)) eta, ondoren, izendatutako QueryFriendlyFilters to literal balioa "hutsik" ezkutuko Eremu balioa ezartzen du.

Adibidea 2: Erabili <xsl:bada> egiaztatzeko "baino handiagoa da",  "Baino gutxiago", etc.

<xsl:template match="something" xml:espazio = "mantendu">

  <div id="fdcAllFilters">
 
    <xsl:if test="@Count>0">
      <span class="fdcFilterLabel">Oraingo iragazkiak:</span>
    </xsl:bada>

    <!– gehiago gauzak gertatzen hemen. –>

</xsl:txantiloia>

Goiko mozkina egiaztatzen izeneko "kopurua" eta "zerbait" elementu atributu bat da zero baino handiagoa bada ikusteko.  Horren atzean XML antzeko zerbait izango litzateke:"

<zerbait Count = "5" />

Adibidea 3: Elementu guztiak bitartez, batetik bestera joateko, jQuery deiak interspersing.

<!– Iragazkiak guztietan zehar batetik bestera joateko eta zuzena erakutsi  loturak. –>
<xsl:for-each select="UserFilter">

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

  <span class="fdcFilterLabel"><xsl:value-of select="@FilterValue"/></span>

  <script type="text/javascript">

    $(dokumentu).prest(funtzioa(){
        <xsl:testua><![CDATA[$("#QueryFriendlyFilters").Val( ($("#QueryFriendlyFilters").Val() + " ]]></xsl:testua>\"<xsl:value-of select="@FilterValue"/>\"<xsl:testua><![CDATA["));]]></xsl:testua>
    });

  </script>

</xsl:-bakoitzak>

Goiko mozkina konplexuena da, eta ez dago modu errazago egin izan daiteke.

Horren atzean XML gutxi gorabehera itxura:

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

Kode hori bidez errepikatzean <Erabiltzaile iragazkia> nodoak. 

Igortzen lehen bat aingura etiketa duten klik egitean JavaScript funtzio bat dagoeneko orrian deitzeko, "MySubmitPage" eta atributu baten balioa igarotzen buruzko <Erabiltzaile iragazkia> nodo izeneko "identifikazio". 

Igortzen gero jQuery batzuk, itxaroten orria kargatu du.  Hau jQuery eguneratzeak izeneko "QueryFriendlyFilters" FilterValue atributuaren balioa gehituz ezkutuko eremu bat.  Kontuan ero guztiak <xsl:testua> eta <![CDATA[ ... ]]> stuff.

Kito, espero laguntzen!

</amaiera>

Nire blog Harpidetu.

Follow me on Twitter http://www.twitter.com/pagalvin

Lists.asmx, GetListItems eta karpetak

6 Erantzunak

Ikerketa batzuk egiten ari nintzen norbaitek gaur list.asmx web zerbitzua SharePoint zati gisa emandako inguruan 2010 (eta lehenagokoak).  Gai zerrendako elementuak lortzeko erro karpeta hartan izan zen (azpi-karpetak izenak barne), baina ezin izan da azpi-karpetetako elementuak.  I did some looking around on the internets and it’s a surprisingly common question.  Oraindik, I couldn’t get a good answer to the simple question, “if I know the folder, how do I get the items in the folder?"  To be honest, I didn’t try all that hard since I’ve wanted to figure this one out on my own for a while Smile.

To set this up, I created a site named “Blogging Scenarios” and a custom list named “Custom List with Sub Folders”.  I then created folders named:

  • Year 2005
  • Year 2006
  • Year 2007

I added a few items to the folder “Year 2006”.  Hau da, zer itxura:

image

My friend isn’t writing C# code but rather using Java, so the SOAP envelope was what she really needed.  To get that, I wrote a bit of jQuery and then used fiddler to get the actual HTTP conversation.

Hemen garrantzitsua da jQuery (Kodea kopiatu dut behera nahi duzun / kopiatu itsatsi bada):

image

Dute lehen gakoa da, bai bat ere <queryOptions> eta <QueryOptions> nodoa.  Bigarren gakoa da hori <Karpeta> nodo URL bat zein bezero du sarbidea.

Ez dago beste modurik izan daiteke hori lortzeko, baina hau ongi niretzat denean jQuery erabiliz.

Hemen gainetik egiteko gutun-azala SOAP da:

<soapenv:Gutun-azal xmlns:soapenv =’http://schemas.xmlsoap.org / xaboi / gutunazal /’>                
  <soapenv:Body>
    <GetListItems xmlns =’http://schemas.microsoft.com / SharePoint / xaboi /’>
      <Hosto erorkorreko>Azpi-karpetak zerrenda pertsonalizatua</Hosto erorkorreko>
      <viewFields>  
        <ViewFields>
          <FieldRef izena = 'Izenburua’ />
          <FieldRef izena = 'EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Karpeta>http://demoserver1/Blogging Eszenatoki / zerrendak / karpetak Azpi / 2006 Urtea zerrenda pertsonalizatua</Karpeta>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
  </soapenv:Body>
</soapenv:Gutun-azal>

Adibide eta honen inguruan eztabaida handia eragin zuen, uste dut behar zela niri <QueryOptions> zehaztu eta karpeta baten izena.  Niretzat, Behar Itzulbira bai barrutik dut <queryOptions> baita zehaztu URL erabat kualifikatua <Karpeta> nodo.

Here’s the jQuery AJAX setup:

$(dokumentu).prest(funtzioa() {
       var soapEnv =
           "<soapenv:Gutun-azal xmlns:soapenv =’http://schemas.xmlsoap.org / xaboi / gutunazal /’> \
               <soapenv:Body> \
                    <GetListItems xmlns =’http://schemas.microsoft.com / SharePoint / xaboi /’> \
                       <Hosto erorkorreko>Azpi-karpetak zerrenda pertsonalizatua</Hosto erorkorreko> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef izena = 'Izenburua’ /> \
                              <FieldRef izena = 'EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Karpeta>http://demoserver1/Blogging Eszenatoki / zerrendak / karpetak Azpi / 2006 Urtea zerrenda pertsonalizatua</Karpeta> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Body> \
           </soapenv:Gutun-azal>";

</amaiera>

Nire blog Harpidetu.

Follow me on Twitter http://www.twitter.com/pagalvin

Lists.asmx, GetList eta "balioa ezin izango da null”

1 Erantzun

Gaur egun aurkitu nuen GetList dela() metodoa lists.asmx web zerbitzua deitu behar da kontu handiz edo joera da misteriotsu bat bota "Balio ezin da hutsik egon" salbuespen (Eta hori da suposatuz errore are okerragoa generic mezua iragan dezakezu, “Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ izan zen bota. ")  Zehazki, Ezin duzula ematen GetList metodoaren aurrizkia inolako aurkitu dut.  Ondorengo mozkina jQuery puntua erakusten:

image

Egiten baduzu, web zerbitzua "Balio ezin da hutsik egon" honen arabera erantzuten FIDDLER-emandako HTTP espedientea:

<?xml version="1.0" encoding="utf-8"?>
  <xaboi:Gutun-azal
     xmlns:xaboi ="http://schemas.xmlsoap.org / xaboi / gutunazal /"    
     xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
     xmlns:xsd ="http://www.w3.org/2001/XMLSchema">

  <xaboi:Body>
    <xaboi:Errua>
      <faultcode>xaboi:Zerbitzari</faultcode>
      <faultstring>
        Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ bota zen.
      </faultstring>
      <Xehetasun>
        <Errore katea xmlns ="http://schemas.microsoft.com / SharePoint / xaboi /">
Balioa ezin da hutsik egon.
        </errorstring>
      </Xehetasun>
    </xaboi:Errua>
  </xaboi:Body>
</xaboi:Gutun-azal>

Jakina, seguruenik ez duzu zure kabuz "S0" aurrizkia duten, Tresna baina joera batzuk ere egin (Eclipse bezalako).

Hau da, are nahasgarria / beste metodo jasaten aurrizkiak delako frustrating.  Esate baterako, duen GetListCollection metodoa ez du axola ari bada aurretik, are like "xyzzy" aurrizkiak zentzugabekeria batekin:

image

Hau "balioa ezin da hutsik egon" badirudi nahiko ohikoa lists.asmx, beraz, espero dugu hau norbaiti laguntzeko izango da etorkizunean.

</amaiera>

Nire blog Harpidetu.

Follow me on Twitter http://www.twitter.com/pagalvin

Etengabe nidificantes <div> Tags eta jQuery

Utzi erantzun bat

Hau oddball gaia halako dirudi, Ez dakit, benetan merezi blogging buruz da, Baina hori ez da inoiz gelditu me aurretik, beraz, hemen goaz Smile

Kanpo lan egiten dut proiektu bat non zenbait datu naiz tira bilaketa bat aurrera, it PACKAGING sortu XML mezua sartu eta, ondoren, XML hori, azken finean HTML bihurtzen XSLT bidez.  Bertan, parte hartzen duten jQuery asko, horietako bat bit tabbing funtzionalitateren bat burutuko du.  Noiz egin klik fitxa bat duzu (benetan, bat <div>), jQuery deitzeko. ezkutatu() eta. show() divs hainbat (Hasierako orria karga eduki guztiak deskargatzen daude, kasu honetan, beraz, ez postbacks).

A ordu mordo ago, fitxa kommutazio logika History hasi zen, eta ez zen nire fitxak bat erakusteko.  Jarraituko dut, azken finean, bertan behera Izan ere, Internet Explorer (gutxienez) pentsatu duten <div> tags habiaratuta urrun, urrun sustatzailearen intended.The toolbar baino sakonagoa izango litzateke erakusteko:

-<div id = "Tab1Content">
  -<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div>  <-Azkenik itxi egin zuten modu guztiak behera hemen erakusten!

Beraz,, nuen bat bada $("# Tab1Content").ezkutatu(), Era berean nuke ezkutatu Tab2 eta inoiz izan nuen erakusteko Tab2 nuen ez bada ere erakusten Tab1.  Kopiatu eta itsatsi dut kodearen sortu estudioan sartu eta ikusmen div horrek estaldura guztia erakutsi zuen nicely, bezala ziren ustezko izango da egiten ari, hau atsegin bila:

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

Nire burua beat dut pixka bat hormaren kontra, eta nabaritu da benetako HTML kode zela hutsik asko sortzen <div> Euskal Herria, bezala:

<gorputza>

  <div id = "Tab1Content">

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

  </div>

  <div id = "Tab2Content">

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

  </div>

</gorputza>

(Goiko da waaaaaaaaaaaay oversimplified.  Hutsik div tags guztiz baliozko. Nire batzuk <div> etiketa eduki beteta, baina beste asko ez ziren.  Izan zen gauzatu nuen nire <xsl:-bakoitzak> zuzentarau ziren labur-inprimaki div tags igortzen denean xsl du:-bakoitzean ez zuen 'aurkitu daturik.  HTML iruzkin bat behartu dut irteera sartu, ikus daitekeen bezala:

image

 

Egin nuen, eta ondoren, div guztiak egin lerrokatuta nicely eta nire fitxa aldatzen hasi zen lanean.

Beti bezala, Hau pixka bat norbaitek laguntzen espero dut.

</amaiera>

Nire blog Harpidetu.

Follow me on Twitter http://www.twitter.com/pagalvin

Hala ere, gehiago jQuery–Aldatu irudia Adibidea

Utzi erantzun bat

Web zati bat heredatu dut bezero bat saltzaile zaharrak eta irudi-tamaina arazo ditu.  Irudiak 60 izan beharko luke×50 baina zenbait arraro arrazoirik, jatorrizko saltzaileak behartuta horietako 42 sartu×42, beraz zapaldu begiratzen dute:

 

Ona irudia

Bad irudia

Hemen markaketa da (zertxobait sinplifikatu):

<taula class = 'hedatua-aurreikuspenak'>
  <thead>
    <tr>
      <garren  width = '100′>3 Asteartea</garren>
    </tr>
  </thead>

  <tbody>
    <tr class = 'iragarpena'>
      <td width = '100′>
        <st>
          <li class = 'handia'>Alta: 72&duzu;F</li>
          <li class = 'txikia'>Behe: 44&duzu;F</li>
          <li class = 'baldintza'>Eguzkitsua
            <img src =’http://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ width = '42’ altuera = '42’ alt =” />
          </li>
        </st>
      </td>
    </tr>

  </tbody>

</taula>

Kontutan izango duzu, nahiz eta hori irudi bera bide dimentsio egokia erakusten (60×50) jatorrizko saltzaileari behartu du 42×42.  Zergatik?  Seiko.

Hala ere, Arazo honi irtenbide azkar eta erraz bat egin nahi nuen, eta gaurkoan jQuery nahi dut.  Trikimailu zen egoki guztiak aurkitu ahal izateko <img> tags.  Nik ez dut nahi muck buruzko edozein img beste Etiketadun (horietatik asko daude).  JQuery apur hau egin trikimailu:

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

<script type="text/javascript">
     $(dokumentu).prest(funtzioa () {

         $(‘li.condition > img ').bakoitzeko(funtzioa (indizea, elementua)
            {
             $(elementua).css("width", "60"); 
             $(elementua).css("height", "50");
            });
     }); // dokumentua kargatzean
</script>

Kodea pixka duten bilduma aurkitzen <li> tags zeinen class "baldintza" eta <img> seme-alabak.  Hori guztia bidez gero iterates.  Xarma bat bezala lan egin zuen.

Ziurrenik izan nuen arintzea da, izan zen, baina ez dut sekula bat unix zentzuduna mota hori konpondu π to 18 digituak doitasun sed eta awk erabiliz, eta ez naiz horrelako jQuery zentzuduna bada bai Smile.

</amaiera>

Nire blog Harpidetu.

Follow me on Twitter http://www.twitter.com/pagalvin

Ezartzea Global Pop-up Jakinarazpen Sistema

2 Erantzunak

Idatzi nuen artikulu bat egiteko www.sharepoint.briefing.com eskubidea "Ezartzea Global Pop-up Jakinarazpen Sistema."  Funtzio hau zen komunitate college eskola closings elurra dela eta, eta abar komunikatzeko ezarrita. 

Zerrenda pertsonalizatu bat erabiltzen du, kutxa SharePoint web zerbitzuak eta jQuery zenbait lan egiteko.

Hona hemen aurkezpenik da:

image

Irakurri osoa hemen gauza: http://www.sharepointbriefing.com/features/article.php/3918471/Implement-a-Global-Pop-up-Notification-System.htm

</amaiera>

Nire blog Harpidetu.

Follow me on Twitter http://www.twitter.com/pagalvin

Hartu zure OK kontrola eta botoiak Utzi

3 Erantzunak

Idatzi dut Artikulu honetan berriz, berriro, baina itxura ez nuen bezala lotzeko nire blog momentuan, beraz, hemen doa:

image

Artikulu honetan azaltzen da nola newform.aspx batek orri redirect erabiltzaileak sakatzen OK eta beste orri bat sakatzen denean, bertan behera utzi zuen behartzeko.

</amaiera>

Nire blog Harpidetu.

Follow me on Twitter http://www.twitter.com/pagalvin