We have already seen the experience editor part in the Extending General Link for Experience Editor article in detail. Hence, in this article, we will explore how we can extend the general link for experience editor mode with an alternate code approach in Sitecore 10.2.0 to resolve the higher environment and performance issues that occurred after implementing the additional security certificates.
Extending General Link for Experience Editor Alternate Approach
Let’s delve into the details of this alternative code approach for a more robust and seamless Sitecore experience.
Please follow Steps 1 to 5 outlined in the “Extending General Link for Experience Editor” article to add the necessary configurations and set up the appropriate design in the experience editor mode. Here, we will only explore how we optimized the previously created “ExtendedGeneralLinkForm.cs” class.
1. Requisite
Install the specified DLLs using “NuGet Manager”, all the mentioned DLLs are in version 10.2.0.
- Sitecore.XA.Foundation.Multisite
- Sitecore.XA.Foundation.SitecoreExtensions
Note: Because we are working with a Sitecore 10.2.0 instance, installing the DLLs that match this version is essential. You can install the DLLs based on your specific version requirements.
2. Update or Add ExtendedGeneralLinkForm.cs class
Create or update the “ExtendedGeneralLinkForm.cs” class, which functions as the code behind for the “ExtendedGeneralLink.xml” design file.
The “ExtendedGeneralLinkForm.cs” class is created by inheriting from the existing “GeneralLinkForm.cs” class file. In Sitecore 10.2.0, if you examine the “Sitecore.Client.dll” you’ll find this specific class in the “Sitecore.Shell.Applications.Dialogs.GeneralLink” namespace. Here, you can refer to how the “GeneralLinkForm” is utilized.
Next, it’s necessary to include essential changes in the “ExtendedGeneralLinkForm.cs” file to implement the “Telephone” link feature in Sitecore’s Experience Editor mode.
namespace Fieldtypes.ExtendedGeneralLink
{
public class ExtendedGeneralLinkForm : Sitecore.Shell.Applications.Dialogs.GeneralLink.GeneralLinkForm
{
//Since we are inheriting from the "GeneralLinkForm.cs" class, there is no need to add references to all the controls.
protected Border TelephoneToContainer;
protected Edit TelephoneToLink;
protected XmlControl Dialog;
protected BaseClient BaseClient
{
get
{
return (BaseClient)ServiceLocator.ServiceProvider.GetService(typeof(BaseClient));
}
}
private string CurrentMode
{
//Code snippet from the "GeneralLinkForm.cs" class
}
protected CrossSiteLinksMultiRootTreeview RootItemTreeview { get; set; } = new CrossSiteLinksMultiRootTreeview();
protected override void OnLoad(EventArgs e)
{
//We've enhanced the "OnLoad" method by incorporating custom code. For more details, please refer to the GitHub link provided below.
}
private void AddTreeRoots(List startItems)
{
//Created new methods, as per the requirement
}
protected virtual void SetSelectedItem()
{
//Created new methods, as per the requirement
}
protected virtual DataContext CopyDataContext(DataContext dataContext, string id)
{
//Created new methods, as per the requirement
}
//Code snippet from the "GeneralLinkForm.cs" class
protected override void OnOK(object sender, EventArgs args)
{
if (!this.InternalLinkTreeview.Visible)
{
this.InternalLinkTreeview = this.RootItemTreeview;
}
//Code snippet from the "GeneralLinkForm.cs" class
bool flag;
switch (this.CurrentMode)
{
//Code snippet from the "GeneralLinkForm.cs" class
case "tel":
flag = this.SetTelephoneLinkAttributes(packet);
break;
//Code snippet from the "GeneralLinkForm.cs" class
}
//Code snippet from the "GeneralLinkForm.cs" class
}
protected virtual void HandleInitialMediaItemSelected()
{
//Created new methods, as per the requirement
}
//Code snippet from the "GeneralLinkForm.cs" class
private string GetTelephone()
{
var value = ((Control)this.TelephoneToLink).Value;
var str = value;
if (str.Length > 0)
{
if (str.IndexOf(":", StringComparison.InvariantCulture) >= 0)
{
str = str.Substring(str.IndexOf(":", StringComparison.InvariantCulture) + 1);
}
if (!new Regex(@"^(?:\(?)(?<AreaCode>\d{3})(?:[\).\s]?)(?<Prefix>\d{3})(?:[-\.\s]?)(?<Suffix>\d{4})(?!\d)", RegexOptions.IgnoreCase).IsMatch(str))
{
return "__Canceled";
}
}
if (value.Length > 0 && value.IndexOf(":", StringComparison.InvariantCulture) < 0)
{
value = string.Concat("tel:", value);
}
return value;
}
private bool SetTelephoneLinkAttributes(Packet packet)
{
Assert.ArgumentNotNull((object)packet, nameof(packet));
var tel = GetTelephone();
if (tel == "__Canceled")
{
SheerResponse.Alert("The telephone number is invalid.");
return false;
}
SetAttribute(packet, "url", tel ?? string.Empty);
SetAttribute(packet, "anchor", string.Empty);
return true;
}
private void SetTelephoneLinkControls()
{
if (this.LinkType == "tel" && string.IsNullOrEmpty(((Control)this.Url).Value))
{
((Control)this.TelephoneToLink).Value = this.LinkAttributes["url"].Replace("tel:", "");
}
ShowContainingRow((Control)this.TelephoneToContainer);
this.SectionHeader.Text = Translate.Text("Specify the Telephone, e.g. 9006662121");
}
//Code snippet from the "GeneralLinkForm.cs" class
private void SetModeSpecificControls()
{
//Code snippet from the "GeneralLinkForm.cs" class
HideContainingRow((Control)this.TelephoneToContainer);
//Code snippet from the "GeneralLinkForm.cs" class
switch (this.CurrentMode)
{
//Code snippet from the "GeneralLinkForm.cs" class
case "tel":
this.SetTelephoneLinkControls();
break;
//Code snippet from the "GeneralLinkForm.cs" class
}
//Code snippet from the "GeneralLinkForm.cs" class
}
//Code snippet from the "GeneralLinkForm.cs" class
}
}
Click the “GitHub – UpdatedExtendedGeneralLinkForm” link to access the detailed code logic needed to implement the “ExtendedGeneralLinkForm.cs” class.
3. Update or Add Configuration Patch File
Ensure to make changes to the configuration patch file. In our case, as we’ve already updated the existing “ExtendedGeneralLinkForm.cs” class and its configurations are already included in the patch file, we do not need to update the patch file again.
You can find the entire code for the configuration patch file on the GitHub -Fieldtypes.ExtendedGeneralLink.Patch.config link.
Once all the changes have been added, don’t forget to clean and rebuild the solution.
4. Final Output – Experience Editor
When adding a component that utilizes the “General Link” field type, choose its “General Link” field through the experience editor mode.
Click on the “Edit” button as mentioned in the below image.
The “Insert a link” dialog box will appear, where you can locate the option for adding a “Telephone” link along with its necessary properties.
Conclusion
Our response to introducing additional security certificates in higher environments involved optimizing our code, resulting in significant benefits. Streamlining the code results in reducing the security filtering steps and improving overall code performance. “Extending the General Link for the Experience Editor Alternate Approach” proved instrumental in addressing issues in higher environments. Consequently, code optimization has become a crucial component of our strategy, ensuring the delivery of a robust and efficient solution.
Happy learning!
