Bitrix custom settings page
Rus
Eng
Отдельная страница кастомных настроек Битрикс

All English-language materials have been translated fully automatically using the Google service

I am publishing one of the solutions for creating separate pages in Bitrix for storing certain settings.

To work, I usually need such a supported list of field types: Text, Checkbox, Textarea, Datetime range, Time range, Select , you can add your own and implement your output by analogy.

Time range implemented based on Ion.RangeSlider . For my tasks, this solution is enough

The page looks like this:

Custom settings page

The main settings.php file looks like this:

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_admin_before.php');

use \Bitrix\Main\Config\Option;

$APPLICATION->SetAdditionalCSS('/local/admin/css/ion.rangeSlider.css');
$APPLICATION->SetAdditionalCSS('/local/admin/css/ion.rangeSlider.skinFlat.css');
$APPLICATION->SetAdditionalCSS('/local/admin/css/settings.css');

$APPLICATION->AddHeadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js');
$APPLICATION->AddHeadScript('/local/admin/js/ion.rangeSlider.js');
$APPLICATION->AddHeadScript('/local/admin/js/settings.js');


$tabs[] = ['DIV' => 'customSettings', 'TAB' => 'Settings page', 'TITLE' => 'Settings page'];
$tabControl = new \CAdminTabControl('customSettingsTabControl', $tabs, true, true);

$request = \Bitrix\Main\Context::getCurrent()->getRequest();

if (check_bitrix_sessid() && $request->isPost() && strlen($request['save'])) {
    $options = $request['options'];
    if ($options) {
        foreach ($options as $key => $option) {
            if ($option) {
                Option::set('customSettings', $key, serialize($option));
            } else {
                Option::set('customSettings', $key);
            }
        }
        unset($key, $option, $options);
    } else {
        Option::delete('customSettings');
    }
}

$APPLICATION->SetTitle('Settings page');

require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_admin_after.php');

$settings = [
    [
        'NAME' => 'Vkontakte answering machine',
        'CLASS' => 'vk--auto',
        'ITEMS' => [
            [
                'TYPE' => 'checkbox',
                'CODE' => 'vk--auto-messenger',
                'NAME' => 'Turn on answering machine',
                'HINT' => 'Includes the function of sending messages to VK users on weekends'
            ],
            [
                'TYPE' => 'checkbox',
                'CODE' => 'vk--days-pn',
                'NAME' => 'Mon',
                'HINT' => 'Turn on to have an answering machine on Monday',
            ],
            [
                'TYPE' => 'timerange',
                'CODE' => 'vk--time-send-week',
                'NAME' => 'Time of dispatch on weekdays',
                'HINT' => 'The rule will be valid from Mon-00: 00 to Fri-24: 00'
            ],
            [
                'TYPE' => 'timerange',
                'CODE' => 'vk--time-send-weekend',
                'NAME' => 'Weekend dispatch time',
                'HINT' => 'The rule will be valid from Sat-00: 00 to Sun-24: 00'
            ],
            [
                'TYPE' => 'datetime',
                'CODE' => 'vk--datetime',
                'NAME' => 'Datetime',
                'HINT' => ''
            ],
            [
                'TYPE' => 'text',
                'CODE' => 'vk--text',
                'NAME' => 'Text',
                'HINT' => ''
            ],
            [
                'TYPE' => 'select',
                'CODE' => 'vk--wait',
                'NAME' => 'How many minutes do not respond to a message',
                'VALUES' => [
                    [
                        'NAME' => '5 minutes',
                        'VALUE' => '5 minutes',
                    ],
                    [
                        'NAME' => '15 minutes',
                        'VALUE' => '15 minutes',
                    ],
                    [
                        'NAME' => '30 minutes',
                        'VALUE' => '30 minutes',
                    ],
                    [
                        'NAME' => '1 час',
                        'VALUE' => '1 час',
                    ],
                    [
                        'NAME' => '5 часов',
                        'VALUE' => '5 часов',
                    ],
                    [
                        'NAME' => '24 часа',
                        'VALUE' => '24 часа',
                    ],
                ],
                'MULTIPLE' => 'N',
                'HINT' => ''
            ],
            [
                'TYPE' => 'textarea',
                'CODE' => 'vk--message',
                'NAME' => 'Message template',
                'HINT' => 'This message will be sent to the user'
            ],
        ]
    ],
];

