Merhaba ,
KendoUi takdir ettiğim başarılı bir JSComponent ve framework olarak projelerimde sık sık kullandığım bir kütüphanedir. Office 365 ortamında da nasıl kullanıldığını heleki AngularJS ile birlikte daha efektif kullanımlarının olduğunu da sizler ile paylaşmak istedim.
Bu yazımızda ;
ToDo :
————————————–
1 – Office 365 Public Site üzerine Custom List Oluşturma,
2 – Office 365 Üzerindeki mevcut sayfamızı editleyerek Script Editör Part Ekleme
3 – Script Editör Part’ına AngularJS ve KendoUi tanımlamalarının yapılması ,
4 – Script Editör Partının içerisine AngularJs Kodunun yazılarak KendoMultiSelectin Tetiklenmesi ,
5 – Mutlu Son.
1 – Office 365 Pulic Site Üzerine Custom List Oluşturma.
Yazı serilerimizde elimizde Sharepoint yada Office 365 platformlarının hazır olduğunu ve temel sharepoint işlemlerine aşına olunduğunu varsayarak direk List ve app oluşturmaları anlatmaktayım.
Office 365 > Add an App menüsünü kullanarak Cars Adında Custom bir list oluşturuyoruz. Herhangi bir kolon ekleme ihitiyacı hissetmiyoruz çünkü bu normal bir lookup tablomuz ve Id , Title kolonları işimizi fazlası ile görmektedir.
Daha Sonra Listemizi EDIT moda alarak , isteğimize göre kayıtlar ekliyoruz. Yeterli sayıda kayıt ekledikten sonra 2 inci adıma geçebiliriz.
2 – Office 365 Üzerindeki mevcut sayfamızı editleyerek Script Editör Part Ekleme
a – Settings > Edit Page menüsünü kullanarak mevcut sayfamızı Edit Mod’a alıyoruz.
b – Mevcut içeriği boşaltarak , yerine yeni bir Web Part eklemesi yapıyoruz. Ribbon yardımı ile Add WebPart > Media and Content > Script editör Partını sayfamıza ekliyoruz.
3 – AngularJS ve KendoUi tanımlamalarının yapılması
Daha sonra Eklemiş olduğumuz part’ı Edit Snippet linkini kullanarak içerik editlemesi için hazır duruma getiriyoruz.
Kullanılan Library Dosyalarını BURADAN indirebilirsiniz. Dosyalarımızı indirip SiteAssets klasörüne attıktan sonra Snippet’ımızı aşağıdaki şekilde yapılandırıyoruz.
4 – AngularJS Kodunun Yazılması
Eklediğimiz Library dosylarının altına , aşağıdaki kodu pasteliyoruz.
[javascript]
<script>
var app365 = angular.module(‘app365’, []);
app365.controller(‘office365Controller’, [‘$scope’, ‘$http’, ‘$filter’, function ($scope, $http, $filter) {
$http({
method: ‘GET’,
url: "/_api/web/lists/getByTitle(‘Cars’)/items",
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (d, s, h, c) {
$scope.dsCars = d.d.results;
$("#ddlCars").kendoMultiSelect({
dataTextField: "Title",
dataValueField: "Title",
dataSource: $scope.dsCars});
});
}]);
</script>
[/javascript]
Html Kısmı için ise aşağıdaki kod bloğunu kullanıyoruz.
[html]
<select id="ddlCars" data-placeholder="Lütfen Seçiniz…"></select>
<div data-ng-app="app365">
<div ng-controller="office365Controller"></div>
</div>
[/html]
5 – Mutlu Son
