Sharepoint Online için bir sayfa oluşturmak istediğinizde bunun modern ve classic olmak üzere iki farklı modeli olduğunu göreceksiniz. Modern daha çok wordpress tarzı sürükle bırak mantığı ile sayfalar oluşturabileceğimiz bir panel sağlıyor. Ancak bu panelde de html + javascript gibi kodlar eklenmiyor. Bu sebeple bu yazı içeriğinde “sharepoint online modern sayfaya javascript nasıl eklenir” sorusunu cevaplayacağım.

Modern Script Editor Ekleme

SPFx paketi: Github Linki

Modern sayfalarda modern script editörü kullanmak için tenantımıza bir web part eklemesi yapacağız. Bunun için gerekli repoyu yukarıda paylaştım.

Dosyayı indirdikten sonra Visual Studio Code ile açın. Webpart kullanmak ve yayınlamak için bilgisayarınızda Node.Js, Gulp ve Yeoman kurulu olması lazım. Bunun için desteğe ihtiyacınız var ise bir önceki içerik size yardımcı olacaktır.

Kurulumları halletti iseniz ilgili dizinde aşağıdaki kodu yazın.

npm install

Daha sonra config dizini içerisindeki “serve.json” dosyasında “initialPage” alanını kendi tenantınız ile değiştirin. Artık webpartı test edebiliriz. Bunun için aşağıdaki kodu yine terminalize girin.

gulp serve

Bu kod varsayılan tarayıcınızda tenantınıza bağlanacaktır. Açılan sayfada “+” iconuna basarak modern script editörü ekleyebilirsiniz.

Test işlemi başarılı ise artık webpartı yayınlayarak tenantımızda kullanalım. Bunun için sırası ile aşağıdaki kodları terminale yazın.

gulp bundle --ship
gulp package-solution --ship

Bu kodlardan sonra çalışma yaptığınız dizinde “sharepoint” isminde bir dosya oluşacaktır. Sharepoint/solution/ klasörü içerisindeki “sppkg” uzantılı dosyayı tenantımıza yüklüyeceğiz. Bunun için microsoft hesabımızdan admin paneline giriş yapıyoruz.

Resimdeki sayfada “Show All” butonundan sonra alt kısımda “SharePoint” alanını göreceksiniz. Sharepointe tıkladıktan sonra “More features” yazısına tıklayıp oradan da “Apps” alanına tıklıyoruz. Buradan upload diyerek “sppkg” uzantılı dosyayı seçiyoruz. Bu işlem tamam ancak mağazaya gidip bu webpartı sisteme eklememiz lazım. Bunun için sharepoint sitenize gidip “New” butonuna tıklayıp “App” seçeneğini seçin. Karşınıza uygulamalar gelecektir. Buradan “Add” butonu ile eklemiş olduğumuz uygulamayı sitemize ekleyebiliriz.

Bu işlemler sonucunda sharepointte modern bir sayfayı düzenlemek için “+” iconuna bastığınızda modern script editörü göreceksiniz.

Ayrıca vermiş olduğumuz github linki üzerinde çok kaliteli webpartlar bulunmaktadır. Dilerseniz bunları da aynı şekilde test edip tenantınızda kullanabilirsiniz.