Orbeon Forms community mailing list

auto-populating select

Classic

List

Threaded

6 messages Options

Stephanie Hall (TT)

auto-populating select

Hi,

I am wondering the best way to do the following in xforms: I have 2 dropdown menus, both of which need to be populated at after certain events. First is the code for the 2 dropdowns:

<xforms:select1 ref="category">

<xforms:item>

<xforms:label>Select a Category</xforms:label>

<xforms:value>select</xforms:value>

</xforms:item>

</xforms:select1>

<xforms:select1 ref="product">

<xforms:item>

<xforms:label>Select a product</xforms:label>

<xforms:value>select</xforms:value>

</xforms:item>

</xforms:select1>

Here is my problem: So the first dropdown needs to somehow call the servlet to get the current list of categories and populate the first select on page load. Then, once the user chooses a category, the form needs to call the servlet to get the list of products in that category to populate the second select. I have used Javascript in the past when doing this without xforms using “onchange” events… The category/product data cannot be stored in an external XML file or something, it must come from the webservice I have.

What is the best way to do this with the xforms setup I have? I’ve not been able to find any examples that suit my particular situation.

Any help is greatly appreciated.

Thanks!

Stephanie

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Einar Moos

Re: auto-populating select

Stephanie,

this post may help:

http://n4.nabble.com/Cascading-Drop-Downs-td44853.html#a44856

cheers

-- einar

On Thu, Nov 5, 2009 at 8:29 PM, Stephanie Hall (TT) <[hidden email]> wrote:

Hi,

I am wondering the best way to do the following in xforms: I have 2 dropdown menus, both of which need to be populated at after certain events. First is the code for the 2 dropdowns:

<xforms:select1 ref="category">

      <xforms:item>

            <xforms:label>Select a Category</xforms:label>

            <xforms:value>select</xforms:value>

      </xforms:item>

      <dynamically created options>

</xforms:select1>

<xforms:select1 ref="product">

      <xforms:item>

            <xforms:label>Select a product</xforms:label>

            <xforms:value>select</xforms:value>

      </xforms:item>

      <dynamically created options>

</xforms:select1>

Here is my problem: So the first dropdown needs to somehow call the servlet to get the current list of categories and populate the first select on page load. Then, once the user chooses a category, the form needs to call the servlet to get the list of products in that category to populate the second select.   I have used Javascript in the past when doing this without xforms using “onchange” events… The category/product data cannot be stored in an external XML file or something, it must come from the webservice I have.

What is the best way to do this with the xforms setup I have? I’ve not been able to find any examples that suit my particular situation.

Any help is greatly appreciated.

Thanks!

Stephanie

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Stephanie Hall (TT)

RE: Re: auto-populating select

Hi Einar,

Thanks for showing me that post, but while that is sort of what I am doing, my situation is a bit different: in that in that example, the options were already hard-coded instances, and with mine, to get the select1 options, each time we have to call my webservice.

Right now, I am using:

<xxforms:script ev:event="xforms-value-changed" ev:target="categorySelect" ev:observer="categorySelect">

getCategories();

</xxforms:script>

To call JS to populate the instance, but I am wondering: is there is a better method to use with xforms? And what event is similar to the “onload” JS function as “xforms-ready” does not seem to work.

Thanks,

Stephanie

From: Einar Moos [mailto:[hidden email]]
Sent: Thursday, November 05, 2009 3:46 PM
To: [hidden email]
Subject: [ops-users] Re: auto-populating select

Stephanie,

this post may help:

http://n4.nabble.com/Cascading-Drop-Downs-td44853.html#a44856

cheers

-- einar

On Thu, Nov 5, 2009 at 8:29 PM, Stephanie Hall (TT) <[hidden email]> wrote:

Hi,

I am wondering the best way to do the following in xforms: I have 2 dropdown menus, both of which need to be populated at after certain events. First is the code for the 2 dropdowns:

<xforms:select1 ref="category">

<xforms:item>

<xforms:label>Select a Category</xforms:label>

<xforms:value>select</xforms:value>

</xforms:item>

</xforms:select1>

<xforms:select1 ref="product">

<xforms:item>

<xforms:label>Select a product</xforms:label>

<xforms:value>select</xforms:value>

</xforms:item>

</xforms:select1>

What is the best way to do this with the xforms setup I have? I’ve not been able to find any examples that suit my particular situation.

Any help is greatly appreciated.

Thanks!

Stephanie

Steve Bayliss

RE: RE: Re: auto-populating select

Message

Hi Stephanie

I think what you need is to

(1) base your selection lists on instances in your model

