Skip to Content (Press Enter)
2020-07-15 15-02-03
anadorotea
205Views
4Comments
Best way to refresh a div in one web block when an input parameter change
Question
Traditional Web

Hi.

So i have 2 blocks that have the same parent block. Let´s called block1 and block2, i need to pass info from block1 to block2, but when i do that i don´t want to lose the info that i already have in block2. In reactive, we have the OnParameterChange, but in Traditional we don´t. Do you know how to create something identical? because if i use "Ajax Refresh"  when the event on block1 occurs, i lose all the info. 

0
0
24 Jun 2022
Copy Link
2025-10-09 15-40-22
Craig St Jean
Staff

Hello Ana,

For traditional web, the typical practice would be to use the Event System Forge component (https://www.outsystems.com/forge/component-overview/597/event-system)

You could also consider using JavaScript to pass the information, but that is less ideal.

I'll see about putting together a sample. 

0
0
24 Jun 2022
Copy Link
2020-07-15 15-02-03
anadorotea

Hi.

I can´t use components from Forge, don´t have permissions for that. Do you mind explain me how to do that with JS?

Thanks

0
0
24 Jun 2022
Copy Link
2025-10-09 15-40-22
Craig St Jean
Staff

Replying to anadorotea's comment on 24 Jun 2022 16:35:45

That's unfortunate, the Forge has a lot of very valuable and useful components.

This example here uses blocks, passes first name from block 1 to block 2, uses no Forge components and no JavaScript and does not refresh the data in Block 2.

I wonder if your Block 2 data is being cleared by your Preparation?

BlockExample.oml
0
0
24 Jun 2022
Copy Link
2025-10-09 15-40-22
Craig St Jean
Staff

Replying to anadorotea's comment on 24 Jun 2022 16:35:45

Here is an updated example that shows 2 ways of doing it. Sorry, my Traditional Web is a bit rusty ;)

  • Screen1 - Updates Block2 from Block1 with no extra JS and no Forge components without losing data in Block2
    • Block1 has an Event that passes its updated structure to the parent, which is called on each of the inputs' on change
    • Screen1 listens for this, and does an Ajax Refresh of Block2
    • Block2 takes an input parameter of an input from Block1, and its Preparation sets the appropriate field
  • JSScreen1 - Updates Block2 from Block1 but by using JS
    • I created 2 JS functions at the module level - WatchField and UpdateField
    • JSBlock1 calls UpdateField when first name is modified
    • JSBlock2 calls WatchField when it loads and adds a listener for an update to first name. When it is invoked, it changes the textContent of the first name expression

I strongly advise you do not go the JS route. It is cumbersome and adds way more complexity that needed. If your Block2 needs to do things in its Preparation, maybe consider adding some conditions to see if that block has already been initialized.

Hope this helps

BlockExample.oml
1
0
24 Jun 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.