?>
<script>
    var times = ['15:00', '15:05', '15:10', '15:15', '15:20', '15:25', '15:30', '15:35', '15:40', '15:45', '15:50', '15:55', '16:00', '16:05', '16:10', '16:15', '16:20', '16:25', '16:30', '16:35', '16:40', '16:45', '16:50', '16:55', '17:00', '17:05', '17:10', '17:15', '17:20', '17:25', '17:30', '17:35', '17:40', '17:45', '17:50', '17:55', '18:00', '18:05', '18:10', '18:15', '18:20', '18:25', '18:30', '18:35', '18:40', '18:45', '18:50', '18:55', '19:00', '19:05', '19:10', '19:15', '19:20', '19:25', '19:30', '19:35', '19:40', '19:45', '19:50', '19:55', '20:00', '20:05', '20:10', '20:15', '20:20', '20:25', '20:30', '20:35', '20:40', '20:45', '20:50', '20:55', '21:00', '21:05', '21:10', '21:15', '21:20', '21:25', '21:30', '21:35', '21:40', '21:45', '21:50', '21:55', '22:00', '22:05', '22:10', '22:15', '22:20', '22:25', '22:30', '22:35', '22:40', '22:45', '22:50', '22:55', '23:00', '23:05', '23:10', '23:15', '23:20', '23:25', '23:30', '23:35', '23:40', '23:45', '23:50', '23:55', '00:00', '00:05', '00:10', '00:15', '00:20', '00:25', '00:30', '00:35', '00:40', '00:45', '00:50', '00:55', '01:00', '01:05', '01:10', '01:15', '01:20', '01:25', '01:30', '01:35', '01:40', '01:45', '01:50', '01:55', '02:00', '02:05', '02:10', '02:15', '02:20', '02:25', '02:30', '02:35', '02:40', '02:45', '02:50', '02:55', '03:00', '03:05', '03:10', '03:15', '03:20', '03:25', '03:30', '03:35', '03:40', '03:45', '03:50', '03:55', '04:00', '04:05', '04:10', '04:15', '04:20', '04:25', '04:30', '04:35', '04:40', '04:45', '04:50', '04:55', '05:00', '05:05', '05:10', '05:15', '05:20', '05:25', '05:30', '05:35', '05:40', '05:45', '05:50', '05:55', '06:00', '06:05', '06:10', '06:15', '06:20', '06:25', '06:30', '06:35', '06:40', '06:45', '06:50', '06:55', '07:00', '07:05', '07:10', '07:15', '07:20', '07:25', '07:30', '07:35', '07:40', '07:45', '07:50', '07:55', '08:00', '08:05', '08:10', '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55', '09:00', '09:05', '09:10', '09:15', '09:20', '09:25', '09:30', '09:35', '09:40', '09:45', '09:50', '09:55', '10:00', '10:05', '10:10', '10:15', '10:20', '10:25', '10:30', '10:35', '10:40', '10:45', '10:50', '10:55', '11:00', '11:05', '11:10', '11:15', '11:20', '11:25', '11:30', '11:35', '11:40', '11:45', '11:50', '11:55', '12:00', '12:05', '12:10', '12:15', '12:20', '12:25', '12:30', '12:35', '12:40', '12:45', '12:50', '12:55', '13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55', '14:00', '14:05', '14:10', '14:15', '14:20', '14:25', '14:30', '14:35', '14:40', '14:45', '14:50', '14:55'];
</script>

