{"id":44919,"date":"2019-08-02T12:00:42","date_gmt":"2019-08-02T19:00:42","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/xamarin\/?p=44919"},"modified":"2020-04-30T04:29:50","modified_gmt":"2020-04-30T11:29:50","slug":"contacts-app-email-sms-phone-navigation-with-xamarin-essentials","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/contacts-app-email-sms-phone-navigation-with-xamarin-essentials\/","title":{"rendered":"Add Contact Features in 4 Lines of Code with Xamarin.Essentials"},"content":{"rendered":"

Integrating contact functionality has been a common task that I have been asked to develop for mobile apps over the years. This has ranged from a full contacts directory to simple contact information inside an app. Most requested features include the ability to call the contact, send an sms or email, and navigate to a location. In the past, I would have to implement several native APIs myself or install several libraries that could provide the functionality. Today, with Xamarin.Essentials all of this functionality is available in a single library<\/a> and can be implemented in just 4 lines<\/b> of code! So, let’s build a contacts application with Xamarin.Essentials and Xamarin.Forms<\/a>.<\/p>\n

\"Animation<\/p>\n

The Contact<\/h2>\n

The first thing to do is define the Contact<\/code> class. This will have all of the information that is needed when using the Xamarin.Essentials APIs. This includes a phone number, email, and address.<\/p>\n

public class Contact\r\n{\r\n    public string Name { get; set; }\r\n    public string PhoneNumber { get; set; }\r\n    public string Email { get; set;  }\r\n    public string Address { get; set;  }\r\n    public string City { get; set; }\r\n    public string State { get; set; }\r\n    public string ZipCode { get; set; }\r\n}\r\n<\/pre>\n
Contact User Interface<\/h2>\n
There are a lot of ways to present contact information and for our example we can use a grid to display all of the information. We can use ImageButton<\/a> for each item to enable users to take action. Each Command<\/code>is bound to a method that will be called from the ViewModel that I will outline next.<\/p>\n
<Grid RowSpacing=\"8\">\r\n    <Grid.ColumnDefinitions>\r\n        <ColumnDefinition Width=\"44\"\/>\r\n        <ColumnDefinition Width=\"*\"\/>\r\n        <ColumnDefinition Width=\"44\"\/>\r\n    <\/Grid.ColumnDefinitions>\r\n\r\n    <!--Phone & SMS-->\r\n    <ImageButton Source=\"phone.png\" Grid.Row=\"0\" VerticalOptions=\"Center\"\r\n                    Command=\"{Binding PhoneCommand}\" BackgroundColor=\"Transparent\" \/>\r\n    <Label Grid.Column=\"1\" Grid.Row=\"0\"\r\n            VerticalOptions=\"Center\"\r\n            Text=\"{Binding Contact.PhoneNumber}\"\/>\r\n    <ImageButton Source=\"sms.png\" Grid.Row=\"0\" Grid.Column=\"2\" VerticalOptions=\"Center\"\r\n                    Command=\"{Binding SmsCommand}\" BackgroundColor=\"Transparent\"\/>\r\n    \r\n    <!--Email-->\r\n    <ImageButton Source=\"email.png\" Grid.Row=\"1\"  VerticalOptions=\"Center\"\r\n                    Command=\"{Binding EmailCommand}\" BackgroundColor=\"Transparent\"\/>\r\n\r\n    <Label Grid.Column=\"1\" Grid.Row=\"1\"\r\n            VerticalOptions=\"Center\"\r\n            Text=\"{Binding Contact.Email}\"\/>\r\n\r\n    <!--Address-->\r\n    <ImageButton Source=\"navigate.png\" Grid.Row=\"2\" VerticalOptions=\"Center\"\r\n                    Command=\"{Binding NavigateCommand}\" BackgroundColor=\"Transparent\"\/>\r\n\r\n    <StackLayout Grid.Column=\"1\" Grid.Row=\"2\" VerticalOptions=\"Center\">\r\n        <Label Text=\"{Binding Contact.Address}\"\/>\r\n        <Label>\r\n            <Label.FormattedText>\r\n                <FormattedString>\r\n                    <Span Text=\"{Binding Contact.City}\"\/>\r\n                    <Span Text=\" \"\/>\r\n                    <Span Text=\"{Binding Contact.State}\"\/>\r\n                    <Span Text=\", \"\/>\r\n                    <Span Text=\"{Binding Contact.ZipCode}\"\/>\r\n                <\/FormattedString>\r\n            <\/Label.FormattedText>\r\n        <\/Label>\r\n    <\/StackLayout>\r\n            \r\n<\/Grid><\/pre>\n
This will give us a very pretty user interface for our contact.<\/p>\n
\"User<\/p>\n
Phone Dialer<\/a>, Sms<\/a>, Email<\/a>, and Navigation<\/a>!<\/h2>\n
Each Command<\/code> that is bound in the user interface has a method that will be executed when the button is clicked. Each method uses a Xamarin.Essentials API to execute native functionality from a single line of code! Here is the full ViewModel from the sample app:<\/p>\n
public class ContactViewModel\r\n{\r\n    public Command SmsCommand { get; }\r\n    public Command EmailCommand { get; }\r\n    public Command PhoneCommand { get; }\r\n    public Command NavigateCommand { get; }\r\n\r\n    public Contact Contact { get; }\r\n\r\n    public ContactViewModel(Contact contact)\r\n    {\r\n        Contact = contact;\r\n    }\r\n\r\n    public ContactViewModel()\r\n    {\r\n        Contact = new Contact\r\n        {\r\n            Name = \"James Montemagno\",\r\n            Address = \"Microsoft Building 18\",\r\n            City = \"Redmond\",\r\n            State = \"WA\",\r\n            ZipCode = \"98052\",\r\n            Email = \"motz@microsoft.com\",\r\n            PhoneNumber = \"555-555-5555\"\r\n        };\r\n\r\n        SmsCommand = new Command(async () => await ExecuteSmsCommand());\r\n        EmailCommand = new Command(async () => await ExecuteEmailCommand());\r\n        PhoneCommand = new Command(ExecutePhoneCommand);\r\n        NavigateCommand = new Command(async () => await ExecuteNavigateCommand());\r\n    }\r\n\r\n    async Task ExecuteSmsCommand()\r\n    {\r\n        try\r\n        {\r\n            await Sms.ComposeAsync(new SmsMessage(string.Empty, Contact.PhoneNumber));\r\n        }\r\n        catch (Exception ex)\r\n        {\r\n            ProcessException(ex);\r\n        }\r\n    }\r\n\r\n    async Task ExecuteEmailCommand()\r\n    {\r\n        try\r\n        {\r\n            await Email.ComposeAsync(string.Empty, string.Empty, Contact.Email);\r\n        }\r\n        catch (Exception ex)\r\n        {\r\n            ProcessException(ex);\r\n        }\r\n    }\r\n\r\n    void ExecutePhoneCommand()\r\n    {\r\n        try\r\n        {\r\n            PhoneDialer.Open(Contact.PhoneNumber);\r\n        }\r\n        catch (Exception ex)\r\n        {\r\n            ProcessException(ex);\r\n        }\r\n    }\r\n\r\n    async Task ExecuteNavigateCommand()\r\n    {\r\n        try\r\n        {\r\n            await Map.OpenAsync(new Placemark\r\n            {\r\n                Thoroughfare = Contact.Address,\r\n                Locality = Contact.City,\r\n                AdminArea = Contact.State,\r\n                PostalCode = Contact.ZipCode\r\n            });\r\n        }\r\n        catch (Exception ex)\r\n        {\r\n            ProcessException(ex);\r\n        }\r\n    }\r\n\r\n    void ProcessException(Exception ex)\r\n    {\r\n        if (ex != null)\r\n            Application.Current.MainPage.DisplayAlert(\"Error\", ex.Message, \"OK\");\r\n    }\r\n}\r\n<\/pre>\n
Note here that on each platform we are wrapping the method call in a Try\/Catch<\/code> block. This is important in case the feature is not available on the specific device. Beyond that, we are done! With just 4 tiny lines of code we have integrated tons of great native functionality into our contacts app!<\/p>\n
Learn More<\/h2>\n
Be sure to browse through the full Xamarin.Essentials documentation<\/a> for setup instructions and API information. Subscribe to the Xamarin Developers YouTube channel<\/a> and browse through theXamarin.Essentials API of the Week  series<\/a> that feature short videos outlining a single API. Looking for more blogs on Xamarin.Essentials? Be sure to checkout the blog archive<\/a> that is filled with great posts.<\/p>\n
Find more awesome information on cross-platform development with Xamarin<\/a>. If you are looking to add a backend to your app take a look at App Center Data<\/a> & Azure Cosmos DB<\/a>. Also, checkout the full GeoContacts Sample on GitHub<\/a>. <\/p>\n
Finally, you can can grab the source code for this blog on GitHub<\/a> and try it today!<\/p>\n","protected":false},"excerpt":{"rendered":"
See how you can create a contact application to send an sms, email, place a phone call, and navigate to a location with just 4 lines of code with Xamarin.Essentials.<\/p>\n","protected":false},"author":544,"featured_media":44928,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,556,291,367],"tags":[24],"class_list":["post-44919","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","category-integrations","category-xamarin-platform","category-xamarin-forms","tag-xamarin-essentials"],"acf":[],"blog_post_summary":"
See how you can create a contact application to send an sms, email, place a phone call, and navigate to a location with just 4 lines of code with Xamarin.Essentials.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/44919","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/544"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=44919"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/44919\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/44928"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=44919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=44919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=44919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}