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


Форма наряда редактируется через HTML-файл. В качестве языка разметки используется язык Liquid. С его документацией вы можете ознакомиться на сайте. 


Форма по умолчанию

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


Распечатать наряд


Планадо распечатает ваш наряд в PDF-файл.


Печать наряда по умолчанию


Чтобы в дальнейшем создавать свои формы печати, скачайте форму печати по умолчанию. Она находится в меню Настройки → Печать. Чтобы скачать файл формы по умолчанию, нажмите на «Форма по умолчанию» и выберите «Скачать». 


Скачать форму печати по умолчанию


После этого у вас загрузится файл формы для печати в HTML-формате. Его можно открыть в удобном вам редакторе HTML-файлов. В примере будет использоваться Notepad++.


На данный момент форма по умолчанию не доступна для редактирования.


Форма печати по умолчанию


Подстановки

Для обозначения полей Планадо в файле формы используются подстановки. Поля заключаются в двойные фигурные скобки, например, {{ job.template.name }} — это подстановка для шаблона наряда. Чтобы получить название поля на русском языке, подстановку необходимо указывать в кавычках и добавить фильтр "| translate". Например, чтобы получить надпись «Запланирован», потребуется использовать подстановку {{ 'scheduled_at' | translate }}. Чтобы в печатной форме получить поля из наряда используйте эти подстановки:

  • job — «Наряд»;
  • job.serial_no — номер наряда;
  • job.status — состояние наряда;
  • job.template — шаблон наряда;
  • template — «Шаблон»;
  • type — «Тип»;
  • job.type.code — тип наряда;
  • scheduled_at — «Запланирован»;
  • job.scheduled_at — запланированная дата и время наряда;
  • duration — «Длительность»;
  • job.scheduled_duration — запланированная длительность наряда;
  • en_route_at — «Выезд»;
  • job.en_route_at — дата и время выезда на наряда;
  • started_at — «Начат»;
  • job.started_at — дата и время начала наряда;
  • finished_at — «Завершен»;
  • job.finished_at — дата и время завершения наряда
  • created_at — «Размещен»;
  • job.created_at — дата и время создания наряда;
  • job.creator.name — имя сотрудника, создавшего наряд;
  • assignee — «Исполнитель»;
  • job.assignee — исполнитель наряда, если это один сотрудник;
  • job.team — исполнитель наряда, если это бригада;
  • description — «Описание»;
  • job.description — описание наряда;
  • address — «Адрес»;
  • job.address.full — адрес наряда;
  • client — «Клиент»;
  • job.client.name — имя или название клиента;
  • site — «Объект»;
  • job.site.name — название объекта;
  • resolution — «Резолюция»;
  • job.resolution.name — резолюция наряда;
  • job.resolution.comment — комментарий к резолюции;
  • external_id — «Внешний идентификатор»;
  • job.external_id — внешний идентификатор наряда; 
  • contacts — «Контакты»;
  • contact.name — имя контакта;
  • contact.value — телефон контакта;
  • field.name — название поля (дополнительного или поля отчёта);


Все эти подстановки и их использование вы можете найти в форме печати по умолчанию.


Также разберём основные инструменты самого Shopify Liquid.


Операторы Shopify Liquid

Shopify Liquid — это язык разметки. Он позволяет динамически менять содержимое формы в зависимости от вашего наряда.


Операторы вывода:

  • {{ }}:  Выводит значение переменной или результат выражения, как описывали это выше.

    {{ job.serial_no }}  {{ job.scheduled_at | datetime }} 

    В этом случае в форму выведутся номер наряда и его запланированная дата.

  • {% %}:  Используется для управления логикой и циклами. Например, для оператора if. 

    {% if job.type %}   <div class="field"> ... </div> {% endif %} 

    В этом примере содержимое <div> выводится только в случае наличия типа у наряда


1. if - Условные выражения:

С помощью оператора if указываются условия выведения информации в печатной форме. Информация появится в печатной форме только при соблюдении условия, указанного в if.

  • Синтаксис:

    {% if condition %}    // Код выполняется, если условие истинно
    ...
    {% elsif condition2 %}// Код выполняется, если 1-ое условие ложно, а 2-ое истинно    
    ...
    {% else %}    // Код, который выполняется, если все предыдущие условия ложны    
    ...
    {% endif %}

  • Пример:  Проверка, заполнен ли адрес клиента:

    {% assign address_present = job.address.formatted | filled? %} 
    {% if address_present %}
        <div class="field">
            <label>{{ 'address' | translate }}</label>
            <span class="value">
                <span class="multiline-text">{{ job.address.full }}</span>
            </span>
        </div>
    {% endif %}

  • Использование elsif: Проверка, назначен ли работник или команда:

          <div class="field">
            <label>{{ 'assignee' | translate }}</label>
            {% if job.assignee %}
                <span class="value">{{ job.assignee }}</span>
            {% elsif job.team %}
                <span class="value">{{ job.team }}</span>
            {% else %}
                <span class="value empty-value">{{ 'empty' | translate }}</span>
            {% endif %}
    </div>

