Aug
24
Written by:
Michael Washington
8/24/2014 4:20 PM
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_27b06027-5e1e-4024-a32a-e8288362cb9e.png)
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).
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_a1b76742-ac9a-46a2-8a8e-a41986403f72.png)
For our example, we will create a page. We start by first selecting Page.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_6b7feccd-2ccb-4f4d-b79e-ce28da26a9c7.png)
Next, we select View All Pages.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_83d0e8ec-32f2-49d1-92b3-04dc4c7cc603.png)
We create a new page.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_0880ec2d-5fc5-4e81-96a7-c6a0afe5ef49.png)
We enter a name for the page and note the full address of the page.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_4d935e62-3a9b-4853-8aa8-4af3a647b481.png)
After we create the page we select EDIT LINKS.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_3d0ee67e-d25d-461b-891c-198026b9f4f0.png)
We add a link.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_905c8a90-5d3e-4b16-883a-1f5af517446b.png)
We create the link.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_4588c8f7-0b9e-4d8c-83ce-486118f51543.png)
We Save the changes.
Adding The Web Part
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_3050a553-afd9-4f10-bb8e-f9360e990b9c.png)
Now, to add the App Part to the page, we navigate to the page, select Page then Edit.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_a5759e1f-7d86-43f7-be09-6e3a0ee38e9c.png)
We select Insert then App Part.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_c6d0cc4c-8261-411c-8c93-0b8aa3940975.png)
Next, we select the Cloud Business Tasks part to add the app to the current page.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_38a962d0-87cd-4580-a7d6-d98afaa60f3e.png)
Save the page.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_e4ccdb20-7438-4d47-8e4d-7bd6837786be.png)
We can click on an existing task to navigate directly to it.
Creating The App Part
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_68691f3c-2708-4e6b-be5c-3eec634d6615.png)
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).
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_26256b07-fb0c-4fb7-9eb5-461f28e6bd9e.png)
We right-click on the SharePoint configuration project and Add a New Item.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_f081023d-b2f5-4936-bc63-27c94daec17f.png)
We create a Client Web Part.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_ded8375f-c3cd-4515-80cc-99470cc50ea7.png)
We create a new page.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_3a86d9d1-aaf4-46ce-8276-57ab64891070.png)
The page and the configuration files will be created.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_cf99243c-eba9-4f3b-836c-e16c838f3823.png)
We open the .xml file and set the Title, Description and size.
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_f3e384ab-4315-47b1-91c4-506b55c0ae01.png)
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>
![image image](/Portals/0/Blog/Files/1/3269/Windows-Live-Writer-Embedding-Your-LightSwitch-App-Inside-Sh_12ACF-image_f2c45d45-48fe-43c1-8456-c512caeb2e24.png)
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
|