Планадо позволяет настроить печатную форму наряда под ваши нужды. Вы можете поменять способ отображения полей, выделить нужную информацию, добавить или убрать поля. Также настройка позволяет поменять формат вывода печатной формы с 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 %}
Теперь вместо имени файла фотографии выводится сама фотография. Но фотография появится в форме в натуральную величину.
![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/13165245429/original/9D7L1NCNhrfmDH7w0lRqyI6oP1NLECbH4Q.png?1719524395)
Распечатанный наряд с фото в натуральную величину
Зачастую это очень большой размер, его стоит уменьшить. Укажем соответсвующий фильтр resize у {{ image }}.
В нашем случае у фотографий основное разрешение — 1080 на 1920, поэтому в форме используем размер в 10 раз меньше. Добавим также пропуск после фотографии, чтобы они не шли вплотную друг к другу.
{% when 'image' %} {% if field.size > 0 and field.filled %} {% for image in field.value %} {{image | resize: 108, 192}} {% 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 в качестве формата выгрузки. Чтобы это сделать:
- Откройте Настройки → Печать;
- Выберите нужную печатную форму;
- В качестве выходного формата выберите HTML и нажмите «Сохранить».
Изменить выходной формат на HTML
После этого эта печатная форма наряда будет выгружаться в формате HTML.
Печатная форма наряда в HTML формате
Полученную форму можно редактировать в текстовом редакторе как обычный файл.
Если вам требуется помощь с формированием печатной формы наряда, обратитесь к нам на support@planado.app или портале технической поддержки.