<form name='settings_form' method='POST' action='<?= POST_FORM_ACTION_URI; ?>'>
    <?php
    $tabControl->Begin();
    $tabControl->BeginNextTab();

    foreach ($settings as $sGroup) {
        $opened = $_COOKIE[$sGroup['CLASS']];
        ?>
        <tr class="heading opt--section <?=$sGroup['CLASS']; ?>">
            <td colspan="2">
                <div class="opt--title">
                    <?=$sGroup['NAME']; ?>:<span data-name="<?=$sGroup['CLASS']; ?>"><?if($opened == 1){?>Скрыть<?}else{?>Показать<?}?></span>
                </div>
            </td>
        </tr>
    <tbody class="for-<?=$sGroup['CLASS']; ?> body--section<?if($opened == 1){?> opened<?}?>">
        <?php
        foreach ($sGroup['ITEMS'] as $option) {
            ?>
            <tr class="row">
                <td class="adm-detail-content-cell-l" style="width:50%;">
                    <?php
                    if ($option['HINT']) {
                        ShowJSHint($option['HINT']);
                    }
                    ?>
                    <label for="field_<?=$option['CODE']; ?>">
                        <?=$option['NAME']; ?>:
                    </label>
                </td>
                <?php
                $value = unserialize(Option::get('customSettings', $option['CODE']));

                if ($option['TYPE'] === 'checkbox') {
                    ?>
                    <td class="adm-detail-content-cell-r">
                        <input type="hidden" name="options[<?=$option['CODE']; ?>]" value="0">
                        <input id="field_<?=$option['CODE']; ?>" type="<?=$option['TYPE']; ?>" name="options[<?=$option['CODE']; ?>]" <?= ((int)$value === 1) ? 'checked' : ''; ?> value="1">
                    </td>
                    <?php
                }

                if ($option['TYPE'] === 'text') {
                    ?>
                    <td class="adm-detail-content-cell-r">
                        <input id="field_<?=$option['CODE']; ?>" type="<?=$option['TYPE']; ?>" name="options[<?=$option['CODE']; ?>]" size="30" value="<?= (mb_strlen($value) > 0) ? $value : ''; ?>">
                    </td>

                    <?php
                }

                if ($option['TYPE'] === 'textarea') {
                    ?>
                    <td class="adm-detail-content-cell-r">
                        <textarea id="field_<?=$option['CODE']; ?>" name="options[<?=$option['CODE']; ?>]" cols="75" rows="10"><?=$value; ?></textarea>
                    </td>
                    <?php
                }

                if ($option['TYPE'] === 'select') {
                    ?>
                    <td class="adm-detail-content-cell-r">
                        <select name="options[<?=$option['CODE']; ?>][]"
                            <?php if ($option['MULTIPLE'] === 'Y') {
                                echo ' multiple';
                                if (count($option['VALUES']) > 10) {
                                    echo ' size="10"';
                                }
                            } ?>>
                            <?php
                            foreach ($option['VALUES'] as $item) {
                                ?>
                                <option value="<?= $item['VALUE'] ?>" <?php if (in_array($item['VALUE'], $value)) { echo ' selected'; } ?>>
                                    <?php
                                    if ($item['DEPTH_LEVEL']) {
                                        echo str_repeat(' . ', $item['DEPTH_LEVEL']);
                                    }
                                    echo $item['NAME'];
                                    ?>
                                </option>
                                <?php
                            }
                            unset($item);
                            ?>
                        </select>
                    </td>
                    <?php
                }

                if ($option['TYPE'] === 'datetime') {
                    ?>
                    <td class="adm-detail-content-cell-r">
                        <?//Date Range?>
                        <?
                        $from = $value['from'] ? $value['from'] : date("d.m.Y H:i:s");
                        $to = $value['to'] ? $value['to'] : date("d.m.Y H:i:s");
                        ?>
                        <?=CalendarPeriod("options[".$option['CODE']."][from]", $from, "options[".$option['CODE']."][to]", $to, "form1", "Y")?>

                        <?/* //Single Calendar?>
                        <input type="text" class="typeinput" name="TIME" size="12">
                        <?=Calendar("TIME", "curform")?>
                        <?*/?>

                        <?//Single Calendar?>
                        <?//=CalendarDate("birthdate", "25.11.1975", "form1", "15", "class=\"my_input\"")?>
                    </td>

                    <?php
                }

                if ($option['TYPE'] === 'timerange') {
                    ?>
                    <td class="adm-detail-content-cell-r">
                        <input id="<?=$option['CODE']; ?>" type="text" />
                        <input type="text" name="options[<?=$option['CODE']; ?>]" class="<?=$option['CODE']; ?>" value='<?=json_encode(json_decode($value))?>' style="display: none" />
                        <?
                        $value = json_decode($value);
                        $from = $value[1] ? $value[1] : 0;
                        $to = $value[3] ? $value[3] : 288;
                        ?>
                        <script>
                            (function($) {
                                $(document).ready(function() {
                                    $("#<?=$option['CODE']; ?>").ionRangeSlider({
                                        type: 'double',
                                        prettify: false,
                                        hasGrid: false,
                                        gridMargin: 0,
                                        hideMinMax: true,
                                        values: times,
                                        from: '<?=$from?>',
                                        to: '<?=$to?>',
                                        onFinish: function (data) {
                                            $(".<?=$option['CODE']; ?>").val(JSON.stringify([data.from_value, data.from.toString(), data.to_value, data.to.toString()]));
                                        }
                                    });
                                });
                            })(jQuery);
                        </script>
                    </td>

                    <?php
                }
                ?>
            </tr>
            <?php
        }
        ?></tbody><?
    }
    unset($option);

    $tabControl->Buttons(['btnApply' => false]);

    echo bitrix_sessid_post();
    $tabControl->End();
    ?>
</form>

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/epilog_admin.php');
?>

Get the settings like this:

unserialize(\Bitrix\Main\Config\Option::get('customSettings', 'vk--auto-messenger'))

Option values are serialized and using emoji in text fields breaks the option value. Many thanks for solving this problem BarryMode who suggested this function

Use if so:

Option::set('customSettings', $key, serialize(emoji_entitizer($option)));

Comments

There are no comments yet, you can be the first to leave it

Leave a comment

The site uses a comment pre-moderation system, so your message will be published only after approval by the moderator

You are replying to a user's comment

Send

FEEDBACK

Email me

Are you developing a new service, making improvements to the existing one and want to be better than your competitors? You have come to the right place. I offer you a comprehensive studio-level website development. From me you can order design, layout, programming, development of non-traditional functionality, implementation of communication between CMS, CRM and Data Analitics, as well as everything else related to sites, except for promotion.

Contact, I will always advise on all questions and help you find the most effective solution for your business. I am engaged in the creation of sites in Novosibirsk and in other regions of Russia, I also work with the CIS countries. You will be satisfied with our cooperation

An error occurred while sending, please try again after a while
Message sent successfully

Phones

+7(993) 007-18-96

Email

info@tichiy.ru

Address

Россия, г. Москва

By submitting the form, you automatically confirm that you have read and accept the Privacy Policy site

Contact with me
Send message
By submitting the form, you automatically confirm that you have read and accept Privacy policy of site
Sending successful!
Thank you for contacting :) I will contact you as soon as possible
Sending failed
An error occurred while sending the request. Please wait and try again after a while or call my phone number