Switch your FlowFuse Dashboard nodes from `elementSizer` to `ffElementSizer`

Dashboard
1

Hi all, a heads-up for anyone creating or maintaining custom nodes for FlowFuse Dashboard (Dashboard 2.0).

FlowFuse Dashboard v1.35.0 deprecated $.fn.elementSizer and $.fn.elementSizerByNum. Use ffElementSizer and ffElementSizerByNum instead.

Why
Node-RED Dashboard 1.0 uses the same names and can replace them depending on load order. That leads to unexpected results in your node's edit dialog.

What you'll see
The old names still work. From v1.36.1 of @flowfuse/node-red-dashboard, Node-RED logs a warning, once per node type, when someone opens the edit dialog of a node that uses an old name:

[warn] [@flowfuse/node-red-dashboard] $.fn.elementSizer is deprecated and will be removed, use $.fn.ffElementSizer instead (used by "my-node-type")

In v1.35.0 and v1.36.0, the warning appears in the browser devtools console instead, once per page load.

How to fix
Rename the call in oneditprepare:

$('#node-input-size').ffElementSizer({
    width: '#node-input-width',
    height: '#node-input-height',
    group: '#node-input-group'
})

New in v1.35.0: when your node sits inside a subflow, the sizer shows Width, Height, and Order text inputs, so users can set them with ${ENV} subflow properties. This needs the group option.

Compatibility
ffElementSizer and ffElementSizerByNum only exist in FlowFuse Dashboard v1.35.0 and later. If your node switches to them, its edit dialog won't work for users on older versions. When you release the update:

  • Note the new minimum version (FlowFuse Dashboard v1.35.0) in your README and changelog.
  • If your package declares FlowFuse Dashboard as a peer dependency, raise it:
"peerDependencies": {
    "@flowfuse/node-red-dashboard": ">=1.35.0"
}
  • Consider a major or minor version bump for your node so users notice the requirement.

Full details are in the docs: Widget Size

The old names will be removed in a future major release, so now's a good time to switch. Questions and edge cases are welcome in GitHub Issues.

1 Like