Generic JavaScript View

[KKERROXXX]

Hi everyone,

I need a help. At a point in my project I need to develop some code with javascript. I am trying to develop some functionalities with js in knime. What I want to develop;

1. When I click a radio button, a dropdown menu must be open at the same time,
2. When I select a value from dropdown menu, corresponding knimeDataTable must be filtered with this value and this table must be open in the same page,
3. Consider that there is a textbox, I want to add a button next to it that opens new textboxes as I press it.

Can someone helpme that how can I build above three thing in JavaScript View node?

Best,

[AlexanderFillbrunn]

Hi KKERROXXX,
I won’t be able to give you a full-fledged solution to your problem, but I can give you some pointers. From your post it is not quite clear what experience you already have with JS, so I will start with the basics. When you use the Generic JavaScript View node, there is no HTML field where you can enter the basic HTML scaffolding for your app. Instead, the HTML has to be inserted using JavaScript. In the simplest case, you can just set the innerHTML of the body element like it is done in the default code in the node. Here, just adapt this to insert your UI elements as HTML code. Styling can be done with the CSS box on the right of the Generic JS View’s config dialog. After adding the innerHTML, you can add event listeners to your HTML elements like so:

document.getElementById("myradiobutton").addEventListener("change", function(event) {
// Open the dropdown
});

Similarly, you can add click-event listeners to the items in your dropdown. For point number 3, it is best to use d3js, which you can enable at the top of the dialog. Here is an example for a TODO list made with d3. I think you can adapt this to your needs quite easily.
Kind regards,
Alexander

[KKERROXXX]

Thank you @AlexanderFillbrunn,

But, I need to ask a question I have added a radio button, but can’t add its value. How can I add a value to a radiobutton?

Best,

[AlexanderFillbrunn]

Hi,
Do you mean a text? You have to add a label to it like shown here.
Kind regards,
Alexander

[KKERROXXX]

Hi,

Yes. Is there a any requirements for using these input you mentioned.

Because when i write

Male
Female
Other</label

these code the generic javascript view returns an error. So, Is there any requirements for this?

Best,

[AlexanderFillbrunn]

Hi,
to have those 3 options, you need to add something like this:

body.innerHTML = `
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
`;

That should give you the radio buttons in the output.
Kind regards,
Alexander