Archives Catégorie: jQuery et SharePoint

Surmonter un problème ennuyeux avec des URL relatives dans le lancement rapide de SharePoint

Laisser une réponse

Je voulais ajouter un lien vers la navigation lancement rapide l'autre jour et m'a SharePoint:

image

Version texte pur qui est:

Assurez-vous que l'URL est valide et commence par soit un caractère valide (un signe dièse (#) ou oblique (/)) ou un protocole de prise en charge valable (par exemple, « http://’, « https://’, ' fichier://’, « ftp://’, « mailto:’, « nouvelles:’).

"Blech et pox!"J'ai dit.

Une solution de contournement consiste à utiliser JavaScript pour trouver un lien connu dans le lancement rapide et substituer son comportement.

Pour tester cette, Ajouter un nouveau lien à votre site de test thusly:

image

J'ai utilisé jQuery. Pour le résoudre, obtenir quelques JavaScript et jQuery sur la page à l'aide de votre technique préférée et avec une ligne de code suivante:

 

$(document).prêt( fonction () {

    $("un:contient(« Tester le remplacement de l'URL »)").Cliquez sur(fonction () { alerte("Cliquez sur changement de comportement!"); retour faux;});

});

Et ton oncle Bob.

Le sélecteur jQuery conclut chaque <un> balise qui a « Test URL de remplacement » dans son nom. Vous pouvez trouver-tune qui selon votre lien et autres.

