Exploring UI Functions Part 3

[#1]

• Step 6: Create Event Router
• Step 7: Next Steps

Step 6: Create Event Router

What do you do when a user can perform multiple events in which data is generated, and want those outputs to go through the same exact process? An Events Router Function is your solution. The Events Router Function allows for multiple data sources to be funneled to one location. Let's create a simple example in our MyFunctionsMashup Mashup. In this Mashup, we'll add two Text Field Widgets and a Label Widget. The two Text Field Widgets will take user input and then an Events Router will send the output to the Label. Let's start!

1. Open the MyFunctionsMashup Mashup to the Design tab.
2. Click on the Widgets tab.
3. Type in the Filter text box for Text Field.
   
   
   
4. Drag and drop TWO (2) Text Field Widgets to the Mashup Canvas.
5. Type in the Filter text box for Label.
   
   
   
6. Drag and drop ONE (1) Label Widget to the Mashup Canvas.
   
   

We now have all the Widgets we need for this example. Let's get started on the Events Router Function.

1. Click the + button in the Functions panel.
2. Select Events Router in the dropdown.
   
   
   
3. Set the Name to routeUserInput.
   
   
   
4. Click Next.
5. Set the Inputs field to 2.
   
   
   
6. Click Done.
   
   

We have our Events Router setup. Now, we'll bind our new items together.

1. Click the Bind (arrows) button on the routeUserInput Events Router.
   
   
   
2. Click the down arrow next to Input1.
3. Select Add Source.
   
   
   
4. In the Widgets tab, scroll to the bottom and select Text Property of the first of the two recent Text Fields we created (it should be third to last).
   
   
   
5. Click Next.
6. Click the down arrow next to Input2.
7. Select Add Source.
   
   
   
8. In the Widgets tab, scroll to the bottom and select Text Property of the second of the two recent Text Fields we created (it should be second to last).
   
   
   
9. Click Next.
10. Click the down arrow next to Output.
11. Select Add Target.
    
    
    
12. In the Widgets tab, scroll to the bottom and select LabelText Property of the recent Label we created (it should be last).
    
    
    
13. Click Next.
14. Click Done.
15. Click Save for the Mashup.
    
    

You have just created an Events Router that will update a Label based on the typed input from two Text Fields. View your Mashup and play around with the bottom two text boxes. For a completed example, download and unzip, then import the attached FunctionsGuide_Entities.zip.

Step 7: Next Steps

Congratulations! You've successfully completed the Explore UI Functions guide, and learned best practices for building a complex Mashup that navigations, multiple data inputs, confirmations, and all working together effectively for an enhanced user experience.

Learn More

We recommend the following resources to continue your learning experience:

 Capability    Guide

Experience

Object-Oriented UI Design Tips

 

Additional Resources

If you have questions, issues, or need additional information, refer to:

 Resource       Link

Community	Developer Community Forum
Support	Mashup Builder Support Help Center