टाइपस्क्रिप्ट के साथ SharePoint 2013 एप्लिकेशन विकसित करें

पिछली बार मैंने अनुप्रयोग विकास के लिए टाइपस्क्रिप्ट का उपयोग करने के लाभों का वर्णन किया था।

इस पोस्ट में, मैं दिखाऊंगा कि टाइपस्क्रिप्ट आपको SharePoint 2013 के लिए एप्लिकेशन विकसित करने में कैसे मदद करता है। SharePoint 2013 में, जावास्क्रिप्ट क्लाइंट विकास क्षमताओं में सुधार किया गया है। यह न केवल क्लाइंट पर उपलब्ध एपीआई पर लागू होता है, बल्कि अनुप्रयोगों और डेवलपर टूल के वितरण और परिनियोजन तंत्र पर भी लागू होता है। इसके अलावा, SharePoint 2013 की कई सुविधाएँ स्वयं कार्यान्वित की जाती हैं और उन्हें जावास्क्रिप्ट का उपयोग करके अनुकूलित किया जा सकता है।


SharePoint 2013 क्लाइंट पक्ष पर उपयोग के लिए दो प्रकार के API प्रदान करता है: क्लाइंट-साइड ऑब्जेक्ट मॉडल (CSOM) और REST API। REST API आपको REST (OData) वेब सेवा का उपयोग करके सर्वर पर ऑब्जेक्ट को हेरफेर करने की अनुमति देता है। CSOM उन वर्गों का एक संग्रह है, जो शब्दार्थ सर्वर ऑब्जेक्ट मॉडल के समान हैं। CSOM जावास्क्रिप्ट के लिए उपलब्ध है (जिसे JSOM - JavaScript ऑब्जेक्ट मॉडल भी कहा जाता है) और .NET के लिए। लेकिन जावास्क्रिप्ट में, .NET के विपरीत, मेटाडेटा और टाइपिंग उपलब्ध नहीं हैं। यह लेख ठीक JSOM के उपयोग की जाँच करेगा।

टाइपस्क्रिप्ट आपको JSOM के लिए प्रकारों का वर्णन करने और अनुप्रयोगों को विकसित करते समय स्थिर प्रकार की जाँच और सूचना का उपयोग करने की अनुमति देता है। दुर्भाग्य से, SharePoint 2013 के लिए तैयार प्रकार की परिभाषाएँ सार्वजनिक रूप से उपलब्ध नहीं हैं।

मुझे और आंद्रेई मार्केव ने एक कोडप्लेक्स प्रोजेक्ट बनाया जिसमें हमने टाइप 2013 की परिभाषाएँ और SharePoint 2013 के लिए नमूना टाइपस्क्रिप्ट अनुप्रयोगों का एक गुच्छा बनाया। प्रोजेक्ट लिंक http://sptypescript.codeplex.com/ है

आवेदन उदाहरण

उदाहरण के लिए, हम एक ऐसा एप्लिकेशन बनाएंगे जो आपको कार्यस्थल पर समय ट्रैक करने की अनुमति देता है।

ट्रेनिंग

सबसे पहले आपको चाहिए:

• SharePoint 2013 के लिए एप्लिकेशन डेवलपमेंट टूल इंस्टॉल करें।
• 2012 वेब अनिवार्यें स्थापित करें।
• टाइपस्क्रिप्ट स्थापित करें।
• यदि आपके पास पहले से ही Office365 नहीं है, तो आप डीबगिंग और परीक्षण के लिए 90-दिवसीय परीक्षण बना सकते हैं ।
• SharePoint होस्टेड अनुप्रयोग प्रोजेक्ट बनाएँ।

प्रोजेक्ट बनाते समय टाइपस्क्रिप्ट को संकलित करने के लिए, निम्न तत्वों को .csproj फ़ाइल में जोड़ा जाना चाहिए:

<PropertyGroup> <TypeScriptTarget>ES3</TypeScriptTarget> <TypeScriptIncludeComments>true</TypeScriptIncludeComments> <TypeScriptSourceMap>true</TypeScriptSourceMap> </PropertyGroup> <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" /> 

पुस्तकालय और परिभाषाएँ

