UI for SharePoint Online

Challenge:

  • Microsoft tidak memberikan detail guideline + sample, cara customize UI untuk SharePoint Online.
    • hanya simple some color untuk Theme di SharePoint Online
  • SharePoint Online tidak memiliki konsep Master Page {seperti di SharePoint 2013}

Solusi:

  • buat custom Extension menggunakan SPFx: SharePoint Framework
  • Extension akan load style .css

Saya membuat 2 kelompok style .css:

  1. di dalam Extension tersebut
  2. file .css yang ditaruh pada folder di Document Library

Why ?

  • mengapa tidak cukup 1 tempat saja ?
  • mengapa harus di 2 tempat ?

Because:

  1. Timing + Flicker
  2. Easy to modify

Situation

SharePoint Online banyak melakukan load file-file .css

Solusi yang saya pilih

Kita harus melakukan override ke beberapa style milik SharePoint Online.

Cara implementasi:

  • style .css yang kita gunakan, harus diload pada Timing yang tepat
  • jika tidak, maka akan terjadi Flicker, seperti berikut:
    • SharePoint Online akan menampilkan Theme asli miliknya {kita bisa ubah nilai Theme ini}
    • biasanya Warna Biru
    • selanjutnya style .css milik kita, yang akan bekerja
    • user akan melihat terjadi Flicker pada layar
  • Easy to modify:
    • seringkali, kita memerlukan perubahan CSS – tanpa harus melakukan proses Develop/Deploy terhadap custom SFPx

Summary

Dengan semua teknik di atas, kita akan dengan sangat mudah mempunyai UI yang sesuai dengan keinginan user, terintegrasi dengan SharePoint Online