Markdown Template Variables
Dear guys, welcome to this tutorial! In this section, we will learn step-by-step how to use Markdown together with the Handlebars templating engine to achieve dynamic content display. In the previous lesson, "The Marvels of Markdown Blocks," you learned about the basic syntax, creation methods, and variable filling. Now, let’s dive into some advanced techniques with template variables.
1 Introduction to the Handlebars Templating Engine
After you create a Markdown block, you will find a "Templating Engine" option in the top-right configuration panel, with Handlebars set as the default. Handlebars helps you dynamically render page content based on conditions (such as statuses, numerical values, or options), enabling Markdown to respond to changes.
1.1 The Role of Handlebars
Although Markdown natively only supports static content, by using Handlebars you can toggle display text and styles dynamically based on conditions. This way, even in varying business scenarios, your page can always display the correct information.
2 Practical Scenarios
Let’s explore some practical scenarios and implement their functionalities step by step.
2.1 Handling Order Status
In an online demo, we often need to display different messages depending on the order status. Suppose your orders have a status field with the following statuses:
The display contents for the four statuses are as follows:
| Option Label | Option Value | Display Content |
|---|---|---|
| Pending Approval | 1 | Order submitted, awaiting internal review. |
| Pending Payment | 2 | Awaiting customer payment. Please closely monitor the order status. |
| Paid | 3 | Payment confirmed; please proceed with follow-up processing. The assigned consultant will contact you within one hour. |
| Rejected | 4 | Order not approved. If necessary, please review and resubmit. |
On the page, we can capture the order status value and dynamically display different messages accordingly. Below is a detailed explanation of how to implement this using if, else, and else if syntax.
2.1.1 If Syntax
Using an if condition, you can display content when the condition is true. For example:
In this case, "condition" should use Handlebars syntax (such as eq, gt, lt, etc.). Try this simple example:
The result is shown in the figures below:
2.1.2 Else Syntax
When the condition isn’t met, you can specify alternative content using else. For example:
The outcome is as follows:
2.1.3 Multiple Condition Checks
To check multiple conditions, you can use else if. Example code:
The corresponding effect is illustrated below:
2.2 Displaying Effects
After configuring the order statuses, the page will dynamically update to show content based on the specific status. See the image below:
The code for the page is as follows:
Try switching the order status to see if the page updates accordingly, and verify that your code works properly.
2.3 Displaying Order Details
Besides displaying the order status, order details (such as the list of product details) are common requirements. Here, we can use the each syntax to implement this feature.
2.3.1 Introduction to the Each Syntax
The each helper is used to loop through a list. For example, for the array [1,2,3], you can write:
Within the loop, {{this}} represents the current element, and {{@index}} represents the current index.
2.3.2 Product Details Example
If you need to display all product information from an order, you can use the following code:
If you notice that no data appears on the page, make sure the order items field is properly set up to be displayed; otherwise, the system may consider this part of the data redundant and omit querying it. You might also notice that the product name (this.product.name) isn’t printed. This is because, similar to the previous situation, we also need to display the product object. After it is displayed, we can hide the related field in the linkage rule settings.
2.4 Final Product: Order Product List
After completing the above steps, you will have implemented a complete template for displaying an order product list. Refer to the following code:
After running the template, you will see an effect similar to the image below:
To better demonstrate the flexibility of Handlebars, we have added the “Out of Stock” and “Low Stock” indicators in the order details:
- When out_of_stock is true, “Out of Stock” is displayed and the product row appears in red.
- When low_stock is true, a “Low Stock” note is shown in orange.
3 Summary and Recommendations
Through the explanation above, you have learned how to use Handlebars to achieve dynamic rendering in Markdown templates, including core syntaxes like if/else conditions and each loops. In practical development, for more complex logic, it is recommended to combine linkage rules, calculated fields, workflows, or script nodes to enhance flexibility and scalability.
Hope that by practicing these techniques, you will master them and apply them effectively in your projects. Keep exploring and discovering new possibilities!
If you encounter any issues during the operation, feel free to visit the NocoBase community or refer to the official documentation. We hope this guide helps you successfully implement user registration auditing based on your actual needs and provides flexibility for further extensions. Wishing you smooth usage and project success!