Le .Cliquez(fonction() remplace tout ce qui l'aurait fait SharePoint lorsque l'utilisateur a cliqué. Assurez-vous que vous « retournez false » ou bien il va faire vos trucs et puis essayez de la chose href trop, qui n'est certainement pas votre but.

Cela a été fait et test dans un environnement en ligne de SharePoint mais doit travailler bien en 2010 et plus tôt aussi.

</fin>

undefinedS'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Simple et rapide: Résoudre "paramètre d'URL non valide” problème avec UpdateListItems en lists.asmx

1 Réponse

Lorsque vous travaillez avec UpdateListItems via lists.asmx, Il est facile de générer une erreur:

Paramètre d'URL non valide.

L'URL fournie contient une valeur ou une commande non valide. Veuillez vérifier de nouveau l'URL.

Vous pouvez obtenir cette erreur quand on oublie d'inclure l'ID dans la la liste des champs à mettre à jour.  Ce, comme beaucoup de ces SP services web, est un peu paradoxal étant donné que vous devez inclure l'ID dans l'attribut ID de la <Méthode> élément.  Et vous n'êtes pas mis à jour des ID et voulez probablement jamais en premier lieu.

Cette enveloppe SOAP fonctionne:

<soapenv:Enveloppe xmlns:soapenv =« http://schemas.xmlsoap.org/soap/envelope/'>
  <soapenv:Corps>                      
    <UpdateListItems xmlns =« http://schemas.Microsoft.com/SharePoint/SOAP/'>                     
      <nom de la liste>{C712E2EA-54E1-47AD-9D99-1848C7773E2F}</nom de la liste>                     
        <mises à jour>                     
         <Lot OnError ="Continuer">
          <Méthode ID =1"" Cmd =Mise à jour"">
            <Nom de champ ="CooperativeLock">verrouillé!</Champ>
            <Nom de champ =« CARTE D'IDENTITÉ">1</Champ>
          </Méthode>
        </Lot>                     
        </mises à jour>                
      </UpdateListItems>             
  </soapenv:Corps>         
</soapenv:Enveloppe>

Si vous supprimez la référence de champ ID puis vous obtiendrez le message « Paramètre URL invalide » ennuyeux.

</fin>

undefinedS'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

 

Pauvre homme de mise en cache en JavaScript

1 Réponse

[TL;DR version: utiliser des cookies pour stocker les résultats des appels asynchrones; restituer les résultats des dernières async appels immédiatement et puis validez-les après chargement de la page.]

J'ai travaillé sur le site intranet SharePoint pour un client qui dispose, entre autres choses, une navigation secondaire stylisée dont les options du menu sont gérées via une liste personnalisée vieux ordinaire.  L'idée est que le client obtient contrôler le menu de « leur » site sans affecter ou être affecté par le système mondial de navigation par elle.

(Il y a quelque chose d'incroyablement subversif sur l'ajout d'un CEWP qui pointe vers un fichier HTML qui charge des CSS et JS fondamentalement modifier presque tout sur le comportement d'un site... mais c'est pour un autre poste)

Le code pour cet jolie simple:

Le mal ici spot, c'est que chaque fois que quelqu'un frappe une des pages du site, navigateur web de l'utilisateur tend la main pour obtenir des éléments de la liste.  Lorsque dev est terminée et l'essai a prouvé des choses à être stable et complet, Cet appel n'est pas nécessaire plus de 99% du temps étant donné que le menu change rarement.  Il a aussi un effet bizarre de UI qui est commun dans ce nouveau monde de sites web hyper-ajaxy – rend la page et ensuite seulement le menu rend.  Il est nerveux et distrayant à mon avis.  Et de nervosité. Si, la mise en cache. 

J'ai modifié la logique thusly:

  • Recherchez un cookie dans le navigateur qui contient le menu, comme je l'ai lu dernière
    • Si trouvé, rendent immédiatement.  N'attendez pas la page pour terminer le chargement.  (Vous devez vous assurer que votre code HTML est stratégiquement placé ici, mais ce n'est pas difficile à faire).
  • Attendez que la page pour terminer le chargement et appeler un async pour charger les éléments de menu dans une liste à l'aide de repos ou lists.asmx ou autre
  • Comparer ce que j'ai contre le cookie
    • Si elle correspond, ARRÊT
    • Dans le cas contraire, à l'aide de jQuery, remplir dynamiquement un tas si <Li>les de dans un <UL>
  • Utiliser les CSS pour faire tout le formatage
  • Profit!

Certains d'entre vous vont dire, "Hé! Il n'y a aucune véritable cache passe ici puisque vous lisez le menu quand même à chaque fois.”  Et vous avez raison-je ne remets pas le serveur tout type de rupture.  Mais parce que l'appel est asynchrone et arrive après que la page initiale de la charge utile HTML rend pleinement, il « sent » plus réactif à l'utilisateur.  Le menu rend assez autant que dessine la page.  Si le menu arrive au changement, l'utilisateur est soumis à une re-dessiner de nervosité du menu, mais seulement qu'une fois.

Il existe des moyens pour accroître l'efficacité de cette mise en cache et dépanner le serveur en même temps:

  • Mettre dans une règle que le cache de « cookie » est valable pour un minimum de 24 heures ou quelques autres délais. Tant qu'il n'y a aucun cookie a expiré, Utilisez instantané menu du cookie et ne jamais frapper le serveur.

Eh bien... c'est tout ce qui viennent à l'esprit dès maintenant :). 

Si quelqu'un a des idées intelligentes ici je serais ravi de les connaître.

Et enfin, cette technique peut être utilisée pour d'autres trucs.  Page de ce client a un certain nombre de choses pilotés par les données sur les différentes pages, beaucoup d'entre eux changer relativement rarement (comme une fois par semaine ou une fois par mois).  Si vous ciblez des zones spécifiques de la fonctionnalité, vous pouvez donner une interface utilisateur plus réactive en extraient le contenu du magasin local de cookie et de rendre immédiatement.  Il se sent plus rapidement à l'utilisateur, même si vous n'enregistrez pas le serveur des cycles.  Vous peut sauver les cycles serveur en décidant sur certaines conditions et déclencheurs d'invalider ce cache de cookie local.  C'est tout situationnelle et artsy trucs et vraiment le plus amusant :). 

</fin>

undefinedS'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Échantillons de XSLT et jQuery

