fx-docs Documentation

fx-docs DocumentationRelease 0.1.0

Jubei

Aug 19, 2017

Phát trin sn phm

1 Gii thiu 3

2 Cài dt môi trng 52.1 Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.2 npm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52.3 Cmder (nên cài) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.4 Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72.5 Bower . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92.6 Gulp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

3 AdminLTE 133.1 Cài dt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133.2 S dng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

4 Metronic 25

5 SharePoint JSOM List Library 275.1 Cài dt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275.2 S dng c bn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305.3 S dng nâng cao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375.4 Câu hi thng gp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375.5 API Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375.6 Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

6 Microsoft Azure 396.1 Automation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

7 Microsoft Graph 537.1 Tài liu tham kho . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

i

fx-docs Documentation, Release 0.1.0

Tài liu phát trin phn mm ca FANXIPAN.

Phát trin sn phm 1


2 Phát trin sn phm

CHAPTER 1

Gii thiu

Quy chun vic phát trin phn mm nhm dt dc mt s mc dích sau:

• Hn ch bugs

• Gim s lng request (gp các file code thành 1 file duy nht)

• T dng hóa vic deploy code (Ctrl + S và nhìn kt qu hin th luôn trên trình duyt)

3


4 Chapter 1. Gii thiu

CHAPTER 2

Cài dt môi trng

Cn cài dt các tool sau (mt s tool có th cài dt hoc không):

• Node.js

• npm

• Cmder (nên cài)

• Git

• Bower

• Gulp

Node.js

Node.js là mt platform dùng d phát trin các ng dng bng ngôn ng JavaScript. Mt s ng dng c th s dc dùng dn nh Bower,Gulp...

Vào trang ch Node.js d ti. Chn phiên bn 4 (ti thi dim vit là node-v4.4.3LTS) ti v và cài dt:

Ð kim tra dã cài dt thành công hay cha thì bt cmd và gõ lnh:

node --version

Nu thy kt qu nh sau thì dã thành công (tên version có th khác):

npm

npm là chng trình qun lý th vin cho Node.js. Nó dc t dng cài dt cùng Node.js.

5

https://nodejs.org/en/


https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

https://www.npmjs.com/




Fig. 2.1: Ð mc dnh các la chn khi cài dt.

Fig. 2.2: Hin th phiên bn ra console.

6 Chapter 2. Cài dt môi trng


Ð kim tra xem npm dã dc cài dt hay cha thì m cmd ca Windows và gõ lnh:

npm --version

Nu kt qu tng t nh sau là thành công:

Fig. 2.3: Hin th phiên bn ca npm

Cmder (nên cài)

Các tool dang dc cài dt s dc dùng ch yu bng cách vit lnh, dùng cmd ca Windows nhiu khi t ra rt bt tin (xu, khó thaotác...), do dó nên cài thêm Cmder.

Link ti Cmder v1.2.9

Ti v và cài dt. Kt qu nh sau:

Git

Git là h thng qun lý phiên bn, dc dùng d qun lý mã ngun. Git có chc nang tng t nh Team Foundation Server caMicrosoft.

Do các package ca Bower (xem phn cài dt bên di) ch yu dc cài dt trên Git nên chúng ta cn phi cài dt thêm c Git.

Link ti git version >= v2.8.1

Tin hành cài dt, các options la chn nh sau:

Các la chn phía sau d mc dnh. Sau khi cài dt xong kim tra li bng cách gõ lnh:

2.3. Cmder (nên cài) 7

https://www.npmjs.com/

http://cmder.net/

https://github.com/cmderdev/cmder/releases/download/v1.2.9/cmder.zip

https://git-scm.com/


http://bower.io/



https://git-scm.com/download/win


Fig. 2.4: Y nh cmd, nhng dp hn :D

Fig. 2.5: B Git GUI và gi li Git Bash



Fig. 2.6: Chn Use Git from the Windows Command Promt

git --version

Nu kt qu nh sau là thành công:

Bower

