Page 1 of 1
DynaForm, control visibility after creation
Posted: 26 Jul 2012, 19:43
by evaleah
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!!!!
Re: DynaForm, control visibility after creation
Posted: 27 Jul 2012, 10:08
by Oleg
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.
Re: DynaForm, control visibility after creation
Posted: 27 Jul 2012, 14:44
by evaleah
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.
Re: DynaForm, control visibility after creation
Posted: 31 Jul 2012, 15:38
by evaleah
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?
Re: DynaForm, control visibility after creation
Posted: 31 Jul 2012, 16:49
by Oleg
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()?
Re: DynaForm, control visibility after creation
Posted: 31 Jul 2012, 21:23
by evaleah
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.
Re: DynaForm, control visibility after creation
Posted: 01 Aug 2012, 10:27
by Oleg
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.
Re: DynaForm, control visibility after creation
Posted: 02 Aug 2012, 16:43
by evaleah
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.
Re: DynaForm, control visibility after creation
Posted: 02 Aug 2012, 21:57
by Oleg
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.
Re: DynaForm, control visibility after creation
Posted: 08 Aug 2012, 20:02
by evaleah
Thank you for all your help with this. Things are visible as they should be now using the closest tr technique.