Menyambungkan komponen web di SharePoint Online

Menyambungkan komponen web di SharePoint Online

Catatan: Kami ingin secepatnya menyediakan konten bantuan terbaru dalam bahasa Anda. Halaman ini diterjemahkan menggunakan mesin dan mungkin terdapat kesalahan tata bahasa atau masalah keakuratan. Kami bertujuan menyediakan konten yang bermanfaat untuk Anda. Dapatkah Anda memberi tahu kami apakah informasi ini bermanfaat untuk Anda di bagian bawah halaman ini? Berikut artikel dalam bahasa Inggris untuk referensi.

Saat Anda menambahkan halaman modern untuk situs, menambahkan dan mengkustomisasi komponen web, yang merupakan blok penyusun halaman Anda. Anda bisa menyambungkan beberapa komponen web ke satu sama lain untuk membuat pengalaman yang interaktif dan dinamis untuk pemirsa halaman Anda. Misalnya, Anda bisa menyambungkan komponen web pustaka dokumen ke komponen web penampil File. Saat pengguna mengklik nama file di pustaka dokumen daftar, penampil File memperlihatkan konten file tertentu tersebut. Atau, menyambungkan komponen web daftar ke komponen web tersemat, dan tambahkan kode kustom untuk berbagai pengalaman dinamis.

Catatan: 

  • Beberapa fungsi diperkenalkan secara bertahap bagi organisasi yang telah diikutsertakan dalam program rilis bertarget. Artinya, Anda mungkin belum melihat fitur ini atau fitur mungkin terlihat berbeda dari yang dijelaskan dalam artikel bantuan.

  • Komponen web dalam artikel ini tidak tersedia untuk digunakan di halaman klasik.

Anda bisa menyambungkan komponen Web menyertakan: properti daftar web komponen, komponen web penampil File, dan komponen web tersemat. Berikut adalah beberapa contoh bagaimana Anda bisa menggunakan komponen web tersambung ini.

Memperlihatkan file berdasarkan pada apa yang pengguna memilih di pustaka dokumen (menyambungkan komponen web penampil File ke komponen web pustaka dokumen)

Dalam contoh ini, pengguna dapat menelusuri pustaka dokumen kampanye dan melihat konten dalam file yang dipilih tanpa meninggalkan halaman, dan tanpa harus membuka setiap file.

Contoh komponen web penampil File tersambung ke pustaka dokumen

Untuk melakukannya:

  1. Di halaman Anda, menambahkan komponen web pustaka dokumen dengan pustaka yang ingin Anda gunakan, dan menambahkan komponen web penampil File.

  2. Jika Anda menambahkan komponen web penampil File untuk pertama kalinya, panel dokumen terbaru akan terbuka. Klik Batalkan di bagian kanan bawah panel ini.

  3. Klik Edit komponen web Tombol edit komponen Web di sebelah kiri komponen web penampil File.

  4. Klik elipsis () di bagian atas kanan dari panel properti, dan lalu klik Sambungkan ke sumber.

    Menyambungkan ke tombol sumber
  5. Di bawah Sambungkan ke sumber, pilih pustaka dokumen yang ingin Anda gunakan dari daftar turun bawah.

    Penampil properti panel file dengan menyambungkan ke sumber daftar menurun
  6. Klik X di bagian atas panel untuk menutupnya.

  7. Klik Simpan sebagai draf di bagian atas halaman.

  8. Menguji koneksi Anda dengan memilih dokumen dari pustaka dokumen yang Anda pilih. Anda akan melihat dokumen yang ditampilkan dalam komponen web penampil File.

  9. Saat Anda sudah siap untuk audiens Anda untuk melihat halaman, klik terbitkan di bagian atas kanan atas halaman.

Menampilkan item dalam daftar yang berdasarkan pada apa yang pengguna memilih di komponen web daftar (menyambungkan komponen web properti daftar ke komponen web daftar)

Saat Anda memiliki daftar besar dengan banyak kolom, akan sulit untuk pengguna menemukan informasi tertentu yang mereka cari. Dengan komponen web daftar properti, pengguna dapat memilih item dari komponen web daftar, dan lihat hanya value(s) yang Anda tentukan. Dalam contoh berikut, komponen web daftar berisi daftar kantor Regional. Saat pengguna memilih item dari daftar, komponen web daftar properti menampilkan hanya Office nama dan data penjualan.

Contoh daftar tersambung dengan komponen web daftar properti

Untuk melakukannya:

  1. Di halaman Anda, menambahkan komponen web daftar dengan daftar yang ingin Anda gunakan, dan lalu tambahkan Daftar properti komponen web.

  2. Klik Edit komponen web Tombol edit komponen Web di sisi kiri daftar properti komponen web.

  3. Klik elipsis () di bagian atas kanan dari panel properti, dan lalu klik Sambungkan ke sumber.

    Menyambungkan ke tombol sumber
  4. Di bawah Sambungkan ke sumber, pilih daftar yang ingin Anda gunakan dari daftar turun bawah.

  5. Di bawah tampilan, pilih apa yang Anda ingin pengguna melihat di halaman Anda. 

  6. Di bawah bidang untuk ditampilkan, pilih kotak centang di samping kolom yang Anda inginkan untuk memperlihatkan nilai dari.

    Panel komponen web daftar properti
  7. Klik Simpan sebagai draf di bagian atas halaman.

  8. Menguji koneksi Anda dengan memilih item dari daftar yang Anda pilih. Anda akan melihat nilai yang Anda tentukan di komponen web daftar properti.

  9. Saat Anda sudah siap untuk audiens Anda untuk melihat halaman, klik terbitkan di bagian atas kanan atas halaman.

Memperlihatkan video, Gambar, atau lokasi yang berdasarkan pada apa yang pengguna memilih di komponen web daftar (menyambungkan komponen web sematkan ke komponen web daftar)

Dengan komponen web tersemat, Anda dapat memasukkan tautan atau kode yang disematkan yang menggunakan variabel, memungkinkan Anda untuk memperlihatkan berbagai item bergantung pada apa penampil halaman Anda memilih. Berikut adalah tiga contoh bagaimana Anda bisa memperlihatkan gambar dipilih, video, dan lokasi.

Memperlihatkan video YouTube dipilih

Dalam contoh ini, komponen web daftar berisi daftar dengan judul video dan id untuk beberapa video YouTube. Saat pengguna memilih video dari daftar, komponen web tersemat memperlihatkan yang video. Link dalam komponen web tersemat menggunakan variabel untuk mewakili ID video video dipilih oleh pengguna dari daftar.

Contoh Semat komponen web yang sudah tersambung ke daftar

Untuk melakukannya:

  1. Membuat daftar yang memiliki judul kolom dan kolom untuk id Video Anda (seperti dalam contoh di atas). ID adalah porsi link YouTube yang mengidentifikasi video, dan ditemukan setelah "v =" bagian link. Misalnya, di tautan berikut ini, Bagian dimiringkan adalah Video ID:

    https://www.youtube.com/watch?v=0YEPy7HRf60

  2. Di halaman Anda, menambahkan komponen web daftar dan pilih daftar dengan ID video.

  3. Menambahkan komponen web tersemat.

  4. Klik Edit komponen web Tombol edit komponen Web di sebelah kiri komponen web tersemat.

  5. Klik elipsis () di bagian atas kanan dari panel properti, dan lalu klik Sambungkan ke sumber.

    Menyambungkan ke tombol sumber
  6. Di bawah Sambungkan ke sumber, pilih daftar dari daftar turun bawah.

  7. Di bawah situs Web alamat atau kode semat, tambahkan YouTube link. Sebagai ganti menggunakan individual video ID, meskipun, gunakan nama kolom daftar yang berisi id sebagai variabel. Variabel ditandai dengan kurung siku buka, $, kurung siku penutup setelah nama. Berikut adalah contoh, di mana Video ID adalah nama kolom:

    Menyematkan daftar tersambung memperlihatkan panel properti komponen web

  8. Klik Simpan sebagai draf di bagian atas halaman.

  9. Menguji koneksi Anda dengan memilih item dari daftar yang Anda pilih. Anda akan melihat video yang ditampilkan dalam komponen web tersemat.

  10. Saat Anda sudah siap untuk audiens Anda untuk melihat halaman, klik terbitkan di bagian atas kanan atas halaman.

Memperlihatkan gambar yang dipilih

Dalam contoh ini, komponen web daftar berisi judul gambar dan URL untuk gambar yang disimpan di situs SharePoint. Saat pengguna memilih gambar dari daftar, komponen web tersemat memperlihatkan gambar tersebut. Dalam contoh ini, kode IFrame digunakan di komponen web tersemat, dan variabel mewakili link gambar.

Contoh Semat komponen web yang sudah tersambung ke daftar gambar

