Dec 21

Written by: Michael Washington
12/21/2014 11:04 AM 

You can easily create professional end-user friendly applications when you incorporate Visual Studio LightSwitch Cloud Business Apps into your SharePoint solutions. When you implement SharePoint workflows, LightSwitch allows you to quickly create user interfaces to gather and manage the data your workflow may require.

Microsoft SharePoint workflows are powerful, but SharePoint provides only simple forms for gathering information. Many workflows consist of numerous steps that potentially need to gather different information at each step. Also, different permissions may need to be considered as to which users can update what data (and when they can update that data). In addition, LightSwitch allows you to integrate SharePoint workflows into applications that interface with data  other than the SharePoint list that the workflow is attached to.

In this article we will create a vacation request application that is driven by a SharePoint workflow. We will then create a LightSwitch application that allows a manager to use a rich interface to easily approve the vacation request.

Benefits Of SharePoint Workflows

SharePoint workflows provide a powerful tool for your enterprise solutions. A workflow can manage the state of a business process (such as a document approval) that can span a period of time from a few seconds to even years. Each workflow creates an unique instance so that business rules that exist at the time the workflow starts will remain in effect for that instance even if the business rules subsequently change for workflow instances started at a later date.

A workflow can sleep or wake up based on various triggers such as data changing or time passing.

To perform this tutorial you must have Visual Studio 2013 with the Visual Studio 2013 Update 2 (or higher) installed and a SharePoint Developer site.

The Application

Users of your SharePoint site can create vacation requests by opening the custom list.

They click the new item link to add a new request.

They enter their requested days and click the Save button.

If the vacation is more than 7 days away, the vacation is automatically approved.

They also receive an email.

If the vacation is less than 7 days away, the status is set to Pending and the members of the Vacation Approvers group receive an email that instructs them to access the LightSwitch Cloud Business App to approve it.

(note: to implement a business rule where we check to see how many vacation days an employee has, see: Advanced SharePoint Workflows Using HTTP Calls To LightSwitch)

The member of the Vacation Approver group logs into the LightSwitch Cloud Business App.

Selects the request…

… and approves (or denies) it.

Creating The Application

We will now detail the steps to create the application. This will be divided into three parts:

• SharePoint List – The SharePoint workflow will be attached to a list we will create. 
• SharePoint Workflow – The heart of the application will be the SharePoint Workflow that will make decisions based on the data in the SharePoint list.
• LightSwitch Cloud Business Application – The LightSwitch application will allow managers to approve vacation requests using an end-user friendly interface. In addition, we will implement code to prevent a non-administrator from approving a vacation.

The SharePoint List

Log into your SharePoint Developer site and select Site Contents and then add an app.

Select Custom List.

Name the list VacationRequestList.

When the list is created, hover over it until the (…) appears. Click on the (…) so that the settings menu appears. Click on the Settings link.

Use the Create column link to create new columns.

Add columns so that your list resembles the image above.

For ApprovalStatus, give it a default value of 0.

For the ApprovalStatusDisplay column, select Calculated as the field type and use the following formula:

=IF(ApprovalStatus=0,"PENDING",IF(ApprovalStatus=1,"APPROVED","NOT APPROVED"))

We now need to hide the ApprovalStatus column so that it doesn’t show on the SharePoint forms for the list.

The ApprovalStatus field will be set by the LightSwitch application in a later step.

The calculated field, ApprovalStatusDisplay will allow users to see the status of a vacation request.

Select Advanced settings from the General Settings section.

Select Yes for Allow management of content types? and click the OK button at the bottom of the page.

You will be returned to the main settings page.

Click on the Item link.

When the list of columns is displayed, click on the ApprovalStatus link to edit it and set it to Hidden (this is for the visibility of the field in edit mode, list mode will be set in a later step).

Edit each column so that your list settings resemble the image above.

(note: you can use the Colum order link to set the order the fields appear in)

Back on the list settings screen, click All Items under Views…

... and set the sort order for the fields when displayed in list mode, and to hide the ApprovalStatus in list mode.

Click the Site Contents link, in the menu bar on the left side of the screen, to return to the main screen.

You can click on the icon to navigate to the list.

You can now add or edit items.

Creating The SharePoint Workflow

There are many methods to create SharePoint workflows including using Visual Studio.

For our example, we will use the free SharePoint Designer 2013, available at this link.

Follow the directions at this link to open your SharePoint development site in the SharePoint designer.

When your site is open in the SharePoint designer, select List and Libraries and then select the VacationRequestList.

Select List Workflow.

Create a workflow that will be associated with the VacationRequestList called wfVacationRequest.

When the workflow is open in edit mode, hover the mouse in the top section until you see the insert action bar and double-click on it.

When the command box appears, type in add and press Enter.

Select the Add Time to Date action.

The condition will appear.

Click on each segment to set the values so it matches the image above.

For the Today value use Current Date.

For the Output to select Create a new variable…

Name the variable SevenDaysFromNow.

(we are creating a variable that we will use in a subsequent step to determine if the StartDate is more than 7 days away)

Add a if any action.

