Our Module has an API for our data layer and we are injecting a button into an existing UI element. The last (large) piece of the puzzle is our new UI for interacting with ToDo lists. To make this we'll need three things: A FormApplication subclass which gathers our data for a Template, and which handles the logic for interacting with that template. A handlebars template which displays the information and controls that the FormApplication gathers/handles. Styling, because what's the point if it's not pretty? It's easiest to work in steps, so let's start by making a rough window which displays the current ToDos for the logged in user. We'll get around to adding and editing them next.

Congratulations! You've created a module which can CRUD ToDos for each individual user. This is as far as this tutorial will take you. If you'd like to see/download the entire result of this tutorial's code in one place, you can do so in this repository. You now have interacted with a lot of the major facets of the Foundry VTT public API which form the backbone of any Module: Hooks Flags FormApplication Dialog Settings Handlebars

We could stop here, we have a pretty solid module and we've touched on the following aspects of the Foundry VTT API: Manifest JSON Hooks Localization Flags FormApplication Handlebars CSS

So you want to make a Foundry VTT Module but you're not sure where to start? This tutorial will start at the very beginning and end with a working module, explaining as much as is feasible to explain along the way. How to read this tutorial This tutorial works best as a start-to-finish step-by-step journey into module making. It will walk you through each part of the process, including some purposefully wrong steps to demonstrate how to debug things when they do not work. As a result, if you copy and paste directly from some examples without the context, things might not work. What we'll be building Here's the elevator pitch:

Planning the UI Here's what we're hoping to end up with: Add a button to the Player List entry for our user which when clicked, opens a window with all of our user's todos. From that window, allow the user to create, edit, and delete ToDos. I. Finding the right Hook Foundry has a system of Hooks which allow modules to safely interact with events in the Foundry ecosystem. One such hook happens when any given UI element is rendered. We should toggle Hook debugging on and take a look to see if one for the Player List exists. With the Developer Mode module, this is as simple as opening the Dev Mode Settings and enabling CONFIG.debug overrides, and then the Hooks debug flag.

This is the basic shape of what we're going to end up with. class ToDoListData { // all todos for all users static get allToDos() {} // get all todos for a given user static getToDosForUser(userId) {} // create a new todo for a given user

There's a bit of up-front work we can do to make our lives easier going forward. I. Create a Class for our Module There's some base logic and constants which we can define in a central location that will make our lives easier. In our todo-list.js file, we should define a ToDoList class: class ToDoList { static ID = 'todo-list';

A lot of this first step is very similar to the official knowledgebase article: Introduction to Module Development I. Find your userData directory Navigate to your Foundry Installation's userData directory. This directory is set during the Foundry installation process and varies depending on how you run Foundry. If you are using the standalone foundry application on Windows (aka the Electron app), you can right click on the taskbar icon and select "Browse User Data" to get there. II. Create your Module Directory Create a new directory under Data/modules. Let's name this directory todo-list.

Let's take a step back and think about the structure of what our todo-list module should look like when it's done. I. ESModules vs Scripts There are two ways we can tell Foundry Core about a module's javascript files in its Manifest: "scripts" and "esmodules". There's a lot of philosophical difference between these approaches but we're going to focus on the practical here. Practically speaking, the difference comes down to the scope in which your script is run. :::info Programming Concept: Scope

One at a Time Introduction Getting Started Planning our Module Setting Up Writing the Data Layer Starting the UI: HTML Injection Making a FormApplication Interactivity

So far we've created a data layer, injected a non-functioning button, and created a FormApplication which only displays ToDos but does not edit them. It's time to bring it all together with some interactivity. I. Make the button open our ToDoListConfig There's two things we need to do to make ToDoListConfig openable. First we need to instanciate it, which is a fancy way of saying "create in memory." So far we've defined ToDoListConfig but we haven't told the browser to actually use it. ToDoList.initialize Back in our ToDoList class, create an initialize static method:

This page has every other page embedded within it. It's easier to search but some of the formatting is going to be worse, some elements repeated, etc. {%hackmd F4CFuxqZSTOcqgixEf9M6A %} {%hackmd Ti7X9dG_TcexHNw3SVsDKQ %} {%hackmd wD56bD86RouILe7PguHazg %} {%hackmd ojFSOsrNTySh9HbzTE3Orw %} {%hackmd hxB4-nbQRCyPDbPCsqTupw %} {%hackmd yBOfhOcuQJKoH0MitG9mhg %} {%hackmd NBub2oFIT6yeh4NlOGTVFw %} {%hackmd yatbVbgzSxSMqHl5qoegpA %}

License Information & Attribution Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution-ShareAlike 4.0 License, and code samples are licensed under the Unlicense (text below). Provide attribution to Andrew Krigline, aka "Calego". This is free and unencumbered software released into the public domain. Anyone is free to copy, modify, publish, use, compile, sell, or distribute this software, either in source code form or as a compiled binary, for any purpose, commercial or non-commercial, and by any