2. for - Циклы:

Используется для массивов данных. Например, для вывода данных из всех полей отчёта наряда. 

  • Синтаксис:

    {% for item in items %} // Код выполняется для каждого элементав массиве  "items"
...
    {% endfor %}

  • Пример:  Вывод контактов:

      {% for contact in job.filled_contacts %}
        <div class="field contact">
            <label>
                {% if forloop.first %}
                    {{ 'contacts' | translate }}
                {% endif %}
            </label>
            <span class="value">
            {{ contact.value }}{% if contact.name and contact.value %}, {% endif %}
                {{ contact.name }}
            </span>
        </div>
    {% endfor %}
Здесь цикл проходит по всем элементам массива контактов и выводит их имена и телефоны

3. case - Выбор по условию:
Как и if используется для указания условий.

  • Синтаксис:

    {% case variable %}
      {% when value1 %} // Код, который выполняется, если переменная равна "value1"
  {% when value2 %}// Код, который выполняется, если переменная равна "value2" 
   {% else %} // Код выполняется, если переменная не равна ни одному условию
    {% endcase %}

  • Пример:  Обработка различных типов полей:

          {% for field in job.report_fields %}
        <div class="field">
            <label>{{ field.name }}</label>
            {% case field.field_type %}
                {% when 'input' %}
                    ...
                 {% when 'action' %}
                    ...
                {% when 'checkbox' %}
                    ...
                {% else %}
                    ...
            {% endcase %}
        </div> {% endfor %}
В этом случае условия указываются для каждого типа отдельно.


Операторы сравнения:

  • ==:  Проверяет равенство.

      {% if job.description == "" %}
       <span class="value empty-value">{{ 'empty'| translate }}</span>
     {% endif %}

    В примере пустое значение будет выведено только, когда описание пустое.

  • !=:  Проверяет неравенство.

     {% if job.resolution.comment != "" %}
       <span class="value"> ... </span> 
    {% endif %}
Из примера примечание к резолюции будет выведено, только если оно не пустое.

Схожим образом можно использовать другие операторы:

  • >:  Больше.

  • <:  Меньше.

  • >=:  Больше или равно.

  • <=:  Меньше или равно.


Логические операторы:

  • and:  Логическое "И" — выводится только когда оба условия соблюдены.

    {% if job.template == "Доставка" and job.assignee.name == "Иван Петров" %} Доставка от Петрова {% endif %}
В примере условие соблюдается, только если в наряде используется шаблон «Доставка» и выбран исполнитель Иван Петров.

  • or:  Логическое "ИЛИ" — если хотя бы одно из условий соблюдено.

    {% if job.assignee or job.team %} ... {% endif %}
Значение выводится, если в наряде выбран исполнитель или бригада.

  • not:  Логическое отрицание.

    {% if not job.description %} ... {% endif %}

Дополнительные операторы:

  • empty:  Проверяет, является ли переменная пустой.

    {% if job.resolution.comment | empty %} ... {% endif %}

  • filled:  Проверяет, является ли переменная непустой.

    {% if job.description | filled %} ... {% endif %}

Фильтры:

  • datetime:  Преобразует дату в читаемый формат с указанием времени.

  • truncate:  Обрезает строку до заданной длины.

  • translate:  Переводит строку на язык вашего Планадо.


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


Печатную форму из примера вы можете найти во вложении к инструкции.



Замена логотипа компании


Редактирование формы наряда позволяет заменить логотип Планадо в форме печати на логотип вашей компании.

Для этого используется поле custom-logo.



Логотип в печатной форме наряда должен представлен в формате base64. Чтобы привести ваш логотип к этому формату, воспользуйтесь онлайн конвертером. Получившийся код можно будет использовать для вставки в форму печати.  


Слева — логотип компании в формате PNG, справа — в формате base64


В теле формы печати замените имеющееся поле logo на custom-logo.

Слева — форма печати по умолчанию — справа с добавленным custom-logo


Теперь внутри <div> необходимо поместить само изображение. В качестве источника (src) будет выступать логотип в base64 формате.


Лого до и после преобразования


После этого можно задать размеры логотипа, чтобы он лучше смотрелся в самой печатной форме. Логотип будет лучше смотреться, если он будет около 100-200px в ширину и высоту. Размеры лучше задать кратными оригинальным размерам логотипа. Например, если изначальный файл был 1920:1080, то в файле стоит указать размеры 192:108. Ширина задаётся параметром width, а высота — height. В нашем примере оригинальный размер логотипа был 1200:1200. поэтому уменьшим его до 120:120.


Добавленное изображение логотипа


Чтобы загрузить получившийся файл печатной формы, перейдите на страницу Настройки → Печать в Планадо и нажмите «Добавить печатную форму». 


