Buttons that Create Other Buttons

The site previously covered Roll Buttons but overlooked one very common desire: Roll buttons that print out another roll button.

A Simple Example

For example, on the D&D 5e By Roll20 sheet, you can make attack rolls, and each attack prints out the attack roll, but you can also click it to roll damage when your attack roll is high enough.

See the image for a very simple example.

The damage button here is a completely separate button that must be created. You might make this a hidden button on the sheet, and then it can only be called by people who know it exists, or by attack buttons like the one in the image here.

Creating the Second Button

Create this button just like any other button.

If you want to hide it, and you’re using CSE, you just need to add hidden to the buttons classes, like so:

<button type="roll" name="roll_damage" class="hidden" value="&{template:default}{{name=Damage Roll}}{{damage roll=[[1d8+1]]}}></button>Code language: HTML, XML (xml)

You don’t need to include anything between <button> and </button> – since the button isn’t displayed, nothing you put there would ever be seen.

If you’re using Legacy code, you’ll need to add some CSS code to make sure the button is hidden.

button[type=roll].sheet-hidden {
   display: none;
}Code language: CSS (css)

Adding the Button Call

Roll20 already has syntax for creating buttons in chat. You just need to add the correct syntax to your initial button. That code looks like this:

[Visible Label](~button-name)Code language: CSS (css)

So, let’s say that button above is a damage roll. We want an attack roll that gives the option of rolling it:

<button type="roll" name="roll_attack_roll" value="&{template:default}{{name=Attack Roll}}{{attack roll=[[1d20+10]]}}{{damage roll=[click me](~damage)}}">Attack</button>Code language: HTML, XML (xml)

That attack button generates the attack roll picture above.

You might have multiple buttons – maybe one for a damage roll, and another for a critical damage roll. And you can include attribute calls like @{attack_bonus} and @{strength_bonus} where needed. These are completely standard roll buttons.

Buttons Containing Attributes

When printing a button in chat with attributes, you have to tell Roll20 which character is making the roll so it knows which character sheet to use. For example:

<button type="roll" name="roll_damage_roll" class="hidden" value="&{template:default}{{name=Damage Roll}}{{damage roll=[[1d8+@{strength}]]}}></button>Code language: HTML, XML (xml)

If you were printing this in chat, you’d need to include some identifying info, like:

[Click Me!](~selected|damage_roll)
[Click Me!](~Bob|damage_roll)Code language: Markdown (markdown)

But for buttons created in a character sheet, you don’t need to do that. The character sheet will automatically add the name information. So you just need to use:

[Click Me!](~damage_roll)Code language: CSS (css)

Buttons in Repeating Sections

Likewise, when you have a button value which contains another button call, you don’t need to include the repeating section row if it’s in the same row.

You do need to include the repeating section name though. So if the buttons were both in the repeating_weapons fieldset, that attack would look like this:

<button type="roll" name="roll_attack_roll" value="&{template:default}{{name=Attack Roll}}{{attack roll=[[1d20+10]]}}{{damage roll=[click me](~repeating_weapons_damage_roll)}}">Attack</button>Code language: HTML, XML (xml)

To summarise: you don’t need to include the character name or the row of a repeating section, but you do need to include the name of a repeating section.

2 thoughts on “Buttons that Create Other Buttons

  1. It is of note that the top example is not functional. The damage is roll_test_damage but the button calls ~damage_roll. The ~name and the roll_name need to match.

    1. Thank you for this comment. You are correct. I’m not sure how that slipped in, I usually test all code samples. I have corrected the code. If you see any other issues, feel free to comment – I want the code to be accurate.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.