Exploring Dynamic Grids and Trees Part 2

[#1]

• Step 3: Create A Tree Grid
• Step 4: Next Steps

Step 3: Create A Tree Grid

With our MyFunctionsMashup Mashup open, let's add a Validation. A Validation is similar to an Expression, except you have the added capability of triggering Events based on a True or False outcome of your validation. We will use the Validation to check and confirm the Text Field we created only has the values we added in our Functions. Let's also add two Status Message Functions that will show whether or not a user has added any text outside of what we want.

1. Open the MyFunctionsMashup Mashup to the Design tab.
2. Click the green + button in the Functions area. 

   
   
   
   

3. In the New Function modal, select Validator.

   
   
   

4. Set the Name to isDataClean.

   

5. Click Next.
6.  Click Add Parameter.
7. Set the Name to text and ensure the Base Type is STRING.

   
   
   

8. Add the following code to the Expression are:

if(text === "NO") {
        result = true;
} else if(text === "YES") {
        result = true;
} else {
         let array = text.split("YES").join("");
         array = array.split(",").join("");
         let count = array.trim().length;

         if(count) {
              result = false;
         } else {
              result = true;
         }
}

9. Click Done.

We have our Validator in place, now we need our two Status Message Functions. Why two? You can setup one Status Message to perform the task, but for this case, we're keeping things simple.

1. Click the + button in the Functions area.
2. Select Status Message in the dropdown.
   
   
   
3.  Set the Name to GoodInputProvided.
   
   
   
4. Click Next.
5. Ensure Message Type is Info.
6. In the Message field, enter Text is all good!.
   
   
   
7. Click Done.
8. Let's create another Status Message Function.
9. Set the Name to BadnputProvided.
   
   
   
10. Click Next.
11. Change Message Type to Error.
12. In the Message field, enter Text is BAD!.
    
    
    
13. Click Done.

We now have two Status Message Functions and a Validator to help with checking our text data. Let's connect everything together. This time, let's use the Bind button.

1. Expand the Validator section in the Functions tab.
2. Click the Bind (arrows) button on the isDataClean Validator. This window will help us configure connections a bit easier. 
   
   
   
3. Click the down arrow by the True Event.
4. Click Add Trigger Service.
   
   
   
5. Click Functions.
6. Check the checkbox by GoodInputProvided.
   
   
   
7. Click Next.
8. Click the down arrow by the False Event.
9. Click Add Trigger Service.
   
   
   
10. Click Functions.
11. Check the checkbox by BadInputProvided.
    
    
    
12. Click Next.
13. You should currently have the following setup: 
    
    
    

Let's add in our connections to the Text Field and when we'll run this Validation.

1.  Click the down arrow by the text Property.
   
   
   
2. Click Add Source.
3. With the Widgets tab selected, scroll down and select the Text Property of our Text Field.
   
   
   
4. Click Next.
5. Click the down arrow by Evaluate Service.
6. Select Add Event Trigger.
   
   
   
7. With the Widgets tab selected, scroll down and select the Clicked Property of our Button.
   
   
   
8. Click Next.
9. You should currently have the following setup:
   
   
   
10. Click Done.
11. Click Save and view your updated Mashup.

Your Validator is complete. You now have a way to tell when a user has inputed their own text into the text box. To try things out, add some crazy characters, hit the button, and see what happens. You might notice that you have your Expressions running at the same time as your Validator. Switch up the bindings to get it to run the way you want it to.

Step 4: 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