Aug
24
Written by:
Michael Washington
8/24/2014 4:20 PM
You can embed your LightSwitch application directly into the SharePoint website, rather than the default behavior of launching the application full screen. You can also navigate directly to a record using deep linking. This is achieved by adding a SharePoint App Part to the project.
To understand how SharePoint App Parts work, let us first look at the process to install and consume them:
Consuming A Web Part
The SharePoint site administrator installs the application as normal (see: Creating A SharePoint Online Testing Site for an overview of the process).
For our example, we will create a page. We start by first selecting Page.
Next, we select View All Pages.
We create a new page.
We enter a name for the page and note the full address of the page.
After we create the page we select EDIT LINKS.
We add a link.
We create the link.
We Save the changes.
Adding The Web Part
Now, to add the App Part to the page, we navigate to the page, select Page then Edit.
We select Insert then App Part.
Next, we select the Cloud Business Tasks part to add the app to the current page.
Save the page.
We can click on an existing task to navigate directly to it.
Creating The App Part
We start with the application created in the article: Implementing Documents in a SharePoint 2013 Cloud Business App (LightSwitch) (from the book Creating HTML 5 Websites and Cloud Business Apps Using LightSwitch In Visual Studio 2013).
We right-click on the SharePoint configuration project and Add a New Item.
We create a Client Web Part.
We create a new page.
The page and the configuration files will be created.
We open the .xml file and set the Title, Description and size.
Next we open the CloudBusinessTasksWebPart.aspx file and change the BODY tag to the following:
<body style="overflow: scroll;">
<form id="form1" runat="server">
<asp:DataList ID="gvOrders" runat="server">
<ItemTemplate>
<ul>
<h1><asp:HyperLink ID="HyperLink1"
runat="server"
NavigateUrl='<%# Eval("HyperLink") %>'
Target="_parent">
<asp:Label runat="server"
Text='<%# Eval("TaskName") %>' />
</asp:HyperLink></h1>
Assigned to: <asp:Label runat="server"
Text='<%# Eval("TaskAssigned") %>' />
<br />Number of Documents: <asp:Label runat="server"
Text='<%# Eval("TaskDocuments") %>' />
</ul>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
Finally, we open the CloudBusinessTasksWebPart.aspx.cs page and use the following code:
using Microsoft.SharePoint.Client;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace LightSwitchApplication.Pages
{
public partial class CloudBusinessTasksWebPart : Page
{
protected void Page_Load(object sender, EventArgs e)
{
ShowTasks();
}
#region ShowOrders
private void ShowTasks()
{
using (var serverContext = GetServerContext())
{
// Get base URL
HttpContext context = HttpContext.Current;
string strBaseURL = context.Request.Url.Scheme
+ "://"
+ context.Request.Url.Authority
+ context.Request.ApplicationPath.TrimEnd('/') + @"/HTMLClient/";
// Construct Edit String
string SPHostUrl = Request.QueryString["SPHostUrl"];
string SPLanguage = Request.QueryString["SPLanguage"];
string SPClientTag = Request.QueryString["SPClientTag"];
string SPProductNumber = Request.QueryString["SPProductNumber"];
string SPAppWebUrl = Request.QueryString["SPAppWebUrl"];
string strUrlString1 = "{0}?SPHostUrl={1}&SPLanguage={2}&SPClientTag={3}";
string strUrlString2 = "&SPProductNumber={4}&SPAppWebUrl={5}&SPChromeColors=FF0072C6FFFFFFFF";
string strEditSring =
String.Format(strUrlString1 + strUrlString2,
strBaseURL, SPHostUrl, SPLanguage, SPClientTag, SPProductNumber, SPAppWebUrl);
// Get the Tasks
// this will automatically follow any business rules in the application
var result = from objTask in serverContext.DataWorkspace.ApplicationData
.Tasks.GetQuery().Execute()
select new TaskInfo
{
TaskID = objTask.Id,
TaskAssigned = objTask.TaskUserInfo.FullName,
TaskName = objTask.TaskName,
TaskDocuments = objTask.TaskDocuments.Count(),
HyperLink = strEditSring
+ "&entity=ApplicationData/Tasks(" + objTask.Id.ToString() + ")"
};
gvOrders.DataSource = result;
gvOrders.DataBind();
}
}
#endregion
#region TaskInfo
public class TaskInfo
{
int _TaskID;
public int TaskID
{
get { return _TaskID; }
set { _TaskID = value; }
}
string _TaskAssigned;
public string TaskAssigned
{
get { return _TaskAssigned; }
set { _TaskAssigned = value; }
}
int _TaskDocuments;
public int TaskDocuments
{
get { return _TaskDocuments; }
set { _TaskDocuments = value; }
}
string _TaskName;
public string TaskName
{
get { return _TaskName; }
set { _TaskName = value; }
}
string _HyperLink;
public string HyperLink
{
get { return _HyperLink; }
set { _HyperLink = value; }
}
}
#endregion
#region GetServerContext
private static ServerApplicationContext GetServerContext()
{
ServerApplicationContext serverContext =
(LightSwitchApplication.ServerApplicationContext)ServerApplicationContext.Current;
if (serverContext == null)
{
serverContext =
(LightSwitchApplication.ServerApplicationContext)ServerApplicationContext.CreateContext();
}
return serverContext;
}
#endregion
}
}
Download Code
The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx
(you must have Visual Studio 2013 (or higher) installed to run the code)
Links – Microsoft
Customizing the SharePoint Chrome Control in LightSwitch
Links – LightSwitch Help Website
Deploy A LightSwitch Application To Office 365 / SharePoint Online
Creating A SharePoint Online Testing Site
Exploring SharePoint 2013 Visual Studio Cloud Business Apps (LightSwitch)
Creating A LightSwitch SharePoint 2013 Multi-Tenant Provider-Hosted Application
Implementing Documents in a SharePoint 2013 Cloud Business App (LightSwitch)
4 comment(s) so far...
My lightswitch app works well in separate browser window. But it doesn't appear in the list of available app parts to add to page. What should I do to see my app in that list together with system parts such as Documents, Form Templates, Site Assets and so on...?
Thank You!
By Gennady on
11/11/2014 8:57 AM
|
@Gennady - Following the steps I have outlined should work for you.
By Michael Washington on
11/11/2014 8:58 AM
|
but it doesn't work:) Something went wrong becasue I didn't see app webpart of my application in site's webpart gallery.
By Gennady on
11/12/2014 4:49 AM
|
@Gennady - Try creating a normal Web Part here: http://msdn.microsoft.com/en-us/library/office/fp179921(v=office.15).aspx
By Michael Washington on
11/12/2014 4:50 AM
|