Flokkaskjalasafn: jQuery og SharePoint

Sigrast pirrandi vandamál með tiltölulega vefslóðir í SharePoint Fljótur Sjósetja

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

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 (til dæmis, ‘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:

I used jQuery. Að leysa það, get some JavaScript and jQuery onto the page using your favorite technique and with a line of code like this:

$(skjal).tilbúinn( virka () {

    $("a:contains('Test URL replacement')").smelltu(virka () { alert("changed click behavior!"); aftur ósatt;});

});

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(virka() 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.

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Fljótleg og einföld: Leystu "Ógild slóð Stiki” vandamál með UpdateListItems í lists.asmx

1 Svara

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. Þetta, 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:Umslag xmlns:soapenv ='http://schemas.xmlsoap.org/soap/envelope/'>
  <soapenv:Body>                      
    <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!</Field>
            <Field Name="ID">1</Field>
          </Method>
        </Batch>                     
        </updates>                
      </UpdateListItems>             
  </soapenv:Body>         
</soapenv:Umslag>

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

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Búrhvalur fátæka mannsins í JavaScript

1 Svara

[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, m.a., 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:

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
Using jQuery, dynamically populate a bunch if <Li>’s inside a parent <Street> (see Christian Pinder’s article here for a simplistic explanation of this tecnnique)
Use CSS to do all the formatting
Profit!

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. Svo, 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
Annars, using jQuery, dynamically populate a bunch if <Li>’s in a <Street>

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. Þú 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 :).

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

XSLT og jQuery Sýnishorn

2 Svör

Ég hef verið að gera mikið af af XSLT og jQuery og hélt ég myndi deila sýnishorn sem aðrir geta fundið gagnlegar í framtíðinni.

Dæmi 1: Senda frá sér einfalda JavaScript / jQuery í XSLT:

<XSL:Snið passa = "eitthvað" XML:rúm = "varðveita">

<!– Núllstillt út fyrirspurn vingjarnlegur síur falinn sviði –>
<handrit type = "text / javascript">
    $(skjal).tilbúinn(virka(){
      $("# QueryFriendlyFilters").Val("Tóm");
    });
</handrit>

</XSL:sniðmát>

Það bita gefur frá sér smá JavaScript sem bíður fyrir the blaðsíða til ljúka lestun (vegna þess að $(skjal).tilbúinn(...)) og þá setur gildi falinn sviði heitir QueryFriendlyFilters í bókstaflegri gildi "tómur".

Dæmi 2: Nota <XSL:ef> til að athuga með "meira en", "Minna en", o.fl..

<XSL:Snið passa = "eitthvað" XML:rúm = "varðveita">

<div id = "fdcAllFilters">

    <XSL:Ef próf = "@ Count>0">
      <span class = "fdcFilterLabel">Núverandi síur:</span>
    </XSL:ef>

    <!– meira dót gerist hér. –>

</XSL:sniðmát>

Hér að ofan seðillinn ávísanir til að sjá hvort eiginleiki sem heitir "Count" á "eitthvað" þáttur er meiri en núll. XML bak við þetta væri eitthvað eins og:"

<eitthvað Count = "5" />

Dæmi 3: Iterate gegnum alla þætti, interspersing jQuery símtöl.

<!– Iterate í gegnum allar síur og sýna rétt tenglar. –>
<XSL:fyrir-hvern Veldu = "UserFilter">

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

<span class = "fdcFilterLabel"><XSL:gildi-af select = "@ FilterValue" /></span>

<handrit type = "text / javascript">

    $(skjal).tilbúinn(virka(){
        <XSL:texta><![CDATA[$("# QueryFriendlyFilters").Val( ($("# QueryFriendlyFilters").Val() + " ]]></XSL:texta>\"<XSL:gildi-af select = "@ FilterValue" />\"<XSL:texta><![CDATA["));]]></XSL:texta>
    });

</handrit>

</XSL:fyrir-hvern>

Hér að ofan seðillinn er flóknasta og það getur verið auðveldara leiðir til að gera það.

XML bak við þetta lítur u.þ.b. svona út:

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

Þetta seðillinn iterating gegnum <UserFilter> hnúður.

Það gefur fyrsta akkeri tag sem þegar smellt afturvekur á JavaScript fall sem er nú þegar á síðu, "MySubmitPage" og fer verðmæti eigindi á <UserFilter> hnúturinn heitir "ID".

Það gefur þá sumir jQuery sem bíður fyrir síðu til að hlaða. Það jQuery uppfærslur falinn sviði sem heitir "QueryFriendlyFilters" með því að bæta verðmæti FilterValue eiginleiki. Athugið allar brjálaður <XSL:texta> og <![CDATA[ ... ]]> efni.

Það er það, vona að það hjálpar!

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Lists.asmx, GetListItems og möppur

6 Svör

Ég var að gera sumir rannsókn fyrir einhvern dag um list.asmx vefur þjónustu sem hluta af SharePoint 2010 (og fyrr). Hún var fær til fá the listi atriði á the rót mappa (þ.mt nöfn undir-möppur), en gat ekki fá atriði í staðinn fyrir einhvern-mappa. Ég gerði nokkrar að leita í kring um internets og það er furðu algeng spurning. En, Ég gat ekki fengið góða svar við einfaldri spurningu, "Ef ég veit að möppu, hvernig fæ ég þau atriði í möppunni?" Til að vera heiðarlegur, Ég vissi ekki að reyna allt sem erfitt þar sem ég hef langað til að reikna þetta einn út á mitt eigið um stund bros .

Til að setja þetta upp, Ég bjó til síðuna sem heitir "Blogging Atburðarás" og sérsniðin listi sem heitir "Custom Listi með Sub möppur". Ég skapaði þá möppur sem heita:

Ár 2005
Ár 2006
Ár 2007

Ég bætti nokkrum hlutum við möppu "ársins 2006". Þetta er það sem það lítur út eins og:

Vinur minn er ekki að skrifa C # kóða heldur að nota Java, svo SOAP umslag var það sem hún þarf í raun. Til að fá sem, Ég skrifaði smá jQuery og síðan notað Fiddler til að fá raunverulegan HTTP samtal.

Hér er viðeigandi jQuery (Ég afrita kóðann fyrir neðan ef þú vilt afrita / líma):

Þeir fyrstu Lykilatriðið er að fela bæði <queryOptions> og <QueryOptions> hnút. Annað lykilatriði er að <Mappa> hnútur er slóðin sem viðskiptavinurinn hefur aðgang.

Það kann að vera aðrar leiðir til að fá þetta, en þetta virkaði vel fyrir mig þegar að nota jQuery.

Hér er sápa umslag fyrir ofan:

<soapenv:Umslag xmlns:soapenv =’HTTP://schemas.xmlsoap.org / sápu / umslag /’>
<soapenv:Body>
    <GetListItems xmlns =’HTTP://schemas.microsoft.com / SharePoint / sápu /’>
      <listname>Custom Listi með Sub Mappa</listname>
      <viewFields>
        <ViewFields>
          <FieldRef Name = 'Titill’ />
          <FieldRef Name = 'EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Mappa>HTTP://demoserver1/Blogging Atburðarás / listar / Custom List með Sub Mappa / árið 2006</Mappa>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
</soapenv:Body>
</soapenv:Umslag>

A einhver fjöldi af dæmum og umræðu um þetta leiddi mig til að trúa því að allt sem ég þarf var <QueryOptions> og tilgreina heiti fyrir möppuna. Fyrir mig, Ég þarf að bæði vefja það inni <queryOptions> og tilgreina fullgildur vefslóð fyrir að <Mappa> hnút.

Hér er jQuery AJAX skipulag:

$(skjal).tilbúinn(virka() {
       var soapEnv =
           "<soapenv:Umslag xmlns:soapenv =’HTTP://schemas.xmlsoap.org / sápu / umslag /’> \
               <soapenv:Body> \
                    <GetListItems xmlns =’HTTP://schemas.microsoft.com / SharePoint / sápu /’> \
                       <listname>Custom Listi með Sub Mappa</listname> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Name = 'Titill’ /> \
                              <FieldRef Name = 'EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Mappa>http://demoserver1/Blogging Atburðarás / listar / Custom List með Sub Mappa / árið 2006</Mappa> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Body> \
           </soapenv:Umslag>";

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Lists.asmx, GetList og "Value getur ekki verið tómt”

1 Svara

Ég uppgötvaði í dag að GetList() aðferð í lists.asmx vefur þjónusta þarf að vera kölluð mjög vel eða það er viðkvæmt að kasta dularfulla "Value getur ekki verið tómt" undantekning (og það er miðað við að þú getur fengið framhjá jafnvel verri almenna villuboð, “Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ var kastað. ") Sérstaklega, Ég fann að þú getur ekki veita hvers konar forskeyti á GetList aðferð. Eftirfarandi jQuery seðillinn sýnir punkt:

Ef þú gerir það, vefur þjónusta bregst við "Value getur ekki verið tómt" eins og á þessu Fiddler-enda HTTP afrit:

<?XML útgáfa = "1,0" kóðun = "UTF-8"?>
<sápa:Umslag
     xmlns:sápa ="HTTP://schemas.xmlsoap.org / sápu / umslag /"
     xmlns:XSi = "HTTP://www.w3.org/2001/XMLSchema-instance"
     xmlns:xsd ="HTTP://www.w3.org/2001/XMLSchema">

<sápa:Body>
    <sápa:Kenna>
      <faultcode>sápa:Server</faultcode>
      <faultstring>
        Exception of type ‘Microsoft.SharePoint.SoapServer.SoapServerException’ var kastað.
      </faultstring>
      <smáatriði>
        <errorstring xmlns ="HTTP://schemas.microsoft.com / SharePoint / sápu /">
Gildi getur ekki verið tómt.
        </errorstring>
      </smáatriði>
    </sápa:Kenna>
</sápa:Body>
</sápa:Umslag>

Auðvitað, þú myndi sennilega ekki bæta við að "s0" forskeyti á eigin spýtur, en sumir verkfæri eru tilhneigingu til að gera það (eins og Eclipse).

Þetta er allt meira truflandi / svekkjandi vegna þess að aðrar aðferðir þola forskeyti. Til dæmis, á GetListCollection aðferð ekki huga ef að það hefur verið bætt viðfyrir framan, jafnvel með óskiljanlegum forskeyti eins og "xyzzy":

Þetta "gildi getur ekki verið tómt" virðist nokkuð algengt með lists.asmx svo vonandi mun þetta hjálpa einhverjum í framtíðinni.

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Endalaust hreiður <div> Tags og jQuery

Skildu eftir skilaboð

Þetta virðist eins og svo Oddball efni, Ég er ekki viss um að það er virkilega þess virði að blogga um, en það er aldrei hætt mér áður, svo hér við fara bros

Ég er að vinna út á verkefni þar sem ég draga nokkur gögn úr leit, pökkun upp í XML skeyti og þá sem XML er á endanum breytt í HTML með XSLT. Það er mikið af jQuery þátt, einn bita sem útfærir sumir tabbing virkni. Þegar þú smellir á flipa (í raun, a <div>), jQuery vekur. fela() og. sýna() á ýmsum divs (fyrstu síðu hlaða niðurhal allt það efni þannig að það eru engar postbacks í þessu tilfelli).

A fullt af klukkustundum, flipann skipta rökfræði byrjaði að hegða sér erratically og það myndi ekki sýna einn af tabs mínum. Ég fylgst lokum það niður til þess að Internet Explorer (að minnsta kosti) hélt að <div> merki hreiður langt, langt dýpra en intended.The verktaki tækjastika myndi sýna:

-<div id = "Tab1Content">
-<div>
    -<div>
      -<div id = "Tab2Content">
        -<div>
           ..............................
                   </div> <-Að lokum sýnir það var lokað alla leið niður hér!

Svo, ef ég gerði fyrir $("# Tab1Content").fela(), Ég vil einnig fela Tab2 og ég gæti aldrei sýnt Tab2 ef ég ekki líka að sýna Tab1. Ég afrita og líma kóðann upp í Visual Studio og það sýndi allt fóður div er allt fallega, bara eins og þeir áttu að vera að gera, útlit eins og this:

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

Ég vann höfuð mitt gegn vegg fyrir a á meðan og eftir að í raun HTML kóða var að búa til mikið af tómur <div> merki, eins og:

<líkami>

<div id = "Tab1Content">

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

</div>

<div id = "Tab2Content">

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

</div>

</líkami>

(Hér að ofan er waaaaaaaaaaaay yfir einfaldað. Tóma tags div eru algerlega gildi. Sumir af mínum <div> merki voru full af efni, en margir fleiri voru ekki. Ég kom til að átta sig á að mínar <XSL:fyrir-hvern> tilskipanir voru emitting skammtíma-mynda div tög þegar XSL:fyrir-hvern ekki "fundið nein gögn. Ég neyðist HTML stendur í framleiðslu, eins og sýnt:

Eftir að ég gerði það, allt div er raðað upp fallega og flipi rofi minn byrjaði að vinna.

Eins og alltaf, Ég vona að þetta hjálpar einhverjum í klípa.

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Samt Meira jQuery–Búa til mynd Dæmi

Skildu eftir skilaboð

Ég erfði vefur hluti af gamla seljanda a viðskiptavinarins og það hefur stærð vandamál. Myndirnar ættu að vera 60×50 en fyrir sumir stakur ástæða, upprunalega söluaðili neyðist þá í 42×42, svo þeir líta squashed:

Góð mynd	Bad Mynd

Hér er Markup (nokkuð einfaldað):

<'á útbreiddur-Horfur' Tafla class =>
<thead>
    <tr>
      <th width = '100′>3 Þriðjudagur</th>
    </tr>
</thead>

<tbody>
    <tr class = "spá">
      <td width = '100′>
        <Street>
          <Li class = 'hár'>Hár: 72&þú;F</Li>
          <Li class = "lítið">Low: 44&þú;F</Li>
          <Li Class = 'ástand'>Sunny
            <IMG src =’HTTP://deskwx.weatherbug.com/images/Forecast/icons/localized/60×50/en/trans/cond007.png’ Breidd = '42’ height = '42’ alt =” />
          </Li>
        </Street>
      </td>
    </tr>

</tbody>

</borð>

Þú munt hafa í huga að jafnvel þótt slóð að myndinni sjálfri sýnir rétta vídd (60×50) upprunalega söluaðili neyðist það í 42×42. Hvers vegna? Crazy.

Engu að síður, Ég vildi a fljótur og þægilegur lausn á þessu máli og ég varð að jQuery. The bragð var að finna allar viðeigandi <IMG> merki. Ég vildi ekki muck um með öðrum IMG tags (þar af eru margir). Þessi hluti af jQuery gerði bragð:

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

<handrit type = "text / javascript">
     $(skjal).tilbúinn(virka () {

         $(‘li.condition > 'IMG).hver(virka (Vísitala, atriði)
            {
             $(atriði).CSS("Breidd", "60");
             $(atriði).CSS("Hæð", "50");
            });
     }); // á hleðslu skjal
</handrit>

Það bita af kóða finnur safn <Li> merki þar sem bekknum er "ástand" og <IMG> börn. Það iterates þá í gegnum allt það. Vann eins og a þokki.

Ég gæti líklega einfalda hana, en ég var aldrei góður í Unix strákur að leysa π að 18 tölustafir nákvæmni nota sed og awk og ég er ekki þannig ef jQuery gaur annaðhvort bros .

</enda>

Gerast áskrifandi að bloggið mitt.

Fylgdu mér á Twitter á http://www.twitter.com/pagalvin

Innleiða Global Pop-up tilkynningarkerfi

2 Svör

Ég skrifaði upp grein fyrir www.sharepoint.briefing.com sem ber yfirskriftina "Innleiða Global Pop-up tilkynningarkerfi." Þessi aðgerð var framkvæmd fyrir Community College til að senda skólanum closings vegna snjó og svo framvegis.

Það notar sérsniðna lista, út af the kassi SharePoint vefur þjónustu og sumir jQuery að vinna verk.

Hér er beitu: