Sheet Creation Check List

Source of the current sheets is available on Github.
Note: I made a script that converts a YAML to the output files you need, this saves a lot of time: YAML 2 Sheet Script.
The sheets I made or updated you can find here: Sheet List.
Recommended editor: VS Code (free): VS Code Editor Extensions:

Bootstrap

BBCode

HTML / CSS

CSS class completion

TWIG

YAML

Preparations

• Make sure to be a Grandmaster or higher to be able to create new sheets.
• Find the original character sheet as a reference, best in digital form so you can sample the colors scheme with a color picker and copy out text where needed.
• Go to your world, Settings & Tools / Configuration: try to add the system you want to create a sheet for, to your world.
  • If it already exists, add it. You need it to make an example sheet.
  • If it does not exist, add any other system to your world and use it as system for your sheet, for example the "Generic Fantasy" one. This will not preset anything, you just need a system to put your sheet in. It can be moved later into the proper system category.
• Go to Studio / Sheets & Blocks
• Click 'Create a new sheet' on the left side, for the system you picked in the previous step.
• Give it a proper name and description, e.g. name: 'Conan Character Sheet'. Do NOT use a temporary work title here because the name will stick in the code later, even if you change the name to something else.
• Click 'Create Template'.

Now you have a system added to your world and you have an empty sheet.

Creation Process

Data definition

• Go through the original (paper/pdf) sheet and create a text file from its data containing all the values (example below), name it your-sheet-name-here.yml .
• Go to Studio / Sheets & Blocks, click 'Edit' at the right side of your listed sheet and paste the content of your text file into the big input field below 'ADVANCED FUNCTIONALITY: IMPORT YAML DRIVER' and click 'Import Data'.
• If you get no error, continue with next step. If you get an error (404), your data are probably malformed in a way or the indentation is wrong:
  

  * First line is always: fields:
  * Do not define a field 'name', WA will add this automatically
  * make sure the indentation of the file is correct, use double spaces, no tabs
  * use every label only once, labels are the important part here
  * make sure to close all "" properly
  * dont't forget any : behind the keys
  

  
  Example:
  

  fields:
   level:
    label: "Level"
    input: integer
    min: 1
    max: 20
    # comments are starting with # and get ignored by WA
    # allows to enter numbers between 1 to 20
   class:
    label: "Class"
    input: string
    placeholder: "eg Warrior, Mage, ..."
    # allows to enter a one line text
   notes:
    label: "Notes"
    input: text
    rows: 10
    placeholder: "write down stuff during session"
    # allows to enter several lines of text, the rows are only used for
    # how many are shown in the form, not how many you can enter
   gender:
    label: "Gender"
    input: select
    options:
     male: male
     female: female
     other: other
     # this is a dropdown box with three entries, first one is the default
   sample checkbox:
    label: "Sample Checkbox"
    input: checkbox
    # defines a checkbox that you can toggle on and off
  

  
  Be aware that for the field names in the sheet, the label is being used. label: "First Name" will create a field in that sheet addressable as variables.first_name (all lower case, spaces become underlines).
  With the data definition and some example data filled in, you can start creating the basic sheet, which is the digital copy of the usual paper character sheet, it's purely for output.
  
• Go to Your World / Statblocks, choose your sheet in the dropdown at the top right and create a new character with some example data. The input form for this is generated by World Anvil and also accessable in the "boilerplate". It's simple, we will replace it later.
• Go to Studio / Sheets & Blocks and click 'Edit' at the right side of your sheet in the list.
• Click "Switch to Display Mode" at the top right.

View of the player screen with all the different versions of the character sheet: https://www.worldanvil.com/characters - then choose a character and click the SHEET tab:

Presentation Sheet

This is the sheet in the first tab. There is a boilerplate section underneath which contains a World Anvil generated version of the sheet, it is as simple as the pre-generated form sheet. But it is a good start for your own sheet as it already contains all the variables, all you need to do is replace the HTML code around it with something that makes it looks pretty.
Save this sheet as display.html.twig.

Badge Sheet

This is a micro sheet in the second tab. It is a mini version of the presentation sheet and should only contain the most vital information. It's used in the sidebar on the player screen and on the DM screen where the DM sees each character in the group as a column. It could just be something like "Lulu, level 5 dancer from Chicago" or or just name, level and a handful of stats that are used very often.
You should make the Badge after the Presentation Sheet, as it's just some part of it you can copy.

Tracking Sheet

The Tracking Sheet is shown on player and DM screen at the top, it is meant for editing stats during the session. It's placed inside an IFRAME so does not reload the whole page when saving. It should only contain stats like hitpoint, magic points, conditions and maybe a notes section to write down stuff for later. The DM can only see a very narrow version of it for each player, about as wide as the sidebar, make sure the Tracker Sheet should work in both views equally. Note: Fields that are visible on the tracker HAVE to be set in the data definition and also in the input form. If you don't want to see them in the regular input form, you can add them with <input ... other stuff here ... type="hidden">.
Create this sheet when the Input Sheet is done, becaue you once again can just copy over the parts you need.

Input Sheet

When you have finished the Basic Sheet, you can create the Input Sheet easily with the same looks:

• Copy file display.html.twig to form.html.twig
• Switch to the 'Edit Form' tab
• Scroll down to 'SHEET BOILERPLATE FORM' below the empty input field.
• Find each variable in form.html.twig and in the boilerplate and replace the form version with the one from the boilerplate.

Example for level, a number field:
The output looks something like this:

 variables.level is defined ? variables.level 

And the version in the input form would look like this:

<input value=" variables.level is defined ? variables.level " class="form-control" id="level" name="level" type="number" min="0" max="20" />

Be aware: each of these lines has two curly opening brackets on the left and two curly closing brackets on the right around the 'variables.level is defined ? variables.level' part. It doesn't show in the article due to WA's security measurements.

CSS

The fourth tab is for your CSS code to make the sheets look pretty. See how those work in the existing sheets (link at the top of the page).

Final steps

• Check the look of the sheet
• Insert the sheet as block into an article and check again. Articles use Bootstrap 3, the sheet view uses Bootstap 4
• Switch the theme of your world to a really light or really dark one and check the above again
• Check the sheet, the badge and the tracker sheet on the DM screen
• Check the sheet, the badge and the tracker sheet on the player's view
• Resize the browser to different widths and check all above again
• Load all of the above on your smartphone and check again
• Go to Settings / Interface & Accessibility, and switch to a different theme for your article interface, then check the character sheet again. You may have to fix some CSS things that got overridden by the theme. Do this for all existing themes (only 3 right now)
• Contact Dimitris to publish the sheet as official
• If the sheet needs special includes like fonts, talk to Dimi to get it sorted