Editing Templates for the Units of Measurement Repo

After you've defined your types and begun to commit instance data, it's important to define the presentation of these data. First, we'll review the data available to you in order to configure the the way your instance appears, both on the specific pages of the instance data, and on the aggregate summary views. Then, we will cover how the same principles can be applied to editing the ReadMe page of your repo.

Because all of your types have different properties, there is a configurable template for each type which you have defined in the repo. By default, WarmHub automatically generates a template for each type based on its properties, which you have previously seen on the pages for instance data in the Units of Measurement Repo walkthrough.

Accessing the Template Editor for Instance Data

First, go to the "Data" section of your repo. We will begin on the "Kilogram" instance.

At the top right of the instance page, there is an "Edit Template" button accessible to the owner of the repo. Click on this button to take you to the template editor for the type of instance we are currently on. You will be presented with the following screen:

The top bar contains some controls for switching between the full and summary template, and saving and discarding our changes. If you click "Close," you will be sent back to the instance page. For now, we will stay on the "Full template" tab, and we will cover summary templates at a later time in this guide.

Below is the main portion of the editor, which contains some controls, an area to edit the markdown template, and an area to preview what the template would render as.

Using the Editor

The underlying language of these templates is the markup language called Markdown. On top of this syntax, WarmHub offers several components which are useful for showing object properties and relationships between your instance data. These are notated in the same form as Nuxt MDC.

Basic Markdown

Currently, the Markdown input box is disabled. This is because it currently reflects an automatically generated template based on the properties of your instance. The default template also includes lists and visualizations of relationships between instance data you have committed to WarmHub.

To customize the template, click "Edit Markdown." This enables the input field in the Markdown input box. A live preview of your template is tiled with this input field by default.

Click into the template editing box and delete the whole template. Don't worry: you can reset your template to this default at any time. Replace the content with the following:

# You can use most Markdown features in this template.

Now, the editor should look like this:

Notice that the preview panel now contains the text you've entered as a first-level heading. This is notated by the single # in front of that line. Furthermore, a star appears next to the "Full template" tab. This notates that you have unsaved changes in your template. After clicking "Save," the star will disappear.

Binding Data

Next, add ### This is a Kilogram, which is a unit of Mass into the template. Your editor should look like the following, and you can click "Save."

Then, navigate back to the "Data" page, and click on "unit/Kelvin" to navigate to the instance page for the Kelvin unit.

As you can see, the text we entered in the previous step is statically interpreted on all pages of the Unit type. This means that each of the pages for the other instances of Unit (such as Ton and Gram) would render the text "This is a Kilogram, which is a unit of Mass" as well. We will fix this by binding data into the template.

When rendering the templates, data can be dynamically bound to the content. Each template is rendered with the properties and type information about its corresponding instance.

Click on "Edit Template" on this page to return to the template editor. Reminder: even though the template currently says "This is a Kilogram," we should be on the page for Kelvin. Then, click on "Show Repo Data." The right panel will then switch from the preview of the rendered template into a block containing all of the data available at this instance formatted like a JSON object.

At the top, we see fields which may be useful to us. Instead of writing out the string literal "Kilogram" and "Mass", we can bind the values to instance.$id and instance.PhysicalProperty , respectively. Directly in the markdown, we use whisker notation to refer to data: {{ path.to.data }}.

Click on "Show Preview," and then replace the line beginning with ### with the following line:

### This is a {{ instance.$id }}, which is a unit of {{ instance.PhysicalProperty }}

Now, your preview should look like the following:

You can bind any other field by indexing any structure in the data view using dot notation.

Now, click Save, and you'll see that on any Unit page, the template will correctly show the name and the physical property of the unit.