Bower là công c qun lý resource cho lp trình font-end. S dng Bower d t dng hóa vic tìm kim, cài dt, nâng cp các gói thvin thay vì phi làm th công bng tay.

Vic cài dt Bower cung rt dn gin, ch bng 1 dòng lnh:

npm install -g bower

Kt qu:

Gulp

Gulp là mt task runner dc s dng d gim thiu các công vic lp di lp li (thng là gây ra nhàm chán) trong vic phát trinwebsite. dây chúng ta s s dng Gulp d gp file js, deploy code lên server...

2.5. Bower 9

http://bower.io/

http://bower.io/

http://gulpjs.com/


Fig. 2.7: (Phiên bn có th khác)

Fig. 2.8: Ðn gin gn nh trong vài thao tác



Cài dt Gulp rt dn gin, gõ dòng lnh sau và ngi ch:

npm install -g gulp-cli

Kt qu:

Fig. 2.9: Ðn gin gn nh trong vài thao tác

2.6. Gulp 11

http://gulpjs.com/

CHAPTER 3

AdminLTE

AdminLTE là b theme min phí dc dùng khi làm các App cho SharePoint.

Cài dt

Copy template project

1. M TFS, tìm dn solution Prototype.AdminLTE.SPApp theo dng dn:

$/Fanxipan Projects/Fanxipan/2016Apps/Core/Prototype.AdminLTE.SPApp

Warning: Không nên m trc tip solution này bng Visual Studio. Mt s extensions ca VS s t dng dc filepackage.json và bower.json ri to ra th mc node_modules và bower_components. Hai th mcnày cha nhiu file có dng dn rt dài, rt khó cho vic copy.

2. M th mc cha solution Prototype.AdminLTE.SPApp:

3. Copy th mc này sang th mc cn làm (nên cho vào th mc nm trong TFS). Trong ví d là copy vào th mc gc ca TFS:

13

https://almsaeedstudio.com/themes/AdminLTE/index2.html


Danger: Không chnh sa vào project dã có sn.

4. M solution va mi copy bng Visual Studio, chut phi vào solution và chn Add Solution to Source Control...

Hint: Nên check-in solution luôn sau này làm nh b li thì d phi làm li nhiu.

Deploy vào webapp trên local

TL;DR; Ð deploy dc trên local thì cn m dc webapp bng Solution Explorer và copy các file code vào th mc webappnày.

M webapp bng Solution Explorer

1. M webapp bng IE và dang nhp

2. Chut phi vào My Computer chn Map network drive...

3. Chn tên và din dng dn ca webapp

4. Ðin thông tin dang nhp

5. Kt qu

Deploy vào webapp bng Gulp

1. M console, cd dn th mc project (th mc cha file gulpfile.js)

2. Gõ lnh npm install && bower install, ch dn khi chy xong.

3. Gõ lnh gulp deploy-full --path Y:/. Lu ý tên ca có th thay di, tùy vào lúc map dã chn tên là gì thìbây gi din tên dó vào.

Hint: Nu chn tên là Y thì không cn gõ --path Y:/, ch cn gõ gulp deploy-full.

4. Vào th mc webapp, kim tra nu có th mc FX và file default.aspx b thay di là thành công

5. M webapp trên trình duyt

Deploy lên Office 365

1. M tab Properties ca project và din url

2. M console, cd dn th mc project (th mc cha file gulpfile.js)

14 Chapter 3. AdminLTE


Fig. 3.1: Thêm solution va to vào TFS

3.1. Cài dt 15


3.1. Cài dt 17


3. Gõ lnh gulp release, lnh này s to ra folder release

4. Copy toàn b file và th mc trong release vào module App ca project

Note: Cn ch dng include các file trong 3 th mc app, assets và deps vì VS không t add các file con nmtrong th mc vào project. Cách nhanh nht là exlucde c 3 th mc này ra ri include vào li.

5. Deploy project

Hint: Có th bm Ctrl + F5 d deploy.

6. Vào Site Contents d m app

7. Kt qu

3.1. Cài dt 19


3.1. Cài dt 21


