ActionSheet in block in reactive app
Question
Application Type
Reactive
Service Studio Version
11.14.7 (Build 58100)
Platform Version
11.14.0 (Build 33133)

I am building a PWA and have a master detail screen with the detail in a block (also reused elsewhere). 

I am trying to clean up button clutter by using an ActionSheet in the detail block and am running into problems. 

It works the very first time I pull up a detail screen. After that, once I open the action sheet, all buttons are frozen and I have to unload the app and restart it to make it usable again. I suspect there is some javascript conflict, but am not seeing errors when I inspect in a browser preview window. 

I see this notice in the ActionSheet documentation "From the Toolbox, drag the Action Sheet widget into the Main Content area of your application's screen. " Does that mean I cannot use the built-in ActionSheet in a webblock? 

Any suggestions?

Hi Top Dog,

Please find attached a small test using an ActionSheet inside a Block.

I was unable to replicate the behavior you're having. Additionally, can you please check If you're using Outsystems UI version 2.8.0? This version brings a lot of improvements on several components.

I hope this helps.

Best regards,

Paulo Moreira

ActionSheetTest.oml

Hello Paulo,

First of all, thank you so much for the time you spent on this and apologies for the long silence. Life got in the way.

I adapted your test oml to make it close to the situation I have. A master/detail and changed your #3 action  to close the detail, which is when my problem occurred - after closing the detail, opening it again and then trying to perform another action. The test worked perfectly! :-) And yes, I am using OSUI 2.8.0

So, I went back to my full app and made sure that I have everything set up according to the test case I set up in the smaller app. And it's still not behaving. After performing an action that closes the detail, for example an edit, clicking on an item for the detail and trying to perform another action, presents me with locked buttons. 

I did some further research and found that in the real app, opening the detail again creates an additional actionsheet container div and when the actionsheet is opened, the first (old) actionsheet container div is made visible and the second one - the one that probably has the focus - is below the fold. :-(

In the test app, no second iteration of the actionsheet container is created and all works flawlessly. 

I am now on the hunt for what may be causing the OS UI javascript to create the additional container vs. adding/removing the class to/from the existing one. If you have any troubleshooting advice or insight, I would greatly appreciate it.

Thank you again for your help. I very much appreciate it. 

Hello guys.

From what I was able to test and try it seems that an on destroy to unmove the element that was moved on the on ready is missing.

Hopefully this will be fixed soon, but if you can't wait you can clone the module and copy the ActionSheet component and add the on destroy event to the block and run the unmove element (equal to the move but replacing the appendChild for a removeChild).

Ricardo


OnDestroyUnmoveElement1.png

Thank you for this, Ricardo. 

I gave up on the ActionSheet implementation after spending wayyyyyy too much time on troubleshooting and not resolving it. 

I opted to use an approach of a button dropdown from a "more actions" icon and was able to implement that on all screens in a few hours. I'll stick with that for now. 

It's good to know though that there is a workaround and maybe it will help others in the meantime. 

Thank you

PS: If you could also work on implementing the "Add new" encapsulation for the OutSystemsUI DropdownSearch component, you would make my day :-) LOL

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.