# typedInput multiple checkBox list

**URL:** <https://discourse.nodered.org/t/typedinput-multiple-checkbox-list/27276>\
**Category:** Core Development\
**Created:** [25 May 2020 18:30 UTC](https://discourse.nodered.org/t/typedinput-multiple-checkbox-list/27276 "2020-05-25T18:30:43Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 May 2020 18:30 UTC](https://discourse.nodered.org/t/typedinput-multiple-checkbox-list/27276/1 "2020-05-25T18:30:43Z")

</div>

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...

```auto
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 ...

```auto
$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. ☹

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](https://nodered.org/docs/api/ui/typedInput/) too

anyone have a snippet I can borrow please?

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [25 May 2020 18:59 UTC](https://discourse.nodered.org/t/typedinput-multiple-checkbox-list/27276/2 "2020-05-25T18:59:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [25 May 2020 19:54 UTC](https://discourse.nodered.org/t/typedinput-multiple-checkbox-list/27276/3 "2020-05-25T19:54:43Z")

</div>

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.

> <https://github.com/node-red/node-red/blob/ad78ce0eb641267d3242dacf8770addfca63091b/packages/node_modules/@node-red/editor-client/src/js/ui/subflow.js#L1079>

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 May 2020 20:13 UTC](https://discourse.nodered.org/t/typedinput-multiple-checkbox-list/27276/4 "2020-05-25T20:13:08Z")

</div>

Thanks Nick (and @afelix)

Just found it 5 mins ago & got it working.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dcce7bc1f15c578841368ff243264d5db9c690bc.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 May 2020 09:43 UTC](https://discourse.nodered.org/t/typedinput-multiple-checkbox-list/27276/5 "2020-05-26T09:43:19Z")

</div>

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) ...

```javascript

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](https://learn.jquery.com/jquery-ui/widget-factory/classes-option/) at widget creation time so I tried...

```auto
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?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 May 2020 11:13 UTC](https://discourse.nodered.org/t/typedinput-multiple-checkbox-list/27276/6 "2020-05-26T11:13:57Z")

</div>

ok, I found it by accident

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

```auto
payloadField.typedInput("show");
payloadField.typedInput("hide");

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [25 July 2020 11:14 UTC](https://discourse.nodered.org/t/typedinput-multiple-checkbox-list/27276/7 "2020-07-25T11:14:08Z")

</div>

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