Containers with Form Extension can't be Modified?

Discuss all problems you have with Servoy here. It might help to mention the Servoy version and Operating System version you are using

Containers with Form Extension can't be Modified?

Postby john1598360627 » Fri Sep 02, 2022 2:55 am

Code: Select all
Servoy Version: 2022.6.0.3782


I created a style class that just does Display: none. This disables containers I have in a 12grid bootstrap layout.

Code: Select all
.hide_div{
   display: none;
   
}


Meaning when I want to hide a container, like a header, when a certain event happens I can add the style class. Then when another event happens, I can remove my style class and the container is displayed again.

I've been doing this for awhile now and it's been how I've enabled/disable the display of different sections of a form programmatically.


Recently I started implementing Form Extension, as this helps make my Servoy project more OOP.


However, I encountered a problem.

I setup a form 'class' that has a container header for tab buttons. I want to enable / disable this tab header depending on the situation. Like I said, before I could just add/remove my 'hide_div' style class.

The issue is, this doesn't work with form extension for some reason. For a 'child' of the 'class', when my 'hide_div' styleclass is added it can't be removed afterwards.


Basically, there's no way to remove Style Classes that was previously added to a Container programmatically, when the Container is inherited via Form Extension.

(Well to be more specific only ONE style class can be added / removed it seems like, but not more than once? It's weird.)

Is there any way to get around this?

I would try to get around this by disabling elements manually, however I can't because my tab buttons are actually 12grid columns so I much modify this using style classes. Which again, modifying the Containers with Style Classes is currently bugged with Form Extension.
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Containers with Form Extension can't be Modified?

Postby mboegem » Fri Sep 02, 2022 11:14 am

Hi John,

it's a little bit hard to say where your problem is.
An image of your form and some of the code will probably clarify a lot.

I'm working a lot with dynamic forms in terms of showing/hiding containers.
I've just quickly created a subform (so extending main form) and don't experience any problems.
I'm using some solutionModel functions to get all the containers before iterating them, the only thing I had to change is adding 'true' in order to get inherited containers.
So:
Code: Select all
_parentContainer.getLayoutContainers(true)

instead of
Code: Select all
_parentContainer.getLayoutContainers()


Another issue could be that you are referencing the base form name in your code.
As the elements will be fully inherited when extending the form, you should not do that.
So:
Code: Select all
containers.myContainer

instead of
Code: Select all
forms.myParentForm.containers.myContainer


Either of the above situations can lead to not being able to set the 'hidden' class.

Btw, I've added the !important rule, to prevent override by other style classes
Code: Select all
.hide_div{
   display: none !important;
}


Hope any of this helps, otherwise please supply more info.
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Containers with Form Extension can't be Modified?

Postby john1598360627 » Fri Sep 02, 2022 11:51 pm

WHAT'S HAPPENING

Step1; I have tabs in a header. This is currently a sub form, and the header is from a main form I'm extending from. Under the tabs are a formcontainer that I switch different forms out from.

step1_tabs.png
step1_tabs.png (5.4 KiB) Viewed 2908 times


Step2; I switch out the formcontainer containedForm to an Edit form. Which an event disables the header, using that hide_div.

step2_edit.png
step2_edit.png (2.55 KiB) Viewed 2908 times


Step3; I click a back button, which goes back to the previous form. I remove the hide_div. But, the header doesn't come back. Prior to using form extension this worked fine, but now cus of that form hierarchy and the header being in that 'main form' for some reason it doesn't work?

step3_back.png
step3_back.png (1.39 KiB) Viewed 2908 times




Here's how I setup the code.

Code: Select all
/**
*
* @param {Boolean} EnableDisable
*
* @public
*
* @properties={typeid:24,uuid:"0DD8359C-E25F-478C-AE65-2447C4BFD62F"}
*/
function visibility_Header( EnableDisable ) {
   
   if( EnableDisable == true )
   {
      containers.hub_header.removeStyleClasses( 'hide_div' )
      
      bool_Header = true
      
   }
   else if( EnableDisable == false)
   {
      containers.hub_header.addStyleClasses( 'hide_div' )
      
      bool_Header = false
      
   }
   
   application.output( 'bool_Header ' + bool_Header )
}


This function is in the main form.


However, now reading your post what I'm understanding is, since this function gets inherited it can't actually grab the parent containers. So, in the parent code itself, I should reference itself or reference it as a parent since it will be inherited, if I'm understanding correctly?


Just to be clear, which one do I do? And where do I put this? In an OnLoad?
Code: Select all
_parentContainer.getLayoutContainers(true)
_parentContainer.getLayoutContainers()


And since the first line of code here is what I'm already doing, I should do the 2nd line?
Code: Select all
containers.myContainer
forms.myParentForm.containers.myContainer
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Containers with Form Extension can't be Modified?

Postby john1598360627 » Sat Sep 03, 2022 4:16 am

I created a demo project displaying the issue... but the project is too big to post on Servoy Forums (it's 7 MB). I could email the project instead to fully showcase the issue...
But here is the test case atleast;

HEADER GONE?
* Initially, the header is visible. You can see the tab buttons.

1. Click button to go to page 2
* 'hide_div' is added to the header

2. Click button to go back to page 1
* 'hide_div' is removed from header... or is it?

EXPECTED
For the header containing the tab buttons to re-appear due to removing the 'hide_div'

RESULT
The header doesn't re-appear.
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Containers with Form Extension can't be Modified?

Postby mboegem » Sat Sep 03, 2022 2:05 pm

Hi John,

I received your demo project from your colleague.
Had a quick look and I didn't see the header disappear, although the class was set.

I took a look at your .less file and that appeared to be almost empty, definitely missing out the 'hide_div' class.
So I've added the below to the less file, which made the demo work as expected.
Code: Select all
.hide_div {
   display: none;
}


Hope this helps.
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance Developer

Image

Partner of Tower - The most powerful Git client for Mac and Windows
User avatar
mboegem
 
Posts: 1743
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: Containers with Form Extension can't be Modified?

Postby john1598360627 » Tue Sep 06, 2022 11:09 pm

mboegem wrote:Hi John,

I received your demo project from your colleague.
Had a quick look and I didn't see the header disappear, although the class was set.

I took a look at your .less file and that appeared to be almost empty, definitely missing out the 'hide_div' class.
So I've added the below to the less file, which made the demo work as expected.
Code: Select all
.hide_div {
   display: none;
}


Hope this helps.

Strange, I already had it in there in the file called 'demo.less'. If that file wasn't included in the project, then Servoy has completely ruined their export file process it seems.

servoy_less.png
servoy_less.png (320.44 KiB) Viewed 2828 times


demo.less
Code: Select all
.hide_div{
   display: none !important;
   
}



HeaderDemo_ng2.less
Code: Select all
// import of the custom servoy theme properties that will import the hidden servoy theme, this imported file is for customizing the default servoy theme properties
@import 'custom_servoy_theme_properties_ng2.less';

// Add your custom less/css to this file you can use the same less properties that are specified in the above properties.less


@import 'demo.less';
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Containers with Form Extension can't be Modified?

Postby john1598360627 » Tue Sep 06, 2022 11:13 pm

If we disregard Servoy being more broken than I realized, if you run the demo project (after doing your hotfix) you can see what I mean. 'hide_div' is applied, and there's no way to remove that style class.


I'm going to look into reporting this bug to Servoy, including the file export bug too.
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Containers with Form Extension can't be Modified?

Postby john1598360627 » Tue Sep 06, 2022 11:37 pm

OKAY, I just did some testing. I realized what must of happened.


I was including 'demo.less' into the HeaderDemo_ng2.less file. The Titanium client. I'm running Titanium, in my main project and in my demo.


I see what happened now. Marc I'm guessing you ran the project within normal NG Client. I just tried this myself, and I didn't have the import line for HeaderDemo.less so that's why it wasn't there.

And I see now. The result IS as expected, being able to add / remove the hide_div when the NG Client runs... But not the Titanium Client. So this is a TITANIUM exclusive feature. Duly Noted. Thanks Marc for checking it out.
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm

Re: Containers with Form Extension can't be Modified?

Postby kwpsd » Wed Sep 07, 2022 12:10 am

Created Support Ticket: SVY-17418
Kim W. Premuda
San Diego, CA USA
User avatar
kwpsd
 
Posts: 687
Joined: Sat Jul 28, 2007 6:59 pm
Location: San Diego, CA USA

Re: Containers with Form Extension can't be Modified?

Postby john1598360627 » Fri Oct 07, 2022 1:24 am

I updated to 2022.9.0.3803, and container divs now can be hidden and re-enabled within TitaniumNG! Thank you!
john1598360627
 
Posts: 169
Joined: Tue Aug 25, 2020 3:03 pm


Return to Discuss possible Issues and Bugs

Who is online

Users browsing this forum: No registered users and 6 guests