This page breaks down a lot of the differences of the new Design Manager modules compared to the old modules. This is for developers that previously used old version of the Design Manager, and the old modules, so they can get up to speed more quickly.
- Modules now have an immutable numerical ID. This allows module builders to change the name of a module without having to change references to the module in template code.
- Modules are designed to be self-contained and include all CSS text, JS text, and file asset references.
- v2 Modules are wrapped in divs, unlike v1 modules which are wrapped in spans.
- widget has been renamed to module in HubL for consistency with the UI. Both terms will continue to work, but module will be used in all documentation.
- CSS should now be written into the module CSS in the code editor or linked via the Linked files section of the Inspector.
Additions to existing field types
New field types
|Number field||A spinner style text field that only supports decimal or integer values.||
|Date field||Selects a date. The value is stored as milliseconds since the epoch at midnight UTC on that date.||
|Date and Time field||Selects a date and optional time. The value is stored as milliseconds since the epoch in UTC.||
|CTA field||Selects a CTA. Required for CTA module.||
|Blog field||Selects a blog from the portal's list of blogs. Required for Blog Email Subscription, Post Listing, and RSS Listing modules.||
|Tag field||Selects a blog tag from the portal. Required for RSS Listing module.||
|Form field||Selects a HubSpot form. Required for Form module.||
|Color field||Picks a color.||
|Page field||Selects a published website or landing page. Required for form module.||
|Workflow field||Selects a HubSpot workflow. Required for form module.||
|Followup email field||Selects a follow-up email.||
|Font field||Selects a Google font.||
|Email address field||Autofills with email addresses from portal users, but also allows any other valid email address. The value is a list of strings.||
|File field||Similar to the image selector, but allows selection of other file types from File Manager. Useful for picking a PDF or image to link to. The picker attribute allows selecting files of certain types.||
|HubDB table field||Selects a published HubDB table to associate with this module.||
|Simple menu field||Allows creation of a local simple menu.||
|Menu field||Selects a menu from the portal's menu.||
|Meetings field||Selects a meeting from the portal's meetings||
|Logo field||Allows selection of a logo||
|Icon field||Allows selection of an icon||
|URL field||Allows selection or input of a URL that points to an external page, HubSpot content, a HubSpot-hosted file, an email address, or a HubSpot blog.||
|Link field||Allows selection or input of a URL that points to an external page, HubSpot content, a HubSpot-hosted file, an email address, or a HubSpot blog. Also includes booleans for "Open link in new window" and "Tell search engines not to follow this link."||
To keep module rendering simple, the new module framework does not allow complex HubL such as nested modules and includes in the custom module source.
The following tags are not available:
These functions are not available:
New modules created with these tags or functions will fail to publish.
- Punctuation in field
- Boolean as a string
- Same value in Choice fields
- Duplicate field name
Modules are allowed to contain supported HubL tags which render static versions of modules. However, the
overrideable attribute is always considered
False, even if specified as True in a module, as sub-modules generated by tags will not be editable in the content editors. Likewise the
export_to_template_context parameter is not available inside of custom modules.
Several updates and additions have been made to module variables.
Existing variables that are no longer supported:
- module (also available as widget for backwards compatibility)
- name (formerly parent_custom_widget_name)