S dng

Cu trúc giao din

Giao din ca theme AdminLTE bao gm các thành phn sau:

3.2. S dng 23

https://almsaeedstudio.com/themes/AdminLTE/index2.html

CHAPTER 4

Metronic

25


26 Chapter 4. Metronic

CHAPTER 5

SharePoint JSOM List Library

Là th vin h tr các thao tác vi list / document library thông qua SharePoint JavaScript Object Model.

Cài dt

Ð s dng dc th vin Fanxipan SharePoint JSOM List () cn phi thc hin các bc sau:

TFS

Các file th vin dc d TFS theo dng dn:

$/Fanxipan Projects/Fanxipan/2016Apps/Core/Fx.Core/Fx.Core/Libs/fx/jsom-list

Cu trúc th mc:

.- js

- fx.sharepoint.lists.jsom.js- fx.sharepoint.lists.jsom.js.map

Thêm các th vin cn thit

Hint: Xem ví d dy d cui bài

Th vin ca SharePoint

Ðnh nghıa SharePoint tag prefix:

27

https://msdn.microsoft.com/en-us/library/office/jj163201.aspx


1 <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"→˓Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,→˓PublicKeyToken=71e9bce111e9429c" %>

Vì s dng SharePoint JavaScript Object Model nên cn phi thêm các file sau ca SharePoint vào file default.aspx:

1 <SharePoint:ScriptLink runat="server" Language="javascript" Name="MicrosoftAjax.js"→˓OnDemand="false" Defer="false" Localizable="false" />

2 <SharePoint:ScriptLink runat="server" Language="javascript" Name="SP.Core.js"→˓OnDemand="false" Defer="false" Localizable="false" />

3 <SharePoint:ScriptLink runat="server" Language="javascript" Name="Sp.js" OnDemand=→˓"false" Defer="false" Localizable="false" />

4 <SharePoint:ScriptLink runat="server" Language="javascript" Name="Sp.RequestExecutor.→˓js" OnDemand="false" Defer="false" Localizable="false" />

Note: File Sp.RequestExecutor.js ch dùng cho các project dng SharePoint Addins, mc dích là d to CrossOrigin request. Các project làm cho SharePoint On-Premises và SharePoint Online thì không cn.

Ðnh nghıa FormDigest element, SharePoint dùng form digest d authenticate vi server:

1 <SharePoint:SharePointForm runat="server">2 <SharePoint:FormDigest runat="server" />3 <asp:ScriptManager runat="server" ScriptMode="Debug" />4 </SharePoint:SharePointForm>

Note: Th asp:ScriptManager trên nhm mc dích debug code ca SharePoint, nu thy không cn thit thì có th b di.

Th vin JavaScript khác

ph thuc vào Lodash, jQuery và AngularJS:

1 <script src="/path/to/lodash.js"></script>2 <script src="/path/to/jquery.js"></script>3 <script src="/path/to/angular.js"></script>

Th vin

1 <script src="/path/to/fx.sharepoint.lists.jsom.js"></script>

Warning: Thêm file này vào sau khi dã thêm ht tt c các th vin trên.

Thêm module vào app

Thêm don code sau vào app.js:

28 Chapter 5. SharePoint JSOM List Library

https://msdn.microsoft.com/en-us/library/office/jj163201.aspx

https://lodash.com/

https://jquery.com/

https://angularjs.org/


1 var appDeps = [2 "fx.sharepoint.lists.jsom"3 ];4

5 angular.module("my-app", appDeps);

File default.aspx hoàn chnh

1 <%@ Page Language="C#" %>2 <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"

→˓Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,→˓PublicKeyToken=71e9bce111e9429c" %>

3

4 <!DOCTYPE html>5 <html ng-app="my-app">6 <head>7 <title>FxList Demo App</title>8 </head>9 <body>

10 <div ng-controller="MainCtrl">11 This is a Demo app for <strong>fx.sharepoint.list.jsom</strong>12 </div>13

14 <div id="scripts">15 <SharePoint:ScriptLink runat="server" Language="javascript" Name="MicrosoftAjax.

