Custom Widget Props doesn't let me change values on runtime

Support, Troubleshooting, & Help
, ,
1

Hi,

I have a custom widget created using NATs library, I have posted a question regarding this library last week- NATs Library

I have successful able to create the custom widget which which is able to connect with NATs server and subscribe to a subject and read data and publish data back to the subject.

However, when I try to subscribe and publish at the same time I am facing issue with props input.

I have one prop defined as a subjects to subscribe and other two message and messagesubject to publish data back.
When I say connect and subscribe it widget is working fine, widget starts and I can see messages in preview window.
But when I add new message and messagesubject in input box to publish it is getting overwritten back to previous value.
E.g, if message = 3.4 and I change it to 3.5 while subscription is on, value 3.5 automatically gets overwritten by previous value 3.4.

Is it the prop behavior in custom widgets which is not allowing me to add inputs at runtime?

2

Hi there,

It sounds like the widget is resetting message and messagesubject every time new data arrives because props only flow from the app into the widget. When Tulip re-renders, it sends the last stored values back, which overwrites anything you type during runtime.

Try this:

  1. Remove any setValue() calls on message or messagesubject inside your subscribe callback.
  2. Store incoming data in a local variable such as let liveMsg.
  3. When you publish, run your NATS publish() call, then fire fireEvent('Published', {msg: liveMsg}).
  4. Create a Trigger on the Published event to write the payload into an app variable or table.
  5. If you need to show the published value, pass that app variable back into the widget through a separate prop.

Props act like read-only inputs, while events are the path to send data back to the app. Keeping publish data in local state prevents Tulip from overwriting your input during the next render.

Reference: Custom Widgets Overview

Let me know if that clears it up or if you need a code example.

3

Hi @nicolo.lagravinese I don’t have any setValue() in my code on message or messagesubject in my subscribe callback.

This will help, if you could give me any example code. I have tried few things, but they are not working

4

Hi, thanks for clarifying the overwrite issue when you type a new message.

Props only travel into the widget. Each render sends the stored prop values back, so anything you type during runtime is lost.

  1. Store live NATS message in a local variable, not a prop.
  2. Publish with that variable; avoid writing it back to props.
  3. Fire Event ‘Published’ with the sent value.
  4. App Trigger writes value into an app variable or table.
  5. Send that variable back to the widget through a display prop.

Here is an example skeleton

// props: subjects, messagesubject  (text)
// event: Published {value}

import { connect, StringCodec } from 'https://cdn.skypack.dev/nats.ws';

let liveMsg = '';

(async () => {
  const nc = await connect({ servers: getValue('natsUrl') });
  const sc = StringCodec();

  // subscribe
  const sub = nc.subscribe(getValue('subjects'));
  (async () => {
    for await (const m of sub) {
      liveMsg = sc.decode(m.data);   // hold data locally
    }
  })();

  // expose publish
  widget.on('Publish', () => {
    nc.publish(getValue('messagesubject'), sc.encode(liveMsg));
    fireEvent('Published', { value: liveMsg });  // send to app
  });
})();

Props act like read-only inputs; events and local variables keep your runtime edits safe.

Docs

Give this pattern a try. If it still resets, please share a minimal code snippet plus your Player version so we can dig deeper.

5

let me try this out and I will get back to you!