تغيير الصفحة لعرض عنصر القوائم العامة في Bitrix24 المربّع

مرحبا.



إذا سبق لك العمل مع القوائم العامة في Bitrix24 ، فمن المحتمل أنك تدرك أن صفحة التفاصيل لعنصر ما مطابقة تمامًا لصفحة التحرير. الاختلاف الوحيد هو أنه إذا كان لدى المستخدم أذونات للقراءة فقط ، فلن تحتوي الصفحة على زري حفظ وتطبيق. موافق ، ليست الواجهة الأكثر متعة.







وبالتالي ، عندما أصبح من الضروري استخدام القوائم العامة في العمل ، قررت تغيير صفحة العرض التفصيلية ، نظرًا لأننا نستخدم مربعًا ، وإمكانيات التخصيص غير محدودة ببساطة.

تحذير هام



لا يشجع منشئو Bitrix24 بشدة تغيير واجهة بوابة الشركة ، نظرًا لأن الجزء العام في المربع يعادل النواة ، وعند تحديث النظام هناك خطر يتمثل في محو جميع تعديلاتك.



إذا قررت نسخ القوالب التي تحتاجها إلى المجلد المحلي والسخرية منها كما تريد ، فلن تتأثر بالتحديث. لكن الميزات الجديدة لن يتم تطبيقها عليهم أيضًا.



لذلك ، فإن الطريقة الصحيحة الوحيدة في هذه الحالة هي تعديل شجرة DOM عبر Javascript.

في الواقع ، نحتاج فقط إلى تغيير الرابط إلى الصفحة التفصيلية في جدول القائمة:







ومع ذلك ، في الواقع ، ليس من السهل تنفيذ ذلك ، نظرًا لأن تحتاج إلى الدخول إلى المكون المسؤول عن عرض القوائم العامة وتحرير الرابط هناك.



لذلك ، سنتخذ مسارًا مختلفًا - من خلال Javascript ، سنفتح الصفحة في شريط التمرير باستخدام مكتبة SidePanel bitrix.



هناك طريقتان للقيام بذلك - في init.php وفي الوحدة الخاصة بك. تحتاج أيضًا إلى تسجيل مكتبة JS الخاصة بك.



وعلى الرغم من أن الطريقة الثانية أكثر ملاءمة ، سأعرض لك الطريقة الأولى ، وفي نهاية المقالة سأقدم رابطًا إلى الوحدة الخاصة بي.



إذا هيا بنا. يجب تنفيذ جميع الإجراءات في المجلد المحلي.



تحتاج أولاً إلى إنشاء مجلد منفصل حيث سيتم تخزين مكتبتنا. دعنا نسميها ، على سبيل المثال ، المشاهد ، وسيكون لها الهيكل التالي:

/viewer 
-/js
--viewer.js //  js-
-include.php // ,      init.php

دعنا نتوقف هنا قليلا. بالنسبة إلى كود php ، قمت بإنشاء ملف منفصل ، والذي سأدرجه بعد ذلك في init.php حتى لا أتلف هذا الأخير.



دعنا الآن نسجل مكتبتنا باستخدام طريقة CJSCore :: RegisterExt الأساسية القديمة :

// include.php

// ..    js- viewer,     
CJSCore::RegisterExt('elementviewer', [ 
    'js' => '/local/viewer/js/viewer.js', //   
    'rel' => ['SidePanel'] // 
]);

يبقى فقط ربط هذه المكتبة على صفحة القوائم العامة بالطريقة CJSCore :: Init ، ويبدو أنها في الحقيبة - يمكنك البدء في كتابة المكتبة نفسها.



ومع ذلك ، ليس كل شيء بهذه البساطة ، منذ ذلك الحين قبل الاتصال ، تحتاج إلى التحقق من أننا على الصفحة الصحيحة. من الأفضل القيام بذلك باستخدام التعبيرات النمطية ، منذ ذلك الحين يمكن تغيير معرف القائمة في العنوان

// include.php

$pattern = '/\/lists\/(\d+)\/view\//'; //     ,  (\d+) = id 
$server = Bitrix\Main\Context::getCurrent()->getServer(); //  Server,     

if(preg_match($pattern, $server->getRequestUri())) {
       CJSCore::Init(['elementviewer']); //  
}

لذا ، المكتبة متصلة ، ويبقى كتابتها. للقيام بذلك ، قم بإنشاء ملف viewer.js (إذا لم تكن قد قمت بإنشائه من قبل) وقم أولاً بالإعلان عن مساحة اسم باستخدام وظيفة BX.namespace :

const ElementViewer = BX.namespace('Viewer');

الآن يمكن التصريح عن جميع المتغيرات والوظائف بالطريقة التالية:

ElementViewer.init = function() {

}

لكي لا نكتب كل الكود في وظيفة واحدة ، دعنا نقسمها إلى أخرى أصغر للراحة



بادئ ذي بدء ، نحتاج إلى العثور على العقدة في الصفحة التي تحتوي على رابط صفحة التفاصيل. للقيام بذلك ، سوف نستخدم وظيفة BX.findChildren ، والتي يجب أن تعيد لنا قائمة بجميع الكائنات التي تحتوي على روابط لصفحة التفاصيل:

ElementViewer.findCell = function () {
    return BX.findChildren(document, {
        class: 'main-grid-cell-content' // css-    
    }, true);
}

في الوقت نفسه ، سنكتب وظيفة من شأنها استخراج معرف القائمة والعنصر من الرابط لمزيد من العمل:

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])
        };
    }
}

دعنا نعود إلى BX.findChildren. تكمن خصوصية هذه الوظيفة في أنها تعرض قائمة بجميع الكائنات ذات فئة css المحددة ، وليس حقيقة أن هذا سيكون رابطًا. لذلك ، نحتاج إلى التحقق ، وبعد ذلك فقط إلغاء حدث فتح الرابط وفتح شريط التمرير:

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); //  
                })
            }
        }
    });

}

يبقى لنا أن نكتب الوظيفة الأخيرة التي ستفتح شريط التمرير. للقيام بذلك ، نستخدم مكتبة 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
    });
}

حسنًا ، المكتبة مكتوبة ، ويبقى استدعاء وظيفة init بعد الاتصال. للقيام بذلك ، دعنا نعود إلى include.php ، حيث يتم تحديد عنوان الصفحة:

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);
}

تبقى اللمسة الأخيرة - لتضمين الكود الخاص بنا في init.php:

// init.php

$file = $_SERVER['DOCUMENT_ROOT'] . '/local/path/to/viewer/include.php';

if(file_exists($file)) {
   require $file;
}

إذا تم كل شيء بشكل صحيح ، فعند النقر فوق عنصر من القائمة العالمية ، سيتم فتح شريط التمرير:











أخيرًا ، كما هو موعود ، رابط إلى وحدة تقوم بتنفيذ نفس الشيء.



شكرآ لك على أهتمامك.