API: Register Item Details Tab section

[kgar]

Handlebars injection

The first and most significant offering for this API function is handlebars support. Handlebars templating should provide all the features one would expect if they were rendering a template and injecting by hand.

• access to item sheet, the sheet HTML element, and item sheet context
• conditional logic and re-rendering on actor change
• submission on input changes

Minimal example

Here is a minimal example that injects your handlebars template into a custom container within all items' details tab:

Hooks.once('tidy5e-sheet.ready', async (api) => {
  api.registerItemDetailSection({
    content: new HandlebarsTemplateContent({
      path: `modules/${CONSTANTS.MODULE_ID}/templates/my-section-of-item-stuff.hbs`,
    }),
  });
});

Limit your content to specific items, under specific circumstances

Here is an example which limits your additional content based on what item is being rendered:

Hooks.once('tidy5e-sheet.ready', async (api) => {
  api.registerItemDetailSection({
    content: new HandlebarsTemplateContent({
      path: `modules/${CONSTANTS.MODULE_ID}/templates/my-custom-item-content-template.hbs`,
    }),
    // 👇 Only show this content if we're dealing with a spell that is among the `areaTargetTypes`
    enabled(data) {
      return (
        data.itemType === 'Spell' &&
        data.system.target.type in CONFIG.DND5E.areaTargetTypes
      );
    },
    // 👆
  });
});

Adjust context data for your module

Hooks.once('tidy5e-sheet.ready', async (api) => {
  api.registerItemDetailSection({
    content: new HandlebarsTemplateContent({
      path: `modules/${CONSTANTS.MODULE_ID}/templates/my-custom-item-content-template.hbs`,
    }),
    // 👇 `data` is the ItemSheetContext object provided by the default dnd5e sheets
    // 👇 if your module needs to put some extra data in here, this is the place to do it
    onPrepareData(data) {
      data.secretKgarMessage = '🤖';
    },
    // 👆
  });
});

Wire custom events, make any final preparations on render

The render lifecycle with Tidy 5e Sheets is somewhat different from the traditional FormApplication / Handlebars-based application. As a result, the typical render hooks are rarely invoked. For this reason, this API offers you an onRender callback whenever your content is re-rendering. With this said, all injected content will be targeted for re-render as often as it would in a normal FormApplication.

Here is an example of writing some data to the console and wiring a custom event on a button in my custom item content template:

Hooks.once('tidy5e-sheet.ready', async (api) => {
  api.registerItemDetailSection({
    content: new HandlebarsTemplateContent({
      path: `modules/${CONSTANTS.MODULE_ID}/templates/my-custom-item-content-template.hbs`,
    }),
    onPrepareData(data) {
      data.secretKgarMessage = '🤖';
    },
    onRender(args) {
      const appId = args.app.appId;
      const classList = args.node.classList;
      const secretMessage = args.data.secretKgarMessage;
      console.log(
        `App ID ${appId} | item ${args.data.item.name} | With classes ${classList} | Secret Message: ${secretMessage}`
      );

      // ⚠ only alter the HTML you are injecting, because rendering works differently on these sheets
      $(args.node)
        .find(`[id="kgar-secret-message-button-${appId}"]`)
        .on('click', function () {
          alert(secretMessage);
        });
    },
  });
});

[kgar]

Great talk, everyone 🤣😭
I iterated on these ideas quite a bit and have settled on what I think is a good start. I took the polymorphic route, so there can be future tab classes that represent different things, from other web tech to newer versions of existing tab types. Coming soon...
Closing discussion...