Roll20 Wiki

Revision as of 15:11, 8 June 2019

Roll Templates are a special facet of the Character Sheets system which provide additional layout and styling options for the display of roll results.

Using Roll Templates

If you're using a Character Sheet, there's a really good chance you'll use a Roll Template just by clicking the roll button on the sheet, or by calling a sheet roll in a macro or ability. You don't have to do anything extra to do this, it's already set up for you in advance by the sheet author.

If you're interested in using Roll Templates in your own custom macros or creating your own custom templates, read on further.

Using a roll template is very easy. Just include a special flag in your chat message which tells Roll20 that you want to use a Roll Template, and then provide all of the data that you want to include. Here's an example that uses the "default" template (which all games have access to, regardless of the game system or character sheet you are using):

&{template:default} {{name=Test Attack}} {{attack=[[1d20]]}} {{damage=[[2d6]]}}

The &{template:<template_name>} is the part that tells the system to use a Roll Template, and specifies the name of the template you want to use. Then you just provide all the data for the template in the format {{<propertyname>= <value>}}. The "propertyname" that you should use depends on the template -- the Character Sheet documentation should let you know what's available, and we've provided documentation on all of the built-in templates below. "Value" can be either text or an inline roll, including macros, abilities, etc. Note that if you use a macro or ability, it must be an inline roll, not a "/roll" command.

Here's an example that uses a "%{Character|attack}" ability:

&{template:default} {{name=Test With Ability}} {{attack= %{Character_Name|attack} }} {{damage= #damagemacro }}

When Can I Use Roll Templates?

You can use a Roll Template in general messages (without a command like "/desc" or "/emote") and whispers. You can't use roll templates with the "/roll" command; instead, Roll Templates are meant to be used with inline rolls. As long as they use inline rolls, you can use Roll Templates with macros, Character Abilities, and sheet authors can use them inside of their Roll Buttons on sheets.

Built-In Roll Templates

The following roll templates are built-in to Roll20 and can be used in any game.

Default

To use the default template, use "&{template:default}".

Property	Expected Value
name	The name of the roll, shown in the header of the roll listing

The default template is special, and will list out whatever argument you give it in a table. So for example, you could do the following:

&{template:default} {{name=Test Attack}} {{attack=[[1d20]]}} {{note= This is some note content}} {{Saving Throw= vs Will}}

Here is a fairly exact example of the default template with it's dependent CSS classes.

Creating a Roll Template

If you are a Sheet Author, you can include as many roll templates as you want in your Character Sheet HTML and CSS. We'll let you know how below.

If you are a Pro subscriber, you can create your own Roll Templates if you are using the "Custom" character sheet option with your game. Follow the instructions below.

Defining the Layout of the Roll Template

The first step in creating a Roll Template is defining the layout, including what properties you are going to make available to be filled in by player. Roll Templates are just HTML, and you have access to all the same HTML as any other part of a Character Sheet (including div and table). Here's an example of the layout of a Roll Table:

<rolltemplate class="sheet-rolltemplate-test">
    <div class="sheet-template-container">
	<div class="sheet-template-header">{{rollname}}</div>
	{{#attack}}<div class="sheet-template-row">Attack: {{attack}} {{attackadvantage}} vs AC</div>{{/attack}}
        {{#damage}}
	<div class="sheet-template-row"><span>Damage: </span>{{damage}} 
        <span>Crit: </span>{{dmgcrit}}</div>
	<div class="sheet-template-row"><span>Type: </span>{{dmgtype}}</div>
       {{/damage}}
       {{#atteffect}}
	 <div class="sheet-template-row">
	 <span class="sheet-template-desc">Effect: </span>{{atteffect}}
         </div>
       {{/atteffect}}
</rolltemplate>

Your template should have a rolltemplate tag with a class of "sheet-rolltemplate-<template_name>". "template_name" is the same name that will be used in the &{template:<template_name>} portion of the command, and should not contain spaces. You can put the roll template anywhere you want in your Character Sheet's HTML, but we recommend putting it at the very end. It will automatically be "removed' from your template so it isn't shown as part of the sheet in the Character view. Note that you cannot nest rolltemplates inside of each other.

After that, it's up to you to decide how to structure your roll. We recommend a table layout, but it's up to you.

Inside of the template, you have access to following:

Properties

You can include any property you'd like by using the double-curly-braces. So {{myproperty}} would output whatever (inline roll, text. etc.) is given to the template via {{myproperty=<value>}} in the roll. To create a new property, just add it to your template and give it a unique name. Again, avoid the use of spaces to ensure maximum compatibility with all helper functions.

Logic

If you do {{#<property>}} followed by {{/<property>}}, all of the parts between those two tags will only be shown if the property contains a value. This can be useful for providing several different parts to a template which may only be used some of the time. For example, the "Effect" part of a roll may only apply to spells, so if the roll doesn't provide an effect, that section will not be shown.

You can also do {{^<property>}} followed by {{/<property>}} to mean the opposite -- that is, only show the section if the given property does not exist.

Helper Functions

There are several helper functions dealing with rolls provided as well. You use these just like the normal Logic pattern above, but you are calling a function and providing a property. The section contained between the tags will only be shown if the function evaluates to true.

Helper Function	Shows Section If
`{{#rollWasCrit() <rollname>}}`	If the provided roll contains any crits, the section will be shown. For example, `{{#rollWasCrit() attack}}` would check the "attack" property for an inline roll that has at least one critical roll.
`{{#rollWasFumble() <rollname>}}`	Same as #rollWasCrit(), but checks for any fumbles (rolls of 1).
`{{#rollTotal() <rollname>}}`	Checks the total of an inline roll for the value. If they match, the section is shown. For example, `{{#rollTotal() attack 10}}` would check the "attack" property for an inline roll that totaled 10.
`{{#rollGreater() <rollname>}}`	Checks the total of an inline roll for the value. If the roll result is greater, the section is shown. For example, `{{#rollGreater() AC 16}}` would check the "AC" property for an inline roll that resulted in 17 or higher.
`{{#rollLess() <rollname>}}`	Checks the total of an inline roll for the value. If the roll result is less, the section is shown. For example, `{{#rollLess() deathsave 10}}` would check the "deathsave" property for an inline roll that resulted in 9 or less.
`{{#rollBetween() <rollname>}}`	Checks the total of an inline roll for the value. The rollBetween() function accepts two numbers. If the roll result is equal to or between, the section is shown. For example, `{{#rollBetween() strength 7 9}}` would check the "strength" property for an inline roll that resulted in a seven, eight, or nine.

Note: All helper functions will only check the first inline roll found in a property.

Important: When you "close" the section of a helper function, you must put the entire function call including all arguments. For example, {{#rollWasCrit() attack}} would be closed by {{/rollWasCrit() attack}}.

Here's an example roll template that would only show its Critical Damage section if the Attack roll is a crit:

    <div class="sheet-template-container">
		<div class="sheet-template-header">{{rollname}}</div>
		{{#attack}}<div class="sheet-template-row"><span>Attack: </span>{{attack}}</div>{{/attack}}
		<div class="sheet-template-row">
			<span>Damage: </span>{{damage}} 
			{{#rollWasCrit() attack}}
				<span>Crit: </span>{{dmgcrit}}
			{{/rollWasCrit() attack}}
		</div>
		<div class="sheet-template-row"><span>Type: </span>{{dmgtype}}</div>
   </div>

Inverting The Logic: It's also useful to be able to test when something does not match the logic. If you test for when a roll is less than a total, you might also want to know when a roll is NOT less than that total. You can do this adding the ^ symbol in this format: {{#^rollWasCrit() <rollname>}} and ending it with {{/^rollWasCrit() <rollname>}}. Here's how that might look:

{{#^rollWasCrit() attackroll }}
     <span>Not a Crit!</span>
{{/^rollWasCrit() attackroll }}

Helper Function Variables

All of the helper functions that accept a number, such as rollTotal() or rollBetween(), can use the result of another inline roll in the same Roll Template in place of the number. For example {{#rollGreater() save poison}} would compare the result of the save inline roll and the poison inline roll and show the section if the save result was greater.

Special Helper Function: allProps()

There is a special helper function called allProps() that can be used to dynamically list all of the properties that were passed to a roll, even if you don't explicitly include them. You can also specify properties to ignore. For example, the following would show a table with a table row for each property included in the roll, except for the "attack" property:

<div>
    <caption>{{name}}</caption>
    {{#allprops() attack}}
       <div>{{key}}</div><div>{{value}}</div>
    {{/allprops() attack}}
</div>

Styling Roll Templates

To style a Roll Template, just include CSS for it in the CSS for your Character Sheet. Here's a quick example that should give you a good idea of how to do it (in this example, the roll template's name is "test"):

.sheet-rolltemplate-test div.sheet-template-container {
	border: 2px solid #000 !important;
	border-radius: 3px 3px 3px 3px;
}

.sheet-rolltemplate-test .sheet-template-header {
	background-color: rgba(112, 32, 130,1);
	color: #000;
	padding: 2px;
	border-bottom: 1px solid black;
	line-height: 1.6em;
	font-size: 1.2em;
}

.sheet-rolltemplate-test div {
	padding: 5px;
	border-bottom: 1px solid black;
}

.sheet-rolltemplate-test div:nth-child(odd) {
	background-color: rgba(217, 217, 214,1);
}

.sheet-rolltemplate-test div:nth-child(even) {
	background-color: rgba(233, 233, 233,1);
}

.sheet-rolltemplate-test .inlinerollresult  {
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
	border: 2px solid rgba(167, 168, 170,1);
}

.sheet-rolltemplate-test .inlinerollresult.fullcrit {
	border: 2px solid #3FB315;
}

.sheet-rolltemplate-test .inlinerollresult.fullfail {
	border: 2px solid #B31515;
}

.sheet-rolltemplate-test .inlinerollresult.importantroll {
	border: 2px solid #4A57ED;
}

Notice that all of the styles begin with ".sheet-rolltemplate-<templatename>". You can then style your own custom HTML (such as the tables, divs, and classes that you used). Note that any classes you include in your roll template layout (such as "tcat" in the above example) will have ".userscript-" added to the beginning of them for security reasons. The easiest thing to do is to create your layout, then perform a roll in-game and inspect the resulting HTML so you can make sure you are accounting for any security filtering that is taking place.

Roll Template Examples

Listed below are a handful of system specific examples of the Roll Template functionality.

Dungeons and Dragons 5th Edition

Macro:

&{template:5eAttack} {{name=@{meleeweaponname1}}} {{subtags=Main Hand, Finess, @{meleedmgtype1}}} {{attack=[[1d20+@{meleetohit1}]]}} {{attackadv=[[1d20+@{meleetohit1}]]}} {{damage=[[@{meleedmg1}+@{meleedmgbonus1}]]}} {{dmgcrit=[[@{meleedmg1}]]}}

HTML:

<rolltemplate class="sheet-rolltemplate-5eAttack">
    <div class="container">
        <div><h1>{{name}}</h1></div>
        <div><span class="subheader">{{subtags}}</span></div>
        <div class="arrow-container"><div class="arrow-right"></div></div>
        <div class="rowcolor"><span class="tcat">Attack: </span>{{attack}} | {{attackadv}} vs AC</div>
        {{#damage}}
            <div>
                 <span class="tcat">Damage: </span>{{damage}} 
                 <span class="tcat">Crit: </span>{{dmgcrit}}
            </div>
        {{/damage}}
        {{#snkattk}}
            <div>
                 <span class="tcat">Sneak Attack: </span>{{snkattk}} 
                 <span class="tcat">Crit: </span>{{snkcrit}}
            </div>
        {{/snkattk}}
    </div>
</rolltemplate>

CSS:

.sheet-rolltemplate-5eAttack .sheet-container {
    background-color: #ffffff;
    border: 1px solid;
    padding: 2px;
    width: 189px;
}

.sheet-rolltemplate-5eAttack .sheet-container h1 {
    color: rgb(126, 45, 64);
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 20px;
}

.sheet-rolltemplate-5eAttack div {
    padding: 2px;
};
 
.sheet-rolltemplate-5eAttack span {
    color: rgb(126, 45, 64);
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2em;
    font-variant: small-caps;
    line-height: 1.6em;
    padding-left: 5px;
    text-align: left;
}
 
.sheet-rolltemplate-5eAttack .sheet-subheader {
    color: #000;
    font-size: 1em;
    font-style: italic;
}
 
.sheet-rolltemplate-5eAttack .sheet-arrow-right {
    border-bottom: 2px solid transparent;
    border-left: 180px solid rgb(126, 45, 64);
    border-top: 2px solid transparent;
}
 
.sheet-rolltemplate-5eAttack .sheet-tcat {
    font-style: italic;
}
 
.sheet-rolltemplate-5eAttack .inlinerollresult  {
    background-color: #ffffff;
    border: none;
}
 
.sheet-rolltemplate-5eAttack .inlinerollresult.fullcrit {
    color: #3FB315;
    border: none;
}
 
.sheet-rolltemplate-5eAttack .inlinerollresult.fullfail {
    color: #B31515;
    border: none;
}
 
.sheet-rolltemplate-5eAttack .inlinerollresult.importandivoll {
    color: #4A57ED;
    border: none;
}

Dungeons and Dragons 3.5 / Pathfinder

Macro:

&{template:pf_spell} {{name=@{repeating_lvl-0-spells_0_name}}}{{school=@{repeating_lvl-0-spells_0_school}}} {{level=sorcerer/wizard 0}} {{casting_time=@{repeating_lvl-0-spells_0_cast-time}}} {{components=@{repeating_lvl-0-spells_0_components}}} {{range=@{repeating_lvl-0-spells_0_range}}} {{target=@{repeating_lvl-0-spells_0_targets}}} {{duration=@{repeating_lvl-0-spells_0_duration}}} {{saving_throw=@{repeating_lvl-0-spells_0_save}}} {{sr=@{repeating_lvl-0-spells_0_sr}}} {{rng_attack=[[1d20 + @{attk-ranged}]]}} {{damage=1d3([[1d3]])}} {{spell_description=@{repeating_lvl-0-spells_0_description}}}

HTML:

<rolltemplate class="sheet-rolltemplate-pf_spell">
    <table>
        <tr><th>{{name}}</th></tr>
        <tr>
            <td><span class="tcat">School </span>{{school}}; <span class="tcat">Level </span>{{level}}</td>        
        </tr>
        <tr>
            <td><span class="tcat">Casting Time </span>{{casting_time}}</td>        
        </tr>
        <tr>
            <td><span class="tcat">Components </span>{{components}}</td>        
        </tr>
        <tr>
            <td><span class="tcat">Range </span>{{range}}</td>        
        </tr>
        <tr>
            <td><span class="tcat">Effect/Target </span>{{target}}</td>        
        </tr>
        <tr>
            <td><span class="tcat">Duration </span>{{duration}}</td>        
        </tr>
        <tr>
            <td><span class="tcat">Saving Throw </span>{{saving_throw}}; <span class="tcat">Spell Resistance </span>{{sr}}</td>         
        </tr>
        {{#rng_attack}}
            <tr><td><span class="tcat">Ranged Attack </span>{{rng_attack}}</td></tr>
        {{/rng_attack}}
        {{#mel_attack}}
            <tr><td><span class="tcat">Melee Attack </span>{{mel_attack}}</td></tr>
        {{/mel_attack}}
		{{#damage}}
			<tr><td><span class="tcat">Damage: </span>{{damage}}</td></tr>
		{{/damage}}
        <tr>
            <td>{{spell_description}}</td>        
        </tr>
    </table>
</rolltemplate>

CSS:

.sheet-rolltemplate-pf_spell table {
    width: 100%;
    padding: 2px;
    background:url(http://i.imgur.com/BLb0XMU.jpg) top left repeat;
}
 
.sheet-rolltemplate-pf_spell th {
	color: rgb(233, 223, 151);
    background-color: rgb(63, 32, 33);
    padding-left: 5px;
	line-height: 1.1em;
	font-size: 1em;
    text-align: left;
	font-family: "Arial", Helvetica, sans-serif;
    text-transform: uppercase;
}
 
.sheet-rolltemplate-pf_spell .sheet-arrow-right {
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
	border-left: 180px solid rgb(126, 45, 64);
}
 
.sheet-rolltemplate-pf_spell .sheet-tcat {
    font-weight: bold;
}
 
.sheet-rolltemplate-pf_spell td {
    padding-left: 5px;
    font-size: 0.9em;
}
 
.sheet-rolltemplate-pf_spell .inlinerollresult  {
    background-color: transparent;
    border: none;
}
 
.sheet-rolltemplate-pf_spell .inlinerollresult.fullcrit {
	color: #3FB315;
    border: none;
}
 
.sheet-rolltemplate-pf_spell .inlinerollresult.fullfail {
	color: #B31515;
    border: none;
}
 
.sheet-rolltemplate-pf_spell .inlinerollresult.importantroll {
	color: #4A57ED;
    border: none;
}

World of Darkness

Macro:

&{template:wod} {{name=@{character_name}}} {{roll_name=Command}} {{attr=Intelligence}} {{attr_num=@{intelligence}}} {{skill=Intimidation}} {{skill_num=@{intimidation}}} {{pwr=Dominate}} {{pwr_num=@{dominate}}} {{mod_num=?{Modifiers|0}}} {{result=[[{(@{intelligence}+@{intimidation}+@{dominate}+?{Modifiers|0})d10!}>8]]}}

HTML:

<rolltemplate class="sheet-rolltemplate-wod">
    <table>
        <tr><th>{{name}} rolls{{#roll_name}} {{roll_name}}{{/roll_name}}</th></tr>
        <tr><td class="attr">
            {{#attr}}
                {{attr}}({{attr_num}})
            {{/attr}}
            {{#skill}}
                 + {{skill}}({{skill_num}})
            {{/skill}}
		    {{#pwr}}
		    	 + {{pwr}}({{pwr_num}})
		    {{/pwr}}
            {{#mod_num}}
                 + Modifiers({{mod_num}})
            {{/mod_num}}
        </td></tr>
        <tr>
            <td class="result">{{result}} Successes</td>        
        </tr>
    </table>
</rolltemplate>

CSS:

.sheet-rolltemplate-wod table {
    width: 189px;
    height: 189px;
    padding: 2px;
    background: url(http://i.imgur.com/xBk4U1p.jpg) top left;
    background-size: 189px 189px;
    background-repeat: no-repeat;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    border-spacing: 0;
}
 
.sheet-rolltemplate-wod th {
	color: rgb(112, 0, 0);
    padding: 15px 2px 2px 20px;
	line-height: 1.2em;
	font-size: 1.2em;
    text-align: left;
}
 
 
.sheet-rolltemplate-wod td {
    padding-left: 20px;
    font-size: 1.0em;
    vertical-align: top;
}
 
.sheet-rolltemplate-wod .sheet-result {
    font-size: 1.2em;
    text-align: center;
    color: rgb(112, 0, 0);
    padding-bottom: 20px;
}
 
.sheet-rolltemplate-wod .inlinerollresult  {
    background-color: transparent;
    color: #000000;
    border: none;
}
 
.sheet-rolltemplate-wod .inlinerollresult.fullcrit {
   color: #3FB315;
    border: none;
}
 
.sheet-rolltemplate-wod .inlinerollresult.fullfail {
    color: #000000;
    border: none;
}
 
.sheet-rolltemplate-wod .inlinerollresult.importantroll {
	color: #3FB315;
    border: none;
}

@@ Line 93: / Line 93: @@
 If you do <code>{{#<property>}}</code> followed by <code>{<nowiki />{/<property>}}</code>, all of the parts between those two tags will only be shown if the property contains a value. This can be useful for providing several different parts to a template which may only be used some of the time. For example, the "Effect" part of a roll may only apply to spells, so if the roll doesn't provide an effect, that section will not be shown.
-You can also do <code>{<nowiki />{#^<property>}}</code> followed by <code>{<nowiki />{/^<property>}}</code> to mean the opposite -- that is, only show the section if the given property does not exist. This logic also applies to the helper functions below. For example you could check if a roll was not a critical by using <code>{{#^rollWasCrit() <rollname>}}</code> and closed with <code>{{/^rollWasCrit() <rollname>}}</code>. Note that the helper functions require both the <code>#</code> and the <code>^</code> symbols to be interpreted correctly by the roll template.
+You can also do <code>{<nowiki />{^<property>}}</code> followed by <code>{<nowiki />{/<property>}}</code> to mean the opposite -- that is, only show the section if the given property does not exist.
-<pre style="overflow:hidden;white-space:pre-wrap">
-{{#^rollWasCrit() attackroll }}
-     <span>Not a Crit!</span>
-{{/^rollWasCrit() attackroll }}
-</pre>
 ====Helper Functions====
@@ Line 140: / Line 135: @@
 		<div class="sheet-template-row"><span>Type: </span>{{dmgtype}}</div>
     </div>
+</pre>
+'''Inverting The Logic:''' It's also useful to be able to test when something does not match the logic. If you test for when a roll is less than a total, you might also want to know when a roll is NOT less than that total. You can do this adding the <code>^</code> symbol in this format: <code>{{#^rollWasCrit() <rollname>}}</code> and ending it with <code>{{/^rollWasCrit() <rollname>}}</code>.  Here's how that might look:
+<pre style="overflow:hidden;white-space:pre-wrap">
+{{#^rollWasCrit() attackroll }}
+     <span>Not a Crit!</span>
+{{/^rollWasCrit() attackroll }}
 </pre>
@@ Line 502: / Line 505: @@
 }
 </pre>
-==See Also==
-* '''[[Building Character Sheets]]'''
-<br />
 [[Category:Docs]]
-[[Category:Character Sheet Creation]]

Roll20 Wiki

Navigation

Personal tools

Toolbox

Difference between revisions of "Roll Templates"

From Roll20 Wiki

Revision as of 15:11, 8 June 2019

Contents

Using Roll Templates

When Can I Use Roll Templates?

Built-In Roll Templates

Default

Creating a Roll Template

Defining the Layout of the Roll Template

Properties

Logic

Helper Functions

Helper Function Variables

Special Helper Function: allProps()

Styling Roll Templates

Roll Template Examples

Dungeons and Dragons 5th Edition

Dungeons and Dragons 3.5 / Pathfinder

World of Darkness