There are two ways buttons might be involved- roll buttons to trigger them, and buttons embedded in a rolltemplate’s output. This post concentrated on the latter, but first, a quick description of the former.
Roll Button Macros
Whenever you have something like this, it’s a roll button.
<button type="roll" name="roll_attack" value="1d20+7"></button>Code language: HTML, XML (xml)<button type="roll" name="roll_attack" value="&{template:default} {{name=Attack Roll"}} {{roll=[[1d20+7]]}}"></button>Code language: HTML, XML (xml)The value of a roll button is sent to chat. It is a macro linked to a character, also known as an ability.
You can create a chat button to launch that ability. Let’s say it’s on a character called frodo, your button would look like this:
[An Attack Button](~frodo|attack)Code language: Markdown (markdown)[An Attack Button](~selected|attack)Code language: Markdown (markdown)The second approach is the ever popular token approach. If you have a token selected,it will roll the ability for the character linked to that token.
A button must always be associated with a character (even if using an identifier like selected or target – at the moment the button is triggered, it is linked to that character).
Buttons on a character sheet are automtically linked to a character. But if posted in chat, a link must be created. That’s were the syntax above comes in. You just need to put a label, the character name, and the button name.
[LABEL](~CHARACTER|BUTTON)Code language: Markdown (markdown)Every button needs its own unique name, and you must supply a character identifier (though as noted above, this can be a property like SELECTED or TARGET).
Exporting Chat Menu Buttons
Let’s say you have an attack template designed to post the attack roll, and a damage button so if the attack roll is good enough, the attacker can click that.
You need to create a button for the damage roll. Here’s an example.
<button type="roll" name="roll_damage" class="hidden" value="&{template:default} {{title=@{character_name} rolls Damage}} {{roll=[[1d6+@{damage_bonus}]]}}"></button>Code language: HTML, XML (xml)This button uses two variables drawn from the character sheet – character_name and damage_bonus. When the button is launched properly, they are taken from the associated character.
But you want a call to that button in the rolltemplate. The easiest way is to use the selected property – this ensures that the values from the linked token are taken. That could look like this:
{{#^rollLess() roll target}}
<div class="damage-roll">
[Damage](~selected|damage)
</div>
{{/^rollLess() roll target}}Code language: HTML, XML (xml)This means the button is only shown when the attack roll at least equals the target. That part might not be used since you already have a conditional effect – the player has to fclick the button.
The real downside is selected. It would be nice to include the proper character name, so that the button is always drawing from the correct character sheet. This turns out to be more complicated than you’d expect. The followig section can be safely skipped – most people don’t do this.
Linking a Button to a Specific Character
If you don’t want to use the selected link, your macros need a way of grabbing the current character name – remember players chan change that, and you have likely named your NPCs uniquely. SSolving this problem takes several steps and requires a sheet worker.
First, with your damage button, include a hidden attribute.
<input type="hidden" name="attr_damage_attribute" value="">
<button type="roll" name="roll_damage" value="&{template:default} {{title=@{character_name} rolls Damage}} {{roll=[[1d6+@{damage_bonus}]]}}"></button>Code language: HTML, XML (xml)Then create a sheet worker to include a call to that button.
const buttons = ['damage']; /* this is the only line that needs changing */
on('change:character_name sheet:opened', () => {
getAttrs(['character_name'], values => {
const name = values.character_name;
const output = {};
buttons.forEach(button => {
[`${button}_attribute`] = `~${name}|${button}`;
});
setAttrs(output);
});
});Code language: JavaScript (javascript)This sheet worker is set up to easily handle more buttons and linked attributes. You just need to add the button names to the array at the start.
Then update the rolltemplate code, prparing for the new macro.
{{#^rollLess() roll target}}
<div class="damage-roll">
[Damage]({{button}})
</div>
{{/^rollLess() roll target}}Code language: HTML, XML (xml)See how it has a new property, button. The final step is ensure all your attack rolls include that, as follows.
&{template:attack} {{attack=[[ 1d20+@{attack} ]] }} {{target=[[?{target AC|10}]]}} {{button=@{damage_attribute}}}Code language: Markdown (markdown)And now you have a macro that will always run with the correct character’s attributes.
There is still a problem: anyone can click a button. You might want this button whispered just to the relevant character. But that’s a problem for another day – let’s just assume players won’t click buttons not mean for them. This method means you don’t need to have a token selected.
Hidden Buttons
One thing you might want to do with any of these approaches is to hide the damage button. Maybe it’s only meant to be clciked if the attack roll is good enough, or you want to limit buttons to be only used from chat.
This is easy. Just add the hidden class, like so.
<button type="roll" name="roll_damage" class="hidden" value="&{template:default} {{name=Damage Roll"}} {{roll=[[1d6+1]]}}"></button>Code language: HTML, XML (xml)See the class? You just need to type that and the button will be hidden. No extra code needed. It may be hidden on the character sheet, but it can still be showin in a rolltemplate.
In fact, you can hide any HTML element that way. There are some CSS class names that have built-in code supplied by Roll20 and this is one of them.