Добавить печатную форму


В открывшемся окне введите название печатной формы и загрузите полученный ранее HTML-файл формы печати наряда с новым логотипом. В зависимости от ваших потребностей выберите формат выходного файла. В этом примере мы используем PDF. 


Загрузка новую печатную форму


Чтобы проверить, как выглядит печатная форма наряда, откройте наряд, нажмите на кнопку печати и выберите добавленную форму печати. 



После этого начнётся загрузка печатной формы наряда.


Печатная форма наряда с измененным логотипом


В полученной форме наряда вместо логотипа Планадо будет использовать загруженный вами логотип. Если требуется скорректировать размер логотипа, то вы можете внести их в HTML-файл формы наряда, а потом загрузить форму заново. 


Заменить файл формы печати


Добавление фотографий в форму печати

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


Названия файлов в полях с фото


Правила для отображения фотографий находятся в части полей отчёта:


{% when 'image' %}
              {% if field.value == empty_list %}
                <span class="value empty-value">{{ 'empty' | translate }}</span>
              {% else %}
                <span class="value image-value">
                  {% for image in field.value %}
                    {{ image.name }}{% unless forloop.last %}, {% endunless %}
                  {% endfor %}
                </span>
              {% endif %}

Из кода видим, что в случае наличия изображений в поле с типом «Фото», отображается только название фото — {{ image.name }}. Чтобы отображалось изображение, нужно его указать в форме. Изменим эту часть кода, чтобы вместо имени файла выводилось изображение:


 {% when 'image' %}
            
              {% if field.size > 0 and field.filled %}
              {% for image in field.value %}
         {{image}}    
                {% endfor %}
              {% endif %}

Теперь вместо имени файла фотографии выводится сама фотография. Но фотография появится в форме в натуральную величину. 


Распечатанный наряд с фото в натуральную величину


Зачастую это очень большой размер, его стоит уменьшить. Укажем соответствующий фильтр resize у {{ image }}.

В нашем случае у фотографий основное разрешение — 1080 на 1920, поэтому в форме используем размер в 10 раз меньше. Добавим также пропуск после фотографии, чтобы они не шли вплотную друг к другу. 

 {% when 'image' %}
            
              {% if field.size > 0 and field.filled %}
              {% for image in field.value %}
                 
             
         {{image | resize: 108, 192}} &nbsp;
         
         
        
                {% endfor %}
              {% endif %}

Фотографии в распечатанном наряде с измененным размером и промежутком между ними


В полученной форме есть фотографии подходящего размера с разделением между ними.


Также можем добавить счётчик, который будет переводить фотографии на новую строку, если в строке больше 3 фото. В нём также используются два класса <div>: image-row и image-wrapper. 

  .image-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px; 
}

.image-wrapper {
  flex: 1 1 calc(33.33% - 5px);
  margin-right: 5px;
  margin-bottom: 5px; 
}

.image-wrapper:nth-child(3n) {
  margin-right: 0;
}

Так как теперь фотографии находятся в своих <div>, нам не потребуется использовать специальный пропуск после каждой.


{% when 'image' %}
            {% if field.size > 0 and field.filled %}
              {% assign image_count = 0 %}
              {% for image in field.value %}
                {% if image_count == 0 %}
                  <div class="image-row">
                {% endif %}
                <div class="image-wrapper">
                  {{ image | resize: 108, 192 }}
                </div>
                {% assign image_count = image_count | plus: 1 %}
                {% if image_count == 3 %}
                  </div>
                  {% assign image_count = 0 %}
                {% endif %}
              {% endfor %}
              {% if image_count != 0 %}
                </div>
              {% endif %}
            {% endif %}

В этом примере каждая фотография увеличивает значение счётчика image_count, и когда тот достигает значения в 3, фотография переносится на новую строку. Так будет выглядеть наряд с шесть фотографиями в одном поле при печати.


Распечатанный наряд с шестью фото в одном поле



Полученную форму вы можете найти в приложении к этой инструкции.



Выходной формат HTML

Выходной формат распечатанного наряда можно изменить с PDF на HTML. Печатные формы в HTML формате проще редактировать через текстовые редакторы вроде Microsoft Word или OpenOffice Writer. Поэтому если вам требуется дополнить печатную форму наряда после выгрузки, то стоит выбрать HTML в качестве формата выгрузки. Чтобы это сделать:

  1. Откройте Настройки → Печать;
  2. Выберите нужную печатную форму;
  3. В качестве выходного формата выберите HTML и нажмите «Сохранить».


Изменить выходной формат на HTML


После этого эта печатная форма наряда будет выгружаться в формате HTML.


Печатная форма наряда в HTML формате


Полученную форму можно редактировать в текстовом редакторе как обычный файл.

Если вам требуется помощь с формированием печатной формы наряда, обратитесь к нам на support@planado.app или портале технической поддержки.