Setting a user defined id for the fields in Dynaform

Community Driven Extensions Project
mang
Posts: 20
Joined: 05 Aug 2010, 02:10

10 Oct 2012, 10:45

I would like to set id for the fields in the dynaform. Currently, I did not see a way that I could do this.

Could someone tell me if it is possible? If not, could this be added as enhancement to the dynaform.

I would like to have the id so that I could write some javascripts to manupulate it and also write some selenium tests to access the field.

Thanks
Mang

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

10 Oct 2012, 14:27

Hi,

What is the problem with Id? Sure, you can put any Ids on fields inside pe:dynaFormControl. See here http://fractalsoft.net/primeext-showcas ... cUsage.jsf To get component's client Id for JavaScript you can use p:component function from PrimeFaces.
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

mang
Posts: 20
Joined: 05 Aug 2010, 02:10

11 Oct 2012, 02:30

Thanks for replying.

In the showcase example, the generated html for the field "author"

<td class="pe-dynaform-cell" role="gridcell">
<input id="dynaForm_r1c2reg_txt" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" type="text" name="dynaForm_r1c2reg_txt" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>

and for "ISBN"

<td class="pe-dynaform-cell pe-dynaform-cell-last" role="gridcell">
<input id="dynaForm_r1c4reg_txt" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" type="text" name="dynaForm_r1c4reg_txt" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
</td>

If I wanted to access those fields I would use their ids which are "dynaForm_r1c2reg_txt" and "dynaForm_r1c4reg_txt". This not very meaningful and if I add a field in between fields the last id will be changed. I would like to have set my own ids so that their ids can be something like "author" and "isbn", and will not change if add more fields in between or move them to a different row.

One of the reason is that I will be creating the form based on some data models and the fields might appear at different locations depending on the model. This means that the ids will be different based on the current id generation. If I need to use javascript to access the fields then it becomes very difficult and also if I need to use selenium to set or get the values of a particular field it will also be very difficult. This will not be very robust.

Thanks
Mang

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

11 Oct 2012, 09:33

Hi,

But the behavior is the same as in PF DataTable and many other NamingContainer components. The prefix like "dynaForm_r1c2reg" is generated by DynaForm. It's a NamingContainer. The same is e.g. for fiels inside p:dataTable. This is a common problem, not related to DynaForm. You can try to use p:component to get client Ids. Place p:component inside DynaForm as #{p:component('txt')} e.g. This will return Ids like "dynaForm_r1c2reg_text". Where do you need these Ids? Inside of outside DynaForm? Post your code 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

mang
Posts: 20
Joined: 05 Aug 2010, 02:10

11 Oct 2012, 14:51

Thanks again for your reply.

I do not have a real example at the moment as I am currently working on a layer to wrap around the dynaform.

But, definitely, I will need the ids, e.g. for selenium tests, I would need the id of the field to set a value or get the value. Currently the ids are generated and if I move the field to a new row or add a new field before the field I am interested in, the id will change and I will need to change my test cases to use the new generate ids. So it is not very ideal. I was hoping I could do something like this:

<pe:dynaForm id="dynaForm" value="#{dynaFormController.model}" var="data">
<pe:dynaFormControl type="input" for="txt">
<p:inputText id="#{data.id}" value="#{data.value}" required="#{data.required}"/>
</pe:dynaFormControl>
....
</pe:dynaForm>

if I try the code as above I will get an exception as below:

java.lang.IllegalArgumentException: Empty id attribute is not allowed
at javax.faces.component.UIComponentBase.validateId(UIComponentBase.java:536)
at javax.faces.component.UIComponentBase.setId(UIComponentBase.java:363)
at com.sun.faces.facelets.tag.jsf.ComponentTagHandlerDelegateImpl.assignUniqueId(ComponentTagHandlerDelegateImpl.java:385)

I am sorry that I am not familiar with p:component usage. Could you please give me a example of usage?

Thanks
Mang

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

11 Oct 2012, 16:08

I am sorry that I am not familiar with p:component usage. Could you please give me a example of usage?
User's Guide http://www.primefaces.org/documentation.html

And again - this is how ALL NamingContainer components would work: DataTable, DataList, TabView, ...
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

mang
Posts: 20
Joined: 05 Aug 2010, 02:10

16 Oct 2012, 15:36

I understand that they are implemented this way.

But I am wondering does it may sense and more useful to change it to the way that I described? An enhancement? Is it possible?

Thanks
Mang

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

23 Oct 2012, 12:11

I think it's general not allowed to use EL in IDs like <p:inputText id="#{data.id}" .../>. So, no other way.
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

mang
Posts: 20
Joined: 05 Aug 2010, 02:10

02 Nov 2012, 06:01

Thanks for your reply again.

I have a quick skim through the primefaces cookbook but I still do not quite understand how to use p:component. Maybe, I am blind or stupid. Do you mind giving me a simple example how to use it.

Let use the case in the DynaForm example, and use the "basic usage" example which has "Author" and "ISBN" as input text field. Assume that when the form get generated these two fields will be rendered but they can appear in any order and in any row, i.e. you do not know where they are. And assume that I need to perform a javascript that need to access the content of both "Author" and "ISBN" for processing when the user presss the "Submit" button.

My question is how to I write a javascript to access the content of "Author" and "ISBN" since I do not know what their ids before build time since they can be anywhere and this will affect the ids being generated. Sorry, might be a simple question, I am weak in Javascripts.

Thanks
Mang

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

02 Nov 2012, 20:51

For your example:

Code: Select all

<pe:dynaFormControl type="input" for="txt">
<p:inputText id="txt" value="#{data.value}" required="#{data.required}"/>
Client Id of the input text: #{p:component('txt')}
</pe:dynaFormControl> 
You should see the client Id for p:inputText.
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

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests