DynaForm, control visibility after creation

Community Driven Extensions Project
Post Reply
evaleah
Posts: 44
Joined: 10 Jul 2012, 20:26

26 Jul 2012, 19:43

After much struggle I have finally realized the obvious, the wonderful DynaForm! I can build the entire form I need to, but I need to have panels which are part of the DynaForm become visible and invisible based on responses in other controls of the DynaForm. Has anyone done this? What is the best suggested method of handling this? Is there an example out there somewhere I could take a look at?

THANK YOU!!!!
PrimeFaces 3.5 | Glassfish 3.1.2 | IntelliJ IDEA 12.1.4 | Windows 7, Firefox 14.0.1

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

27 Jul 2012, 10:08

Please explain more details. How do you want to do panels visible / unvisible - with AJAX updates or with pure JavaScript on client side? How does your form layout look? Do panels take the entire form width (entire row)? Theoretically you can show / hide rows in DynaForm with jQuery. Every row is a HTML tr element with role="row". Something like maybe:

Code: Select all

$("#dynaForm tr:nth-child(2)").show();

$("#dynaForm tr:nth-child(5)").hide();
Rows in advanced form area have also a special CSS class. Look in Firebug please.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

evaleah
Posts: 44
Joined: 10 Jul 2012, 20:26

27 Jul 2012, 14:44

Oleg, knowing that jQuery bit is very helpful, thank you! It is definitely heading me in the correct direction

To answer your question, I will need the visibility toggled client side as there are no trips back to the server until everything has been answered and the submit button is pressed. To make it a bit clearer, I am working on a survey engine with skip logic in the questions which means I need questions to not appear unless certain choices are made in previous questions.
PrimeFaces 3.5 | Glassfish 3.1.2 | IntelliJ IDEA 12.1.4 | Windows 7, Firefox 14.0.1

evaleah
Posts: 44
Joined: 10 Jul 2012, 20:26

31 Jul 2012, 15:38

More develoments on this:

First issue: I want to be able to dynamically create panels and then within those panels create dynaFormControls. Is this possible? I see in the examples panels created but they do not contain the controls.

Second issue: If I can dynamically create a panel with controls I then want to be able to control the visiblity of the entire panel entirely on the client side. In other words, all controls within the panel will appear and disappear based on click events in other dynaFormControls. Then within that panel, those controls need to be made to .show and .hide depending on click events within that very panel.

Does that make sense? Suggestions?
PrimeFaces 3.5 | Glassfish 3.1.2 | IntelliJ IDEA 12.1.4 | Windows 7, Firefox 14.0.1

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

31 Jul 2012, 16:49

You can create any panel as dynaFormControl, of course. But if you need dynaFormControls within panels, then you need dynaForm within panel. I would create one dynaForm pro panel.

Code: Select all

<p:panel>
    <pe:dynaForm ...>
        ...
    </pe:dynaForm>
</p:panel>

<p:panel>
    <pe:dynaForm ...>
        ...
    </pe:dynaForm>
</p:panel>

...
One possible problem is the alignment across all dynaForms. They can have different column width (but you can try to set fix column width for td elements). Theoretically you can also try nested dynaForms. I have never tried this:

Code: Select all

<pe:dynaForm value="#{dynaFormController.model}" var="data">
    <pe:dynaFormControl type="panel">
        <p:panel>
            <pe:dynaForm value="#{data.model}" var="nestedData">
                ... // dynamic controls here
            </pe:dynaForm>
        </p:panel>
    </pe:dynaFormControl>
</pe:dynaForm>
You have then dynamic panels and dynamic controls inside. They are all well positioned.

I didn't understand your second issue with clicks. Can you not use jQuery show() / hide()?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

evaleah
Posts: 44
Joined: 10 Jul 2012, 20:26

31 Jul 2012, 21:23

I will attempt the second solution you propose here. I was not aware I could set a model as a child of a model. I will be off this for a bit but will let you know if that does not work!

Thank you for the very clear explanation with code. You actually answered my entire question precisely, I believe at this point.
PrimeFaces 3.5 | Glassfish 3.1.2 | IntelliJ IDEA 12.1.4 | Windows 7, Firefox 14.0.1

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

01 Aug 2012, 10:27

What is exposed with var="data" is any Object. See e.g. the showcase

Code: Select all

...
DynaFormControl control12 = row.addControl(new BookProperty("Author", true), "input", 1, 1); 
...
BookProperty is a such data (= Object) here. Sure, it can have another model (DynaFormModel) as variable. Why not.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

evaleah
Posts: 44
Joined: 10 Jul 2012, 20:26

02 Aug 2012, 16:43

I am still missing, or not understanding how to do a critical piece of this. I will try to explain it as best I can and see what can be done.

As controls are added to the dynaForm I need to add a function for the on change event of the referenced question. Since the referenced question will be one that was added to the form earlier, how do I determine which row it is? How do I add a function to a control that was added at some point earlier? Is there anyway to know the name of that row or to find the control in the controller to be able to output a script funtion that looks something like this for it?

Code: Select all

$(EarlierAlreadyCreatedControl)).change(function() {
	if ($(this).val() == ValueDeterminedfromCurrentQuestionShowOnProperty)
	{
		$('#dynaForm tr:nth-child(RowIndexofCurrentQuestion)').show();
	};
}
The value I still do not understand how to retrieve if the EarlierAlreadyCreatedControl. I see there is a setKey method, maybe that would help somehow? But I don't see anything in the examples of how to use it :( So, that is just a guess.
PrimeFaces 3.5 | Glassfish 3.1.2 | IntelliJ IDEA 12.1.4 | Windows 7, Firefox 14.0.1

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

02 Aug 2012, 21:57

I don't think I have understood you, but you can reference row by this selector

Code: Select all

$('#dynaForm #anycontrol).closest("tr");
You can set IDs for you controls and then call e.g. .closest("tr").hide(). You need client IDs indeed. I propose to figure out the generated client IDs with Firebug. Yes, they will be generated with help of setKey() / getKey(). Some key is appended to the ID of DynaForm (NamingContainer). Look the generated HTML in Firebug please.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

evaleah
Posts: 44
Joined: 10 Jul 2012, 20:26

08 Aug 2012, 20:02

Thank you for all your help with this. Things are visible as they should be now using the closest tr technique.
PrimeFaces 3.5 | Glassfish 3.1.2 | IntelliJ IDEA 12.1.4 | Windows 7, Firefox 14.0.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests