Jika Anda pernah bekerja dengan daftar universal di Bitrix24, Anda mungkin menyadari bahwa halaman detail dari sebuah elemen sangat identik dengan halaman edit. Satu-satunya perbedaan adalah jika pengguna memiliki hak baca-saja, halaman tidak akan memiliki tombol Simpan dan Terapkan. Setuju, bukan antarmuka yang paling menyenangkan.
Jadi, ketika di tempat kerja menjadi perlu untuk menggunakan daftar universal, saya memutuskan untuk mengubah halaman tampilan mendetail, karena kami menggunakan kotak, dan kemungkinan penyesuaian tidak terbatas.
24 , , , .
local , . .
— DOM- Javascript.
Faktanya, kita hanya perlu mengubah link ke halaman detail di tabel daftar:
Namun, pada kenyataannya, ini tidak mudah diterapkan, karena Anda perlu masuk ke komponen yang bertanggung jawab untuk menampilkan daftar universal dan mengedit tautan di sana.
Oleh karena itu, kami akan mengambil jalur yang berbeda - melalui Javascript kami akan membuka halaman di slider menggunakan pustaka bitrix SidePanel.
Ada dua cara untuk melakukannya - di init.php dan di modul Anda sendiri. Anda juga perlu mendaftarkan perpustakaan JS Anda.
Dan meskipun metode kedua lebih mudah, saya akan menunjukkan kepada Anda yang pertama, dan di akhir artikel saya akan memberikan tautan ke modul saya.
Jadi ayo pergi. Semua tindakan harus dilakukan di folder lokal.
Pertama, Anda perlu membuat folder terpisah tempat perpustakaan kami akan disimpan. Sebut saja, misalnya, viewer, dan itu akan memiliki struktur berikut:
/viewer
-/js
--viewer.js // js-
-include.php // , init.php
Mari berhenti di sini sedikit. Untuk kode php, saya membuat file terpisah, yang kemudian akan saya masukkan di init.php agar tidak membuang sampah yang terakhir.
Sekarang mari kita daftarkan pustaka kita menggunakan metode inti CJSCore :: RegisterExt lama :
// include.php
// .. js- viewer,
CJSCore::RegisterExt('elementviewer', [
'js' => '/local/viewer/js/viewer.js', //
'rel' => ['SidePanel'] //
]);
Tetap hanya menghubungkan pustaka ini pada halaman daftar universal dengan metode CJSCore :: Init , dan, tampaknya, itu ada di tas - Anda dapat mulai menulis pustaka itu sendiri.
Namun, tidak semuanya sesederhana itu sebelum menghubungkan, Anda perlu memeriksa apakah kami berada di halaman yang benar. Lebih baik melakukan ini menggunakan ekspresi reguler, karena id dari daftar di alamat bisa berubah
// include.php
$pattern = '/\/lists\/(\d+)\/view\//'; // , (\d+) = id
$server = Bitrix\Main\Context::getCurrent()->getServer(); // Server,
if(preg_match($pattern, $server->getRequestUri())) {
CJSCore::Init(['elementviewer']); //
}
Jadi, perpustakaan itu terhubung, tetap menulisnya. Untuk melakukan ini, buat file viewer.js (jika Anda belum pernah membuatnya sebelumnya) dan pertama-tama nyatakan namespace menggunakan fungsi BX.namespace :
const ElementViewer = BX.namespace('Viewer');
Sekarang semua variabel dan fungsi dapat dideklarasikan dengan cara berikut:
ElementViewer.init = function() {
}
Agar tidak menulis semua kode dalam satu fungsi, mari kita uraikan menjadi lebih kecil untuk kenyamanan.
Hal pertama yang perlu kita lakukan adalah menemukan node pada halaman yang berisi link ke halaman detail. Untuk melakukan ini, kita akan menggunakan fungsi BX.findChildren , yang akan mengembalikan kita daftar semua objek yang berisi tautan ke halaman detail:
ElementViewer.findCell = function () {
return BX.findChildren(document, {
class: 'main-grid-cell-content' // css-
}, true);
}
Pada saat yang sama, kami akan menulis fungsi yang akan mengekstrak id dari daftar dan elemen dari tautan untuk pekerjaan lebih lanjut:
ElementViewer.pattern = '/lists/(\\d+)/element/0/(\\d+)'; // , = id , = id .
ElementViewer.extractListData = function (url) {
let match = url.match(this.pattern); //
if(match) {
return {
list_id: Number(match[1]),
element_id: Number(match[2])
};
}
}
Mari kita kembali ke BX.findChildren. Keunikan fungsi ini adalah ia mengembalikan daftar semua objek dengan kelas css yang ditentukan, dan ini bukan fakta bahwa ini akan menjadi tautan. Oleh karena itu, kita perlu memeriksa, dan hanya setelah itu batalkan acara tautan terbuka dan buka slider:
ElementViewer.init = function (sliderUrl) {
const cell = this.findCell();
cell.forEach(item => {
let itemChild = item.children;
let child = itemChild[0];
if(child && child.tagName === 'A') {
const listData = this.extractListData(child.toString()); // id
if(listData !== undefined) {
child.addEventListener('click', (e) => {
e.preventDefault(); //
this.openSlider(sliderUrl, listData.list_id, listData.element_id); //
})
}
}
});
}
Tetap bagi kami untuk menulis fungsi terakhir yang akan membuka slider. Untuk melakukan ini, kami menggunakan pustaka SidePanel :
ElementViewer.openSlider = function (sliderUri, listId, elementId) {
// POST, id
let sliderParams = {
list_id: listId,
element_id: elementId
}
return BX.SidePanel.Instance.open(sliderUri, {
allowChangeHistory: false,
cacheable: false,
requestMethod: 'POST',
requestParams: sliderParams
});
}
Nah, pustaka ditulis, tetap memanggil fungsi init setelah menghubungkan. Untuk melakukan ini, mari kembali ke include.php, di mana alamat halaman dicentang:
if(preg_match($pattern, $server->getRequestUri())) {
CJSCore::Init(['elementviewer']); //
$asset = Bitrix\Main\Page\Asset::getInstance();
$script = '<script>BX.ready(function() {
ElementViewer.init();
})</script>';
$asset->addString($script);
}
Sentuhan terakhir tetap - untuk memasukkan kode kita di init.php:
// init.php
$file = $_SERVER['DOCUMENT_ROOT'] . '/local/path/to/viewer/include.php';
if(file_exists($file)) {
require $file;
}
Jika semuanya dilakukan dengan benar, maka saat Anda mengklik elemen dari daftar universal, penggeser akan terbuka:
Akhirnya, seperti yang dijanjikan, tautan ke modul yang menerapkan hal yang sama.
Terima kasih atas perhatian Anda.