Clear custom component's model

App Building
1

Hello,

I've been building a fairly complex custom component that's using React, AGGrid, and Material-UI, and so far I've had great success getting it to do everything I want it to do. I'm fairly familiar with the triggerQuery and modelUpdate methods that get passed in as well.

What I'm struggling with is a way to "clear" the custom component model, as in to set it back to an empty string such as when the application is freshly loaded, or when clicking the "Reset app state" menu option from the App Actions menu in the top right.

So far I've tried queries to set the model to an empty string, calling customComponent.updateModel({}) passing in an empty object, or trying to clear it from within the component itself... all to no avail.

I don't need to reload the iframe, simply need to clear the model such that when a user is done interacting with the component and closes it out, I can set it back to empty or null.

2

Hi @Myles_Dixon

I think it really depends on how you bind the model with other props.
If a model prop is mapped as

{
   prop: {{ query.data }}
}

I guess (not tried), no matter how many time you update the model imperatively, the final value will be the one defined in the model bound, isn't it?

3

It doesn't seem to be working that way, at least in practice.

For example, say my custom component has a model of

{
  "foo": "bar",
  "bar": "foo",
  "baz": 1,
}

calling myCustomComponent.updateModel({}) doesn't do anything to the model. I would expect that it would instead just set the model to {}

4

You're right, passing an empty object doesn't change anything but passing a populated object it does.

Tested with the default component, with a button that does:

customComponent1.updateModel({displayText:''})

So if you want to revert to default state, you have to pass the default state imperatively.

Hope this help

1 Like