Containers with Form Extension can't be Modified?

Feedback
1 
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.

.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.

2

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:

_parentContainer.getLayoutContainers(true)

instead of

_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:

containers.myContainer

instead of

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

.hide_div{
   display: none !important;
}

Hope any of this helps, otherwise please supply more info.

3

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.

[attachment=2]step1_tabs.png[/attachment]

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

[attachment=1]step2_edit.png[/attachment]

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?

[attachment=0]step3_back.png[/attachment]

Here’s how I setup the code.

/**
 * 
 * @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?

_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?

containers.myContainer
forms.myParentForm.containers.myContainer

step3_back.png

step2_edit.png
step2_edit.png476×107 1.66 KB

step1_tabs.png
step1_tabs.png725×115 3.25 KB

4

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
  1. 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.

5

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.

.hide_div {
   display: none;
}

Hope this helps.

6

mboegem:
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.

.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.

[attachment=0]servoy_less.png[/attachment]

demo.less

.hide_div{
   display: none !important;
	
}

HeaderDemo_ng2.less

// 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';

servoy_less.png
servoy_less.png1839×1075 238 KB

7

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.

8

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.

9

Created Support Ticket: SVY-17418

10

I updated to 2022.9.0.3803, and container divs now can be hidden and re-enabled within TitaniumNG! Thank you!