The Contact component is used to save information and contact methods.
MAUI Variations
The Contact component is enhanced to provide additional features if the user is using the MAUI application. When the following fields are populated additional buttons appear (if enabled in the Field Definition) that provide additional functionality.
- Phone Number
- Mobile Number
MAUI App Behavior
When using the MAUI app and the fields mentioned above are populated, these are the buttons that will be available:
- Send Email
- Call Phone Number
- Call Mobile Number
- Send SMS
The Send Email button will attempt to open the devices default email app and compose a new email to the address specified in the email field.
The Call Phone Number and Call Mobile Number buttons will both open the devices dialer and prepopulate the number to call with the number in the field.
The Send SMS button will open the devices messaging app and compose a new message to the number specified in the Mobile Number field.
IMPORTANT NOTE: For these buttons to be visible when their respective fields have a value they must be enabled in the field definition. By default they’re enabled but that can be changed in the field definition.
Website Behavior
On the website the following buttons are available when their respective field has a value.
- Send Email
- Send SMS
The Send Email button will open the devices email app and compose a new email to the address specified in the email field.
The Send SMS button will open a popup window where you can enter a message that will be sent to the number specified in the Mobile Number field. SMS messages sent on the website use Twilio, refer to the Twilio setup article to use this functionality.
IMPORTANT NOTE: For these buttons to be visible when their respective fields have a value they must be enabled in the field definition. By default they’re enabled but that can be changed in the field definition.
Component Code
The first section of the code for the component contains the standard parameter set along with the variables needed for the component to function. Following the variables are the methods used by the component which are listed below.
OnParametersSetAsync()
This method is called after the component has initialized and when there’s an update to the parent component. Its purpose is to assign variables their values.
ValueChanged()
This method is called when the value of any of the contact information fields has changed. This method ensures the field is modifiable and there are no validation errors. If those conditions are met then the ChangeXML method is called, otherwise nothing happens.
ChangeXML()
This method is used to update the XML of the instance to reflect the value of the Contact field. When called the required XML is generated, the element name is equal to the XMLName variable, and only fields where the value has been changed are added as XML Values to be updated in the database (as opposed to all fields in the contact component).
Lastly, a call is made to the ChangeField method on myInstance and the new XML is passed.
This is the structure of the XML that is saved for this component:
<ContactInfoField>
Shelby, Thomas
<LastName>Shelby</LastName>
<FirstName>Thomas</FirstName>
<Title>Mr.</Title>
<Email>thomas@shelbyco.com</Email>
<Phone>1234567890</Phone>
<Mobile>1234567890</Mobile>
<Initials>TS</Initials>
</ContactInfoField>CallPhoneButtonSelected()
This method is called when the Call Phone Number button is selected (only available when using the MAUI app). The purpose of this method is to call ExecuteContactFunction and pass the function name (“Call”) and the value (value in the phone number field).
CallMobileButtonSelected()
This method is called when the Call Mobile Number button is selected (only available when using the MAUI app). The purpose of this method is to call ExecuteContactFunction and pass the function name (“Call”) and the value (value in the mobile number field).
EmailButtonSelected()
This method is called when the Send Email button is selected. The purpose of this method is to determine if the user is on the website or MAUI app. If the user is using the MAUI app a call to ExecuteContactFunction is made and the function name (“Email”) and the value (value in the Email field) are passed to it. If the user is on the website then is navigated to a mailto address which will open their default mail application.
SMSButtonSelected()
This method is called when the SMS button is selected. The purpose of this method is to determine if the user is on the website or MAUI app. If the user is using the MAUI app a call to ExecuteContactFunction is made and the function name (“SMS”) and the value (value in the mobile number field) are passed to it. If the user is on the website then the SMS popup window is displayed where the user can enter the message they want to send.
SendSMSButtonSelected()
This method is called when the Send SMS button is selected in the SMS popup window. The purpose of this method is to take the message from the textbox, create a new MessageInformation object and using the MessagesClient make an API call to add the message to a message queue.
If the message was successfully added to the queue the user is informed the message was successfully sent, otherwise they’re informed the message failed to be sent.
ExecuteContactFunction(string function, string value)
This method is called to call one of the MAUI Essentials functions. Depending on the function argument passed it will make a call to the corresponding method using the ContactFunctions service. If an unsupported function is passed an error notification is displayed to the user. If one of the function calls fails then an error notification is displayed to the user.
