Link does not trigger when clicked if they have a WebBlock inside with links

Link does not trigger when clicked if they have a WebBlock inside with links

  

Cheers...

Like I said in the title, a link (and a container's onclick for that matter) will not trigger if they have a webBlock inside of them, and you click the webBlock. I was hoping that the click inside the webBlock would propagate outside, so that I could react to it. The WebBlock is already being used in other places, so copying it's contents would be ill-advised. If the WebBlock only has containers and text, then all is good, the onClicks happen alright. But when it contains link, suddenly it stops working. 

http://jsfiddle.net/p6ocm0yw/

This is an example of what I want. If you click "Cheers", both "Cheers" and "Hurrah" will trigger.

If it was possible, I would like to only use Outsystems, and no forge, but I have no problem in using either of them, it's just hard for maintenance to keep an eye on dozens of invisible buttons that I'm guessing the Javascript or Forge will require.

Thank you for your time.

Cheers Tim,

Although I thought I had a OnNotify in every WebBlock that formed the path, I didn't, and so, one specific WebBlock did not propagate the notification. And that 1 webBlock (in about 15) was what I was using. Thank god I'm an idiot. :( 

Anyway, thank you so much for your reply. I would like to mark your answer as correct, but I can't see it. Edge, Chrome and Firefox, I tried all of these. Hell, I can't even type Enter or Tab now without having the page do a pageDown. I'm typing this on gVim. I'll come back in a day or two to try to mark your answer. For every one with a similar problem, I'll give you a short version.


WebBlock A (OnNotify: LOGIC HERE)

      WebBlock B is inside of A

         WebBlock C is inside of B


I'm already using B in at least 2 places. And I want to, in this specific page, not the others, catch a user click on the WebBlock C. C cannot really exist without B, B draws C the appropriate amount of times with the correct Ids, so, cutting the webblock B is a no-no.


I thought I had:


WebBlock A (OnNotify: LOGIC HERE)

    WebBlock B is inside of A (When notified, notify A)

           WebBlock C is inside of B(When clicked, notify B)


But I didn't. Note however, this doesn't fully solve the problem. 

If C has a link with Navigate for instance, and that link is inside a container with onClick, the link does not run, but the onClick does. 

Because of this, I had to change the Link's method to Submit, and do both of the Notify and the Navigation inside. No, it is not very intuitive. It receives a parameter to tell wether it wants to redirect or to notify. But both of these must be in the same action. 

Like I said, I could not put another webblock, remember, I need the B webblock in between. If I were to replicate it, a massive code duplication would occur. 

My solution was to have both notify and the logic of C inside the same action, called by the link. Were it not for the boolean parameter, it would do both navigate and notify, but navigating to another page would case the effects of the notify to be lost. 

Again, thank you Tim. 

Thank you for your time.


Hi Christian,

From what I can read, you might be able to address that in a more generic way by using solely JavaScript to handle onclick events (via the Extended Property) and working with the JavaScript event propagation mechanism... bubbling vs. capturing.

That being said, your scenario seems quite... peculiar from a user-experience perspective, when users see a link they're expecting a certain behaviour... and hijacking that behaviour tends to be counterproductive. Can you explain what's your goal here?

Jorge Martins wrote:

Hi Christian,

From what I can read, you might be able to address that in a more generic way by using solely JavaScript to handle onclick events (via the Extended Property) and working with the JavaScript event propagation mechanism... bubbling vs. capturing.

That being said, your scenario seems quite... peculiar from a user-experience perspective, when users see a link they're expecting a certain behaviour... and hijacking that behaviour tends to be counterproductive. Can you explain what's your goal here?

Cheers Jorge,

Indeed, Hijacking and peculiar are the right words :). I'll explain. WebBlock A draws a page by calling some WebBlock (B, C and others) in a list records, and obeying a specification string passed by parameter. Imagine it as a string like "Draw WebBlock B-D-C-B". Call webblock B, then D, then C, then B.


C is a link. But a link with some logic associated to it. It already has it's own table to store values, It can be internal (redirects to an outsystems page) or external (to an URL). B uses C, but also uses D and E.


In this scenario, A draws the page to the user. All is fine until here. Now the user needs to be able to edit this page. 

In order to get a good UI, it was decided that the user would see the exact page, click an element of that page ( the content of the webBlock ) and edit it on the spot. This would be done by using the SidePanel forge component.

If the user clicks the link (drawn by C), I want the WebBlock C to notify me, saying "I was clicked, I am a Link, and my Id in my table is X." But if C is inside of B, then B will catch the notification, and say: "I was clicked, I am a HomePageLink, my Id is Y".

Again, this is possible with a chain of Notifies and onNotifies.

The problem is that the webBlock A, the page, in the edition screen (only) is inside of a Link. When it is clicked, I wanted it to trigger the SidePanel. I can already catch the notifications from the edition page just fine with my notify chain, but in order to trigger the sidePanel, it receives a Link's Id, or else, use Javascript( What I am using in the moment ). Because the contents of WebBlock A are clickable, the link that webBlock A is inserted on never triggers.


Edit Page

{    

   Link <- Never triggers

   {

        WebBlock A

        {     WebBlock B(contains onClick)

               {  WebBlocks C (contains links and onclick(),D (contains onClick),E(contains onClick) }

             WebBlock D(contains onClick)

             WebBlock C(contains onClick)

        }

     }

}


Ok, I see what's your goal... you haven't considered the possibility of actually having different web blocks for the display vs editing modes? I guess that could simplify things a lot.

From your explanation, it seems like you want the "capturing" behaviour... where the outermost element captures the event, handles it and may or may not pass it on for other inner elements to potentially capture and so forth.

You could try changing the behaviour of the outer link (around your WebBlock A) to be capture (by  adding an event listener using capture) this should be captured before the click gets propagated down to the elements inside WebBlock A. You will still need to use JavaScript for this one (and eventually have a hidden Button to trigger some OutSystems server action).