node-red / node-red/node-red.github.io

Creating your own Node - where to add TypedInput on('change') event handlers

Open
#332 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
118
Forks
161
Avg merge
8h 18m
Merged PRs (30d)
4

Description

This issue is to suggest a couple of areas where documentation could be improved. Documentation is otherwise very good.

I haven't been able to find documentation for when in time to add a function to watch for change events as documented here. For example, to show/hide or enable/disable an HTML element based on a value of one of the Node properties.

Adding this within oneditprepare does not work ...

    $('#node-input-instruction').on('change', (event, type, value) => {
      if (value === 'turn_on') {
        $('#node-wrapper-speed').typedInput('enable');
        $('#node-wrapper-timeout').typedInput('enable');
      } else if (value === 'turn_off') {
        $('#node-wrapper-speed').typedInput('disable');
        $('#node-wrapper-timeout').typedInput('disable');
      }
    });

... because you get an error since you can't call the typedInput function this early. Is there an official/recommended callback we should be using for once the UI has been setup (added to the DOM, or whaterver work you do)? In the meantime, I am setting hide/show directly on various elements, rather than using typedInput().

Can the documentation in Node Properties and/or TypedInput Widget be updated to make this easier to understand, to provide examples of method calls? Or maybe I've just missed something in the documentation.

If I am confused, maybe others are as well (or maybe they are better at reading documentation).

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review docs/creating-nodes/properties.md under “Custom edit behavior” and docs/api/ui/typedInput/index.md around “Methods” and “Disable state.” Compare the documented TypedInput change-event timing with the oneditprepare example in the issue. Done means the documentation explains when handlers may call TypedInput methods and includes a working example.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.