Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Sheetworker examples for Non-programmers

From Roll20 Wiki

Revision as of 04:42, 6 September 2018 by Vince (Talk | contribs)

Jump to: navigation, search

While the majority of Roll20's character sheets are written using only HTML and CSS, sheetworker scripts(javascript) are often necessary to either simplify complicated HTML or add more advanced functionality to a character sheet. For those of us "non-programmers", the examples given on the Sheet Worker Scripts page may be less than exhaustive. This page was created to help better explain how to use sheetworker scripts in your character sheets.

Simple Template

(credit: G G)

You really don't need to understand how sheet workers work, to be honest. As long as you copy the change / get attrs / setattrs sections properly, to get the data you operate on with fairly standard programming techniques.


on("change:stat1 change:stat2 sheet:opened", function() {  //sheet:opened is optional, but is useful for some workers - the script runs every time the sheet opens.
   getAttrs(["stat1","stat2"], function(values) {
        let stat1 = values.stat1;                // wrap this in a parseInt function if you need it to be a number
        let stat2 = parseInt(values.stat2)||0;    // like so
// ============================
// at this point you have the variables you need to work with. Do whatever you need below, using ifs, switches, for loops, and so on 
// as you would in other programming languages. You can use very simple stuff, similar to BASIC programming, whatever suits your level of skill.


// then once you have done whatever stuff you need to do to get your desired output:
// the bit below the line lets you wrap up the sheet worker.
// ============================
        setAttrs({                            
            stat1:stat1,
            stat2:stat2
        });
  });
});

If you have different, more, or less stats, you just need to add them to the change, getattrs, and setattrs lines, and the variable assignments. You really don't need to understand how they work, as long as you can copy them and update them with correct values.

Then you can do what you need with them between the double lines. I hope this helps. In the beginning I was just as befuddled about them as you are, and using a template like this got me started.

Two tips I'd suggest when starting out:

  • Keep your attribute names lower case.
  • Don't use dashes or other symbols except underscores in attribute names.
So if you have a name like Health-Value, change it to health_value.

You can break these guidelines when you know what you're doing, but you need to write the sheet workers slightly differently, and it's better to avoid the hassle when starting out.

Auto-calculating Attributes

example 1;(credit: Rabulias)

Your best bet would be to avoid the autocalc fields entirely if you can. Monitor the two other fields and when they change, have a sheetworker that adds them up to the new value. Then you can refer to the new value in other calculations much easier.

on("sheet:opened change:stat_a change:stat_b", function() {
    getAttrs(["stat_a", "stat_b"], function(values) {
        setAttrs({
            "foo_modchars": parseInt(values["stat_a"],10) || 0 + parseInt(values["stat_b"],10) || 0
        });
    });
});

example 2;(credit: G G)

I rememebr seeing a script someone wrote to allow you to use autocalc fields within sheet workers, but it's just simpler to use Rabulias's approach.

Add the relevant stats to the on(change:) line, and duplicate the calculation within the sheet worker.

I generally don't put my working in the setattrs call, but before it so i can more easily check it. Something like

on("sheet:opened change:stat_a change:stat_b", function() {
  getAttrs(["stat_a", "stat_b"], function(values) {
      var stat_a = parseInt(values["stat_a"],10)||0;
      var stat_b = parseInt(values["stat_b"],10)||0;
      var output = stat_a + stat_b;
      setAttrs({
        "foo_modchars": output
      });
  });
});