More Related Content
Similar to SharePointアドイン開発 Line風Chat アドイン (20)
More from Akihiro Ehara (13)
SharePointアドイン開発 Line風Chat アドイン
- 7. カスタムWebページのロジック
ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");
function initializePage()
{
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
context.load(user);
context.executeQueryAsync();
$(document).ready(function () {
//ページ表示処理
});
function autoUpdateMessages() { //自動更新はsetTimeoutを利用している
updateMessages(currentDisscussion, autoLatestUpdated, function () {
setTimeout(autoUpdateMessages, 5000);
});
}
}
クライアント側のJavaScriptでロジックは記述。ページの初期表示はsp.jsを読
み込んだ後のdocument readyのタイミングで行う。自動更新はsetTimeoutを利
用している
- 8. 掲示板の検索
function createAllMessagesByDisscussionIDQuery(disscussionId, lastmodified) {
var qry = new SP.CamlQuery;
var viewXml;
if (lastmodified) {
viewXml = "<View Scope='Recursive'> ¥
<Query> ¥
<Where> ¥
<And> ¥
<Eq> ¥
<FieldRef Name='ParentFolderId' /> ¥
<ValueType='Integer'>" + disscussionId + "</Value> ¥
</Eq> ¥
<Gt> ¥
<FieldRef Name='Modified' /> ¥
<ValueType='DateTime'StorageTZ='TRUE' IncludeTimeValue='TRUE'>"
+ ISODateString(lastmodified) + "</Value> ¥
</Gt> ¥
</And> ¥
</Where> ¥
</Query> ¥
</View>";
} else {
}
qry.set_viewXml(viewXml);
return qry;
}
CAMLを使うと複雑な検索もできる!!
- 9. リストの検索
SharePoint JavaScript オブジェクト モデルを利用したリスト検索
は効果的にデータを取得するため独特のステップが必要
1
• 検索条件をCAMLで構築
camlQuery.set_viewXml()
2
• リストを検索(実際には検索されない)
completedItems = employeeList.getItems(camlQuery);
3
• 取得するプロパティを指定
clientContext.load(completedItems);
4
• 検索の実行(実際に検索)
clientContext.executeQueryAsync(success,fail);
- 10. 全体レイアウト
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div id="navigation-area">
<div><p>
<asp:HyperLink runat="server"
NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Lists/Chat/AllItems.aspx';"
Text="掲示板の管理" />
</p></div>
<p>ディスカッション</p>
<ul id="discussion-items">
</ul>
</div>
<div id="main-area">
<table id="discussion-messages">
<tbody> </tbody>
<tfoot>
<tr><td></td><td>
<div id="input-message-area" style="display:none;">
<textarea rows="5" cols="10" id="input-message" ></textarea>
<input id="send-message" type="button" value="送信" />
</div>
</td><td></td></tr>
</tfoot>
</table>
</div>
</asp:Content>
カスタムページとCSSを利用して全体レイアウトを作成する
HTMLと少しWeb Formの知識があれば簡単