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!!!!
DynaForm, control visibility after creation
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:
Rows in advanced form area have also a special CSS class. Look in Firebug please.
Code: Select all
$("#dynaForm tr:nth-child(2)").show();
$("#dynaForm tr:nth-child(5)").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
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.
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
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?
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
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.
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:
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()?
Code: Select all
<p:panel>
<pe:dynaForm ...>
...
</pe:dynaForm>
</p:panel>
<p:panel>
<pe:dynaForm ...>
...
</pe:dynaForm>
</p:panel>
...
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>
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
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.
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
What is exposed with var="data" is any Object. See e.g. the showcase
BookProperty is a such data (= Object) here. Sure, it can have another model (DynaFormModel) as variable. Why not.
Code: Select all
...
DynaFormControl control12 = row.addControl(new BookProperty("Author", true), "input", 1, 1);
...
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
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?
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.
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();
};
}
PrimeFaces 3.5 | Glassfish 3.1.2 | IntelliJ IDEA 12.1.4 | Windows 7, Firefox 14.0.1
I don't think I have understood you, but you can reference row by this selector
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.
Code: Select all
$('#dynaForm #anycontrol).closest("tr");
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