Edit kode dengan Visual Studio Code for the Web (pratinjau)

[Topik ini adalah dokumentasi prarilis dan dapat berubah.]

Dari studio desain, Anda dapat mengedit kode situs Visual Studio Code for the Web. Fitur ini memungkinkan Anda mengedit konten statis, HTML, CSS, Liquid, dan JavaScript untuk metadata situs web berikut:

Metadata	Konten
Formulir lanjutan (formulir multilangkah)	JavaScript
Formulir dasar	JavaScript
Cuplikan konten	Semua konten cuplikan konten yang didukung
Daftar	JavaScript
File Web	Melihat dan mengunduh file media. Edit file teks (kode).
Halaman web	Semua konten yang didukung (per bahasa), JavaScript, dan CSS
Template Web	Semua Konten yang didukung

Catatan

Anda tidak akan dapat membuat rekaman metadata, hanya menambahkan dan mengedit konten, kode, dan melihat/mengunduh lampiran file.

Visual Studio Code for the Web memberikan pengalaman Microsoft Visual Studio Code gratis tanpa penginstalan yang berjalan seluruhnya di browser, memungkinkan Anda menelusuri kode situs dan membuat perubahan kode ringan dengan cepat dan aman. Informasi lebih lanjut: pengalaman Visual Studio Code for the Web.

Penting

• Ini adalah fitur pratinjau.
• Fitur pratinjau tidak dibuat untuk penggunaan produksi dan mungkin memiliki fungsionalitas yang dibatasi. Fitur ini tersedia sebelum rilis resmi agar pelanggan bisa memperoleh akses awal dan memberikan tanggapan.

Catatan

• Pertama kali Visual Studio Code for the Web dimuat mungkin memerlukan waktu karena akan menginstal ekstensi yang diperlukan untuk fitur ini.
• Operasi Buat, Hapus, dan Ganti Nama File tidak didukung.
• Fitur ini menggunakan ekstensi web Power Platform Tools . Ekstensi web dibatasi oleh kotak pasir browser dan memiliki batasan dibandingkan dengan ekstensi normal.
  • CLI Power Platform tidak didukung.
  • Fitur ekstensi web Power Platform Tools terbatas pada pengalaman pengeditan kode Power Pages.
  • Fitur ini tidak tersedia di Government Community Cloud (GCC), Government Community Cloud (GCC High), dan Department of Defense (DoD). Pengguna di kawasan ini akan menggunakan aplikasi Manajemen Portal untuk mengedit kode. Lihat Mengedit kode di aplikasi Manajemen Portal untuk informasi lebih lanjut.

Mengedit kode yang tersedia di studio desain

Anda dapat mulai mengedit kode situs dengan Visual Studio Code for the Web dari halaman beranda Power Pages dengan memilih opsi Edit kode situs dari menu tarik-turun Edit.

Anda juga dapat mengedit kode di studio desain dari area berikut:

• Mengedit kode halaman web dari ruang kerja Halaman
• Kode template header dari ruang kerja Halaman
• Mengedit kode CSS dari ruang kerja gaya
• Mengedit kode JavaScript kustom untuk formulir multilangkah
• Mengedit kode JavaScript kustom untuk formulir dasar
• Mengedit JavaScript kustom untuk daftar
• Mengedit cuplikan konten
• Edit template web
• Melihat dan mengunduh file web media (gambar)
• Edit file web berbasis teks (CSS, JavaScript, lainnya)

Lihat cara mengedit kode menggunakan area ini.

Mengedit kode halaman web dari ruang kerja Halaman

Saat membuka studio desain Power Pages, Anda melihat pilihan Edit kode di menu Halaman¹ dan sudut kanan atas layar².

Kode template header dari ruang kerja Halaman

Pilih Edit header situs , lalu pilih Edit kode untuk membuka editor kode.

Mengedit kode CSS dari ruang kerja gaya

Buka ruang kerja gaya dan pilih menu Edit kode CSS kustom yang tersedia untuk membuka editor kode.

Tampilan Tindakan Power Pages

Tampilan Tindakan Power Pages , dapat diakses di bagian bawah File Explorer, memungkinkan Anda mengelola situs Power Pages langsung di dalam editor. Ini mengurangi kebutuhan untuk beralih ke Power Pages Studio dengan memungkinkan pengembang melakukan tugas umum dengan cepat dari dalam editor.

Tindakan yang Tersedia

• Situs pratinjau
  Tindakan ini menghapus cache konfigurasi dan membuka situs di Visual Studio Code. Ini memungkinkan pengembang untuk mempratinjau dan menguji perubahan pada kode situs tanpa perlu beralih konteks ke Power Pages Studio.

• Buka di Power Pages Studio
  Setelah membuat perubahan kode, gunakan tindakan ini untuk membuka Power Pages Studio. Ini berguna untuk mengonfigurasi penyedia autentikasi, peran web, dan pengaturan situs lain yang tidak dapat diedit di editor kode.

• Buka di VS Code Desktop
  Jika Visual Studio Code Desktop diinstal, tindakan ini akan membuka situs di aplikasi desktop. Ini juga memicu unduhan situs, memastikan kode tersedia secara lokal dan siap untuk diedit.

