Adding an SMS Link (href=sms:) to the General Link Field Type in Sitecore

In this blog, I am going to explain how to add a custom SMS Link to the General Link Field Type in Sitecore. I always use this sms functionality in my website, so I thought, why not adding it as a custom type in Sitecore so that I would be able make use of it in rendering it as Sitecore Link Field

	@Html.Sitecore().Field(Templates.TemplateName.Fields.ItemLink, Item)
	//The result of the above line would be:
	<a href="sms:[phonenumber];?&body=[body]">Send Text Message</a>

view raw HTMLLinkField hosted with ❤ by GitHub

In order to add this custom sms link, let me walk you through the steps:

1- Login into Sitecore and go to the Core Database.
2- Add a new item under the following path /sitecore/system/Field types/Link Types/General Link/Menu
In the following screenshot, it is named as "SMS".

3- Fill in a display name for this item (e.g Insert SMS Link). This field value is the text that is displayed when you add a general link field to a template and go to an item of this template to inset a link:

4- Set the message field to: contentlink:smslink(id=$Target). This is the case that would navigate the user to the InsertSMSLink Form when he clicks on "Insert SMS Link".

5- Create a class called "SMSLink". This class is going to open the SMS Link Form popup when you click on "Insert SMS Link" link. It checks for the "Message" value and opens the popup accordingly:

	using System;
	using Sitecore;
	using Sitecore.Diagnostics;
	using Sitecore.Shell.Applications.ContentEditor;
	using Sitecore.Text;
	namespace SiteName.Foundation.SitecoreExtensions.Extensions
	{
	public class SMSLink : Link
	{
	// Handles the message field in the SMS Link Field.
	public override void HandleMessage(Sitecore.Web.UI.Sheer.Message message)
	{
	Assert.ArgumentNotNull(message, "message");
	//base handles other message requests
	base.HandleMessage(message);
	string name = message.Name;
	if (name != null)
	{
	switch (name)
	{
	case "contentlink:smslink":
	{
	var url = new UrlString(UIUtil.GetUri("control:SMSLinkForm"));
	//find control and open url
	base.Insert(url.ToString());
	return;
	}
	default:
	{
	return;
	}
	}
	}
	}
	}
	}

view raw SMSLink Class hosted with ❤ by GitHub

6- Navigate back to the Core database, and go to the following path: /sitecore/system/Field types/Link Types/General Link. Set the value of the "Control" field to : content:SMSLink.

7- Add a new customized config file in order to register the SMSLink Control:

	<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
	<sitecore>
	<controlSources>
	<source mode="on" namespace="Sitename.Foundation.SitecoreExtensions.Extensions" assembly="Sitename.Foundation.SitecoreExtensions" prefix="content"></source>
	</controlSources>
	</sitecore>
	</configuration>

view raw SMSLinkRegistrationConfigFile hosted with ❤ by GitHub

8- Now let us add the xml of how the popup would look like when the user clicks on "Insert SMS Link". This file has to be added to the following path : "/sitecore/shell/Applications/Dialogs". Create a new folder there to place the xml file in.

	<?xml version="1.0" encoding="utf-8" ?>
	<control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
	<SMSLinkForm>
	<FormDialog Icon="Network/32x32/mail.png" Header="Insert a Message link"
	Text="Please specify the message and any additional properties. When done, click OK."
	OKButton="OK">
	<CodeBeside Type="Sitename.Foundation.SitecoreExtensions.Extensions.SMSLinkForm,Sitename.Foundation.SitecoreExtensions"/>
	<a id="telephone"></a>
	<GridPanel Class="scFormTable" CellPadding="2" Columns="2" Width="100%">
	<Label For="Text" GridPanel.NoWrap="true">
	<Literal Text="Link description:"/>
	</Label>
	<Edit ID="Text" Width="100%" GridPanel.Width="100%"/>
	<Label For="Url" GridPanel.NoWrap="true">
	<Literal Text="Message:"/>
	</Label>
	<Edit ID="Url" Width="100%" />
	<Label For="Class" GridPanel.NoWrap="true">
	<Literal Text="Style class:" />
	</Label>
	<Edit ID="Class" Width="100%" />
	<Label for="Title" GridPanel.NoWrap="true">
	<Literal Text="Alternate text:"/>
	</Label>
	<Edit ID="Title" Width="100%" />
	</GridPanel>
	</FormDialog>
	</SMSLinkForm>
	</control>

