Добавить кнопку

Если у вас несколько кнопок выбора, то вы можете добавить еще одну. Например, к кнопкам ответов задания «Фото товара и ценника» можно добавить вариант «По данному адресу расположен другой магазин».

В шаблоне задания «Фото товара и ценника» добавим новую кнопку, в котором исполнителю нужно будет загрузить несколько фотографий и написать обязательный комментарий.

Как это выглядит

Было:

Стало в списке кнопок:

При нажатии на новую кнопку:

Для вашего удобства мы подготовили код для шаблона «Фото товара и ценника», в котором добавлена новая кнопка. Используйте этот код для самопроверки. Наши вставки в этом коде вы можете найти поиском слова «кастомизация».

Готовый код
{{#if reviewMode}}
    <div class="header-review">
        <div class="header-review__title">
            {{texts.task_title}}
        </div>
        <div class="header-review__buttons">
            {{#if (equal verdict "ok")}}
                <div class="header-review__btn header-review__btn_green">
                    {{texts.btn_ok.title}}
                </div>
            {{/if}}
            {{#if (equal verdict "no_price")}}
                <div class="header-review__btn header-review__btn_red">
                    {{texts.btn_no_price.title}}
                </div>
            {{/if}}
            {{#if (equal verdict "no_item")}}
                <div class="header-review__btn header-review__btn_red">
                    {{texts.btn_no_item.title}}
                </div>
            {{/if}}
            {{#if (equal verdict "no_shop")}}
                <div class="header-review__btn header-review__btn_red">
                    {{texts.btn_no_shop.title}}
                </div>
            {{/if}}

            <!-- кастомизация начало фрагмента -->
            <!-- Новый вердикт для шапки интерфейса -->
            {{#if (equal verdict "new_verdict")}}
              <div class="header-review__btn header-review__btn_red">
                {{texts.btn_new.title}}
              </div>
            {{/if}}
            <!-- кастомизация конец фрагмента -->

        </div>
    </div>
{{else}}
    <div class="header">
        {{texts.task_title}}
    </div>
{{/if}}

<div class="info">
    {{#if reviewMode}}
        <div class="info__review">
            <div class="info__review-block">
                <div class="info__title">
                    {{texts.info_name}}
                </div>
                <div class="info__content">
                    {{name}}
                </div>
            </div>
            <div class="info__review-block">
                <div class="info__title">
                    {{texts.info_address}}
                </div>
                <div class="info__content">
                    {{address}}
                </div>
            </div>
        </div>
    {{else}}
        <div class="info__block">
            <div class="info__title">
                {{texts.info_name}}
            </div>
            <div class="info__content">
                {{name}}
            </div>
        </div>
        <div class="info__block">
            <div class="info__title">
                {{texts.info_address}}
            </div>
            <div class="info__content">
                {{address}}
            </div>
        </div>
    {{/if}}
    <div class="info__block">
        <div class="info__title">
            {{texts.info_description}}
        </div>
        <div class="info__content">
            {{product}}
        </div>
    </div>
    <div class="info__block">
        <div class="info__content">
            <a href={{image}} target="_blank" class="info__link">Ссылка на изображение товара</a>
        </div>
    </div>
</div>

{{#if reviewMode}}
    <div class="review">
        <div class="review__map">
            <div id="{{concat 'map_' id}}" style="width: 100%; height: 400px;"></div>
        </div>
        {{#if (equal verdict "ok")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_facade}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_2.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_item}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_ok.question_3.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_price}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        {{/if}}
        {{#if (equal verdict "no_price")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_price.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_facade}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_price.question_2.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_item}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        {{/if}}
        {{#if (equal verdict "no_item")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_item.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_facade}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_item.question_2.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_shelf}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            {{#if comment}}
                <div class="review__block">
                    <div class="review__title">
                        {{texts.btn_no_item.question_3.title}}
                    </div>
                    <div class="review__comment">
                        {{field type="textarea" name="comment" width="100%" rows=5}}
                    </div>
                </div>
            {{/if}}
        {{/if}}
        {{#if (equal verdict "no_shop")}}
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_shop.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_around}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_shop.question_2.title}}
                </div>
                <div class="review__imgs-grid">
                    {{#each imgs_address}}
                        <div class="review__grid-item">
                            <div class="review__grid-inner">
                                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                                <div class="review__rotate-panel">
                                    <span class="review__rotate review__rotate_left">&larr;</span>
                                    <span class="review__rotate review__rotate_right">&rarr;</span>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
            <div class="review__block">
                <div class="review__title">
                    {{texts.btn_no_shop.question_3.title}}
                </div>
                <div class="review__comment">
                    {{field type="textarea" name="comment" width="100%" rows=5}}
                </div>
            </div>

            <!-- кастомизация начало фрагмента -->
            <!-- Новый вердикт с загруженными данными -->
            {{#if (equal verdict "new_verdict")}}
              <div class="review__block">
                <div class="review__title">
                  {{texts.btn_new.question_1.title}}
                </div>
                <div class="review__imgs-grid">
                  {{#each imgs}}
                    <div class="review__grid-item">
                      <div class="review__grid-inner">
                        <img src="{{this}}" class="review__img" data-rotationdeg="0">
                        <div class="review__rotate-panel">
                          <span class="review__rotate review__rotate_left">&larr;</span>
                          <span class="review__rotate review__rotate_right">&rarr;</span>
                        </div>
                      </div>
                    </div>
                  {{/each}}
                </div>
              </div>
              <div class="review__block">
                <div class="review__title">
                  {{texts.btn_new.question_2.title}}
                </div>
                <div class="review__comment">
                  {{field type="textarea" name="new_comment" width="100%" rows=5}}
                </div>    
              </div>
            {{/if}}
            <!-- кастомизация конец фрагмента -->

        {{/if}}
    </div>
{{else}}
    <div class="main">
        <div class="main__title">
            Выберите вариант выполнения задания:
        </div>
        <div class="main__container">
            <div class="main__popup main__popup_hidden">Не выбран ни один вариант ответа</div>
            <div class="main__block">
                <div class="main__btn main__btn_green">
                    {{texts.btn_ok.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_ok.question_1.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_ok.question_1.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_ok.question_1.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_facade" camera=true preview=true compress=false validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_ok.question_2.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_ok.question_2.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_ok.question_2.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_item" camera=true preview=true compress=false validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_ok.question_3.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_ok.question_3.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_ok.question_3.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_price" camera=true preview=true compress=false validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="main__block">
                <div class="main__btn main__btn_red">
                    {{texts.btn_no_price.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_price.question_1.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_price.question_1.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_price.question_1.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_facade" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_price.question_2.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_price.question_2.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_price.question_2.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_item" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="main__block">
                <div class="main__btn main__btn_red">
                    {{texts.btn_no_item.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_item.question_1.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_item.question_1.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_item.question_1.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_facade" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_item.question_2.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_item.question_2.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_item.question_2.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_shelf" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title">
                            {{texts.btn_no_item.question_3.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_item.question_3.description}}
                        </div>
                        <div class="main__comment">
                            {{field type="textarea" name="comment" width="100%" rows=5 validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="main__block">
                <div class="main__btn main__btn_red">
                    {{texts.btn_no_shop.title}}
                </div>
                <div class="main__content">
                    <div class="main__content-block">
                        <div class="main__text main__text_req">
                            {{texts.btn_no_shop.question_1.description}}
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_around" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__text main__text_req">
                            {{texts.btn_no_shop.question_2.description}}
                        </div>
                        <div class="main__ex">
                            <a href="{{texts.btn_no_shop.question_2.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                        </div>
                        <div class="main__imgs">
                            {{field type="file-img" name="imgs_address" camera=true validation-show="top-left"}}
                        </div>
                    </div>
                    <div class="main__content-block">
                        <div class="main__content-title main__content-title_req">
                            {{texts.btn_no_shop.question_3.title}}
                        </div>
                        <div class="main__text">
                            {{texts.btn_no_shop.question_3.description}}
                        </div>
                        <div class="main__comment">
                            {{field type="textarea" name="comment" width="100%" rows=5 validation-show="top-left"}}
                        </div>
                    </div>
                </div>
            </div>

            <!-- кастомизация начало фрагмента -->
            <div class="main__block">
              <div class="main__btn main__btn_red">
                {{texts.btn_new.title}}
              </div>
              <div class="main__content">
                <div class="main__content-block">
                  <div class="main__content-title main__content-title_req">
                    {{texts.btn_new.question_1.title}}
                  </div>
                  <div class="main__text">
                    {{texts.btn_new.question_1.description}}
                  </div>
                  <div class="main__ex">
                    <a href="{{texts.btn_new.question_1.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
                  </div>
                  <div class="main__imgs">
                    {{field type="file-img" name="imgs" camera=true validation-show="top-left"}}
                  </div>          
                </div>
                <div class="main__content-block">
                  <div class="main__content-title main__content-title_req">
                    {{texts.btn_new.question_2.title}}
                  </div>
                  <div class="main__text">
                    {{texts.btn_new.question_2.description}}
                  </div>
                  <div class="main__comment">
                    {{field type="textarea" name="new_comment" width="100%" rows=5 validation-show="top-left"}}
                  </div>
                </div>
              </div>      
            </div>
            <!-- кастомизация конец фрагмента -->

        </div>
    </div>
{{/if}}
Редактирование выходной спецификации

В спецификации выходных данных добавьте 2 новых поля:

imgs — массив файлов для фотографий;

new_comment — обязательная строка для комментария.

Редактирование HTML
  1. Код HTML состоит из блоков, описывающих различные элементы интерфейса. Каждый блок может содержать внутри себя другие блоки. Таких уровней вложенности может быть несколько. Например, блок с описанием кнопки ответа содержит в себе блоки с полями для заполнения. Каждое поле тоже содержит в себе другие элементы, например, заголовок и поле для комментария.

    Каждый блок оформляется так:

    <div class="наименование_блока">
      <!-- код блока, может содержать вложенные блоки -->
      ...
    </div>
  2. Найдите блок main (он начинается со строки <div class="main">). Внутри него расположены блоки main__block, каждый из которых описывает одну из кнопок. Например, в шаблоне «Фото товара и ценника» есть 4 кнопки для ответа, значит, в блоке main у этого шаблона будет 4 блока main__block для каждой из кнопок.

    У каждой из кнопок есть наименование для обращения к ее свойствам. Например, в шаблоне «Фото товара и ценника» 4 кнопки называются btn_ok, btn_no_price, btn_no_item и btn_no_shop. Добавьте новую кнопку с названием btn_new, для этого после последнего блока main__block вставьте следующий код. Он добавит новую кнопку с возможностью загрузить фотографии и написать комментарий.

    <div class="main__block">
      <div class="main__btn main__btn_red">
        {{texts.btn_new.title}}
      </div>
      <div class="main__content">
        <div class="main__content-block">
          <div class="main__content-title main__content-title_req">
            {{texts.btn_new.question_1.title}}
          </div>
          <div class="main__text">
            {{texts.btn_new.question_1.description}}
          </div>
          <div class="main__ex">
            <a href="{{texts.btn_new.question_1.example_link_1}}" target="_blank" class="main__ex-link">Пример</a>
          </div>
          <div class="main__imgs">
            {{field type="file-img" name="imgs" camera=true validation-show="top-left"}}
          </div>          
        </div>
        <div class="main__content-block">
          <div class="main__content-title main__content-title_req">
            {{texts.btn_new.question_2.title}}
          </div>
          <div class="main__text">
            {{texts.btn_new.question_2.description}}
          </div>
          <div class="main__comment">
            {{field type="textarea" name="new_comment" width="100%" rows=5 validation-show="top-left"}}
          </div>
        </div>
      </div>      
    </div>
  3. Обновите режим приемки.

    Блок review содержит в себе код для каждой кнопки в режиме приемки. Этот код расположен в таких блоках:

    {{#if (equal verdict "ok")}}
      <!-- код для кнопки "ok" в режиме приемки -->
      <div class="review__block">
        <!-- код для поля внутри кнопки "ok" в режиме приемки -->
        ...
      </div>
      ...
    {{/if}}

    Переменная verdict указана в выходной спецификации, в нее будет передаваться значение ответа для той кнопки, которую нажал исполнитель.

    Например, в шаблоне «Фото товара и ценника» для четырех кнопок описаны четыре значения: ok, no_price, no_item и no_shop. Добавим выходное значение new_verdict для новой кнопки btn_new.

    Найдите в блоке review блок с последней кнопкой по строке {{#if (equal verdict "значение_ответа_кнопки")}} и вставьте после него следующий код:

    <!-- Новый вердикт с загруженными данными -->
    {{#if (equal verdict "new_verdict")}}
      <div class="review__block">
        <div class="review__title">
          {{texts.btn_new.question_1.title}}
        </div>
        <div class="review__imgs-grid">
          {{#each imgs}}
            <div class="review__grid-item">
              <div class="review__grid-inner">
                <img src="{{this}}" class="review__img" data-rotationdeg="0">
                <div class="review__rotate-panel">
                  <span class="review__rotate review__rotate_left">&larr;</span>
                  <span class="review__rotate review__rotate_right">&rarr;</span>
                </div>
              </div>
            </div>
          {{/each}}
        </div>
      </div>
      <div class="review__block">
        <div class="review__title">
          {{texts.btn_new.question_2.title}}
        </div>
        <div class="review__comment">
          {{field type="textarea" name="new_comment" width="100%" rows=5}}
        </div>    
      </div>
    {{/if}}

    Обновите шапку интерфейса в режиме приемки. Найдите блок header-review, который содержит такие блоки для каждой кнопки:

    {{#if (equal verdict "ok")}}
        <div class="header-review__btn header-review__btn_green">
            {{texts.btn_ok.title}}
        </div>
    {{/if}}

    Этот блок описывает кнопку btn_ok и ее выходное значение ok. Вставьте после блока с последней кнопкой следующий код:

    <!-- Новый вердикт для шапки интерфейса -->
    {{#if (equal verdict "new_verdict")}}
      <div class="header-review__btn header-review__btn_red">
        {{texts.btn_new.title}}
      </div>
    {{/if}}
Редактирование JS
  1. Код JS состоит из блоков, описывающих различные элементы интерфейса. Эти блоки могут быть вложенными (кнопки содержат набор полей, поля содержат набор элементов и т. д.). Каждый блок заключен в фигурные скобки.

    В общем виде элементы описываются так:

    'свойство': 'значение'

    Значение тоже может состоять из нескольких свойств, в этом случае оно заключается в фигурные скобки и образует следующий уровень вложенности.

  2. В самом начале файла находится константа texts, в которой хранятся все необходимые для интерфейса тексты для каждой кнопки.

    У каждой из кнопок есть наименование для обращения к ее свойствам. Например, в шаблоне «Фото товара и ценника» 4 кнопки называются btn_ok, btn_no_price, btn_no_item и btn_no_shop.

    Например, в шаблоне «Фото товара и ценника» тексты для кнопки btn_ok расположены в следующем блоке кода:

    var texts = {
        //<общий текст для заголовков>
        'btn_ok': {
            'title': 'Я нашел ценник на нужный товар',
            'question_1': {
                //<тексты для первого поля (фото фасада магазина)>
            },
            'question_2': {
                //<тексты для второго поля (фото товара)>
            },
            'question_3': {
                //<тексты для третьего поля (фото ценника)>
            }
        },
  3. Чтобы добавить нужные тексты для новой кнопки btn_new, поставьте запятую после закрывающей фигурной скобки последней кнопки и вставьте следующий код:

    'btn_new': {
      'title': 'Новая кнопка',
      'question_1': {
        'title': 'Фото',
        'description': 'Сделайте хотя бы 2 фотографии',
        'example_link_1': 'ссылка на пример фото'
      },
      'question_2': {
        'title': 'Обязательный комментарий',
        'description': 'Пожалуйста, напишите комментарий'
      }  
    }
    Измените значения свойств title, description и example_link_1. Свойство title содержит заголовок, который будет отображаться над полем, description — вопрос или подсказку для исполнителя, а example_link_1 — ссылку на пример картинки.
  4. Найдите переменную verdictsOut. В шаблоне «Фото товара и ценника» она выглядит так:

    var verdictsOut = ['ok', 'no_price', 'no_item', 'no_shop'];

    Добавьте в нее новое выходное значение new_verdict для новой кнопки следующим образом:

    var verdictsOut = ['ok', 'no_price', 'no_item', 'no_shop', 'new_verdict'];
  5. Найдите функцию getTemplateData. Она содержит несколько блоков следующего вида:

    if (<условие проверки заполнения поля>) {
        ...
        <код для отображения загруженных данных>
        ...
    }

    Вставьте после любого из таких блоков следующий код. Он нужен для того, чтобы отправить загруженные исполнителем фотографии во входные данные. Это понадобится для отображения данных в режиме приемки:

    if (outputValues.imgs && outputValues.imgs.length > 0) {
      data.imgs = [];
      for (var i = 0; i < outputValues.imgs.length; i++) {
        data.imgs.push(workspaceOptions.apiOrigin + '/api/attachments/' + outputValues.imgs[i] + '/preview');
      }
    }
  6. Добавьте валидацию.

    Найдите функцию validate. В ней находится код для проверки заполнения полей для каждой из кнопок. Например, в шаблоне «Фото товара и ценника» этот фрагмент выглядит так:

      else if (solution.output_values.verdict === 'ok') {
        // код проверки полей кнопки ok
        if (!solution.output_values.imgs_facade || solution.output_values.imgs_facade.length === 0) {
            // код проверки поля imgs_facade
        }
    
        if (!solution.output_values.imgs_item || solution.output_values.imgs_item.length === 0) {
            // код проверки поля imgs_item
        }
    
        if (!solution.output_values.imgs_price || solution.output_values.imgs_price.length === 0) {
            // код проверки поля imgs_price
        }
    
    } else if (solution.output_values.verdict === 'no_price') {
        // код проверки полей кнопки no_price
        }
    } else if (solution.output_values.verdict === 'no_item') {
        // код проверки полей кнопки no_item
        }
    } else if (solution.output_values.verdict === 'no_shop') {
        // код проверки полей кнопки no_shop
    }
    

    Вставьте после закрывающей фигурной скобки с вердиктом для последней кнопкой следующий код:

    else if (solution.output_values.verdict === 'new_verdict') {
      if (!solution.output_values.imgs || solution.output_values.imgs.length === 0) {
        this.errors = this.addError('Нужно приложить фото', "imgs", this.errors);
      } else if (solution.output_values.imgs.length < 2) {
        this.errors = this.addError('Должно быть хотя бы 2 фото', "imgs", this.errors);
      }
    
      if (!solution.output_values.new_comment || solution.output_values.new_comment.trim() === '') {
        this.errors = this.addError('Нужно написать комментарий', "new_comment", this.errors);
      }
    }