Aug 24

Written by: Michael Washington
8/24/2014 4:20 PM  RssIcon

image

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

image
The SharePoint site administrator installs the application as normal (see: Creating A SharePoint Online Testing Site for an overview of the process).

image

For our example, we will create a page. We start by first selecting Page.

image

Next, we select View All Pages.

image

We create a new page.

image

We enter a name for the page and note the full address of the page.

image

After we create the page we select EDIT LINKS.

image

We add a link.

image

We create the link.

image

We Save the changes.

Adding The Web Part

image

Now, to add the App Part to the page, we navigate to the page, select Page then Edit.

image

We select Insert then App Part.

image

Next, we select the Cloud Business Tasks part to add the app to the current page.

image

Save the page.

image

We can click on an existing task to navigate directly to it.

Creating The App Part

image

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

We right-click on the SharePoint configuration project and Add a New Item.

image

We create a Client Web Part.

image

We create a new page.

image

The page and the configuration files will be created.

image

We open the .xml file and set the Title, Description and size.

image

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

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...


Gravatar

Re: Embedding Your LightSwitch Cloud Business App Inside SharePoint As a App Part

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
Gravatar

Re: Embedding Your LightSwitch Cloud Business App Inside SharePoint As a App Part

@Gennady - Following the steps I have outlined should work for you.

By Michael Washington on   11/11/2014 8:58 AM
Gravatar

Re: Embedding Your LightSwitch Cloud Business App Inside SharePoint As a App Part

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
Gravatar

Re: Embedding Your LightSwitch Cloud Business App Inside SharePoint As a App Part

@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

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation