Customizing the Navigation controls of MOBILE item form pages for a specific list.
The Item form pages (New, Disp and Edit) for mobile views are physically available under the Layouts/Mobile folder. I have been seeing that lot of people are trying to customize the item form pages of Mobile view to include more links to the item form pages.
You can find the following MSDN article which walk through you on adding a new link to the mobile view page https://msdn.microsoft.com/en-us/library/ms457259.aspx
The above given article will give you a clear idea about customizing the Mobile view pages and the role played by “MobileDefaultTemplates.ascx” control. In this blog post i am going to walk through about customizing the mobile ITEM FORM PAGES to customize their navigation control. Consider my requirement is to customize the navigation of Save, Cancel and Home links to different pages and would like to wipe out the “Go back to List” link.
The rendering controls for the Mobile item form pages are rendered through rendering templates registered in the OOB “MobileDefaultTemplates.ascx” control. There are several rendering templates available in the “MobileDefaultTemplates.ascx” to render the View, Title, Content and Navigation of the item form pages.
Here our requirement is to customize the behavior of “Save”, “Cancel” and “Home” links which are navigation control for the item form pages. These controls are rendered through the Navigation rendering template in the “MobileDefaultTemplates.ascx”. Following are the rendering template for Navigation controls in New, Edit and Disp forms.
New Form :
<SharePoint:RenderingTemplate RunAt="Server" ID="Mobile_Default_NewForm_Navigation">
<Template>
<SPMobile:SPMobileComponent RunAt="Server" TemplateName="Mobile_Default_EditForm_Navigation" />
</Template>
</SharePoint:RenderingTemplate>
Edit Form :
<SharePoint:RenderingTemplate RunAt="Server" ID="Mobile_Default_EditForm_Navigation">
<Template>
<SPMobile:SPMobileFormDigest RunAt="Server" />
<SPMobile:SPMobileSaveNavigation RunAt="Server" Text="<%$Resources:wss, mobile_button_save_text%>" BreakAfter="false" />
<SPMobile:SPMobileCancelNavigation RunAt="Server" Text="<%$Resources:wss, mobile_button_cancel_text%>" />
<SPMobile:SPMobileListViewNavigation RunAt="Server" Text="<%$Resources:wss, mobile_navigation_backlist_text%>" AccessKey="#" />
<SPMobile:SPMobileHomePageNavigation RunAt="Server" Text="<%$Resources:wss, mobile_navigation_home_text%>" AccessKey="0" />
</Template>
</SharePoint:RenderingTemplate>
Disp Form:
<SharePoint:RenderingTemplate RunAt="Server" ID="Mobile_Default_DispForm_Navigation">
<Template>
<SPMobile:SPMobileEditFormNavigation RunAt="Server" Text="<%$Resources:wss, mobile_navigation_edit_text%>" AccessKey="8" />
<SPMobile:SPMobileListViewNavigation RunAt="Server" Text="<%$Resources:wss, mobile_navigation_backlist_text%>" AccessKey="#" />
<SPMobile:SPMobileHomePageNavigation RunAt="Server" Text="<%$Resources:wss, mobile_navigation_home_text%>" AccessKey="0" />
</Template>
</SharePoint:RenderingTemplate>
With this said now we had a clear understanding that the Navigation controls in mobile item form pages are rendered through rendering template and we have to customize this rendering template to render your own custom control to implement the requirement. We cannot make changes to the OOB MobileDefaultTemplates.ascx which is not supported. So you have to override the templates through a custom MobileDefaultTemplates.ascx. But overriding with the same rendering template ID will apply the changes globally but you require the customization specific to a list instance. We cannot directly apply the rendering templates to a specific list instance but we can apply it to the specific lists getting created from a specific list template. So the first step is to create your custom list template and install and activate it in the SharePoint farm.
Create a custom list template based on a OOB template by copying the OOB list definition feature. In this sample, I have created a custom List template based on the OOB “CustomList” definition which you can find under 12/Template/Features folder. Copy the OOB “CustomList” folder and paste it under the features folder with custom name. Change the feature ID, List Template type and install and activate the feature. In the sample here for further walkthrough consider List template type as “1786” (You can provide any template type rather than OOB template Type ID’s). [Refer the attachment for the custom list template feature]
So now the custom list template is available to create the list instances. Now let’s look into customizing the rendering template for your requirement.
You can easily find from the above rendering template that each navigation control is rendered through the class from Microsoft.SharePoint.MobileControls namespace. you have to create a class inheriting from the specific class and need to override the methods to implement your requirement for Save, Cancel and Home navigation respectively. Following are the classes i created for custom SAVE, CANCEL and HOME navigation control respectively from SPMobileSaveNavigation, SPMobileCancelNavigation and SPMobileHomeNavigation. I just wanted to Navigate to “hhstart.html” which i placed under the “Layouts/Mobile” folder when clicking on Home and to “quit.html” while clicking on Cancel and for Save button i would like to save the item and be on the same page. It’s just a sample :)
namespace MobileControlForNew
{
public class MymobileHome:SPMobileHomePageNavigation // HOME
{
protected override string PageFileName
{
get
{
return "hhstart.html";
}
}
}
public class MymobileSave : SPMobileSaveNavigation // SAVE
{
protected override void OnClick(object sender, EventArgs e)
{
//base.OnClick(sender, e);
base.MobilePage.Validate();
if (base.MobilePage.IsValid)
{
this.SaveItem(this.MobileContext);
this.Redirect();
}
}
protected override void Redirect()
{
//base.Redirect();
this.Context.Response.RedirectLocation = this.RedirectUrl;
}
public override string RedirectUrl
{
get
{
return base.RedirectUrl;
}
set
{
base.RedirectUrl = this.MobileContext.CurrentFolderUrl;
}
}
}
public class MymobileCancel : SPMobileCancelNavigation // CANCEL
{
public override string RedirectUrl
{
get
{
return base.RedirectUrl = this.Web.Url + "/_layouts/mobile/quit.html";
}
set
{
base.RedirectUrl = value;
}
}
}
}
Compile the project and place the DLL into GAC. [Find the attachment for the reference of the class library project]
Now with the custom control ready, you need to render this control for your custom list templates mobile item form pages. Create a custom “MobileDefaultTemplates.ascx” control and place it under the 12/Template/Control Templates folder. We have to render the Navigation rendering template for New, Edit and Disp form along with the custom controls and different ID. The ID has a format to be followed i.e. Mobile_<List template type>_<Form Name>_Navigation ( This format is same for other templates like View, Contents etc.). Following is the entry for the custom MobileDefaultTemplates.ascx
<%@ Control Language="C#" %> <%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %> <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Assembly Name="MobileControlForNew, Version=1.0.0.0, Culture=neutral, PublicKeyToken=a98d75670103c16e" %>
<%@ Register TagPrefix="Mymobile" Namespace="MobileControlForNew" Assembly="MobileControlForNew, Version=1.0.0.0, Culture=neutral, PublicKeyToken=a98d75670103c16e" %>
<SharePoint:RenderingTemplate RunAt="Server" ID="Mobile_1786_NewForm_Navigation">
<Template>
<SPMobile:SPMobileComponent RunAt="Server" TemplateName="Mobile_1786_EditForm_Navigation" />
</Template>
</SharePoint:RenderingTemplate>
<SharePoint:RenderingTemplate RunAt="Server" ID="Mobile_1786_EditForm_Navigation">
<Template>
<SPMobile:SPMobileFormDigest ID="SPMobileFormDigest1" RunAt="Server" />
<Mymobile:MymobileSave RunAt="Server" Text="<%$Resources:wss, mobile_button_save_text%>" BreakAfter="false" />
<Mymobile:MymobileCancel RunAt="Server" Text="<%$Resources:wss, mobile_button_cancel_text%>" />
<Mymobile:MymobileHome RunAt="Server" Text="<%$Resources:wss, mobile_navigation_home_text%>" AccessKey="0" />
</Template>
</SharePoint:RenderingTemplate>
<SharePoint:RenderingTemplate RunAt="Server" ID="Mobile_1786_DispForm_Navigation">
<Template>
<SPMobile:SPMobileEditFormNavigation RunAt="Server" Text="<%$Resources:wss, mobile_navigation_edit_text%>" AccessKey="8" />
<Mymobile:MymobileHome RunAt="Server" Text="<%$Resources:wss, mobile_navigation_home_text%>" AccessKey="0" />
</Template>
</SharePoint:RenderingTemplate>
Save the custom MobileDefaultTemplates.ascx and do an IISRESET. Now create a list instance based on your custom list template and check the mobile item form pages for your requirement. This changes will be only available to the list created from this list template.
HAPPY CUSTOMIZING