Тонкости в работе с 1С-Битрикс

Обзор обновления aveCRM 4.4
Тонкости в работе с 1С-Битрикс

Подборка полезных функций при разработке сайтов на 1С-Битрикс.

amCharts

Очень часто при создании сайта на 1С-Битрикс требуется оформить некоторое количество данных в виде графиков. Так сложилось, что чаще всего, разработчики используют сторонние решения, тогда как в 1С-Битрикс уже все есть для этого.

Одна из самых популярных библиотек для работы с графиками и диаграммами. Штатный вариант подключения библиотеки

CJSCore::Init(['amcharts']);

Количество доступных вариантов типов графиков достаточно, для решения большинства задач:

amcharts - Базовая библиотека 
amcharts_funnel – Воронка, пирамида Маслоу
amcharts_gauge – Диаграмма в виде спидометра
amcharts_pie – Круговая диаграмма
amcharts_radar – Радарная диаграмма
amcharts_serial – Обычные графики
amcharts_xy – График XY

MaskedInput

Если в проект есть формы, в которых используются поля для ввода телефонов или другой информации по шаблону, не обязательно использовать jquery.maskedinput. Есть более простое решение:

<?php
CJSCore::Init(['masked_input']);
?>
<input type="text" id="phone" placeholder="Укажите ваш номер телефона">
<script>
    BX.ready(function() {
        var result = new BX.MaskedInput({
            mask: '+7 999 999 99 99', // устанавливаем маску
            input: BX('phone'),
            placeholder: '_' // символ замены +7 ___ ___ __ __
        });

        result.setValue('9000000000'); // значение по умолчанию
    });
</script>

PhoneNumber

Используете только маски для номеров телефонов? Есть специальное решение для них:

<?php

CJSCore::Init(['phone_number']);
?>

<span id="flag"></span>
<input type="text" id="number" placeholder="Укажите ваш номер телефона">

<script>
    BX.ready(function() {
        new BX.PhoneNumber.Input({
            node: BX('number'),
            forceLeadingPlus: false, // поставить + перед номером телефона
            flagNode: BX('flag'), //
            flagSize: 16, // Размер иконки флага [16, 24, 32]
            defaultCountry: 'ru', // Страна по-умолчанию
            onChange: function(e) {
              // вызывается при изменении значения
            }
        });
    });
</script>

PopupWindowManager

С помощью данной библиотеки можно сделать вывод не только диалоговые окна, но и полноценные всплывающие страницы:

<?php
CJSCore::Init(['popup']);
?>

<script>
    // BX.element - элемент, к которому будет привязано окно, если null – окно появится по центру экрана

    BX.ready(function () {
        var popup = BX.PopupWindowManager.create("popup-message", BX('element'), {
            content: 'Контент, отображаемый в теле окна',
            width: 400, // ширина окна
            height: 100, // высота окна
            zIndex: 100, // z-index
            closeIcon: {
                // объект со стилями для иконки закрытия, при null - иконки не будет
                opacity: 1
            },
            titleBar: 'Заголовок окна',
            closeByEsc: true, // закрытие окна по esc
            darkMode: false, // окно будет светлым или темным
            autoHide: false, // закрытие при клике вне окна
            draggable: true, // можно двигать или нет
            resizable: true, // можно изменять размер
            min_height: 100, // минимальная высота окна
            min_width: 100, // минимальная ширина окна
            lightShadow: true, // использовать светлую тень у окна
            angle: true, // появится уголок
            overlay: {
                // объект со стилями фона
                backgroundColor: 'black',
                opacity: 500
            }, 
            buttons: [
                new BX.PopupWindowButton({
                    text: 'Сохранить', // текст кнопки
                    id: 'save-btn', // идентификатор
                    className: 'ui-btn ui-btn-success', // доп. классы для кнопок
                    events: {
                      click: function() {
                          // Событие при клике на кнопку
                      }
                    }
                }),
                new BX.PopupWindowButton({
                    text: 'Копировать',
                    id: 'copy-btn',
                    className: 'ui-btn ui-btn-primary',
                    events: {
                      click: function() {

                      }
                    }
                })
            ],
            events: {
               onPopupShow: function() {
                  // Событие при показе окна
               },
               onPopupClose: function() {
                  // Событие при закрытии окна                
               }
            }
        });

        popup.show();
    });