एक्सटेंशन koLite के साथ नॉकआउट लाइब्रेरी का उपयोग करके विज़ुअल इंटरफ़ेस बनाया जाएगा।

परियोजना में इन पुस्तकालयों का उपयोग करने के लिए, आपको निम्नलिखित NuGet संकुल जोड़ने की आवश्यकता है:

• KoLite (नॉकआउट स्वचालित रूप से जोड़ दिया जाएगा)
• jquery.TypeScript.DefinitelyTyped
• knockout.TypeScript.DefinitelyTyped
• kolite.TypeScript.DefinitelyTyped

पिछले तीन पैकेज .d.ts फाइलें हैं जो टाइपस्क्रिप्ट के लिए प्रकारों का वर्णन करते हैं।

टाइपस्क्रिप्ट में JSOM के साथ काम करने के लिए, आपको SharePoint.d.ts फ़ाइल को प्रोजेक्ट में जोड़ना होगा, जो यहां पाया जा सकता है । NuGet पैकेज जल्द ही उपलब्ध होगा।

मांग पर स्क्रिप्ट डाउनलोड करें
SP.SOD वर्ग में SharePoint की अपनी ऑन-डिमांड स्क्रिप्ट लोडर है। इस पोस्ट में एक विस्तृत विवरण पाया जा सकता है।

आवेदन स्क्रिप्ट लोडर कोड:

 ///<reference path="typings/SharePoint.d.ts" /> ///<reference path="typings/jquery/jquery.d.ts" /> ///<reference path="typings/knockout/knockout.d.ts" /> /// <reference path="ViewModel.ts" /> $(() => { SP.SOD.registerSod('ViewModels', _spPageContextInfo.webServerRelativeUrl + '/Scripts/ViewModel.js'); SP.SOD.registerSodDep('ViewModels', 'sp.js'); SP.SOD.executeFunc('ViewModels', null, () => { var vm = new ViewModels.Model(SP.ClientContext.get_current()); ko.applyBindings(vm); }); }); 

प्रस्तुति मॉडल

एप्लिकेशन पेज लेआउट:

 <div> <p data-bind="text:message"></p> <button data-bind="text:buttonText, command: checkInOut, visible:isLoaded" style="display:none;"/> </div> 

कोलाइट प्लगइन का उपयोग एसिंक्रोनस कमांड के लिए किया जाता है ।

