97
Views
9
Comments
Hide/Show Tab Child's in runtime Dynamically in Reactive Web Application
Question

Hi All,


I have a requirement where I need to hide/show the tab on the runtime in reactive web application and  I'm able to achieve this functionality through if conditions but on selecting the tab header I'm not able to get the tab content.

Steps to Reproduce:

1) On running the application it should show all the tabs.

2) Hide any one tab and that tab will be gone from the UI. (Tab 2 hidden)

3) Click on Show that tab which was hidden in the previous step. (Show Tab2)

4)Select the tab from the previous step (Step2)  (Click on tab 2)

Even after clicking on the tab2 it's not showing the content of tab2 

Thanks in Advance,

Ps: Attaching the sample oml

Testtab.zip

Rank: #90

Hi Gandeev Boddeti,


Oml is still upload processing.

I give you a hint, try css trick show and hide instead of Sererside hide like If Condition.

When you hide using if condition it resets index of tab and tab content thats why you are not able to show content of tab 2.


Try this once-

1. which tab you want hide enclose with container and use css like below image and same as apply on content also


Regards

Rahul Sahu

Rank: #883

Hi Rahul,

Thank you for the Reply.

I have tired multiple times to upload the OML but I’m not sure why it’s not uploading ??

Rahul I think that css trick might work however when I saw security best practices then we should always use if condition to hide an element or control instead of using it through css as it will be prone for hackings ??.

My example is the basic sample However the real use case is much complicated and security measures are really important.


Thanks in Advance.

Rank: #883

Hi Rahul...

are you able to provide any sample code for that?

Thanks in Advance,

PS:I think now I'm able to attach the oml

Testtab.zip

Rank: #90

Hi Gandeev,

 You are providing in zip format so we are not able to public on our ENV.

I have attached my sample download it.


Regards

Rahul Sahu

TestEvent.oml

Rank: #883

Hi Rahul,

Thank you for the sample but unfortunately this with CSS we cannot risk security with it . 

I thought you will provide "if you want to use IF condition you need to put extra logic for tab indexing. user javascript in your logic to add and remove indexing for that " which you mentioned in your previous comment.

Thanks in Advance.

Rank: #140

Hi Gandeev and Rahul,


Would it not be a solution for your security concerns to use the conditional css provided by Rahul on the tab header item and tab content item, and on top of that add extra protection by putting the content of the tab inside an IF ?  

See attached oml, instead of using an inline style like you suggested Rahul, I put a conditional class on the tab navigation items themselves, that avoids adding extra containers around each navigation item.

And top level of the content of each navigation item is an IF, holding al the content in the true branch.


I personally don't really understand what this translates to in terms of react code, though.  With tradional I understand why the IF adds extra protection, since each page is built up on the server side, but with react, is'nt everything running on client side, so is adding an IF really accomplishing anything in terms of security ??

 

Dorine

TestTab.oml

Rank: #90

Hi Gandeev,

I have attached new sample download it.


Hope this will help you.

Regards

Rahul Sahu


TestEvent.oml