cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

Exploring UI Functions Part 2

No ratings

 

Step 3: Create Validation and Status

 

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. 
     

    click_add_button_val.png

  3. In the New Function modal, select Validator.

    create_function_validator.png

     

  4. Set the Name to isDataClean.

    set_validator_name.png

     

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

    add_first_validator.png

     

  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;
         }
}
add_validation_code.png

 

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.

    create_function_status.png

     

  3.  Set the Name to GoodInputProvided.

    add_good_status_message.png

     

  4. Click Next.
  5. Ensure Message Type is Info.
  6. In the Message field, enter Text is all good!.

    set_good_status_set.png

     

  7. Click Done.
  8. Let's create another Status Message Function.
  9. Set the Name to BadnputProvided.

    add_bad_status_message.png

     

  10. Click Next.
  11. Change Message Type to Error.
  12. In the Message field, enter Text is BAD!.

    set_bad_status_set.png

     

  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. 

    click_validation_binding.png

     

  3. Click the down arrow by the True Event.
  4. Click Add Trigger Service.

    click_val_true_arrow.png

     

  5. Click Functions.
  6. Check the checkbox by GoodInputProvided.

    connect_good_status_set.png

     

  7. Click Next.
  8. Click the down arrow by the False Event.
  9. Click Add Trigger Service.

    click_val_false_arrow.png

     

  10. Click Functions.
  11. Check the checkbox by BadInputProvided.

    connect_bad_status_set.png

     

  12. Click Next.
  13. You should currently have the following setup: 

    initial_val_setup.png

     

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.

    click_val_txt_arrow.png

     

  2. Click Add Source.
  3. With the Widgets tab selected, scroll down and select the Text Property of our Text Field.

    connect_text_box_set.png

     

  4. Click Next.
  5. Click the down arrow by Evaluate Service.
  6. Select Add Event Trigger.

    click_val_eval_arrow.png

     

  7. With the Widgets tab selected, scroll down and select the Clicked Property of our Button.

    connect_button_set.png

     

  8. Click Next.
  9. You should currently have the following setup:

    complete_val_setup.png

     

  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: Create Confirmation Modal

 

With our MyFunctionsMashup Mashup open, let's add a Confirmation Function. A Confirmation Function provides a quick modal that will give users a method to confirm actions or events before they take place. If you've ever almost deleted a production database (don't judge me!), then you know how handy a confirmation screen can be. Let's add a button that will trigger a confirmation as to whether we would like to run the Validator we created in the last section.

 

  1. Open the MyFunctionsMashup Mashup to the Design tab.
  2. Click the + button in the Functions panel.
  3. Select Confirmation in the dropdown.

    create_function_confirmation.png

     

  4. Set the Name to confirmDataValidation.
  5. Click Next.

    name_confirm_func.png

     

  6. Set the Title Text to Confirm Data Validation?.
  7. Set the Message Text to Would you like to perform a data validation?.

    title_confirm_func.png

     

  8. Set the Cancel Button Label to No Thanks!.
  9. Scroll down and set the Action Button Label to Yes Sir!.

    confirm_func_setup.png

     

  10. Click Done.
  11. Click the Widgets tab in the top left.
  12. Filter for and select a Button Widget.

    add_extra_button.png

     

  13. Drag and drop a Button Widget onto the Canvas.

    add_extra_button_drag.png

     

  14. With the new Button selected, click the down arrow that appears on the Button.
  15. Drag and drop the Clicked Event of the Button to the OpenConfirmation Service of our Confirmation Function.

    add_extra_button_click.png

     

 

We now have our Confirmation Function and a Button that will open the Confirmation when clicked. Let's add the final step by connecting the Confirmation to our Validation Function.

 

  1. Click the Bind (arrows) button for our isDataClean Validator.

    click_validation_binding.png

     

  2. Click the down arrow by the Evaluate Service.
  3. Select Add Event Trigger.

    click_eval_val_arrow.png

     

  4. Click the Functions tab.
  5. Select the ActionClick Event of our Confirmation Function.

    confirm_action_click.png

     

  6. Click Next.
  7. Click Done.
  8. Click Save for our Mashup.

 

We now have a way to independently validate that the text in our text box does not contain random values added by the user. View the Mashup and test things out by clicking on the second button and adding some crazy characters to our text box.

 

 

 

Step 5: Create Navigation

 

Thus far, we have been sticking to one Mashup. Let's venture out a bit by showing a different Mashup. Inside of our MyFunctionsMashup Mashup, we will add a Navigation Function. This will allow us to go to or just show a different UI based on some kind of user input or event. For our example, when a user clicks No Thanks! in our Confirmation Function, let's send them to a different Mashup.

 

Follow the steps to create a Navigation Function, a destination Mashup, and tie the two together. 

 

Create Destination Mashup

  1. Navigate to Browse > Visualization > Mashups.

    browse-mashups.png

     

  2. Click + New.
  3. Keep the defaults and click OK.

    new-mashup-template.png

  4. In the Name field, type MyNavigationDestination.

    create_nav_dest.png

     

  5. Click Save.
  6. Click the Design tab at the top to open the Mashup canvas.
  7. Click the Widgets tab.

    setup_dest_design.png

     

  8. Filter and search for the word Label.
  9. Drag and drop a Label Widget to the Mashup canvas. If you like, enlarge the Label sizing. 

    drag_nav_label.png

     

  10. In the Label Widget Properties section, scroll down to the LabelType Property.      
  11. Click the dropdown and select Large Header.

    set_nav_label_type.png

     

  12. In the LabelText Property field, type MY DESTINATION UI SCREEN.

  13. Click Save.

You have now created a simple UI that we will go to when we click our navigation button. Next, we'll tie together our navigation button and our freshly created Mashup.

 

Create Navigation Function

  1. Reopen the MyFunctionsMashup Mashup to the Design tab.
  2. Click the + button in the Functions panel.
  3. Select Navigation in the dropdown.

    create_function_navigation.png

     

  4. Set the Name to travelToDestination.

    create_nav_func.png

     

  5. Click Next.
  6. Set the Target Window Type to ModalPopup.
  7. Set the Pop-up Title to New Popup Here.

    setup_navigation_func.png

     

  8. Set the Pop-up Width to 400.
  9. Set the Pop-up Height to 400.

    additional_navigation_func.png

     

  10. Click the + button at Target Mashup.
  11. Type MyNavigationDestination into the search bar.
  12. Select the MyNavigationDestination Mashup when it appears.

    select_nav_target.png

     

  13. Click Done.
  14. Select the Bind (arrows) button for our new travelToDestination Navigation Function.

    set_nav_func_bind.png

     

  15. Click the down arrow next to Navigate Service.
  16. Click Add Event Trigger.

    click_nav_arrow.png

     

  17. Click the Functions tab.
  18. Select the CancelClick Event of our confirmDataValidation Confirmation Function.

    connect_nav_confirmation.png

     

  19. Click Done.
  20. Click Save for the Mashup.

 

We now have a modal that will appear after we click the No Thanks! button in our Confirmation Function. View the Mashup and try out what you've done by clicking the bottom button, then clicking No Thanks!

 

 

Click here to view Part 3 of this guide.

 

Was this tip helpful? Yes No
Version history
Last update:
‎Mar 07, 2023 02:55 PM
Updated by:
6-Contributor
Labels (1)
Contributors