Pembina UI ServiceNow

Hai kawan-kawan, selamat tahun baru!

✨
Saya tahu sesetengah daripada anda tertanya-tanya di mana saya telah pergi selama beberapa bulan kebelakangan ini. Selepas lulus peperiksaan Cloud Architect saya, saya memutuskan untuk menyelami antara muka web baharu yang berkilat ini yang dibincangkan oleh semua orang: Pembina UI!

Apakah itu UI Builder?

Pembina UI ialah antara muka web untuk mencipta dan mengkonfigurasi halaman tersuai untuk ruang kerja dan portal. Ia merupakan sebahagian daripada Rangka Kerja UI Now Experience dan membolehkan anda:
•Bina halaman.
•Sediakan reka letak dan komponen.
•Tentukan pengendali acara untuk tindakan.
•Ambil dan paparkan data menggunakan pengikatan data.
•Buat skrip klien dan parameter keadaan klien (juga dikenali sebagai pembolehubah) untuk digunakan dalam komponen.

Ini pada asasnya kedai sehenti untuk mencipta pengalaman web tersuai. Mari kita pecahkan bahagian utama UI Builder dan cara untuk bermula.

Cara Pembina UI Berfungsi

1. Pengalaman dan Halaman

Pengalaman ialah koleksi halaman yang membolehkan pengguna mengurus kerja, mencari maklumat atau mendapatkan bantuan. Setiap halaman ditakrifkan oleh URLnya dan mentakrifkan kandungan yang terdapat dalam URL tersebut. Ia terdiri daripada dua elemen utama: Reka Letak dan Komponen.
2. Reka letak
Reka letak mengatur cara kandungan dipaparkan pada halaman. Ini adalah langkah pertama dalam membina halaman dan boleh menggunakan:
•Reka letak lajur asas: Struktur pratakrif dengan sehingga enam lajur.
•Reka letak lanjutan: Reka bentuk berasaskan grid Flexbox atau CSS untuk lebih banyak penyesuaian.
Reka letak juga disertakan dengan alatan seperti pepohon kandungan yang dipermudahkan dan panel untuk konfigurasi dan penggayaan.
3. Komponen
Komponen ialah blok binaan halaman, seperti borang, butang, senarai data, carta, imej atau menu. Sebaik sahaja anda menyediakan reka letak, anda boleh menambah komponen pada halaman. Anda boleh menyesuaikan setiap komponen menggunakan Panel Konfigurasi, yang termasuk:
•Tab Konfigurasi: Edit sifat menggunakan nilai statik, pengikatan data atau JavaScript.
•Tab Gaya: Tambahkan CSS tersuai.
•Tab Peristiwa: Sediakan tindakan yang dicetuskan oleh interaksi pengguna.

Adalah amalan terbaik untuk menambah reka letak dahulu, kemudian komponen.

Varian dan Syarat Halaman

Semua halaman dalam UI Builder adalah varian. Halaman pertama yang anda buat ialah varian lalai. Fikirkan varian seperti paparan borang: rekod yang sama, tetapi dipaparkan secara berbeza berdasarkan konteks. Anda boleh membuat varian tambahan untuk khalayak atau syarat yang berbeza.
Syarat menentukan apabila varian halaman kelihatan. Ini boleh ditetapkan menggunakan:
•Menggunakan Pembina Keadaan untuk menetapkan peraturan.
•Menentukan syarat melalui pertanyaan yang dikodkan.
Untuk keadaan berfungsi, mereka bergantung pada data yang diluluskan oleh parameter halaman, yang akan kami bincangkan secara terperinci dalam artikel seterusnya.

Apa Seterusnya?

Mari cipta pengalaman ringkas dalam UI Builder!
Kami akan mencipta pengalaman yang membolehkan penggunaan untuk melihat halaman rekod.

1.Bermula.

.Log masuk ke contoh ServiceNow anda.
.Navigasi ke Rangka Kerja Pengalaman Kini > UI Builder dalam navigator penapis untuk membuka antara muka UI Builder.

2.Mencipta Pengalaman

.Klik butang Buat di penjuru kanan sebelah atas.

.Pilih Pengalaman daripada menu lungsur. Tetingkap modal akan muncul.
. Isikan butiran berikut:
•Nama: Mana-mana nama. Ex 'Ruang Kerja Lalai'
•UI Shell Aplikasi: Shell Aplikasi Ruang Kerja
•Laluan Pendaratan: Biarkan sebagai lalai - Laman Utama
•Peranan: Alih keluar peranan lalai buat masa ini.

.Klik Buat, kemudian pilih Pengalaman Terbuka untuk meneruskan.

3.Mencipta Halaman

.Dalam pengalaman baharu anda, klik Buat Halaman Baharu atau ikon di sebelah Halaman dan Varian.

Kami akan menggunakan templat
Pilih Templat Rekod Standard

.Masukkan nama halaman untuk templat anda. Laluan URL akan terisi secara automatik.

.Klik Teruskan,
.Templat rekod kami disertakan dengan parameter prakonfigurasi yang diperlukan(jadual & sys_id) dan pilihan (pertanyaan, paparan Params tambahan, Tab terpilih), semaknya kemudian pilih Kelihatan Baik.

4.Mencipta Varian

.Namakan varian halaman anda, kemudian langkau Khalayak dan Syarat buat masa ini. Klik Teruskan.
. Biasakan diri anda dengan Editor Varian:
•Panel Kiri: Pokok kandungan untuk menambah reka letak dan komponen.
•Panel Kanan: Panel konfigurasi dengan tab untuk menyesuaikan komponen.
•Kiri Bawah: Alat untuk data dinamik seperti Sumber Data, Parameter Keadaan Pelanggan dan Skrip Pelanggan.

Itu sahaja!

Dalam artikel seterusnya kami akan mengembangkan pengalaman kami dengan menambahkan parameter halaman pada varian halaman kami- untuk membolehkan kami menghantar nilai data untuk digunakan dalam halaman.

Ikhtisar ini memperkenalkan asas Pembina UI, daripada reka letak dan komponen kepada halaman dan varian. Dalam artikel yang akan datang, kami akan menyelam lebih dalam untuk mencipta halaman yang dinamik dan interaktif dengan meneroka:
•Parameter Halaman.
•Sumber Data.
•Parameter Negeri Pelanggan.
•Skrip Pelanggan.
•Acara.
Menjelang penghujung siri ini, anda akan mempunyai pemahaman yang kukuh tentang UI Builder dan cara mencipta pengalaman yang bijak dan mesra pengguna!!

---

Ketahui Lebih Lanjut Mengenai Pembina UI
•Ambil Kursus Pembelajaran Sekarang Percuma tentang UI Builder
https://nowlearning.servicenow.com/lxp/en/now-platform/ui-builder-fundamentals-washington?id=learning_course_prev&course_id=7ba080d447fdd65076e07884f16d435e

•Dokumentasi ServiceNow pada UI Builder
https://www.servicenow.com/docs/bundle/xanadu-application-development/page/administer/ui-builder/concept/ui-builder-overview.html

Atas ialah kandungan terperinci Pembina UI ServiceNow. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!