SPServicesを使用してクライアントでSharePointデータを取得する

少し前まで、SharePoint 2013のプロジェクトの1つでリストアイテム用の非標準インターフェイスを構築する必要がありました。タスクは、データの受信とページへの出力の2つのサブタスクに分割できます。 2番目の解決方法が多かれ少なかれ明確な場合(データを出力するためのJavaScriptフレームワークが多数あります)、最初のオフハンドのソリューションはプラットフォームWebサービスとしか言えません。 既にそれらで動作するものを作成しようとしていますが、すでにjQueryライブラリSPServicesとして実行されており、SharePoint Webサービス上で動作する機能を使用できます。 認めるために、このトピックがHabréでほとんどカバーされていないことに気付いたとき、私は非常に驚きました。 この記事では、この省略を修正しようとします。



SPServicesは、 Mark Andersonによって作成されたjQueryライブラリであり、クライアント側でSharePoint 2007/2010/2013 Webサービスを簡単に操作できます。 ライブラリには、現在のユーザーの取得からリストアイテムの更新まで、データ操作のための多くの機能が含まれています。



例として、最も一般的なタスクの1つであるリストからデータを取得し、ページの[人物]リストにIvanovという名前のすべての従業員を表示するソリューションを見てみましょう。



開始するには、ライブラリのGetListItems関数を使用して、必要な要素を含むJSONオブジェクトを取得します。



<script type="text/javascript" src="/SiteAssets/libs/SPServices.js"></script> <script> var JSONdata; $(document).ready(function() { $().SPServices({ operation: "GetListItems", webURL: "/PeopleDataWeb", async: false, listName: "People list", CAMLQuery: "<Query><Where><Eq><FieldRef Name='LastName' /><Value Type='Text'></Value></Eq></Where></Query>'; CAMLViewFields: "<ViewFields><FieldRef Name='FirstName' /><FieldRef Name='LastName' /><FieldRef Name='Age' /></ViewFields>", completefunc: function (xData, Status) { JSONdata = $(xData.responseXML).SPFilterNode("z:row").SPXmlToJson({ mapping: { ows_FirstName: {mappedName: "FirstName", objectType: "Text"}, ows_LastName: {mappedName: "LastName", objectType: "Text"}, ows_Age: {mappedName: "Age", objectType: "Integer"} }, includeAllAttrs: true }); } }); }); </script>
      
      





ここで何が起こるか考えてみましょう:





したがって、クライアント側にJSONがあります。 この例を完了するには、ページに表示します。 TelerikのKendo UIフレームワークを使用します。これにより、ページにデータを簡単に表示できます。



 <link href="/SiteAssets/kendo/styles/kendo.common.min.css" rel="stylesheet" /> <link href="/SiteAssets/kendo/styles/kendo.default.min.css" rel="stylesheet" /> <script src="/SiteAssets/kendo/js/kendo.kendo.min.js"></script> <script src="/SiteAssets/kendo/js/kendo.all.min.js"></script> <script> $("#grid").kendoGrid({ columns: [ { title: "First name", field: "FirstName" }, { title: "Last Name", field: "LastName" }, { title: "Age", field: "Age" } ], dataSource: { data: JSONdata, }, height: 600 }); </script> <div id="grid"></grid>
      
      





使用された文献:







質問、希望、呪いがある場合は、コメントを歓迎します。



All Articles