view raw SMSLinkXMLFile hosted with ❤ by GitHub

9- When the user fills in the message, and clicks on Ok, the following code will be executed: Another class is created too as a processor to render the SMS link (RenderSMSLink):

	using System;
	using System.Collections.Specialized;
	using System.Text.RegularExpressions;
	using Sitecore;
	using Sitecore.Diagnostics;
	using Sitecore.Shell.Applications.Dialogs;
	using Sitecore.Web.UI.HtmlControls;
	using Sitecore.Web.UI.Pages;
	using Sitecore.Web.UI.Sheer;
	using Sitecore.Xml;
	namespace Sitename.Foundation.SitecoreExtensions.Extensions
	{
	public class SMSLinkForm : LinkForm
	{
	protected Edit Class;
	protected Edit Text;
	protected Edit Title;
	protected Edit Url;
	public SMSLinkForm()
	{
	}
	private string GetMessage()
	{
	string value = this.Url.Value;
	string str = value;
	if (str.Length > 0)
	{
	if (str.IndexOf(":", StringComparison.InvariantCulture) >= 0)
	{
	str = str.Substring(str.IndexOf(":", StringComparison.InvariantCulture) + 1);
	}
	}
	if (value.Length > 0 && value.IndexOf(":", StringComparison.InvariantCulture) < 0)
	{
	value = string.Concat("sms:", value);
	}
	return value;
	}
	protected override void OnLoad(EventArgs e)
	{
	Assert.ArgumentNotNull(e, "e");
	base.OnLoad(e);
	if (Context.ClientPage.IsEvent)
	{
	return;
	}
	string item = base.LinkAttributes["url"];
	if (base.LinkType != "sms")
	{
	item = string.Empty;
	}
	this.Text.Value = base.LinkAttributes["text"];
	this.Url.Value = item.Replace("sms:", "");
	this.Class.Value = base.LinkAttributes["class"];
	this.Title.Value = base.LinkAttributes["title"];
	}
	protected override void OnOK(object sender, EventArgs args)
	{
	Assert.ArgumentNotNull(sender, "sender");
	Assert.ArgumentNotNull(args, "args");
	string sms = this.GetMessage();
	Packet packet = new Packet("link", new string[0]);
	LinkForm.SetAttribute(packet, "text", this.Text);
	LinkForm.SetAttribute(packet, "linktype", "sms");
	LinkForm.SetAttribute(packet, "url", sms);
	LinkForm.SetAttribute(packet, "anchor", string.Empty);
	LinkForm.SetAttribute(packet, "title", this.Title);
	LinkForm.SetAttribute(packet, "class", this.Class);
	SheerResponse.SetDialogValue(packet.OuterXml);
	base.OnOK(sender, args);
	}
	}
	public class RenderSMSLink
	{
	public void Process(Sitecore.Pipelines.RenderField.RenderFieldArgs args)
	{
	if (args != null && (args.FieldTypeKey == "link" || args.FieldTypeKey == "general link"))
	{
	Sitecore.Data.Fields.LinkField linkField = args.Item.Fields[args.FieldName];
	if (!string.IsNullOrEmpty(linkField.Url) && linkField.LinkType == "sms")
	{
	args.Parameters["href"] = linkField.Url;
	}
	}
	}
	}
	}

view raw SMSLinkInsertMessageHandle hosted with ❤ by GitHub

10- In order for this processor to work, you need to patch a configuration for it under the pipelines section:

	<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
	<sitecore>
	<pipelines> <renderField>
	<processor patch:before="*[@type='Sitecore.Pipelines.RenderField.GetLinkFieldValue, Sitecore.Kernel']" type="Sitename.Foundation.SitecoreExtensions.Extensions.RenderSMSLink, Sitename.Foundation.SitecoreExtensions" />
	</renderField>
	</pipelines>
	</sitecore>
	</configuration>

view raw RenderSMSLinkPipeline hosted with ❤ by GitHub

You are all set now!

This way, we are going to still be able to render the link as an Html Sitecore Link (@Html.Sitecore().Field(Templates.TemplateName.Fields.ItemLink,Item))

Hope this is useful :)

Happy Coding!