</script>

PopupMenu

Отлично подходит для создания всплывающих меню и списков в стилистике Битрикс 24

<?php
CJSCore::Init(['popup']);
?>

<div style="background: red; width: 100px; height: 40px; margin-left: 500px" id="element"></div>

<script>
    BX.ready(function () {
        BX.bind(BX('element'), 'click', function () {
            BX.PopupMenu.show('demo-popup-menu', BX('element'), [
                {
                    text: 'Обычный пункт', // Название пункта
                    href: '#', // Ссылка
                    className: 'menu-popup-item menu-popup-no-icon', // Дополнительные классы
                    onclick: function(e, item){
                       BX.PreventDefault(e);
                       // Событие при клике на пункт
                    }
                },
                {
                    text: 'Выбранный пункт',
                    href: '#',
                    className: 'menu-popup-item menu-popup-item-accept'
                }
            ], {
              autoHide : true, // Закрытие меню при клике вне меню
              offsetTop: 0, // смещение от элемента по Y
              zIndex: 10000, // z-index
              offsetLeft: 100,  // смещение от элемента по X
              angle: { offset: 45 }, // Описание уголка, при null – уголка не будет
              events: {
                 onPopupShow: function() {
                    // Событие при показе меню          
                 },
                 onPopupClose : function(){
                    // Событие при закрытии меню
                 },
                 onPopupClose : function(){
                    // Событие при уничтожении объекта меню
                 }
              }
            });
        });
    });
</script>

SpotLight

Если на сайте есть пошаговая инструкция по работе с системой и нужно провести пользователя по каждому из них, используйте библиотеку SpotLight. Анимированные круги точно привлекут внимание.

<?php
CJSCore::Init(['spotlight']);
?>

<div style="background: red; width: 100px; height: 40px; margin-left: 500px" id="element"></div>

<script>
    BX.ready(function () {
        var obj = new BX.SpotLight({
            renderTo: BX('element'), // Привязать к элементу
            top: 0, // позиционирование относительно элемента
            left: 0, // позиционирование относительно элемента
            content: '1. Сначала нажмите на эту кнопку',
            lightMode: false, // Темный режим или светлый
            observerTimeout: 10000, // Таймаут
            events: {
                onPopupShow: function() {
                  // Событие при показе подсказки
                }
            }

        });

        obj.show();
    });
</script>

ColorPicker

Для выбора цвета в формах не обязательно использовать стороннюю библиотеку.

<?php
CJSCore::Init(['color_picker']);
?>

<input type="text" id="example">