Untuk melakukannya:

  1. Membuat daftar yang memiliki judul kolom dan kolom untuk URL gambar Anda.

    Tips: Untuk mendapatkan URL untuk gambar Anda, masuk ke pustaka tempat gambar disimpan, klik kanan pada gambar, klik Salin tautan. Lalu klik Salin. Sekarang Anda bisa menempelkan tautan ke daftar Anda.

  2. Di halaman Anda, menambahkan komponen web daftar dan pilih daftar dengan URL gambar Anda.

  3. Menambahkan komponen web tersemat.

  4. Klik Edit komponen web Tombol edit komponen Web di sebelah kiri komponen web tersemat.

  5. Klik elipsis () di bagian atas kanan dari panel properti, dan lalu klik Sambungkan ke sumber.

    Menyambungkan ke tombol sumber
  6. Di bawah Sambungkan ke sumber, pilih daftar dari daftar turun bawah.

  7. Di bawah situs Web alamat atau kode semat, tambahkan kode semat. Dalam contoh ini, kode semat adalah:

    lebar <iframe = tinggi "693" = "390" src = "[$Image URL]" frameborder = allowfullscreen "0" = "" Perbolehkan = "accelerometer; Putar otomatis; terenkripsi media; giroskop; gambar-gambar di ></iframe>"

    di mana [$Image URL] adalah variabel yang mewakili nama kolom untuk URL gambar.

    Contoh dari kode semat untuk gambar yang dipilih
  8. Klik Simpan sebagai draf di bagian atas halaman.

  9. Menguji koneksi Anda dengan memilih item dari daftar yang Anda pilih. Anda akan melihat theimage ditampilkan dalam komponen web tersemat.

  10. Saat Anda sudah siap untuk audiens Anda untuk melihat halaman, klik terbitkan di bagian atas kanan atas halaman.

Memperlihatkan lokasi dipilih

Dalam contoh ini, komponen web daftar berisi lokasi dan koordinat mereka. Saat pengguna memilih lokasi dari daftar, komponen web tersemat memperlihatkan lokasi tersebut di Bing Maps. Dalam contoh ini, kode IFrame digunakan di komponen web tersemat, dan variabel mewakili koordinat.

Contoh komponen web Semat tersambung memperlihatkan lokasi dari daftar

Untuk melakukannya:

  1. Membuat daftar yang memiliki judul kolom dan kolom untuk garis lintang dan bujur.

  2. Di halaman Anda, menambahkan komponen web daftar dan pilih daftar dengan informasi lokasi.

  3. Menambahkan komponen web tersemat.

  4. Klik Edit komponen web Tombol edit komponen Web di sebelah kiri komponen web tersemat.

  5. Klik elipsis () di bagian atas kanan dari panel properti, dan lalu klik Sambungkan ke sumber.

    Menyambungkan ke tombol sumber
  6. Di bawah Sambungkan ke sumber, pilih daftar dari daftar turun bawah.

  7. Di bawah situs Web alamat atau kode semat, tambahkan kode semat. Dalam contoh ini, kode semat adalah:

    lebar <iframe = tinggi "500" = "400" src = "https://www.bing.com/maps/embed?h=400&amp;w=500&amp;cp= [$Latitude] ~ &amp [$Longitude]; lvl = 13&amp; typ = d&amp; sty = r&amp; src = SHELL&amp; Formulir = MBEDV8 "frameborder = pengguliran"0"="tidak ada"> </iframe>

    tempat [$Latitude] dan [$Longitude] adalah variabel yang mewakili nama kolom untuk setiap poin tersebut.

    Contoh dari kode semat untuk memperlihatkan lokasi
  8. Klik Simpan sebagai draf di bagian atas halaman.

  9. Menguji koneksi Anda dengan memilih item dari daftar yang Anda pilih. Anda akan melihat Bing Maps yang memperlihatkan lokasi yang ditampilkan dalam komponen web tersemat.

  10. Saat Anda sudah siap untuk audiens Anda untuk melihat halaman, klik terbitkan di bagian atas kanan atas halaman.

Catatan: 

  • Menyematkan kode harus berbasis iframe (yaitu, dimulai dan diakhiri dengan tag <iframe>). Menyematkan kode yang menggunakan <script> tag tidak didukung.

  • Hanya aman situs web yang dapat disematkan. Pastikan bahwa URL situs web yang dimulai dengan HTTPS.

Kembangkan keterampilan Office Anda
Jelajahi pelatihan
Dapatkan fitur baru terlebih dahulu
Gabung ke Office Insiders

Apakah informasi ini bermanfaat?

Terima kasih atas umpan balik Anda!

Terima kasih atas umpan balik Anda! Sepertinya menghubungkan Anda ke salah satu agen dukungan Office kami akan sangat membantu.

×