2 réponses

J'ai fait beaucoup de XSLT et jQuery et pensée que serait partager quelques extraits que d'autres peuvent trouver utiles dans l'avenir.

Exemple 1: Émettent JavaScript simple / jQuery dans XSLT:

<XSL:match de modèle « quelque chose =" XML:espace = « sauvegarde »>

  <!– Vide dans le champ masqué de requête filtres amical –>
  <script type = « text/javascript »>
    $(document).prêt(fonction(){
      $(« #QueryFriendlyFilters »).Val(« vide »);
    });
  </script>

</XSL:modèle>

Que le bit émet quelques JavaScript qui attend pour la page à la fin de chargement (en raison de la $(document).prêt(…)) et puis définit la valeur d'un champ masqué nommé QueryFriendlyFilters dans la valeur littérale « vide ».

Exemple 2: Utilisation <XSL:Si> pour vérifier la « supérieur à »,  « moins de », etc..

<XSL:match de modèle « quelque chose =" XML:espace = « sauvegarde »>

  <div id = « fdcAllFilters »>
 
    <XSL:si test="@Count>0">
      <span class = « fdcFilterLabel »>Filtres actifs:</travée>
    </XSL:Si>

    <!– plus de choses se passe ici. –>

</XSL:modèle>

L'extrait de code ci-dessus vérifie si un attribut nommé « Comte » de l'élément « quelque chose » est supérieur à zéro.  Le code XML derrière ce serait quelque chose comme:”

<quelque chose de Count = « 5 » />

Exemple 3: Parcourir tous les éléments, disséminer les appels jQuery.

<!– Parcourir tous les filtres et afficher le bon  Liens. –>
<XSL:pour chaque select = « UserFilter »>

  <une classe = FilterHref »" href = "javascript:mySubmitPage(« RemoveUserFilter »,'{@ ID}’)">[X]</un>

  <span class = « fdcFilterLabel »><XSL:valeur de select="@FilterValue"/></travée>

  <script type = « text/javascript »>

    $(document).prêt(fonction(){
        <XSL:texte><![CDATA[$(« #QueryFriendlyFilters »).Val( ($(« #QueryFriendlyFilters »).Val() + " ]]></XSL:texte>\"<XSL:valeur de select="@FilterValue"/>\"<XSL:texte><![CDATA["));]]></XSL:texte>
    });

  </script>

</XSL:pour chaque>

L'extrait de code ci-dessus est le plus complexe et il peut y avoir des moyens plus faciles de le faire.

Le XML derrière tout cela ressemble grossièrement à ce:

<UserFilter ID = « 123 » FilterValue = « xyzzy » />

Cet extrait est une itération à travers <UserFilter> nœuds. 

Elle émet d'abord une ancre qui balise lorsque l'utilisateur clique sur invoque une fonction JavaScript qui est déjà sur la page, « mySubmitPage » et passe la valeur d'un attribut le <UserFilter> nœud nommé « ID ». 

Il émet ensuite certains jQuery qui attend pour la page de chargement.  Que jQuery met à jour un champ masqué nommé « QueryFriendlyFilters » en ajoutant la valeur de l'attribut FilterValue.  Remarque tous le fou <XSL:texte> et <![CDATA[ … ]]> Stuff.

C'est tout, espérons que cela aide!

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Lists.asmx, GetListItems et dossiers

6 réponses

J'ai fait quelques recherches pour quelqu'un d'aujourd'hui autour de list.asmx web service fourni dans le cadre du SharePoint 2010 (et plus tôt).  Elle a réussi à obtenir les éléments de liste dans le dossier racine (les noms des sous-dossiers), mais il n'a pas pu obtenir des éléments dans les sous-dossiers.  J'ai fait quelques recherche sur les internets, et c'est une question très commune.  Encore, Je ne pouvais pas obtenir une bonne réponse à la question simple, « Si je sais que le dossier, Comment puis-je obtenir les éléments dans le dossier?”  Pour être honnête, I Didn't try tout cela dur depuis que j'ai voulu celui-ci sur la figure sur mes propres pendant un certain temps Sourire.

Pour définir cette, J'ai créé un site nommé « Blogging scénarios » et une liste personnalisée nommée « Liste personnalisée avec Sub dossiers ».  Ensuite, j'ai créé des dossiers nommés:

  • Année 2005
  • Année 2006
  • Année 2007

J'ai ajouté quelques éléments dans le dossier « L'année 2006 ».  C'est à quoi il ressemble:

image

Mon ami n'est pas écrire du code c#, mais plutôt à l'aide de Java, Si l'enveloppe SOAP a été ce qu'elle a vraiment besoin.  Pour obtenir que, J'ai écrit un peu de jQuery et ensuite utilisé un violon pour obtenir la conversation réelle de HTTP.

Voici le jQuery pertinent (J'ai copié le code vers le bas ci-dessous si vous souhaitez copier/coller):

image

Ils première clé est d'inclure tous les deux un <queryOptions> et <QueryOptions> nœud.  La seconde clé est que les <Dossier> le noeud est une URL à laquelle le client a accès.

Il y a peut-être d'autres façons d'obtenir ce, mais cela a fonctionné ainsi pour moi lors de l'utilisation de jQuery.

Voici l'enveloppe SOAP de ce qui précède:

<soapenv:Enveloppe xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’>                
  <soapenv:Corps>
    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’>
      <nom de la liste>Liste personnalisée avec les sous répertoires</nom de la liste>
      <viewFields>  
        <ViewFields>
          <FieldRef nom =' titre’ />
          <FieldRef nom ='EncodedAbsUrl’ />
        </ViewFields>
      </viewFields>
      <queryOptions>
        <QueryOptions>
          <Dossier>http://demoserver1/blog Liste de scénarios/listes/Custom avec Sub dossiers/année 2006</Dossier>
        </QueryOptions>
      </queryOptions>
    </GetListItems>
  </soapenv:Corps>
</soapenv:Enveloppe>

Beaucoup d'exemples et de discussion autour de ce m'a amené à croire que tout ce dont j'ai besoin est <QueryOptions> et spécifiez un nom de dossier.  Pour moi, J'ai à la fois placez-le à l'intérieur <queryOptions> ainsi que de spécifier une URL qualifiée complète pour la <Dossier> nœud.

Voici le programme d'installation de jQuery AJAX:

$(document).prêt(fonction() {
       var soapEnv =
           "<soapenv:Enveloppe xmlns:soapenv =’http://schemas.xmlsoap.org/soap/envelope/’> \
               <soapenv:Corps> \
                    <GetListItems xmlns =’http://schemas.Microsoft.com/SharePoint/SOAP/’> \
                       <nom de la liste>Liste personnalisée avec les sous répertoires</nom de la liste> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef nom =' titre’ /> \
                              <FieldRef nom ='EncodedAbsUrl’ /> \
                          </ViewFields> \
                       </viewFields> \
                       <queryOptions> \
                         <QueryOptions> \
                           <Dossier>http://demoserver1/Blogging Liste de scénarios/listes/Custom avec Sub dossiers/année 2006</Dossier> \
                         </QueryOptions> \
                       </queryOptions> \
                   </GetListItems> \
               </soapenv:Corps> \
           </soapenv:Enveloppe>";

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Lists.asmx, GetList et « valeur ne peut pas être null”

1 Réponse

J'ai découvert aujourd'hui que la GetList() méthode en lists.asmx service Web doit être appelée très soigneusement ou il est enclin à lancer un mystérieux « Valeur ne peut pas être null » exception (et qui est en supposant que vous aurez passé le message d'erreur générique encore pire, "Exception de type « Microsoft.SharePoint.SoapServer.SoapServerException’ a été lancée. »)  Spécifiquement, Je trouve que vous ne peut pas fournir toute sorte de préfixe sur la méthode GetList.  L'extrait suivant de jQuery illustre le point:

image

Si vous faites cela, le service web répond avec « Valeur ne peut être null » selon cette violon-fourni la transcription HTTP:

<?XML version = "1.0" Encoding = « utf-8 »?>
  <savon:Enveloppe
     xmlns:savon ="http://schemas.xmlsoap.org/soap/envelope/"    
     xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance”
     xmlns:xsd ="http://www.w3.org/2001/XMLSchema">

  <savon:Corps>
    <savon:Faute>
      <FaultCode>savon:Serveur</FaultCode>
      <FaultString>
        Exception de type « Microsoft.SharePoint.SoapServer.SoapServerException’ a été levée.
      </FaultString>
      <détail>
        <ErrorString xmlns ="http://schemas.Microsoft.com/SharePoint/SOAP/">
Valeur ne peut pas être null.
        </ErrorString>
      </détail>
    </savon:Faute>
  </savon:Corps>
</savon:Enveloppe>

Bien sûr, vous ne serait pas probablement ajouter ce préfixe « s0 » sur votre propre, mais certains outils ont tendance à le faire (comme Eclipse).

C'est d'autant plus déroutant / frustrant parce que les autres méthodes de tolèrent les préfixes.  Par exemple, le GetListCollection méthode n'est pas l'esprit si elle est été préfixé, même avec les préfixes absurdes comme « xyzzy »:

image

Cette « valeur ne peut pas être null » semble assez commun avec lists.asmx donc j'espère que cela aidera quelqu'un sortir à l'avenir.

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Sans cesse de nidification <Div> Étiquettes et jQuery

Laisser une réponse

Cela semble un tel sujet d'excentrique, Je ne suis pas sûr que c'est vraiment utile sur les blogs, mais qui a jamais cessé de me avant, donc ici, nous allons Sourire

Je travaille un projet où je suis tirer certaines données de recherche, emballage il dans un message XML, puis que XML est finalement transformé en HTML via XSLT.  Il y a beaucoup de jQuery, un bit qui implémente certaines fonctionnalités de tabulation.  Lorsque vous cliquez sur un onglet (vraiment, un <Div>), jQuery appelle .hide() et .show() sur divers divs (le chargement de la page initiale télécharge tout le contenu, il n'y a aucune publication dans ce cas).

Un tas de jours ago, l'onglet logique de commutation a commencé à se comporter de façon erratique et il ne serait pas montrer un de mes onglets.  J'ai finalement suivi il vers le fait qu'internet explorer (au moins) estime que la <Div> balises imbriquées loin, beaucoup plus profond que prévu.La barre d'outils développeur montrerait:

-<div id = « Tab1Content »>
  -<Div>
    -<Div>
      -<div id = « Tab2Content »>
        -<Div>
           …………………………
                   </Div>  <— montrant Enfin il fut fermé jusqu'ici!

Si, Si j'ai fait un $(« # Tab1Content »).cacher(), Tab2 serait également masquer et je ne pourrais jamais montrer Tab2 si je n'a pas montrer aussi Tab1.  J'ai copié et collé le code dans visual studio et il a montré de doublure de la div pied joliment, tout comme ils étaient censés faire, qui ressemble à ceci:

-<div id = « Tab1Content »>
  +<Div>
  +<Div>
-<div id = « Tab2Content »>
  +<Div>
  +<Div>

Je bat ma tête contre le mur pendant un certain temps et a remarqué que dans le réel HTML code générait beaucoup de vide <Div> balises, comme:

<corps>

  <div id = « Tab1Content »>

    <div id = « row1 » />
    <div id = « row2 » />

  </Div>

  <div id = « Tab2Content »>

    <div id = « row1 » />
    <div id = « row2 » />

  </Div>

</corps>

(Ce qui précède est waaaaaaaaaaaay trop simplifié.  Les balises div vide sont totalement valides. Certains de mes <Div> balises étaient pleins de contenu, mais beaucoup d'autres ne le sont pas.  Je suis arrivé à la prise de conscience que mon <XSL:pour chaque> les directives ont été émettant la forme abrégée des balises div quand le xsl:n'a pas pour chaque « trouver toutes les données.  J'ai forcé un commentaire HTML dans la sortie, comme le montre:

image

 

Après que je le faisais, la div alignés parfaitement et mon onglet basculement a commencé à travailler.

Comme toujours, J'espère que cela aide quelqu'un dans une pincée.

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Encore plus de jQuery–Redimensionner l'Image par exemple

Laisser une réponse

J'ai hérité un composant WebPart de vieux vendeur de son client et elle a un problème de taille des images.  Les images doivent être 60×50 mais pour une raison étrange, le vendeur initial les contraint à 42×42, ils cherchent donc écrasés:

 

Bon Image

Mauvaise Image

Voici le balisage (quelque peu simplifiées):

<Tableau de classe = « étendu-outlook »>
  <THEAD>
    <TR>
      <Th  largeur = 100′>3 Mardi</Th>
    </TR>
  </THEAD>

  <tbody>
    <classe TR = « prévisions »>
      <largeur de TD = 100′>
        <UL>
          <classe Li = « high »>Haute: 72&deg;F</Li>
          <classe Li = « faible »>Faible: 44&deg;F</Li>
          <classe Li = « condition »>Sunny
            <img src =’http://deskwx.Weatherbug.com/images/Forecast/Icons/localized/60×50/en/trans/cond007.PNG’ largeur = 42’ hauteur = 42’ Alt =” />
          </Li>
        </UL>
      </TD>
    </TR>

  </tbody>

</table>

Vous remarquerez que même si la chemin d'accès à l'image de soi montre la bonne dimension (60×50) le fournisseur original l'a forcé à 42×42.  Pourquoi?  Crazy.

De toute façon, Je voulais une solution rapide et facile à cette question et je me tournai vers jQuery.  Le truc est de localiser toutes les <img> balises.  Je ne voulais pas muck avec les autres balises img (dont il existe de nombreux).  Ce bit de jQuery a fait le truc:

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

<script type = « text/javascript »>
     $(document).prêt(fonction () {

         $(' li.condition > img »).chaque(fonction (index, élément)
            {
             $(élément).CSS(« largeur », « 60 »); 
             $(élément).CSS(« hauteur », « 50 »);
            });
     }); // le chargement du document
</script>

Que le bit de code trouve la collection <Li> balises dont la classe est « condition » et <img> enfants.  Puis itère tout cela.  A fonctionné comme un charme.

Je pourrais probablement simplifier il, mais j'ai jamais été un genre de guy unix résoudre π À 18 précision de chiffres à l'aide de sed et awk et je ne suis pas ce genre si jQuery guy soit Sourire.

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Mettre en place un système Global de Notification pop-up

2 réponses

J'ai écrit un article pour www.SharePoint.briefing.com le droit »Mettre en place un système Global de Notification pop-up.”  Cette fonction a été mis en place pour un collège communautaire de communiquer des fermetures d'écoles en raison de la neige et ainsi de suite. 

Il utilise une liste personnalisée, Out of the box SharePoint web services et certains jQuery pour faire le travail.

Voici un teaser:

image

Lire tout cela ici: http://www.sharepointbriefing.com/features/article.php/3918471/Implement-a-Global-Pop-up-Notification-System.htm

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin

Prendre le contrôle de votre OK et annuler les boutons

3 réponses

J'ai écrit Cet article un tout nouveau, mais les regards comme je ne lier à elle de mon blog au moment, donc voilà:

image

Cet article explique comment forcer newform.aspx pour rediriger vers une page lorsque l'utilisateur clique sur OK et une autre page lorsqu'elle clique sur Annuler.

</fin>

S'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin