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 to name 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, and male,female and other 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 use text, email, tel, url, number, date, datetime-local,month,week,time,color and multiline .
• {{ =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 like sum in fomula.
• {{ updated | date('YYYY-MM-DD') }} : You can use filters like date, 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 number
• ceil : Round up the number.
• abs : Return the absolute value
• capitalize : Convert strings to uppercase.
• lower : Convert strings to lowercase.
• append('str') : Append str if value setted.
• prepend('str') : Prepend str if value setted.
• substr(start,length) : Returns the portion of string specified by the start and length parameters.
• switch('A','B') : If value is truthy, display A. If not, display B.
• default('A') : If value is not setted, display A.
• 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 : Set document.title to input string.
• empty : Always output empty string.

Functions

• sum('prefix') : calc sum of fields prefixed with prefix.
• 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.