It will create the block.

The Define workflow lookup button allows you to access field values (from the associated list) and workflow variables.

For example, the image above shows how to access the StartDate.

The image above shows how to access the SevenDaysFromNow variable.

Set Field in Current Item allows you to set and update values in the list.

Log to History List allows you to insert entries into the workflow History Log to assist with debugging.

Email allows you to create and send emails.

You can define who the email is sent to.

The image above shows how to send a message to the user who created the item in the associated list.

The image above shows how to send an email to a specific group (you will need to create a Vacation Approvers group in SharePoint or use another existing group).

You can also construct the subject and content of the emails.

The set the Else branch, hover the mouse under the last item, until the line shows, right-click on the line and select Else Branch.

Complete constructing the workflow until it resembles the image above.

Click on the workflow name in the breadcrumbs bar to return to the settings for the workflow.

Set the Start options to start when an item is created in the associated list.

Click the Save button then the Publish button.

(note: When you attach a new workflow to a list, you will have to re-hide any hidden columns such as the the ApprovalStatus field to be Hidden again)

Create The LightSwitch Application

Using Visual Studio 2013 (or above), create a Cloud Business App.

(note: A Cloud Business App is simply a LightSwitch application configured to run connected to SharePoint 2013 (and above))

You will be required to specify and connect to your SharePoint development site.

After the project is created, right-click on the Data Sources folder and select Add Data Source.

Select SharePoint and click Next.

Enter the location of your development site and click Next.

Select the UserInformationList and VacationRequestList and click the Finish button.

The SharePoint lists will display in the Solution Explorer.

Double-click on the VacationRequestList to open it.

In the Write Code dropdown, select VacationRequestLists_Validate and use the following code for the method:

 

            bool isMemberOfVacationApprovers = false;
            var clientContext = this.Application.SharePoint.GetHostWebClientContext();
            //Load the properties for the web object. 
            Microsoft.SharePoint.Client.Web web = clientContext.Web;
            // Get the current web 
            clientContext.Load(web);
            clientContext.ExecuteQuery();
            // Groups for current User
            Microsoft.SharePoint.Client.GroupCollection UserGroups = web.CurrentUser.Groups;
            clientContext.Load<Microsoft.SharePoint.Client.GroupCollection>(UserGroups);
            clientContext.ExecuteQuery();
            foreach (var item in UserGroups)
            {
                if (item.Title == "Vacation Approvers")
                {
                    isMemberOfVacationApprovers = true;
                }
            }
            if (!isMemberOfVacationApprovers)
            {
                results.AddEntityError
                    ("Only members of Vacation Approvers can edit this record.");
            }

 

This will allow only users in the “Vacation Approvers” group to update the record.

You will want to update this code if you are using a different group.

Click on the ApprovalStatus field.

In the Properties, select the Choice List.

Add entries so that it matches the image above.

This will cause LightSwitch to create a drop down of these choices when you put the field on a screen (in a later step).

Click OK.

Right-click on the Screens folder to add a new screen.

Name the screen Main and use the VacationRequestLists as the data source.

(note: your dropdown will have something other than ADefWebserver_Team_SiteData in front of the name)

Alter the screen to use a Table rather than a List, and change the fields to resemble the image above.

(note: For more information about how to perform specific tasks in the screen designer, see How to: Design an HTML Screen by Using the Screen Designer)

Click on the Table and configure the Item Tap action to open a new edit screen.

Click OK.

In the Properties of the screen, uncheck Show As Dialog.

Alter the screen to resemble the image above.

Run the application.

You will be required to log into your SharePoint website and Trust the application.

You can now approve or deny vacation requests.

Deploying To Production

You can download the LightSwitch application (available on the download page), deploy it to production, create the SharePoint list and workflow and it will work.

When you deploy the application to production, you will want to follow the method in this article:

Creating A LightSwitch SharePoint 2013 Multi-Tenant Provider-Hosted Application

In addition, you can have the application automatically create the needed SharePoint Vacation Request list in your production site by using the method described in this article:

Implementing Documents in a SharePoint 2013 Cloud Business App (LightSwitch)

Next Step…

To implement complex business rules, see: Advanced SharePoint Workflows Using HTTP Calls To LightSwitch.

 

Links – Microsoft

Overview of workflows included with SharePoint

SharePoint Hosting & Authentication Options for LightSwitch (Brian Moore)

Publishing LightSwitch apps for SharePoint to the Catalog (Brian Moore)

Links – LightSwitch Help Website

Advanced SharePoint Workflows Using HTTP Calls To LightSwitch

Deploy A LightSwitch Application To Office 365 / SharePoint Online

Exploring SharePoint 2013 Visual Studio Cloud Business Apps (LightSwitch)

Implementing Documents in a SharePoint 2013 Cloud Business App (LightSwitch)

An End-to-End AngularJS SharePoint Module using LightSwitch OData as a Back-End

Creating A SharePoint Online Testing Site

Creating A LightSwitch SharePoint 2013 Multi-Tenant Provider-Hosted Application

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 (or higher) installed and a SharePoint Developer site to run the code)