Пользовательский компонент *Кнопка*
-----------------------------------

Рассмотрим пример создания пользовательского компонента в виде кнопки, надпись которой будет получена из значения справочника,
а по клику по кнопке будет меняться значение другого компонента на форме.

В HTML код следует вводить код, отвечающий за отображение копмонента на форме.
В нашем случае HTML код будет содержать следующее:


.. code-block:: xml

    <style>
    .greenButton {
        background-color: #49b785 !important;
        border-color: #49b785 !important;
        color: #ffffff !important;
    }
    .ui-btn {
        display: inline-block;
        background-color: #ffffff;
        color:#4c5256;
        height: 32px;
        min-width: 32px;
        padding-left: 45px;
        padding-right: 45px;
        border: none;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        font-size: 14px !important;
        font-weight: bold;
    }
    </style>
    <button class="greenButton ui-btn"
    role="button" style="display: block;" innerId='make_deal'>Создать</button>

Здесь указана кнопка со стилями ``greenButton ui-btn``, которые описываются в блоке ``<style></style>``

В JAVASCRIPT код вводится код, отвечающий за логику компонента.

В нашем примере это будет:

.. code-block:: js

    // находим кнопку с innerId make_deal
    var button = jQuery(view.container).children("[innerId='make_deal']");
    var locale = AS.OPTIONS.locale;
    //переменная, значение которой будет присвоено компоненту crm_form_lead_deals_status, по клику по кнопке
    var statusValue;
    // из кэша справочников получаем значения справочника Статусы с кодом crm_dict_leadStatus и устанавливаем надпись кнопки
    // по значению поля crm_dict_leadStatus_end = 1
    model.playerModel.dictionaryCache.getDictionary('crm_dict_leadStatus', AS.OPTIONS.locale, function(dictionary) {
        if(dictionary !==  null) {
            dictionary.forEach(function(data, index){
                //финальный статус в справочнике статусов
                if (data['crm_dict_leadStatus_end'] === '1') {
                    statusValue = data['crm_dict_leadStatus_value'];
                    button.text(data['crm_dict_leadStatus_buttonName']);
                }
            });
        }
    });
    //по клику по кнопку устанавливаем значение компонента crm_form_lead_deals_status
    button.click(function(){
        model.playerModel.getModelWithId('crm_form_lead_deals_status').setValue(statusValue + '');
    });


Также необходимо отметить чекбокс *Использовать в формах*.

.. figure:: ../../_static/img/forms/cmp/deal_button.png
   :scale: 50%

   Пользовательский компонент crm_component_deal_button

Дальше этот компонент можно использовать на форме.

Для этого создадим форму с компонентом выпадающий список с ид crm_form_lead_deals_status и значениями справочника Статусы лида.

Справочник *Статусы лида* имеет структуру:

.. figure:: ../../_static/img/forms/cmp/dict_desc.png
   :scale: 100%

   Справочник *Статусы лида*

Значения справочника *Статусы лида*:

.. figure:: ../../_static/img/forms/cmp/dict_values.png
   :scale: 50%

Также добавим пользовательский компонент и укажем в диалоге настроек компонент crm_component_deal_button.

.. figure:: ../../_static/img/forms/cmp/form_prop.png
   :scale: 50%

   Пользовательский компонент crm_component_deal_button на форме

Переключим конструктор в режим редактирования, будет отображена кнопка с надписью *Конвертировать в сделку*

.. figure:: ../../_static/img/forms/cmp/form_edit.png
   :scale: 50%

   Форма с пользовательским копмонентом crm_component_deal_button

Кликом по кнопке *Конвертировать в сделку* выпадающий список примет значение *В сделку*

.. figure:: ../../_static/img/forms/cmp/form_after_click.png
   :scale: 50%

   Форма после клика по кнопке *Конвертировать в сделку*