Main Article: Building Character Sheets

This page is about the <button> and it's known options for usage in creating Custom Character Sheets(Pro feature).

The <button> have three roll20-specific types that can be used in character sheets; type="roll", type="action", type="compendium".

Roll Button

Example:

<button type="roll" value="/roll 1d20 + @{Bluff}" name="roll_BluffCheck"></button>

• the type-attribute should be set to roll
• the roll macro is defined in the value-attribute. See Macros for how to write them
• the optional name-attribute allows the roll to be referenced in external Macros and Abilities. The name must be prefixed with roll_ for this to work, and each roll button should have a unique name. Buttons in repeating sections automatically gain a unique prefix/suffix in their name.

To call a named roll button in the chat, it works similarly like calling a defined Ability macro from the A & A tab, e.g. %{Bob|BluffCheck}. This will call the "BluffCheck" button of the character named "Bob".

Action Button

Example:

<button type="action" name="act_reduce"></button>

Action buttons can be used as events to trigger Sheetworkers.

• the type-attribute must be set to action
• the name-attribute must be defined, and have a act_ prefix to function
• Do not use action button names that include underscores, otherwise they will fail to trigger as a detectable event for sheetworkers.

Two common uses:

• Swap between sheet tabs/visible areas (CSS Wizardry Example)
• Increment stats, such as ammo usage

Adjust Stats Examples

Made by GiGs and expanded here. Each step is expanded and commented for clarity.

Add one to the level stat , when a button is clicked.

Create an action button on the sheet:

<button type="action" name="act_add">

Then add this code the the sheetworker section of the sheet:

on('clicked:add', function() {
    getAttrs(['level'], function(values) {
        // get the level stat, and coerce into a numerical value.
        const level = +values.level || 0; 
        // increase by 1
        const newlevel = level +1;
        // save the updated attribute to the sheet
        setAttrs({
           level: newlevel 
        });
   });
});

Reducing several stats with one button press.

Create an action button on the sheet:

<button type="action" name="act_reduce">

Then add this code the the sheetworker section of the sheet:

on('clicked:reduce', function() {
    // make an array of the attributes you plan to adjust, for ease of use later
    const attributes = ['list of attributes to adjust'];
    getAttrs(attributes, function(values) {
        const settings = {}; // make a variable to hold the changed attributes
        // loop through the attributes, get the value, then subtract 1
        attributes.forEach(att => {  // in each go through the loop, "att" becomes the next attribute
            let tempattribute = +values.att || 0;
            tempattribute -= 1;
            // store the changed attribute in the settings variable:
            settings[att] = tempattribute;
        });
        // save the updated attributes to the sheet
        setAttrs(settings);
   });
});

Compendium Button

Main Article: Compendium Button

The compendium button can be used to open a compendium entry directly from a character sheet, in the same way as if you clicked on an entry in the in-app compendium. This can be used as a more convenient way to access rules and descriptions, for example, for a spell, the compendium button can be used to easily view the full description for that spell.

See Also

• Building Character Sheets - Main Article
• Styling Roll Buttons - how to replace the default dice icon on a button
• Macros
• Dice Reference