Using Forms in Gadgets

webMethods Business Console Documentation 10.5 | webMethods Business Console Documentation | Developing Gadgets for Business Console | Programming Gadgets | Using Forms in Gadgets

Using gadgets, you can capture HTML form values and pass it to other gadgets by submitting the form.

Use the following code in your gadget view.xhtml file, if you want to submit a form with three fields: First Name, Last Name, and Phone.

<form role="form" name="myForm">
<div class="form-group row">
<label for="fname" class="col-md-4">First Name:</label>
<input type="text" class="col-md-8 remove-paddings" name="fname"
id="fname" data-ng-model="config.params.fname"></input>
</div>
<div class="form-group row">
<label for="lname" class="col-md-4">Last Name:</label>
<input type="text" class="col-md-8 remove-paddings" name="lname"
id="lname" data-ng-model="config.params.lname"></input>
</div>
<div class="form-group row">
<label for="lname" class="col-md-4">Phone:</label>
<input type="text" class="col-md-8 remove-paddings" name="phone"
id="phone" data-ng-model="config.params.phone"></input>
</div>
<input class="btn bc-button row" type="button" value="Submit Form"
onclick="submitMyForm()"></input>
</form>

The code above provides a form with three fields. Each field can be data-bound to the config parameters if required.

On clicking SUBMIT button on a form, a JavaScript function, submitForm is called. The code for submitForm function is as shown below:

The code above will append the values to the URL as URL parameters that get bound to the receiving gadget through the config object.

Note: For parameters to work, add the parameter names to the gadget-definition.xml under the parameters section. Only the parameters defined in the gadget-defintion.xml will be received or bound to other gadgets.

To display the form parameters in another receiving gadget, use the code below:

<div class="form-group">
<label for="fname">First Name:</label>
<label>{{config.params.fname}}</label>
</div>
<div class="form-group">
<label for="lname">Last Name:</label>
<label>{{config.params.lname}}</label>
</div>
<div class="form-group">
<label for="lname">Phone:</label>
<label>{{config.params.phone}}</label>
</div>

Note: To send multiple values (array of values) as part of a form field, you can send coma separated values. An array of values can be parsed on the receiving gadget and rendered in a drop-down list.