→˓js" OnDemand="false" Defer="false" Localizable="false" />16 <SharePoint:ScriptLink runat="server" Language="javascript" Name="SP.Core.js"

→˓OnDemand="false" Defer="false" Localizable="false" />17 <SharePoint:ScriptLink runat="server" Language="javascript" Name="Sp.js"

→˓OnDemand="false" Defer="false" Localizable="false" />18 <SharePoint:ScriptLink runat="server" Language="javascript" Name="Sp.

→˓RequestExecutor.js" OnDemand="false" Defer="false" Localizable="false" />19

20 <script src="assets/bower/lodash/dist/lodash.js"></script>21 <script src="assets/bower/jquery/dist/jquery.js"></script>22 <script src="assets/bower/angular/angular.js"></script>23

24 <script src="assets/dist/js/fx.sharepoint.lists.jsom.js"></script>25

26 <script src="assets/test-app/app.js"></script>27 <script src="assets/test-app/controllers/main.controller.js"></script>28 </div>29

30 <SharePoint:SharePointForm runat="server">31 <SharePoint:FormDigest runat="server" />32 <asp:ScriptManager runat="server" ScriptMode="Debug" />33 </SharePoint:SharePointForm>34 </body>35 </html>

Hint: Có th paste vào Dirty Markup cho d dc.

5.1. Cài dt 29

https://dirtymarkup.com/


S dng c bn

Ví d mu

