typedInput multiple checkBox list

Core Development
1

Hi all, I am attempting to make a dropdown checkbox list for a contrib nodes option ui.

I have sped a good deal of time trying to make it look part of node-red & went to the source of typedInput (packages\node_modules\@node-red\editor-client\src\js\ui\common\typedInput.js) for style references - low and behold in the typedInput src i see...

if (opts.multiple) {
  cb = $('<input type="checkbox">').css("pointer-events","none").data('value',opt.value).prependTo(op).on("mousedown", function(evt) { evt.preventDefault() });
}

... seems to support check box list?

I have tried for a couple of hours ...

$list.typedInput({default:["options"], types:["options"], type:choiceArray}, {multiple:true});

$list.typedInput({default:"options", types:["options"], type:[{value:"opt1",multiple:true]});

$list.typedInput({default:["options"], types:choiceArray, {multiple:true});

...and about 10 other attempts - but cannot seem to get it right. :frowning:

I've tried searching node-red source for typedInput & multiple but cant find any examples.

I've tried searching the forum for typedInput & multiple but cant find any examples.

I've checked documentation too

anyone have a snippet I can borrow please?

2

I don’t have code at hand, but have you checked the code for the catch and status nodes? I last read it half a week ago and I think I remember it being an editable list too.

1 Like
3

The multiple choice option is used in the subflow properties UI where you can pick what type of input is displayed for a given property.

1 Like
4

Thanks Nick (and @afelix)

Just found it 5 mins ago & got it working.

image

2 Likes
5

Last problem.

Scenario

  • When building the rows in an editableList - each row has 1 dropdown and 3 typedInput widgets.
  • At runtime, when the dropdown is changed, the typed widgets need to be shown/hidden accordingly
  • This means I need to be able to address the actual typedInput to call show/hide functions.

The problem

It seems the invocation of typedInput doesnt return a reference to the newly created typedInput, nor do custom classes get applied - making it somewhat difficult to show/hide the typedInput

the question(s)

  • Is it possible at invocation to specify a class (or ID) (for later access to the typedInput via a selector)
    or
  • Is there a function or call to the widget available to retrieve the associated typedInput?

Additional info & stuff I've tried...

After instantiating a typedWidget I try to show() / hide() it but it doesnt work as the instance/object returned from the invocation of the typedWidget is the original <input>.

The only workaround I have found is clunky (below is a handful of things I have tried and finally the workaround on the last line) ...


var payloadField = $('<input/>',{class:"node-input-payload",type:"text",style:"margin-left:7px; width:calc(23% - 16px);", placeholder: 'payload', value:option.payload || ""}).appendTo(div);

// $("node-input-payload")  refers to the original payloadField input 

var payloadTypedInput = payloadField.typedInput({default:'str',types:['flow', 'global', 'str', 'num', 'bool', 'json', 'bin', 'date', 'env']});

// payloadTypedInput === payloadField  - meaning I dont have a ref to the typedInput
// PROOF: payloadTypedInput.is(payloadField) returns true :(

// So the next line actually adds the custom accessor class to the input not the widget.
payloadTypedInput.addClass("a-class-name-i-can-use-later-for-accessing-this-widget") 

// payloadField.typedInput().option is null 
// payloadField.typedInput("option","class", "my-class") doesnt work
// payloadField.typedInput( "option", "classes", "my-class" ) doesnt work
// payloadField.typedInput( "option", "css", "my-class" ) doesnt work

//Finally, the workaround - access the sibling div
var actualTypedInput = payloadField.find("+ div.red-ui-typedInput-container")
actualTypedInput.addClass("a-class-name-i-can-use-later-for-accessing-this-widget")

I have noted in the JQuery widget factory documentation, you should be able to add classes at widget creation time so I tried...

var payloadTypedInput = payloadField.typedInput({
  classes: { "red-ui-typedInput-container":"node-input-payload-typed-input" },
  default:'str',types:['flow', 'global', 'str', 'num', 'bool', 'json', 'bin', 'date', 'env']
});

... but that doesnt work (or likely, I'm doing it wrong).

I'm likely missing something simple here - anyone know how to handle this scenario better than retrieving the widget via a sibling selector?

6

ok, I found it by accident

after much ado, showing and hiding a typednput is as simple as ...

payloadField.typedInput("show");
payloadField.typedInput("hide");
7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.