I have some css and jquery customizations that need to be done before a NewForm.aspx of a custom list is rendered to the client. The changes work fine for a regular PC/Desktop view, but not available when in Mobile view. I have tried customization both using a script editor webpart and JSLink, but to no effect. I don't want to simply disable mobile view for the whole site just to resolve this issue. How can I make the customization work on mobile view?
1 Answer
Customizing fields in mobile view is little bit different from "normal" view. I found out that JSLink functions will not hit; you need to override FieldRenderingMobileWebControl
property in your FieldType.cs
, and create your own YourFieldTypeMobileControl.cs
inherited from SPMobileBaseFieldControl
.
So, first, in your FieldType.cs
you should add overriding:
public override SPMobileBaseFieldControl FieldRenderingMobileWebControl
{
get
{
SPMobileBaseFieldControl fieldControl = new YourFieldTypeMobileControl();
fieldControl.FieldName = this.InternalName;
return fieldControl;
}
}
Second, you need new class YourFieldTypeMobileControl.cs
:
public class YourFieldTypeMobileControl: SPMobileBaseFieldControl
{
protected override void CreateChildControls()
{
//Always hit for ListView, NewForm, EditForm, DisplayForm
//If 'ListView': ControlMode = SPControlMode.Display
//If 'NewForm': ControlMode = SPControlMode.New and then call CreateControlForNew
//If 'EditForm': ControlMode = SPControlMode.Edit and then call CreateControlForEdit
//If 'DisplayForm': ControlMode = SPControlMode.Display and then call CreateControlForDisplay
base.CreateChildControls();
}
protected override System.Web.UI.Control CreateControlForDisplay()
{
Label info = new Label();
info.Text = "Custom field DISPLAY pattern for mobile view";
return info;
}
protected override System.Web.UI.Control CreateControlForNew()
{
Label info = new Label();
info.Text = "Custom field NEW pattern for mobile view";
return info;
}
protected override System.Web.UI.Control CreateControlForEdit()
{
Label info = new Label();
info.Text = "Custom field EDIT pattern for mobile view";
return info;
}
}
Put your own code in CreateChildControlFor...
methods to render your functionality.
All info about mobile field rendering I found here: https://msdn.microsoft.com/en-us/library/bb862011(v=office.14).aspx. This link is for SP2010, but it also works in SP2013, I've check it.
-
Thank you @Olga! but this is not a VS project. I was hoping to make changes from the web interface or Sharepoint Designer. Thank you.– AamirNov 14, 2016 at 14:50
-
Unfortunally, I failed to fire custom JS functions in mobile views. Looks like SP mobile pages renders on-the-fly from /LAYOUTS/Mobile/... , so we have very limited possibilities to modify them :( Nov 15, 2016 at 8:15