देखें मॉडल कोड:

 module ViewModels { export class Model { constructor(public context: SP.ClientContext) { this.isLoaded = ko.observable(false); this.message = ko.observable(''); this.buttonText = ko.observable(''); this.checkInOut = ko.asyncCommand({ canExecute: (isExecuting) => !isExecuting && this.isLoaded(), execute: this.executeCheckInOut }); this.init(); } public message: KnockoutObservableString; public buttonText: KnockoutObservableString; public checkInOut: KoliteCommand; public isLoaded: KnockoutObservableBool; //... } } 

सभी प्रकारों को .d.ts फ़ाइलों में वर्णित किया जाता है और संकलन पर जाँच की जाती है
JSOM, निष्पादित होने पर, SP.ClientContext.executeQueryAsync फ़ंक्शन द्वारा सर्वर को भेजी गई आदेशों की एक कतार बनाता है। executeQueryAsync दो कॉलबैक स्वीकार करता है, पहले को सफलता पर, दूसरे को असफलता पर बुलाया जाता है। ध्यान दें, यह पॉइंटर निष्पादनयोग्य कॉल के अंदर खराब हो जाता है , लेकिन यदि आप कॉलबैक को लैम्ब्डा के रूप में निर्दिष्ट करते हैं, तो टीएस सावधानी से उस कोड को उत्पन्न करता है जो इस पॉइंटर को स्टोर करता है।

 private init() { this.list = this.context.get_web().get_lists().getByTitle('Log'); var items = this.list.getItems(SP.CamlQuery.createAllItemsQuery()); this.context.load(items); this.context.executeQueryAsync( () => { this.processItems(items); this.setData(); this.isLoaded(true); }, (sender, args) => alert(args.get_message())); }; 

JSOM में तत्वों के समूह के लिए एक क्वेरी सरणी वापस नहीं करती है, लेकिन उन वस्तुओं का एक संग्रह जो IEnumerable इंटरफ़ेस को लागू करता है, हालांकि एक सरणी वस्तु के अंदर निहित है। यह सब इस तथ्य के कारण है कि क्लाइंट ऑब्जेक्ट मॉडल का अधिकांश सर्वर ऑब्जेक्ट मॉडल से उत्पन्न होता है, और सभी संग्रहों को त्रिकोणीय के लिए एक विशेष पैटर्न की आवश्यकता होती है। IEnumerable संग्रह को संभालने के लिए .NET कोड के साथ यह 100% अनुपालन है।

क्वेरी परिणाम संसाधित करना:

 private processItems(items: SP.ListItemCollection) { this.hoursSubmitted = 0; var enumerator = items.getEnumerator(); while (enumerator.moveNext()) { var item = <SP.ListItem>enumerator.get_current(); var author = <SP.FieldUserValue>item.get_item('Author'); //Filter by current user if (author.get_lookupId() == _spPageContextInfo.userId) { var dateCompleted = item.get_item('DateCompleted'); if (dateCompleted) { this.hoursSubmitted += item.get_item('DurationInHours'); } else { this.curentItem = item; } } } } 

ऊपर दिए गए कोड से यह भी पता चलता है कि टाइप कास्टिंग कैसे की जाती है। टाइपस्क्रिप्ट सभी प्रकार के कास्टिंग ऑपरेशन पर भरोसा करता है, इसलिए आपको यह सुनिश्चित करने की आवश्यकता है कि वे सही हैं।

कमांड प्रोसेसिंग
मॉडल की वर्तमान स्थिति के आधार पर, एक चेक-इन या चेक-आउट किया जाता है।

 private executeCheckInOut(complete: () => void ) { if (this.curentItem) { this.checkOut(complete); } else { this.checkIn(complete); } }; 

चेक-इन ऑपरेशन पूरा समय निर्दिष्ट किए बिना, SharePoint सूची में एक नया आइटम बनाने के लिए है।

 private checkIn(complete: () => void ) { var item = this.list.addItem(new SP.ListItemCreationInformation()); item.set_item('StartDate', new Date()); item.update(); this.context.executeQueryAsync( () => { this.curentItem = item; this.setData(); complete(); }, (sender, args) => { alert(args.get_message()); complete(); }); } 

विपरीत ऑपरेशन, चेक-आउट, समय और अवधि को घंटों में पूरा करता है।

 private checkOut(complete: () => void ) { var startedDate = <Date>this.curentItem.get_item('StartDate'); var dateCompleted = new Date(); var hours = (dateCompleted.getTime() - startedDate.getTime()) / (1000 * 60 * 60); this.curentItem.set_item('DateCompleted', dateCompleted); this.curentItem.set_item('DurationInHours', hours); this.curentItem.update(); this.context.executeQueryAsync( () => { this.curentItem = null; this.hoursSubmitted += hours; this.setData(); complete(); }, (sender, args) => { alert(args.get_message()); complete(); }); } 

दोनों ही मामलों में, एक ही "पैटर्न" का उपयोग किया जाता है। सबसे पहले, सर्वर पर भेजने के लिए आदेशों का एक पैकेज उत्पन्न होता है, और सफल अनुप्रयोग के बाद, मॉडल में परिवर्तन दिखाई देते हैं।

निष्कर्ष

आप लिंक से पूर्ण उदाहरण कोड डाउनलोड कर सकते हैं। मैं प्रोजेक्ट कोड और SharePoint ( स्रोत कोड ) के लिए टाइपस्क्रिप्ट परिभाषाओं का उपयोग करने के उदाहरणों को देखने की भी सिफारिश करता हूं, आपको कई दिलचस्प चीजें मिलेंगी।

वैसे, नमूना कोड स्वयं SharePoint 2010 में काम करेगा, लेकिन आपको एक अन्य प्रोजेक्ट बनाना होगा और समाधान कलाकृतियों को एक अलग तरीके से तैनात करना होगा ताकि सब कुछ एक साथ काम करें।

और अगली बार मैं इस बारे में बात करूंगा कि आप SharePoint 2013 में फ़ॉर्म और सूची विचारों को कैसे अनुकूलित कर सकते हैं, और टाइपस्क्रिप्ट के साथ भी।