<script>
  BX.ready(function() {
    var element = BX('example');

    BX.bind(element, 'focus', function () {
        new BX.ColorPicker({
            bindElement: element, // Элемент, к которому будет прикреплена область с выбором цвета
            defaultColor: '#FF6600', // Цвет по-умолчанию
            allowCustomColor: true, // Разрешить указывать произвольный цвет
            onColorSelected: function (item) {
                element.value = item // Вызывается при выборе цвета
            },
            popupOptions: {
                angle: true, // треугольник
                autoHide: true, // Закрытие по клику вне области
                closeByEsc: true, // Закрытие по esc
                events: {
                    onPopupClose: function () {
                        // Вызывается при закрытии окна
                    }
                }
            }
        }).open();
    })
  }
</script>

Списки

На странице нужно оформить выпадающие списки, с поиском и множественным выбором? Такой функционал тоже есть.

<?php
CJSCore::Init(['ui']);

$items = [
    ['NAME' => 'Первый вариант', 'VALUE' => '1'],
    ['NAME' => 'Второй вариант', 'VALUE' => '2'],
];
?>
    <div style="padding: 100px" id="filter">
        <div data-name="SELECT_SINGLE" class="main-ui-filter-wield-with-label main-ui-filter-date-group main-ui-control-field-group">
            <span class="main-ui-control-field-label">Одиночный выбор</span>
            <div data-name="SELECT_SINGLE"
                 data-items='<?= \Bitrix\Main\Web\Json::encode($items); ?>'
                 data-params='<?= \Bitrix\Main\Web\Json::encode(['isMulti' => false]); ?>'
                 id="select" class="main-ui-control main-ui-select">

                <span class="main-ui-select-name">Выберите</span>
                <span class="main-ui-square-search">
                <input type="text" tabindex="2" class="main-ui-square-search-item">
            </span>
            </div>
        </div>

        <div data-name="SELECT_MULTIPLE" class="main-ui-filter-wield-with-label main-ui-filter-date-group main-ui-control-field-group">
            <span class="main-ui-control-field-label">Множественный выбор</span>
            <div data-name="SELECT_MULTIPLE"
                 data-items='<?= \Bitrix\Main\Web\Json::encode($items); ?>'
                 data-params='<?= \Bitrix\Main\Web\Json::encode(['isMulti' => true]); ?>'
                 id="select2" class="main-ui-control main-ui-multi-select">

                <span class="main-ui-square-container"></span>
                <span class="main-ui-square-search"><input type="text" tabindex="2" class="main-ui-square-search-item"></span>
                <span class="main-ui-hide main-ui-control-value-delete"><span class="main-ui-control-value-delete-item"></span></span>
            </div>
        </div>

        <span class="ui-btn-primary ui-btn" id="update_filter">Найти</span>
    </div>

Перенос скриптов

В 1С-Битрикс есть возможность указать в настройках объединение и перенос скриптов вниз страницы. Но, если у вам необходимо задавать цели для счетчиков Яндекса или Гугла, то они должны подключаться в шапке. Следующий код запрещает перенос скриптов вниз страницы

<script type="text/javascript" data-skip-moving="true"></script>

AJAX для компонентов

Если пишите свой компонент и нужно сделать запрос для получения информации на сервере, можно использовать следующий код:

var query = {
	c: 'reimax:maps',
	action: 'search',
	mode: 'class',
};

var data = {
	search_cat_1: search_cat_1 ? search_cat_1 : 0,
	search_cat_2: search_cat_2 ? search_cat_2 : 0,
	sessid: BX.message('bitrix_sessid')
};

$.ajax({
	url: '/bitrix/services/main/ajax.php?' + $.param(query, true),
	method: 'POST',
	data: data,
	success: function (data) {
		// обработка результатов запроса
	}
});

И на сервере

public function searchAction($search_cat_1, $search_cat_2)
	{

        $this->_checkModules();
        
        // обрабатываем данные запроса и возвращаем результат

        return $arParams;
}

Не забываем про настройки

public function configureActions()
	{
        return [
            'search' => [
                'prefilters' => [
                    //new ActionFilter\Authentication(),
                    new ActionFilter\HttpMethod(
                        array(ActionFilter\HttpMethod::METHOD_GET, ActionFilter\HttpMethod::METHOD_POST)
                    ),
                    new ActionFilter\Csrf(),
                ],
                'postfilters' => []
            ]
        ];
    }

Для получения значений настроек компонентов, при ajax запросе, можно использовать следующий метод

$signer = new \Bitrix\Main\Component\ParameterSigner;
   return [
       'params' => $signer->unsignParameters($this->__name, $signedParameters),
   ];

Вы готовы начать работу или получить консультацию?

Самый простой способ - написать нам. Не стесняйтесь задавать вопросы. Мы готовы начать обсуждение вашего проекта сейчас, сделайте следующий шаг, напишите нам.

+375 44 707-61-24

info@reimax.ru

CAPTCHA