React Widget type=action property does not work when parameter is given on microflows/nanoflows

1
Hello there, I'm making a React Widget which is as good as finished, except for one problem. In my XML file, I have this <property key="onClickAction" type="action" required="false">                 <caption>On Click</caption>                 <description>Determine what happens when you click</description> </property> When clicked, it executes the selected action. This works, except for when you add a parameter (the widget is placed in a data view). I noticed the 'canExecute’ flag is false when the parameter is applied and the microflow/nanoflow won't execute. Any ideas?   I noticed this table where it says ‘Retrieve additional data over associations, microflows, or nanoflows: Planned’, but I’m not sure this is  the exact case. Would be nice to get some confirmation on it, so I know where the problem is.   Greets, Jurian
asked
3 answers
1

Hi Jurian, I analyzed your code.

 

First of all, congratulations! You are using Hooks!

Second point, function component in general is really nice, the downside is you cannot control re-renders with properties if you don't track it. In your particular widget you are using useEffect with a listener attached to the dom. The problem here is:

- If you are using dynamic context (in this case DataView), you will receive a re-render as soon as the properties are ready to use. But as you already attached the listener to the dom with the "componentDidMount" aka 'useEffect with no deps' it will not track the new prop and always will attach the old property.

My suggestion is: track the properties in ActionByKeyComponent to check if the action is already available (canExecute) and then attach to the dom. Or in the main component (ActionByKey) just render ActionByKeyComponent when you receive the property ready to execute (canExecute).

 

If you have further questions or you are curious to see how we implement Pluggable Widgets at Mendix, check our mono repo.
https://github.com/mendix/widgets-resources

answered
1

Hi Jurian, i was checking this situation with the team responsible for the Pluggable Widgets API and it seems that your parameter is not available for the microflow or nanoflow. We can test it better if you provide in any way this project for us, or a reproducible case.

 

Thanks a lot
Diego
Widgets Team

answered
0

Hi Diego,

Thanks for your reply! The comment I posted got messed up, because of the formatting so I thought let's write it as an answer.

Love that you use React at Mendix. I noticed the version updated to 16.8 lately, so I could use hooks.

You were right about the useEffect. It does not re-render as the props change, and for the useEffect, you have the optional parameter:

useEffect(() => {//code//}, [//parameter//]);

Reading your answer, I remembered I should have added the props in there like this:
 

useEffect((): void => {

    document.addEventListener("keydown", isKeyCode, false);

}, [onPressKey && onPressKey.canExecute]);

Now it's working perfectly! Thanks so much for your reply, have a nice day!

Greets, Jurian

answered