Better Forms – Add Parameter to PlatformEffect

In this lesson

  • Add ReturnText prop to RoutingEffect
  • Get prop value in PlatformEffect
  • Set prop value in Xaml

Transcript

Tap on time to skip ahead

00:10

Now that we’ve successfully decorated our password keyboard to have a Done key, it would be nice if we could make our email text entry have the word Next for its return key. I can create a new effect like NextKeyboardEffect that would change the return text to Next but that kind of seems a bit clumsy and that I’d have to create a whole new class and individual renders. To kind of be a bit more optimized and efficient, we’re going to extend our ReturnKeyEffect to have parameters that we can set through our XAML.

00:48

The first thing I’m going to do is go to the ReturnKeyEffect PCL class and I’m going to add a property called ReturnText. It is very important that this has a get in the set or it is a getter and setter property. Otherwise, the reflection API will not work when it goes to apply it via XAML.

01:11

Now, what I can do in our login page XAML, is I can say, ReturnText, and since this is the password entry we are going to say Done. We are going to copy these effects and we are going to apply it to our email entry and we’re going to give it a ReturnText of Next.

01:30

Then, I want to go into our effect for iOS. The very first thing I need to do is give it a reference to our ReturnKeyEffect. I’m going to say var effect = Element. An element represents the forms elements class that represents this particular control. I’m going to say effects.FirstOrDefault. We want to get the effect that has a type of ReturnKeyEffect but we have to make sure that we use our PCL version of it and not our platform render or this will return null.  

02:10

We also want to go ahead and cast this effect. If the effect turns out to not be null, we can then apply our effects. If effect.ReturnText = done the I want to set the ReturnKeyType to Done. I’m going to copy and paste this line. I’m going to say if it is Next then we want the UI or ReturnKeyType to be Next. I’m going to build, make sure I didn’t break anything.

02:50

Now when we run our application, when I tap on our email field, we see the Next button and when I tap on the password, I see we have our Done button. This better clues in our users what’s going to happen when they hit the return key and thus makes for better user experience.