Create template
Template types
10plate accepts 3 types of template.
SVG
SVG template. You can upload SVG file to create template. It is useful if you want to convert print data to template. If you want to write SVG code directly, create HTML template and write SVG code.
HTML+CSS
Template composed by HTML+CSS. It is good for varios type of template.
TEXT
Text only template. It is useful for creating mail template, etc.
Template basic
Template syntax is simple: Write double curly bracesed field ({{ label }}
) where you want to be editable.
If you write {{ myname }}
in your template, {{ myname }}
area become editable and input for myname
is automatically created.
Sample: https://10plate.io/t/BDrLdxrRJVW
* Currently, attributes in HTML/SVG tags can't be editable with {{}}
except class
attribute. And some element/attribute removed automatically for security reason.
Template fields
What you write inside double curly braces ({{ }}
) affects how field works.
{{ name }}
:name
is setted as field label.{{ name((Bob)) }}
:Bob
is setted as field's default value. If you don't input toname
field,Bob
displayed.{{ name""名前"" }}
:名前
is setted as fields's alias name. Alias is useful for formulas.{{ gender[[male,female,other]] }}
: Input for this field renderd as dropdown box, andmale
,female
andother
becomes choices.{{ gender[[male->m,female->f,other->o]] }}
: Use->
in choices, left side value becomes label, right side value becomes output.{{ mail::email }}
:::email
defines field type. You can usetext
,email
,tel
,url
,number
,date
,datetime-local
,month
,week
,time
,color
andmultiline
.{{ =price * amount }}
: If you write=
first, this field processed as fomula.{{ total = price1 + price2 +price3 }}
: You can set label to result of fomula.{{ total = sum(price) }}
: You can use functions likesum
in fomula.{{ updated | date('YYYY-MM-DD') }}
: You can use filters likedate
,addComma
etc.
Filters
date('YYYY-MM-DD')
: Format date string. Refer fecha's formatting tokens information for more specs.addcomma
: Add commas to number.12345678.9
->12,345,678.9
floor
: Round down the number.round
: Round the numberceil
: Round up the number.abs
: Return the absolute valuecapitalize
: Convert strings to uppercase.lower
: Convert strings to lowercase.append('str')
: Appendstr
if value setted.prepend('str')
: Prependstr
if value setted.substr(start,length)
: Returns the portion of string specified by thestart
andlength
parameters.switch('A','B')
: If value is truthy, displayA
. If not, displayB
.default('A')
: If value is not setted, displayA
.random('A','B','C','D')
: Returns a value from arguments randomly. Input string is treated as random seed, so you can get same value if inputs are same.toPageTitle
: Setdocument.title
to input string.empty
: Always output empty string.
Functions
sum('prefix')
: calc sum of fields prefixed withprefix
.now()
: returns current timestamp in ISO8601 format.today()
: returns today's 0:00 in ISO8601 format.
Template FAQ
Wanna use line break at input/output
In template, use ::multiline
like {{ description::multiline }}
, then input become multiline and line breaks inserted in output.