(2) define submissions that dynamically populate those instances, based on what the currently-selected options are

(3) have change events on your controls to trigger the update.

One useful starting point, though at first glance it might not seem relevant, is the autocomplete control example at http://www.orbeon.com/ops/xforms-controls/ - go to the "selection controls" tab and see the Auto-complete control at the bottom.

Here we have (referring to the view xhtml)

(1) the list for selection for the control (id="country-name") is based on the instance "countries-names-instance" (xforms:itemset for this control)

(2) when the value in the control changes, it does the "country-name-updated" submission

(3) the "country-name-updated" submission in the model submits the main instance (which contain the user's current selections) to a service "services/countries" - the service dynamically generates a new selection list based on current user input, and the resulting data is used to replace the values in the "countries-names-instance" - so the selection list is dynamically updated based on the user's input

In your case I can see a similar scenario -

(1) the itemset for your first selection control "category" is based on an instance "category-instance"

(2) define a submission in the model that calls a web service to populate "category-instance", submitting your main instance as ref="instance('instance')", specifying replace="instance" and instance="category-instance" - this submission will then update the list used for the itemset (it sounds like you don't in fact need to submit the main instance to your web service, as the list is not based on any user selections)

(3) define an action in your model, based on "xforms-ready", to perform this submission (see the very top of the model in the page above for an example of this). Then your first selection control will be populated when the form loads.

(4) the itemset for your second selection control "product" is based on the instance "product-instance"

(5) define a submssion in the model that calls a web service to populate "product-instance" in a similar way to (2) above, submitting the main instance, and replacing the "product-instance"

(6) define an xforms:send, based on event "xforms-value-changed" to invoke the above submission, on your "category" control - then when the user changes the selection on the category control, the instance that the product control itemset is based on will be updated.

Examples of all of the building blocks for above you will find in the aforementioned example.

Hope that make sense!

Steve

-----Original Message-----
From: Stephanie Hall (TT) [mailto:[hidden email]]
Sent: 06 November 2009 14:50
To: [hidden email]
Subject: [ops-users] RE: Re: auto-populating select

Hi Einar,

Thanks for showing me that post, but while that is sort of what I am doing, my situation is a bit different: in that in that example, the options were already hard-coded instances, and with mine, to get the select1 options, each time we have to call my webservice.

Right now, I am using:

<xxforms:script ev:event="xforms-value-changed" ev:target="categorySelect" ev:observer="categorySelect">

      getCategories();

</xxforms:script>

To call JS to populate the instance, but I am wondering: is there is a better method to use with xforms? And what event is similar to the “onload” JS function as “xforms-ready” does not seem to work.

Thanks,

Stephanie

From: Einar Moos [mailto:[hidden email]]
Sent: Thursday, November 05, 2009 3:46 PM
To: [hidden email]
Subject: [ops-users] Re: auto-populating select

Stephanie,

this post may help:

http://n4.nabble.com/Cascading-Drop-Downs-td44853.html#a44856

cheers

-- einar

On Thu, Nov 5, 2009 at 8:29 PM, Stephanie Hall (TT) <[hidden email]> wrote:

Hi,

I am wondering the best way to do the following in xforms: I have 2 dropdown menus, both of which need to be populated at after certain events. First is the code for the 2 dropdowns:

<xforms:select1 ref="category">

      <xforms:item>

            <xforms:label>Select a Category</xforms:label>

            <xforms:value>select</xforms:value>

      </xforms:item>

      <dynamically created options>

</xforms:select1>

<xforms:select1 ref="product">

      <xforms:item>

            <xforms:label>Select a product</xforms:label>

            <xforms:value>select</xforms:value>

      </xforms:item>

      <dynamically created options>

</xforms:select1>

Here is my problem: So the first dropdown needs to somehow call the servlet to get the current list of categories and populate the first select on page load. Then, once the user chooses a category, the form needs to call the servlet to get the list of products in that category to populate the second select.   I have used Javascript in the past when doing this without xforms using “onchange” events… The category/product data cannot be stored in an external XML file or something, it must come from the webservice I have.

What is the best way to do this with the xforms setup I have? I’ve not been able to find any examples that suit my particular situation.

Any help is greatly appreciated.

Thanks!

Stephanie

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Stephanie Hall (TT)

RE: RE: RE: Re: auto-populating select

Message

Thanks for all of your help, Steve! I think it might work, but one thing I am worried about is that these cascading selects will exist in a repeat which makes it much more complicated. So I’d have

So would this approach work for that? Each category select will contain the same data, but each product select would be different depending on the category selected for its row (and we can have n categories ). Would this mean I would have a ton of separate instances all over to populate each product select?

From: Steve Bayliss [mailto:[hidden email]]
Sent: Friday, November 06, 2009 11:53 AM
To: [hidden email]
Subject: [ops-users] RE: RE: Re: auto-populating select

Hi Stephanie

I think what you need is to

(1) base your selection lists on instances in your model

(2) define submissions that dynamically populate those instances, based on what the currently-selected options are

(3) have change events on your controls to trigger the update.

Here we have (referring to the view xhtml)

(1) the list for selection for the control (id="country-name") is based on the instance "countries-names-instance" (xforms:itemset for this control)

(2) when the value in the control changes, it does the "country-name-updated" submission

In your case I can see a similar scenario -

(1) the itemset for your first selection control "category" is based on an instance "category-instance"

(4) the itemset for your second selection control "product" is based on the instance "product-instance"

(5) define a submssion in the model that calls a web service to populate "product-instance" in a similar way to (2) above, submitting the main instance, and replacing the "product-instance"

Examples of all of the building blocks for above you will find in the aforementioned example.

Hope that make sense!

Steve

-----Original Message-----
From: Stephanie Hall (TT) [mailto:[hidden email]]
Sent: 06 November 2009 14:50
To: [hidden email]
Subject: [ops-users] RE: Re: auto-populating select

Hi Einar,

Thanks for showing me that post, but while that is sort of what I am doing, my situation is a bit different: in that in that example, the options were already hard-coded instances, and with mine, to get the select1 options, each time we have to call my webservice.

Right now, I am using:

<xxforms:script ev:event="xforms-value-changed" ev:target="categorySelect" ev:observer="categorySelect">

      getCategories();

</xxforms:script>

To call JS to populate the instance, but I am wondering: is there is a better method to use with xforms? And what event is similar to the “onload” JS function as “xforms-ready” does not seem to work.

Thanks,

Stephanie

From: Einar Moos [mailto:[hidden email]]
Sent: Thursday, November 05, 2009 3:46 PM
To: [hidden email]
Subject: [ops-users] Re: auto-populating select

Stephanie,

this post may help:

http://n4.nabble.com/Cascading-Drop-Downs-td44853.html#a44856

cheers

-- einar

On Thu, Nov 5, 2009 at 8:29 PM, Stephanie Hall (TT) <[hidden email]> wrote:

Hi,

I am wondering the best way to do the following in xforms: I have 2 dropdown menus, both of which need to be populated at after certain events. First is the code for the 2 dropdowns:

<xforms:select1 ref="category">

      <xforms:item>

            <xforms:label>Select a Category</xforms:label>

            <xforms:value>select</xforms:value>

      </xforms:item>

      <dynamically created options>

</xforms:select1>

<xforms:select1 ref="product">

      <xforms:item>

            <xforms:label>Select a product</xforms:label>

            <xforms:value>select</xforms:value>

      </xforms:item>

      <dynamically created options>

</xforms:select1>

Here is my problem: So the first dropdown needs to somehow call the servlet to get the current list of categories and populate the first select on page load. Then, once the user chooses a category, the form needs to call the servlet to get the list of products in that category to populate the second select.   I have used Javascript in the past when doing this without xforms using “onchange” events… The category/product data cannot be stored in an external XML file or something, it must come from the webservice I have.

What is the best way to do this with the xforms setup I have? I’ve not been able to find any examples that suit my particular situation.

Any help is greatly appreciated.

Thanks!

Stephanie

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws

Steve Bayliss

RE: RE: RE: RE: Re: auto-populating select

Message

You'd need separate elements in your main instance to bind the value of the controls to.

I think you could get away with one instance for the lists - but have this essentially as an aggregation of all the independent lists. Where you bind the itemset of the control to the selection list instance you'd need to specify the nodeset based on the current position in the overall repeat.

I've not actually tried this... but I think in theory it should work.

And presumably you'd only need to do this for the dropdown2 - as the dropdown1 list is common to all of the repeat elements?

Steve

-----Original Message-----
From: Stephanie Hall (TT) [mailto:[hidden email]]
Sent: 10 November 2009 15:15
To: [hidden email]
Subject: [ops-users] RE: RE: RE: Re: auto-populating select

Thanks for all of your help, Steve! I think it might work, but one thing I am worried about is that these cascading selects will exist in a repeat which makes it much more complicated. So I’d have

<category dropdown1> <product dropdown1>

<category dropdown2> <product dropdown2>

So would this approach work for that? Each category select will contain the same data, but each product select would be different depending on the category selected for its row (and we can have n categories ). Would this mean I would have a ton of separate instances all over to populate each product select?

From: Steve Bayliss [mailto:[hidden email]]
Sent: Friday, November 06, 2009 11:53 AM
To: [hidden email]
Subject: [ops-users] RE: RE: Re: auto-populating select

Hi Stephanie

I think what you need is to

(1) base your selection lists on instances in your model

(2) define submissions that dynamically populate those instances, based on what the currently-selected options are

(3) have change events on your controls to trigger the update.

One useful starting point, though at first glance it might not seem relevant, is the autocomplete control example at http://www.orbeon.com/ops/xforms-controls/ - go to the "selection controls" tab and see the Auto-complete control at the bottom.

Here we have (referring to the view xhtml)

(1) the list for selection for the control (id="country-name") is based on the instance "countries-names-instance" (xforms:itemset for this control)

(2) when the value in the control changes, it does the "country-name-updated" submission

(3) the "country-name-updated" submission in the model submits the main instance (which contain the user's current selections) to a service "services/countries" - the service dynamically generates a new selection list based on current user input, and the resulting data is used to replace the values in the "countries-names-instance" - so the selection list is dynamically updated based on the user's input

In your case I can see a similar scenario -

(1) the itemset for your first selection control "category" is based on an instance "category-instance"

(2) define a submission in the model that calls a web service to populate "category-instance", submitting your main instance as ref="instance('instance')", specifying replace="instance" and instance="category-instance" - this submission will then update the list used for the itemset (it sounds like you don't in fact need to submit the main instance to your web service, as the list is not based on any user selections)

(3) define an action in your model, based on "xforms-ready", to perform this submission (see the very top of the model in the page above for an example of this). Then your first selection control will be populated when the form loads.

(4) the itemset for your second selection control "product" is based on the instance "product-instance"

(5) define a submssion in the model that calls a web service to populate "product-instance" in a similar way to (2) above, submitting the main instance, and replacing the "product-instance"

(6) define an xforms:send, based on event "xforms-value-changed" to invoke the above submission, on your "category" control - then when the user changes the selection on the category control, the instance that the product control itemset is based on will be updated.

Examples of all of the building blocks for above you will find in the aforementioned example.

Hope that make sense!

Steve

-----Original Message-----
From: Stephanie Hall (TT) [mailto:[hidden email]]
Sent: 06 November 2009 14:50
To: [hidden email]
Subject: [ops-users] RE: Re: auto-populating select

Hi Einar,

Thanks for showing me that post, but while that is sort of what I am doing, my situation is a bit different: in that in that example, the options were already hard-coded instances, and with mine, to get the select1 options, each time we have to call my webservice.

Right now, I am using:

<xxforms:script ev:event="xforms-value-changed" ev:target="categorySelect" ev:observer="categorySelect">

      getCategories();

</xxforms:script>

To call JS to populate the instance, but I am wondering: is there is a better method to use with xforms? And what event is similar to the “onload” JS function as “xforms-ready” does not seem to work.

Thanks,

Stephanie

From: Einar Moos [mailto:[hidden email]]
Sent: Thursday, November 05, 2009 3:46 PM
To: [hidden email]
Subject: [ops-users] Re: auto-populating select

Stephanie,

this post may help:

http://n4.nabble.com/Cascading-Drop-Downs-td44853.html#a44856

cheers

-- einar

On Thu, Nov 5, 2009 at 8:29 PM, Stephanie Hall (TT) <[hidden email]> wrote:

Hi,

I am wondering the best way to do the following in xforms: I have 2 dropdown menus, both of which need to be populated at after certain events. First is the code for the 2 dropdowns:

<xforms:select1 ref="category">

      <xforms:item>

            <xforms:label>Select a Category</xforms:label>

            <xforms:value>select</xforms:value>

      </xforms:item>

      <dynamically created options>

</xforms:select1>

<xforms:select1 ref="product">

      <xforms:item>

            <xforms:label>Select a product</xforms:label>

            <xforms:value>select</xforms:value>

      </xforms:item>

      <dynamically created options>

</xforms:select1>

Here is my problem: So the first dropdown needs to somehow call the servlet to get the current list of categories and populate the first select on page load. Then, once the user chooses a category, the form needs to call the servlet to get the list of products in that category to populate the second select.   I have used Javascript in the past when doing this without xforms using “onchange” events… The category/product data cannot be stored in an external XML file or something, it must come from the webservice I have.

What is the best way to do this with the xforms setup I have? I’ve not been able to find any examples that suit my particular situation.

Any help is greatly appreciated.

Thanks!

Stephanie

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws