Dec 21

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

image

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

image

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

image

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

image

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

image

They enter their requested days and click the Save button.

image

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

image

They also receive an email.

image

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)

image

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

image

Selects the request…

image

… 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

image

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

image

Select Custom List.

image

Name the list VacationRequestList.

image

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.

image

Use the Create column link to create new columns.

image

Add columns so that your list resembles the image above.

image

For ApprovalStatus, give it a default value of 0.

image

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"))

image

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.

image

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

image

You will be returned to the main settings page.

Click on the Item link.

image

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

image

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)

image

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

image

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

image

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

image

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

image

You can now add or edit items.

Creating The SharePoint Workflow

image

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.

image

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

image

Select List Workflow.

image

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

image

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.

image

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

Select the Add Time to Date action.

image

The condition will appear.

image

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

image

For the Today value use Current Date.

image

For the Output to select Create a new variable…

image

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)

image

Add a if any action.

image

It will create the block.

image

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

image

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

image

The image above shows how to access the SevenDaysFromNow variable.

image

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

image

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

image

Email allows you to create and send emails.

image

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.

image

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

image

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

image

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.

image

Complete constructing the workflow until it resembles the image above.

image

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

image

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

image

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

image

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

image

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

image

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

image

Select SharePoint and click Next.

image

Enter the location of your development site and click Next.

image

Select the UserInformationList and VacationRequestList and click the Finish button.

image

The SharePoint lists will display in the Solution Explorer.

Double-click on the VacationRequestList to open it.

image

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.

image

Click on the ApprovalStatus field.

image

In the Properties, select the Choice List.

image

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.

image

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

image

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)

image

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)

image

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

image

Click OK.

image

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

image

Alter the screen to resemble the image above.

image

Run the application.

image

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

image

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)


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