34
Views
12
Comments
Solved
Block Event doesn't notify parent of data change until after client action resolves
Question

Using a Reactive App. There might be a better way in general to do this, I'm open to a better process or just a better solution.


I'm having an issue where I want to put a text area in a box and have it display on every seen.The problem is the text from that block needs to both be able to sent from the parent screen, and sent back from the block to update the parent before the screen changes.


In order to do this I created a client action that on parameter change, checks to see if the paramater that changed was the SendData parameter and if so fires the notify data change

The problem is this event succeeds, but in my current flow it only succeeds after the client action that changed the variable that called it finishes. That client action was the finish button client action which moved it to another screen. 


If I do something like this: (Ignore the error, I just put it back for demonstration purposes)

Debugging shows the parent variable be set, but only after the screen had transitioned to the policy info screen. Or in other words too late. I currently have it set up to split this into a different client action, but I'm not super happy about it. Any better options?

Solution

Hi Josh, 

Place the debounce widget after the input widget. The script that attaches to the input widget will run before the input widget is available in the DOM. Reversing its order fixes this. This, by the way, is valid for a lot of Forge widgets that interacts with DOM elements. 

Greetings,

Vincent

Hi Josh,

I would design this in a different way. I would not request the block to send information, I would configure the block to send information the moment the user changes data in the TextArea. That way the parent screen will always have the correct information at hand (be sure to implement Debounce to not overload your browser with updates).

However, should you still want to use your method that is also possible. The reason why the NotifyDataChange event triggers after the page transitions is because it's handled async. So your action updates a input property but doesn't know it needs to wait on it's completion. It just continues with the next step in your Action and that is Screen Transition. To solve this you need to perform the Screen Transition not your current Client Action but in the Action that is started by the event trigger. Let that somehow (by boolean orso) decided that it should not only update a local variable but also initiate the Screen Transition. Note that this will cause some mess in your code and that your co-workers or whomever will maintain the code after your done with it will have a hard time figuring this out.

So resume, I would go with my solution first and if that doesn't work only then I would look into something like you are already doing but then hardened for async behaviors.

Greeting,

Vincent

Hi Josh,

Glad to be able to help you. If you like to please mark my previous post as the solution so others can find it more easily. 

Also, if you like the debounce component be sure to give it a review!

Greetings,

Vincent

Rank: #2553

Hey Vincent, 


I seem to be having an issue because I am using a text area instead of an input. It looks like the JS for the debounce component is running var widgettype = widget.getAttribute('type')


I'm getting an error saying "Cannot read property getattribute of null"


Trying to think how to edit the JS to make it work for a text area

Hi Josh, I will also take a look at it. 

Hi Josh,

I have updated the component so that it now supports TextArea widgets: https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=8272

You should be able to update it in 5 minutes orso.

Greetings,

Vincent

Rank: #2553

Still seeing

Looks like in the update you are checking to see if the widget type is null after you already try to get the attribute of the null type


var widgettype = widget.getAttribute('type');

    

    if (widgettype === null) {

Rank: #2553

I tried it with an input and it didn't work either. Maybe an issue with it being on a block?

What do you mean with "On a block"? You need to bind it to the TextArea widget by naming the widget and then getting it's ID. You can find it with the expression editor.

I don't get the error you are showing on my demo page. Can you capture some screenshot showing how you implemented it? 

Demo page: https://vkoning.outsystemscloud.com/DebounceDemo/

Greetings,

Vincent

Rank: #2553

I tried it with an input just to see if it would work.

It seems like there may be an issue where the elements aren't being initialized in time. Or maybe I am doing something else wrong.

Solution

Hi Josh, 

Place the debounce widget after the input widget. The script that attaches to the input widget will run before the input widget is available in the DOM. Reversing its order fixes this. This, by the way, is valid for a lot of Forge widgets that interacts with DOM elements. 

Greetings,

Vincent

Rank: #2553

Well I'll be.


Who knew? Wish they had made that clearer in one of the trainings.


Thanks!