Dynamic Data Exercise

   MaestroThe UI design product.  |    Form Builder |  All versions This feature is related to all versions.

Here you can follow instructions to build a small demonstration form and a Fluent Groovy Service the form can call to fetch dynamic data.
The service returns the value of a Form Space property to the caller. The form calls the service from the Form Load Rule using DynamicData.call, and there is a Dynamic Data Button that will call the same service whenever it is clicked.

Create a Form Space property

1. Login to Manager
2. Select Forms/Form Spaces from the menu
3. Click the 'Web Plug-in' link
4. Click the 'Properties' tab
5. Click New
6. Enter 'test property' as the name
7. Select 'String' as the Type
8. Enter a value into the Value text area
9. Click Save

Write the service

1. Login to Manager
2. Select Service/All Services from the menu
3. Click New
4. From Service Type dropdown, select Dynamic Data
5. From Service Template, select Fluent Dynamic Data
6. Provide the name 'Space Property'
7. Select your organization from the dropdown
8. Click the Groovy Script tab and paste this code into the Value text box:

   
   import com.avoka.tm.vo.*
   import com.avoka.tm.query.PropertyQuery
   import javax.servlet.http.*
   import groovy.json.JsonBuilder
   
   class FluentDynamicData {
   
   	String invoke(SvcDef svcDef, Txn txn, HttpServletRequest request, User user) {
   
   		def data = [
   			success: true,
   			value: new PropertyQuery().setName(request.getParameter("property")).setSpaceName(request.getParameter("space")).getValue()
   		]
   
   		return new JsonBuilder(data).toPrettyString()
   	}
   }

9. Click Save

Test the service

1. Click the Unit Test tab and paste this code into the Value text box:

   import com.avoka.core.groovy.GroovyLogger as logger
   import com.avoka.tm.svc.*
   import com.avoka.tm.test.*
   import com.avoka.tm.util.*
   import com.avoka.tm.vo.*
   
   class UnitTest {
   
    void invoke(SvcDef svcDef, Map testParams) throws Exception {
   
    Txn txn = new MockVoBuilder().createTxnOpened()
    MockRequest request = new MockRequest()
   
    Map params = [
    "svcDef": svcDef,
    "txn": txn,
    "request": request,
    "user": null
    ]
    request.setParameter("space", "web plug-in")
    request.setParameter("property", "test property")
    String result = (String) new ServiceInvoker(svcDef).invoke(params)
    logger.info result
    Path path = new Path(result)
    assert path.val('success')
    }
   }
   

2. Click Save
3. Click Run Test

Create a new form

1. Login to Maestro
2. Click your organization's node in the tree
3. Click 'Create Project'
4. Enter any name you like
5. Click Create
6. Click Create Form
7. Enter any name you like
8. Select 'Maguire – Default form' from the Template dropdown
9. Drag a Text Field onto the wireframe below the 'OK, Let's Get Started!' panel
10. Rename it to 'Form Loaded Property Value'
11. Drag a 'Dynamic Data Button' onto the wireframe below the new text field
12. Rename it to 'Fetch Space Property'
13. Drag a Text Field onto the wireframe beside the dynamic data button
14. Rename it to 'Property Value'
15. Drag a Data Field onto the top node of the structure
16. Rename it to 'Property Name'
17. Add another Data Field - rename it to 'Space Name'
18. Add another Data Field – rename it to 'Property Value'

Add Form Load Rule

1. Click 'Form Options'
2. Click 'Form Rules'
3. Click 'Create Rule'
4. Click 'Load' under the Form category and paste in this code:

   DynamicData.call("Space Property", {space:"web plug-in", property:"test property"})
   	.then(function(response) {
   		data.formLoadedPropertyValue = response.value
   	})

5. Click Save
6. Click Save again

Add Dynamic Data Button

1. Drag a Dynamic Data Button onto the wireframe below the Property Value text field
2. Rename it to 'Fetch Space Property'
3. Expand 'Configuration' in the Properties panel
4. Click 'Click To Browse' below 'Input Field Mapping'
5. Click 'Add' so there are 2 rows in the mapping table
6. Enter 'space' as the key value on the first mapping row
7. Make sure the 'Space Name' data field node is visible in the structure tree
8. Place the cursor in the 'Field Reference' column of the first mapping row
9. Double-click 'Space Name' in the tree – data.spaceName will be set in Field Reference column
10. Repeat the process on the second mapping row
    • Enter 'property' as the key
    • Double-click 'Property Name' - Field Reference will become data.propertyName
11. Click Save
12. Click 'Click To Browse' below 'Response Field Mapping'
13. Map the response field:
    • Enter 'value' as the key – this maps the 'value' property in JSON returned by the service
    • Double-click 'Property Value' – Field Reference will become data.propertyValue
14. Click Save

Test the form

1. Select 'Build and Render Form' from the Build dropdown in the Maestro menu bar to see that the Form Space property value has been entered into the 'Form Loaded Property Value'.
2. Click the 'Fetch Space Property' dynamic data button to see the 'Property Value' text field will be populated with the same property value.
3. Go to Manager.
4. Change the property value.
5. Go back to the Maestro form.
6. Click 'Fetch Space Property', without refreshing the page, to see the changed value in the 'Property Value' text field, but the value of 'Form Loaded Property Value' will not have changed.
7. Refresh the form and you will see the 'Form Loaded Property Value' changes.

Next, learn how to .