Menggabungkan pemberitahuan konflik

Jika Anda berkolaborasi dengan pengembang lain, mungkin ada situasi di mana Anda akan mengerjakan kode sumber yang sama. Dalam aktivitas tersebut Anda mencoba menyimpan perubahan pada file yang usang, Anda akan menerima pemberitahuan untuk Membandingkan atau Menimpa perubahan.

Membandingkan kode akan menampilkan kode saat ini di samping kode Anda dan memungkinkan Anda kembali ke perubahan yang ada, menerima setiap perubahan secara individual atau menggunakan perubahan Anda dan menimpa konten yang ada.

Anda akan dapat meninjau konten terbaru dan menggabungkan atau menimpa kode atau menghapus perubahan.

Tutorial: Mengedit kode situs menggunakan Visual Studio Code for the Web

Dalam tutorial ini, Anda dapat mengedit kode situs menggunakan Visual Studio Code for the Web.

Langkah 1: Edit kode situs menggunakan Visual Studio Code for the Web

1. Buka situs Anda di Studio desain Power Pages

2. Di sudut kanan atas, pilih Edit kode

   

3. Pilih Buka Visual Studio Code dari dialog konfirmasi.

4. Masuk ke Visual Studio Code menggunakan kredensial lingkungan.

5. Tunggu ekstensi web Power Platform Tools untuk menginisialisasi, dan kode halaman web dimuat di panel kiri.

Langkah 2: Perbarui konten dan kode

1. Penjelajah di sisi kiri layar memuat metadata konfigurasi situs web terkait yang dapat diedit menggunakan Visual Code for the Web.

   

2. Buat perubahan ke file metadata masing-masing, lalu tekan Ctrl+S untuk menyimpan perubahan.

3. Buka studio desain, lalu pilih Sinkronisasi untuk menarik semua pembaruan dalam sesi studio desain Anda saat ini.

   

4. Pilih pratinjau untuk melihat perubahan di situs Power Pages.

Menggunakan Visual Studio Code for the Web atau Visual Studio Code Desktop

Pengguna dapat mengedit, men-debug, dan mempratinjau perubahan pada pengeditan halaman menggunakan Visual Studio Code for the Web tanpa harus menggunakan alat eksternal. Visual Studio Code Desktop menyediakan fitur lanjutan lainnya untuk mengedit semua metadata situs dan mengintegrasikan dengan GitHub, kerangka kerja, dan proses integrasi/pengembangan berkelanjutan (CI/CD).

Fitur	VS Code untuk Web	VS Code Desktop
Membuat rekaman metadata konfigurasi situs web baru	Tidak	Terbatas untuk halaman web, template halaman, template web, cuplikan konten, dan file web.
Pengeditan situs langsung	Ya	Tidak
Pengeditan metadata situs	Terbatas untuk mengedit halaman web, cuplikan konten, formulir dasar, formulir multilangkah, daftar, dan template web.	Semua Konfigurasi metadata Power Pages
Pratinjau situs	Direncanakan	Direncanakan
Dukungan Power Platform CLI	Tidak	Ya
CPU canggih dan proses kerja yang bergantung pada penyimpanan - dukungan alat build untuk ReactJS atau kerangka kerja lainnya.	Tidak	Ya
Integrasi GitHub dengan kemampuan seperti check-in kode, check-out, mengelola konflik, dan penggabungan.	Tidak	Ya

Pengeditan kode di aplikasi manajemen portal

Catatan

• Menggunakan Visual Studio Code untuk Web untuk mengedit situs web tidak didukung di Government Community Cloud (GCC), Government Community Cloud (GCC High), dan Departemen Pertahanan (DoD). Pengguna di kawasan ini dapat menggunakan aplikasi Manajemen Portal untuk membuat perubahan mereka.

Jika kawasan tidak mendukung Visual Studio Code for the Web, memilih ikon editor kode </> di bilah perintah akan membuka aplikasi Portals Management.

Navigasikan ke rekaman Halaman Web, Formulir Dasar, Formulir Multilangkah, Daftar, atau Template Web untuk mengedit kode.

Tipe	Lokasi kode
Halaman web	Pilih Rekaman halaman web. Pilih rekaman konten halaman web dari bagian Konten yang dilokalkan. Salinan halaman dapat diedit dalam bidang Salin (HTML) pada tab Umum. JavaScript kustom dan Kode CSS kustom dapat diedit dari tab Tingkat Lanjut.
Formulir Dasar	Pilih data formulir dasar. Edit JavaScript Kustom pada tab Pengaturan Tambahan .
Formulir multilangkah	Pilih rekaman formulir multistep. Pilih langkah formulir multistep dari tab Langkah Formulir . Edit JavaScript Kustom pada tab Opsi Formulir .
Daftar	Pilih rekaman dalam daftar. Edit JavaScript Kustom pada tab Opsi .
Template web	Pilih catatan templat web. Edit Sumber pada tab Umum .

Simpan rekaman, dan pratinjau situs web Anda untuk menguji kode Anda.

Baca juga

• Menggunakan Visual Studio Code dan Microsoft Power Platform CLI