HTML Helpers for Dynamic Asset Paths in NetSuite

HTML Helpers provide a crucial mechanism for maintaining dynamic paths to assets in NetSuite, such as images and fonts that are vital for theme customization. Instead of relying on static paths, which can lead to broken links when themes are updated, using these helpers ensures that your assets are always accessible in the correct location, even after version changes.

What are HTML Helpers?

HTML Helpers are Handlebars.js functions that allow developers to reference assets dynamically within their HTML templates. When building themes, these helpers simplify the process of incorporating assets by automatically generating the correct paths based on the current theme or extension.

Why are Dynamic Paths Important?

When themes are activated or updated in NetSuite, the locations of their assets can change. For instance, when you deploy a new version of a theme, the associated assets might be relocated to a different directory within the NetSuite File Cabinet. If your code contains absolute paths pointing to these assets, it could easily break when path changes occur.

Recommended Practice

To avoid this issue, it is highly recommended to use the HTML helpers instead of absolute paths. This is considered a best practice because it significantly reduces the need for code alterations when moving or updating themes, leading to a more efficient development process.

Available HTML Helpers

Here is a list of the HTML Helpers you can use to ensure dynamic asset paths:

• getExtensionAssetsPath(default_value): Access pre-existing assets that come with an active extension.
• getExtensionAssetsPathWithDefault(config_value, default_value): Access extension assets, providing a fallback path if no configuration exists.
• getThemeAssetsPath(default_value): Access assets in your theme directory, including new and pre-existing assets.
• getThemeAssetsPathWithDefault(config_value, default_value): Return the configured asset path or a default if not set.

Example Usage

Below are examples showing how to use these helpers within an HTML template file:

getExtensionAssetsPath

To include an image logo from the active extension:

<img src="{{ getExtensionAssetsPath 'img/logo.png' }}">

This helper resolves to:

<FULL_PATH>/extensions/<VENDOR>/<EXTENSION>/<VERSION>/img/logo.png

getThemeAssetsPath

To reference an image from the theme:

<img src="{{ getThemeAssetsPath 'img/logo.png' }}">

It resolves to:

<FULL_PATH>/extensions/<VENDOR>/<THEME_NAME>/<VERSION>/img/logo.png

Conclusion

Using HTML helpers to manage your asset paths in NetSuite themes not only streamlines the development process but also ensures consistency and reliability across theme versions. Always implement these helpers to minimize issues related to asset accessibility during theme updates.

Key Takeaways

• HTML Helpers maintain dynamic paths, preventing broken links during theme updates.
• Avoid using absolute paths; instead, utilize helpers to ensure flexibility.
• Familiarize yourself with each helper's purpose to streamline asset references in HTML templates.