Platio App formats a record as an HTML before sending it to a printer when it prints a record. You can customize this format by using CSS.
In this section, we’ll explain how a record is converted to HTML.
First, a specified header is placed at the top, followed by a record,
followed by a specified footer. A record itself is enclosed in
<dl>. A field name will be in
<dt>, and its value will be in
<dd>. These two tags will be repeated for the number
of visible fields in the scene to print a record.
<!DOCTYPE html>
<html>
<body>
<header><!-- A specified header --></header>
<dl>
<dt class="label cd1d5a64"><!-- A name of the first field --></dt>
<dd class="value cd1d5a64"><!-- A value of the first field --></dd>
<dt class="label c9fc4c4b empty"><!-- A name of the second field --></dt>
<dd class="value c9fc4c4b empty"><!-- A value of the second field --></dd>
<dt class="label cd72e323 hidden"><!-- A name of the third field --></dt>
<dd class="value cd72e323 hidden"><!-- A value of the second field --></dd>
<!-- ... -->
<dt class="label c00e60ea"><!-- A name of the last field --></dt>
<dd class="value c00e60ea"><!-- A value of the last field --></dd>
</dl>
<footer><!-- A specified footer --></footer>
</body>
</html>Two classes will be assigned to <dt> for a field
name. The first one is label, and the second one is a
column ID of the field. <dd> for a field value will
have value and the column ID as its classes. Also they will
have empty class if it has no value. A field which is
hidden using Dynamic Visibility feature will have hidden
class.
You can hide or highlight, for example, fields using these classes.
For example, this CSS hides the second field.
.c9fc4c4b {
display: none;
}Also, this CSS hides the second field if it doesn’t have a value.
.c9fc4c4b.empty {
display: none;
}Elements with hidden class are hidden by default, but
you can make them visible with CSS.
.cd72e323.hidden {
display: block;
}A thumbnail will be used for an image and a video field if it’s available.
<dt class="label cc89936d">Image</dt>
<dd class="value cc89936d">
<img src="...">
</dd>You can specify the size of the thumbnail using this CSS, for example.
.cc89936d img {
width: 100px;
height: 100px;
}All child records will be expanded as children of the
<dd> for a Child Records field.
<dl>
<dt class="label referrer">Child Records</dt>
<dd class="value referrer">
<dl>
<!-- The first child record -->
<dt class="label c4ce39cd"><!-- A name of the first field of the first child record --></dt>
<dd class="value c4ce39cd"><!-- A value of the first field of the first child record --></dd>
<dt class="label c5a5541d"><!-- A name of the second field of the first child record --></dt>
<dd class="value c5a5541d"><!-- A value of the second field of the first child record --></dd>
<!-- The second child record -->
<dt class="label c4ce39cd"><!-- A name of the first field of the second child record --></dt>
<dd class="value c4ce39cd"><!-- A value of the first field of the second child record --></dd>
<dt class="label c5a5541d"><!-- A name of the second field of the second child record --></dt>
<dd class="value c5a5541d"><!-- A value of the second field of the second child record --></dd>
<!-- ... -->
<!-- The last child record -->
<dt class="label c4ce39cd"><!-- A name of the first field of the last child record --></dt>
<dd class="value c4ce39cd"><!-- A value of the first field of the last child record --></dd>
<dt class="label c5a5541d"><!-- A name of the second field of the last child record --></dt>
<dd class="value c5a5541d"><!-- A value of the second field of the last child record --></dd>
</dl>
</dd>referrer is assigned as its class instead of a column ID
because a Child Records field has no column ID.
You can hide child records by applying this CSS, for example.
.referrer {
display: none;
}Or you can make the label of child records larger using this CSS.
.referrer .c5a5541d.label {
font-size: 120%;
}Note that child records are expanded only for one level. They won’t be included in the HTML if a child record has child records.