Create Views

Create Views

After a package is imported, you'll want to set up views for your entries. The folder structure for views should look like this:

<BestiaryData>/<package namespace>/layout/preview/GroupName.hbs
""             ""                  ""    /view/GroupName.hbs
""             ""                 /scripts/GroupName.js
""             ""                 /style/partials/_partialFile.scss
""             ""                  ""   /preview/GroupName.scss
""             ""                  ""   /view/GroupName.scss

Files in the /preview/ folders determine how entries are displayed in the group list (or when linked to with a Handlebars {{view}} element). Files in the /view/ folders determine how a single entry is displayed when clicked.

The .hbs files are HTML files processed through Handlebars. The .scss and .js files also support Handlebars, but retain their original extensions.

When running from source, view files will be parsed to build a layout for each entry. However, this can be slow (especially for entries with many links) as Handlebars will fetch the entry's attributes from the database to populate the layout files. Once you've finished creating your layout files, they need to be compiled for general use.

Tips for Creating Views

The context passed to the root of each Handlebars pass is an object containing the selected entry (entry) and the current language (lang). To have quick access to the entry's attributes, you can set up your view files like so:

{{#with entry}}
<div id="{{bid}}">
    <!-- Content -->
</div>
{{/with}}

This way, the context will just be the entry itself while within the {{#with}} block.

---

Handlebars is a great way to create template views for each entry in your group. However, you may want to customize a particular entry beyond what Handlebars would normally allow for. JavaScript files can be added to the /scripts/ directory to add custom logic for your entries. You can add interactable elements, selectively show/hide parts of the layout, and much more.

---

You only need to create preview views for groups that either appear in the group list on the left side of the window, or are included as a {{view ... }} in another group's views. Also, you only need to create view views for groups that either appear in the group list on the left side of the window, or are included as a {{link ... }} in another group's views.