1 function MainCtrl($fxList) {2 var serviceContext = $fxList.createContext();3 var customerList = serviceContext.getList("Customers");4

5 var currentItem;6

7 // To mi 1 list item8 customerList9 .createItemAsync({

10 customerName: "Leonard"11 })12 .then(function (listItem) {13 console.log(listItem);14 // {15 // id: 1,16 // customerName: "Leonard"17 // }18 });19

20 // Ly list item theo id21 customerList.getItemByIdAsync(1)22 .then(function(item) {23 currentItem = item;24 })25 // Cp nht thuc tính ca list item26 .then(function() {27 currentItem.customerName = "Jubei";28 return customerList.updateItemAsync(currentItem);29 })30 // Xóa list item31 .then(function() {32 return customerList.deleteItemAsync(currentItem);33 });34 }35

36 angular.module("my-app").controller("MainCtrl", MainCtrl);

To ServiceContext object

ServiceContext là object dùng d:

• Qun lý vòng di (lifetime) cho các object khác nh List, ListItem...

• Queue các thay di ca ClientObject (ListItem), ví d nh xóa 1 item + to mi 1 item + thay di property ca 1 itemkhác, sau dó gi 1 request duy nht d cp nht các thay di này lên server

Note: Xem thêm phn Single request và batch request.

Ð to mt ServiceContext object:

1. Inject service FxListService vào trong controller



1 function MainCtrl($fxList) {2 // this is our service3 console.log($fxList);4 }5

6 angular.module("my-app").controller("MainCtrl", MainCtrl);

2. Dùng hàm FxListService.createContext d to di tng thuc class ServiceContext. Lu ý tham s truyn vàoserverRelativeUrl là dng dn tng di dn web mun tng tác, d trng s ly web hin ti.

1 var serviceContext = $fxList.createContext();

To List object

S dng hàm ServiceContext.getList d to di tng List:

1 var customerList = serviceContext.getList("Customers");

Note: Ðây là cách to List object dn gin nht. Hàm ServiceContext.getList có th nhn object IListConfigLiteral làmtham s d tinh chnh phng thc hot dng ca list.

Vi List object dc to nh trên, khi ly item t server:

1 customerList.getByIdAsync(1).then(function (customer) {2 console.log(customer);3 });

thì các trng sau ca SharePoint list s dc ly v cho ListItem:

• Các trng dc dnh nghıa List.defaultFieldsLiteral

• Các trng ngi dùng dnh nghıa thêm vào SharePoint list

Trong ví d trên thì object customer s có dng nh sau:

1 {2 id: 1,3

4 // default fields:5 title: "Title",6 author: "Author",7 editor: "Editor",8 created: <Date> object,9 modified: <Date> object,

10 uniqueId: "fa773dda-1267-49d2-87ef-d65e3353ab7c",11

12 // user fields:13 customerName: "Jubei",14 address: "Hanoi, Vietnam"15 }

Note: Ð ch dnh chính xác nhng trng nào s dc ly v cho item, xem thêm phn Ðnh nghıa các field s dc ly v cho list item

5.2. S dng c bn 31


Ð thay di giá tr các field ca list item khi tr v cho user hoc trc khi push lên server, xem thêm phn Ðnh nghıa parser chocác field ca list item

Thao tác CRUD

To mi item

Dùng hàm List.createItemAsync d to mi 1 list item:

1 customerList2 .createItemAsync({3 customerName: "Jubei on new record",4 age: 275 })6 .then(function (customer) {7 console.log(customer);8 });

D liu tr v có dng nh sau:

1 {2 id: 3,3

4 // default fields5 author: <Author>6 created: <Date>7 ...8

9 // user fields10 customerName: "Jubei on new record",11 age: 2712 }

Ly item theo id

S dng hàm List.getItemByIdAsync và truyn vào id ca item cn ly:

1 customerList.getItemByIdAsync(1).then(function (customer) {2 console.log(customer);3 });

Kt qu tr v có dng sau:

1 {2 id: 1,3

4 // default fields:5 title: "Title",6 author: "Author",7 editor: "Editor",8 created: <Date> object,9 modified: <Date> object,

10 uniqueId: "fa773dda-1267-49d2-87ef-d65e3353ab7c",11



12 // user fields:13 customerName: "Jubei",14 address: "Hanoi, Vietnam"15 }

Ly item theo CAML Query

1. To Query object. Ví d di dây to query ly item có id <= 2:

1 var Query = Fx.SharePoint.Caml.Lists.Query;2 var Where = Fx.SharePoint.Caml.Queries.Where;3 var Leq = Fx.SharePoint.Caml.Queries.Leq;4 var Value = Fx.SharePoint.Caml.Queries.Value;5 var FieldRef = Fx.SharePoint.Caml.Queries.FieldRef;6

7 var query = new Query({8 where: new Where({9 condition: new Leq({

10 fieldRef: new FieldRef({ attrs: { name: "ID" } }),11 value: new Value({12 attrs: { type: "Integer" },13 value: 214 })15 })16 })17 });

Vi don code trên, khi gi query.toString() s dc kt qu nh sau:

1 <Query>2 <Where>3 <Leq>4 <FieldRef Name="ID" />5 <Value Type="Integer">2</Value>6 </Leq>7 </Where>8 </Query>

2. Gi hàm List.getManyItemsAsync và truyn di tng query trên vào:

1 customerList.getManyItemsAsync(query).then(function (customers) {2 console.log(customers);3 });

3. Kt qu tr v có dng nh sau:

1 [2 {3 id: 1,4 customerName: "Jubei",5 // other fields...6 },7 {8 id: 2,9 customerName: "Leonard",

10 // other fields...

5.2. S dng c bn 33


11 }12 ]

Note: Ð tìm hiu thêm v CAML Query, xem thêm phn S dng CAML query d ly d liu

Cp nht item

Ly ví d vi object customer dã ly v phn Ly item theo id, d thay di trng customerName thì làm nh sau:

Cách 1:

Thay di trc tip vào object ListItem:

1 customer.customerName = "New customer name"; // not 'Jubei' anymore2 customerList.updateItemAsync(customer).then(function(updatedCustomer) {3 console.log(updatedCustomer.customerName); // -> "New customer name"4 console.log(customer === updatedCustomer); // -> true5 });

Cách 2:

Truyn thuc tính ca list item mun thay di vào trong hàm List.updateItemAsync:

1 customerList2 .updateItemAsync(customer, {3 customerName: "New customer name"4 })5 .then(function(updatedCustomer) {6 console.log(updatedCustomer.customerName); // -> "New customer name"7 console.log(customer === updatedCustomer); // -> true8 });

Cách 3:

S dng hàm ListItem.updateAsync:

1 // Chnh sa object customer ri gi hàm updateAsync()2 customer.customerName = "New customer name"; // not 'Jubei' anymore3 customer.updateAsync().then(function (updatedCustomer) {4 console.log(updatedCustomer.customerName); // -> "New customer name"5 console.log(customer === updatedCustomer); // -> true6 });7

8 // -- hoc --9

10 // Truyn luôn giá tr field cn cp nht vào hàm updateAsync()11 customer12 .updateAsync({13 updatedItem: "New customer name"



14 })15 .then(function (updatedCustomer) {16 console.log(updatedCustomer.customerName); // -> "New customer name"17 console.log(customer === updatedCustomer); // -> true18 });

Nu bit id ca item cn update thì có th làm nh sau (các ví d di dây gi s cn update object customer có id = 1):

Cách 4:

Gi hàm List.updateItemAsync và truyn riêng r id ca item cn update và giá tr các field ca nó:

1 customerList2 .updateItemAsync(3 1, // id ca item cn update4 {5 customerName: "New customer name"6 }7 )8 .then(function(updatedCustomer) {9 console.log(updatedCustomer.customerName); // -> "New customer name"

10 });

Cách 5:

Cung gi hàm List.updateItemAsync nhng gp chung id ca item và giá tr các field ca nó vào 1 object:

1 customerList2 .updateItemAsync({3 id: 1,4 customerName: "New customer name"5 })6 .then(function(updatedCustomer) {7 console.log(updatedCustomer.customerName); // -> "New customer name"8 });

Note: Khi s dng các cách cp nht item thông qua id, nu trong SharePoint list không tn ti item có id nh vy thì objectupdatedCustomer có giá tr là null.

Cách 6:

S dng hàm ServiceContext.commitChanges:

1 customer.customerName = "New customer name"; // not 'Jubei' anymore2 serviceContext.commitChanges().then(function() {3 console.log("All changes have been commited to server!");4 });

5.2. S dng c bn 35


Note: Trong ví d trên s dng hàm ServiceContext.commitChanges d cp nht tt c nhng thay di ca tt c di tng doserviceContext qun lý. Xem thêm phn Single request và batch request d nm rõ hn v ServiceContext.

Warning: Thay di d liu các trng dng readonly nh Author, Created... s gây ra li

Cp nht hoc to mi item

Th vin cung cp hàm List.saveItemAsync h tr vic to mi hoc cp nht item.

1. Nu tham s truyn vào là ListItem object –> lu thay di ca list item này lên server

1 var customer;2

3 customerList.getItemById(1)4 .then(function (item) {5 customer = item;6 })7 .then(function() {8 customer.customerName = "New name";9 return customerList.saveItemAsync(customer);

10 })11 .then(function (savedCustomer) {12 console.log(savedCustomer.customerName); // -> "New name"13 console.log(customer === savedCustomer); // -> true14 });

2. Nu tham s truyn vào là object có thuc tính id –> cp nht item có id tng ng trên server

1 customerList2 .saveItemAsync({3 id: 1,4 customerName: "New name"5 })6 .then(function (savedCustomer) {7 console.log(savedCustomer.customerName); // -> "New name"8 });

3. Nu tham s truyn vào là object không có thuc tính id –> to mi 1 list item trên server

1 customerList2 .saveItemAsync({3 /* Note: no id attribute */4 customerName: "Jubei"5 })6 .then(function (newCustomer) {7 console.log(newCustomer.id); // -> 3 (new id)8 console.log(newCustomer.customerName); // -> "Jubei"9 });

Xóa item

Dùng hàm List.deleteItemAsync d xóa list item, truyn vào di tng ListItem cn xóa:



customerList.deleteItemAsync(customer).then(function() {console.log("Item deleted!");

});

S dng nâng cao

Ðnh nghıa các field s dc ly v cho list item

Ðnh nghıa parser cho các field ca list item

S dng CAML query d ly d liu

Single request và batch request

Ly d liu theo dng sync và async

Câu hi thng gp

1. Làm th nào d kim tra phiên bn ca th vin dang s dng

Làm th nào d kim tra phiên bn ca th vin dang s dng

M console và gõ lnh:

1 Fx.SharePoint.Client.VERSION

API Document

Note: CHÚ Ý: Bm vào dây d chuyn sang trang api document.

5.3. S dng nâng cao 37


Changelog

Note: Ð kim tra phiên bn, xem thêm Làm th nào d kim tra phiên bn ca th vin dang s dng.

v0.3.0

Tài liu

• Cp nht Ví d mu

• Thêm nhiu cách Cp nht item

• Thêm phn Cp nht hoc to mi item

API

• B class ListBase

• Ði tên hàm

– List.getByIdAsync –> List.getItemByIdAsync

– List.getManyAsync –> List.getManyItemsAsync

• Thêm các hàm

– List.createItemAsync

– List.updateItemAsync

– List.saveItemAsync


CHAPTER 6

Microsoft Azure

Microsoft Azure là nn tng din toán dám mây và c s h tng dc thit k bi Microsoft. Azure cung cp nhiu dch v d qun lý,xây dng và trin khai các gii pháp phn mm trên nn tng internet.

Di dây lit kê mt s dch v ca Azure dang dc dùng ti Fanxipan:

Automation

Tng quan

Mc dích s dng:

• T dng hóa công vic

• Thay vì phi thc hin công vic dó bng tay –> vit code ri d nó t chy

Li ích khi s dng:

• Tit kim thi gian

• Tang s tin cy (gim li)

• Có th lp lch d task t dng thc hin theo chu kì (vd: 1 ngày 1 ln)

• Tránh nhàm chán khi thc hin task nhiu ln

Kh nang ca Azure Automation:

• Azure Automation s dng PowerShell nên nó có th làm mi th mà PowerShell và PowerShell Workflow có th làmdc

• PowerShell có th s dng dc các module ca .NET (*.dll files) –> có th dùng C# d build *.dll cho PowerShell s dng–> có th lp trình Azure Automation bng C#

39

https://azure.microsoft.com/en-us/services/automation/




Tóm li thì Azure Automation cung gn ging nh Gulp, du là task runner. Ðim khác bit là Gulp s dng JavaScript cònAzure Automation s dng PowerShell và C#.

Hello World runbook

Runbook hiu dn gin là 1 phn t logic cha don code thc hin task. Ð vit dc code chy task s dng Azure Automation thì vicdu tiên cn làm là tìm hiu cách to và s dng runbook.

Có th tham kho thêm hng dn ca Mircosoft ti dây.

Ví d di dây hng dn cách to 1 runbook dn gin: nhp tên ngi dùng —> chy runbook —> màn hình console hin th: “Hello<tên ngi dùng>”

Note: Ví d di dây ch nhm mc dích giúp ngi dc hiu rõ hn v runbook. Runbook thc s chy trên môi trng production sbao gm các câu lnh PowerShell phc tp hn rt nhiu.

Note: Azure Automation s dng PowerShell làm ngôn ng lp trình chính. May mn là PowerShell có th gi dc các hàmtrong 1 .NET module (*.dll file) nên v c bn, chúng ta hoàn toàn có th lp trình task cho Azure Automation bng C#.

Ð tìm hiu cách code task bng C#, xem thêm phn Cài dt logic bng C#.

• Ðang nhp

• To Automation Account

• To runbook

• Test runbook

• Publish runbook

• Chy runbook

• Lp lch cho runbook

Hint: M nh trong tab mi d xem nh rõ nét hn.

Ðang nhp

1. Ðang nhp vào Azure Portal theo dng dn: https://portal.azure.com/

To Automation Account

1. sidebar, làm 1 trong 2 cách sau

• bm vào Automation Accounts

• bm vào Browse –> din Automation –> chn Automation Accounts

2. màn hình Automation Accounts, bm Add –> din thông tin dc yêu cu –> bm Create

40 Chapter 6. Microsoft Azure


http://gulpjs.com/

http://gulpjs.com/



https://azure.microsoft.com/en-us/documentation/articles/automation-first-runbook-textual/


https://portal.azure.com/


6.1. Automation 41


6.1. Automation 43


To runbook

1. màn hình DemoAutomationAccount (tên ca account dã to bc trc) –> bm Runbooks

2. màn hình Runbooks –> bm Add a runbook

3. màn hình Add Runbook –> chn Quick Create

4. Ðin thông tin cn thit –> bm Create

5. màn hình HelloAutomation (tên ca runbook to bc trc) –> bm Edit

6. Nhp don code sau –> bm Save

Test runbook

1. màn hình Edit PowerShell Workflow Runbook (màn hình edit runbook bc trc) –> bm Test pane

2. Nhp thông tin vào textbox UserName

3. Bm Start

4. Kt qu

Publish runbook

Ð cp nht nhng chnh sa mi cho runbook thì cn phi publish runbook.

1. màn hình edit runbook –> bm Publish



6.1. Automation 45


2. Chn Yes khi dc hi

Chy runbook

T màn hình HelloAutomation:

1. Bm Start

2. Ðin thông tin UserName

3. Bm OK

4. Bm Output d xem kt qu ca runbook

Lp lch cho runbook

màn hình HelloAutomation

1. Bm Schedule

2. Chn Link a schedule to your runbook

(a) Bm Create a new schedule

(b) Ðin thông tin dc yêu cu

(c) Bm Create

3. Chn Configure parameters and run settings

(a) Ðin thông tin UserName

(b) Bm OK



6.1. Automation 47


4. Bm OK màn hình Schedule Runbook

5. Có th kim tra li bng cách bm vào Schedules

Cài dt logic bng C#

Ví d di dây hng dn cách code 1 Azure Automation task bng C#. Chúng ta s s dng SharePoint Client Object Model d ktni vào 1 SharePoint Online site –> to custom list tên là AutomationDemoList (nu cha có) –> thêm 1 vài item vào list.

• To C# project bng Visual Studio

• Cài dt logic cho task

• To PowerShell module

• Ða PowerShell module lên Azure

• To Credential trên Azure

• Cài dt logic cho runbook

• Chy runbook

Hint: M nh trong tab mi d xem nh rõ nét hn.


https://msdn.microsoft.com/en-us/library/office/ee537247(v=office.14).aspx


6.1. Automation 49


To C# project bng Visual Studio

Chúng ta cn to 2 project sau:

1. Fx.AzureDemo

• Class Library project

• Cha code truy cp vào SharePoint Online site

• File Fx.AzureDemo.dll s dc import vào PowerShell module (bc 3)

2. Fx.AzureDemo.Test

• Console Application project

• Dùng d test project trên



Cài dt logic cho task

To PowerShell module

Ða PowerShell module lên Azure

To Credential trên Azure

Cài dt logic cho runbook

Chy runbook

Azure Automation API

6.1. Automation 51

CHAPTER 7

Microsoft Graph

TL;DR; One API to rule them all

Microsoft Graph dc s dng d tng tác vi data trên dch v dám mây ca MS thông qua mt endpoint duy nht: https://graph.microsoft.com

Tài liu tham kho

• https://developer.microsoft.com/en-us/graph/docs/concepts/overview

• https://developer.microsoft.com/en-us/graph/docs/concepts/angular

• https://github.com/microsoftgraph/angular-connect-rest-sample

• https://github.com/AzureAD/microsoft-authentication-library-for-js

53

https://developer.microsoft.com/en-us/graph/docs/concepts/overview

https://developer.microsoft.com/en-us/graph/docs/concepts/angular

https://github.com/microsoftgraph/angular-connect-rest-sample

https://github.com/AzureAD/microsoft-authentication-library-for-js

fx-docs Documentation

Documents

Transcript of fx-docs Documentation