Display Form Values in Another Gadget

1. Create a FormDisplay gadget with the following options:

Gadget Name: FormDisplay

Gadget Title: Form Display

2. Click Next and click Finish.

3. Edit the gadget-defintion.xml to add the parameters.

4. Enter the following parameters in Name field and leave the Value field empty:

firstName

lastName

phone

5. Change the view.xhml of the FormDisplay gadget to include the following code.

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

6. Deploy the gadgets.

7. To test the gadgets, log on to Business Console using the URL format: http://<HOST>:<PORT>/business.console.

8. Click on Dashboards > Plus icon.

9. Create a dashboard and add these two gadgets side by side.

10. Click Submit Form on the HelloWorld gadget.

HelloWorld gadget passes the form values to the FormDisplay Gadget through the URL.