Walkthrough: Creating the Vision Clinic Application
This walkthrough demonstrates the end-to-end process of creating an application in Visual Studio LightSwitch. You will use many of the features of LightSwitch to create an application for a fictional vision clinic. The application includes capabilities for scheduling appointments and creating invoices.
Prerequisites
Download the PrescriptionContoso database from MSDN Code Gallery.
Steps
Create a Project
Create the application project.
Define Tables
Add Patient, Invoice, and Invoice Detail entities.
Create a Choice List
Create a list of values.
Define a Relationship
Link related tables.
Add Another Entity
Add the Appointment entity.
Create a Screen
Create a screen to display patients.
Run the Application
Run the application and enter data.
Connect to a Database
Connect to an external database.
Make Changes to Entities
Modify the Products and Product Rebate entities.
Create a List and Details Screen
Create a screen to display products.
Change the Screen Layout
Modify the layout of the Product List screen.
Make Runtime Changes
Make changes in the running application.
Create a Query
Create a parameterized query and bind it to a screen.
Add a Computed Field
Create a computed field and add it to a screen.
Create a Cross-database Relationship
Create a virtual relationship between entities in different databases.
Create the Invoices Screen
Create a screen to display invoices.
Modify the Invoices Screen
Change the layout of the Invoices screen in the running application.
Add Screen Logic
Write code to calculate dates.
Add More Computed Fields
Create more computed fields and add them to the Invoices screen.
Deploy the Application
Publish the application as a 2-tier Desktop application.
Create a Project
The first step in creating a LightSwitch application is to open a new project.
To create a project
From the Windows Start menu, click Visual Studio 2012.
The LightSwitch designer appears.
On the File menu, click New Project.
The New Project dialog box opens.
In the Installed Templates list, select the LightSwitch node.
In the center pane, select either LightSwitchApplication (VB) or LightSwitchApplication (C#).
In the Name field, type Vision Clinic and then click OK.
The Vision Clinic Designer window appears, and the necessary folders for your project are added to the Solution Explorer window.
Define Tables
In LightSwitch, tables are referred to as entities; they model the object that the data represents, in this case a patient. LightSwitch applications use a "forms over data" model, that is, forms or screens that display data from one or more sources. LightSwitch includes an intrinsic database that can be used to store data for your application. In the next step, you will create a database table to store patient information.
To create the Patient entity
In the Vision Clinic Designer window, click Create New Table.
The Data Designer appears and a Table1Items node appears underneath Data Sources in Solution Explorer.
In the Properties window, select the Name property and type Patient, and then press Enter.
The name in the Data Designer title bar changes to "Patient" and the name in Solution Explorer changes to "Patients".
In the Name column click <Add property> and type FirstName, and then press Enter.
Notice that the appropriate data type, String, appears in the Type column, and that the Required field check box is selected. A patient must have a name.
Click <Add property> in the Name column and type LastName.
Click <Add property> in the Name column and type Street.
Click <Add property> in the Name column and type Street2.
In the Required column, clear the check box.
The second line of a street address is optional.
Click <Add property> in the Name column and type City.
Click <Add property> in the Name column and type State.
Click <Add property> in the Name column and type Zip.
Click <Add property> in the Name column and type PrimaryPhone.
In the Type column, select PhoneNumber from the drop-down list.
PhoneNumber is a custom business type that represents a common pattern for entering and formatting telephone numbers.
In the Required column, clear the check box.
Click <Add property> in the Name column and type SecondaryPhone.
In the Type column, select PhoneNumber from the drop-down list.
In the Required column, clear the check box.
Click <Add field> in the Name column and type Email.
In the Type column, select EmailAddress from the drop-down list.
EmailAddress is another custom business type that represents a correctly formatted e-mail address.
In the Required column, clear the check box.
Click <Add property> in the Name column and type PolicyNumber.
In the Properties window, select the Maximum Length property and type 12.
This will prevent users from entering a policy number with more than 12 characters.
On the File menu, click Save All to save your work.
Next you will create two more entities to represent an invoice and invoice line items.
To create the Invoice and InvoiceDetail entities
In Solution Explorer, click Data Sources. On the Project menu, click Add Table.
A new instance of the Data Designer appears.
In the Properties window, select the Name property. Type Invoice, and then press Enter.
In the Name column click <Add property>. Type InvoiceDate, and then press Enter.
In the Type column, select DateTime from the drop-down list.
In the Name column click <Add property>. Type InvoiceDue, and then press Enter.
In the Type column, select DateTime from the drop-down list.
In the Required column, clear the check box.
In the Name column click <Add property>. Type InvoiceStatus, and then press Enter.
In the Type column, select Integer from the drop-down list.
In the Name column click <Add property>. Type ShipDate, and then press Enter.
In the Type column, select DateTime from the drop-down list.
In Solution Explorer, click Data Sources. On the Project menu click Add Table.
In the Properties window, select the Name property.Type InvoiceDetail, and then press Enter.
In the Name column click <Add property>.Type Quantity, and then press Enter.
In the Type column, select Integer from the drop-down list.
Click <Add property> in the Name column and type UnitPrice.
In the Type column, select Money from the drop-down list.
Money is another custom business type that represents and correctly formats currency.
On the File menu, click Save All to save your work.
Create a Choice List
In the next step, you will create a choice list for the Invoice entity. A choice list enables you to present the user with a fixed set of values to choose from.
To create a choice list
In Solution Explorer, double-click Invoices.
In the Data Designer, select the InvoiceStatus field.
In the Properties window, click the Choice List link.
The Choice List dialog box appears.
In the Choice List dialog box, enter the following values, and then click OK.
Value
Display Name
0
Active
1
Paid
2
Overdue
When this field is displayed on a screen, it will present the user with a drop-down list that contains the three Display Name values that you entered.
On the File menu, click Save All to save your work.
Define a relationship
In the next step, you will define relationships between the Patient, Invoice, and InvoiceDetail entities.
To define relationships
In Solution Explorer, double-click Invoices.
On the Data Designer toolbar, click Relationship.
The Add New Relationship dialog box appears.
In the Add New Relationship dialog box, select the To column in the Name: row. Select Patient, and then click OK.
A one to many relationship is created between the Patient and Invoice entities; a patient can have multiple invoices.
On the Data Designer toolbar, click Relationship.
The Add New Relationship dialog box appears.
In the Add New Relationship dialog box, select the To column in the Name: row, and select InvoiceDetail.
Select the From column in the Multiplicity: row, and select One.
Select the To column in the Multiplicity: row, and select Many, and then click OK.
A one to many relationship is created between the Invoice and InvoiceDetail entities; an invoice can have multiple invoice details.
On the File menu, click Save All to save your work.
Create the Appointment Entity
In the next step, you will add one more entity to represent an appointment, and then add a relationship and a choice list.
To add the Appointment entity
In Solution Explorer, click Data Sources, and then on the Project menu click Add Table.
In the Properties window, change the Name to Appointment.
In the Data Designer, click <Add property> in the Name column and type AppointmentTime.
In the Type column, select DateTime from the drop-down list.
Click <Add property> in the Name column and type AppointmentType.
In the Type column, select Short Integer from the drop-down list.
Click <Add property> in the Name column and type DoctorNotes.
Accept the default type, String, and clear the Required check box.
On the Data Designer toolbar, click Relationship.
In the Add New Relationship dialog box, select the To column in the Name: row. Select Patient, and then click OK.
A one to many relationship is created between the Patient and Appointment entities; a patient can have multiple appointments.
In the Data Designer, select the AppointmentType field.
In the Properties window, click the Choice List link.
The Choice List dialog box appears.
In the Choice List dialog box, enter the following values, and then click OK.
Value
Display Name
0
Annual
1
Follow-up
2
Emergency
On the File menu, click Save All to save your work.
Create a Screen
In the next step, you will create a screen to display a list of patients.
To create a screen
In Solution Explorer, click the Screens node, and then on the Project menu click Add Screen.
The Add New Screen dialog box opens.
Select Editable Grid Screen in the Select a screen template list.
In the Screen Name text box, type PatientList.
Select the Screen Data drop-down list and select Patients. Click OK.
The Screen Designer opens, displaying a hierarchical representation of the screen layout.
On the File menu, click Save All to save your work.
Run the Application and Enter Data
You now have a working application. In the next step, you will run the application and enter some data.
To run the application
Press F5 to start the application.
In the running application, select the PatientList screen and then click the add +… button.
An Add New Patient dialog box appears.
Enter data for a new patient. In the Email field, enter an invalid value, for example john#example.com.
When you move away from the field a red border appears. The EmailAddress business type has built-in validation rules that can detect an incorrectly formatted email address.
Correct the error, finish the data entry, and then click OK.
The Save button on the application toolbar is now enabled.
Click the add +… button. Add data for a second patient and then click OK.
Click Save to save your data.
You can now rearrange the columns in the PatientList grid, and you can sort on any column.
Click the Close button in the upper-right corner of the running application to return to design mode.
On the File menu, click Save All to save your work.
Connect to a Database
In the next step, you will connect to an external database that contains product information.
Note
Before performing this step, you will have to download and install the PrescriptionContoso database. The database can be downloaded from MSDN Code Gallery. Follow the instructions in the Install.htm file to install the database.
To attach to a data source
In Solution Explorer, select the Data Sources node.
On the Project menu, click Add Data Source.
The Attach Data Source wizard opens.
In the Attach Data Source wizard, click Database and then click Next.
The Choose Data Source dialog box appears.
Note
If you have previously connected to a database in LightSwitch, this dialog box does not appear and you can skip the next step.
In the Choose Data Source dialog box, click Microsoft SQL Server (SQL Client) and then click Continue.
The Connection Properties dialog box appears.
In the Connection Properties dialog box, enter the values in the following table, and then click OK.
Field
Value
Server Name
(localdb)\v11.0
Log on to the server
Use Windows Authentication
Select or enter a database name
C:\Temp\PrescriptionContoso.mdf
The Choose your Database Objects wizard page appears.
Expand the Tables node.
Select the Product and ProductRebate tables and then click Finish.
The C_TEMP_PRESCRIPTIONCONTOSO_MDFData data source is added to the project and entities are created for Products and ProductRebates.
In Solution Explorer, right-click C_TEMP_PRESCRIPTIONCONTOSO_MDFData and click Rename, the type PrescriptionContoso
On the File menu, click Save All to save your work.
Modify the Products and ProductRebate Entities
In the next step, you will make some changes to the ProductRebate and Products entities.
To modify the ProductRebate and Products entities
In Solution Explorer, double-click the ProductRebates node.
Select the Rebate field and change the Type to Money.
In Solution Explorer, double-click the Products node.
In the Data Designer, select the MSRP field and change the Type to Money.
Select the ProductImage field and change the Type to Image.
On the File menu, click Save All to save your work.
Create a List and Details Screen
In the next step, you will create a screen to display product information.
To create a list and details screen
In Solution Explorer, select the Screens node. On the Project menu, click Add Screen.
In the Add New Screen dialog box, select List and Details Screen in the Select a screen template list.
In the Screen Name field, type ProductList.
Select the Screen Data drop-down list and select PrescriptionContoso.Products.
In the Additional Data to Include list, select both Product Details and Product ProductRebates check boxes, and then click OK.
Change the Screen Layout
In the next step, you will change the layout of the ProductList screen.
To customize the layout
In the Screen Designer, select the Rows Layout |Product Details node in the Screen Content Tree.
In the Rows Layout drop-down list, select Picture and Text.
Select the following values from the drop-down list for each field below the Picture and Text node:
Field
Value
(PICTURE)
Product Image
(TITLE)
Product Name
(SUBTITLE)
MSRP
(DESCRIPTION)
Description
Press F5 to run the application and view the results.
In the running application, click the ProductList menu to display the screen.
Keep the application open. In the next step, you will make changes in the running application.
Making Changes in the Running Application
In the next step, you will modify the Product List screen while the application is running.
To customize a screen at run time
On the Product List screen, click the Design Screen button in the lower-right corner.
In the left pane, select the Data Grid | Product Rebates node.
In the Properties window, change the Display Name property to Contoso Rebates.
The name also changes in the application window.
Select the MSRP field and change the Description property to Suggested price before any rebates..
Click the Save button to return to the running application and view the changes. Hover over the MSRP field to see the description.
Click the Close button in the upper-right corner of the running application to return to design mode.
On the File menu, click Save All to save your work.
Creating a Query
In the next step, you will create a parameterized query and bind it to a screen.
To create a parameterized query
In Solution Explorer, select the Products node. On the Project menu, click Add Query.
The Query Designer appears.
In the Properties window, select the Name field and type RelatedProducts.
In the Query Designer, click Add Filter.
A filter condition is added to the Filter section.
In the second drop-down list, select Category.
In the fourth drop-down list, select Parameter.
In the fifth drop-down list, click Add New.
A new Parameter named Category of type String is added to the Parameters section.
In Solution Explorer, double-click the ProductList node to open the Screen Designer.
On the Screen Designer toolbar, click Add Data Item.
The Add Data Item dialog box appears.
In the Add Data Item dialog box, click Query. In the Name column select PrescriptionContoso.RelatedProducts and then click OK.
A RelatedProducts node appears in the left pane.
Select the Category node under Query Parameters.
In the Properties window, select the Parameter Binding property and type Products.SelectedItem.Category.
In the center pane, expand the Add node below the DataGrid |Contoso Rebates node and click Related Products.
Press F5 to run the application and view the results.
Open the Products List screen and notice that a list of related products is displayed for each selected product.
Click the Close button in the upper-right corner of the running application to return to design mode.
On the File menu, click Save All to save your work.
Add a Computed Field
In the next step, you will add a field that uses a computed value. The computed value will be the price of a product after a rebate amount is applied.
To add a computed field
In Solution Explorer, double-click the Products entity node.
In the Data Designer, click <Add Property>. Type CurrentPrice, and then clcik Tab.
In the Type column, select Money from the drop-down list.
In the Properties window, under General the Is Computed property is selected by default.
In the Properties window, click the Edit Method link.
The Code Editor appears and the CurrentPrice_Compute method is displayed.
Add the following code to the event handler:
Dim rebates As Decimal For Each item In ProductRebates If item.RebateStart <= Date.Today And item.RebateEnd >= Date.Today Then rebates = rebates + item.Rebate End If Next result = Me.MSRP - rebates
decimal rebates = default(decimal); foreach (var item in ProductRebates) { if (item.RebateStart <= System.DateTime.Today && item.RebateEnd >= System.DateTime.Today) { rebates += item.Rebate.Value; } } result = this.MSRP - rebates;
On the File menu, click Save All to save your work.
In the next step, you will add the computed field to the ProductList screen.
To add a computed field to a screen
In Solution Explorer, double-click the ProductList screen node.
In the left pane of the Screen Designer, select the CurrentPrice node and drag it below the (Description) | Description node in the center pane.
Press F5 to run the application and view the results.
In the ProductList screen, edit the Rebate or MSRP field. The CurrentPrice is recomputed. Click the Close button to return to design mode.
Click the Close button in the upper-right corner of the running application to return to design mode.
On the File menu, click Save All to save your work.
Create a Cross-database Relationship
In the next step, you will create a virtual relationship between entities in two different databases and display data from two different sources on a single List and Details screen.
To create a cross-database relationship
In Solution Explorer, double-click the InvoiceDetails entity node.
In the Data Designer, click the Relationship toolbar button.
In the Add New Relationship dialog box, select the Name field in the To column and select Product.
A new section appears at the bottom of the dialog box. It shows the related fields in the two entities. If necessary, you could change the related fields to another field of the same data type, or define multiple related fields as keys.
Click OK to save the relationship.
The new relationship is shown as a dotted line in the designer. This indicates that the entities are in different data sources, in this case InvoiceDetails from the intrinsic database and Products from the PrescriptionContoso database.
On the File menu, click Save All to save your work.
Create a Screen to Display Invoices
In the next step, you will create a new screen to display invoices.
To create a screen
In Solution Explorer select the Screens node. On the Project menu, click Add Screen.
In the Add New Screen dialog box, select List and Details Screen in the Select a screen template list.
In the Screen Name: text box, type InvoiceScreen.
Select the Screen Data drop-down list and select Invoices.
In the Additional Data to Include: list, select Invoice Details and Invoice InvoiceDetails, and then click OK .
Expand the Data Grid Row | Invoice Detail node. Select the Product Product ID node and delete it.
To reorder the fields, click the UnitPrice node and drag it underneath the Product node.
Press F5 to run the application. In the Menu, click Invoice Screen to display the screen.
In the Invoices pane, click the add +… button.
Enter some invoice data. Notice how the InvoiceStatus field provides a drop-down list of values, and the Patient field contains a button that opens a dialog box that has a list of patients.
In the Invoice Details pane, click the add +… button.
Enter some invoice detail data. Notice how the Product field provides a drop-down list of products from the PrescriptionContoso database.
Click the Save button to save your invoice data.
Keep the application open. In the next step, you will make changes in the running application.
Modify the Invoices Screen
In the next step, you will make some changes to the Invoices screen in the running application.
To modify a screen in the running application
From the Invoice Screen screen, click the Design Screen button in the upper-right corner.
In the left pane, select the List | Invoices node. Select DataGrid from the List drop-down list.
Select the Patient node. Use the MoveUp arrow in the left margin to move it above the Invoice Date node.
Click Save to return to the running application and view the changes.
Click the Close button in the upper-right corner of the running application to return to design mode.
On the File menu, click Save All to save your work.
Define Screen Logic
In the next step, you will add code to define the default logic for invoice dates.
To define screen logic
In Solution Explorer, double-click the Invoices entity node.
In the Data Designer click the Write Code drop-down list on the toolbar. Click the Invoice_Created link.
The Code Editor opens and displays the Invoice_Created method.
In the Invoice_Created method, add the following code to set default behavior for dates:
InvoiceDate = Date.Today InvoiceDue = Date.Today.AddDays(30) ShipDate = Date.Today.AddDays(3)
InvoiceDate = System.DateTime.Today; InvoiceDue = System.DateTime.Today.AddDays(30); ShipDate = System.DateTime.Today.AddDays(3);
In Solution Explorer, double-click the Invoices entity node.
In the Data Designer, select the InvoiceDate field.
Click the Write Code drop-down list on the toolbar and then click the InvoiceDate_Changed link
In the InvoiceDate_Changed method, add the following code to update dates when the InvoiceDate is changed:
InvoiceDue = InvoiceDate.AddDays(30) ‘ If the ShipDate is earlier than the new InvoiceDate, update it. If ShipDate < InvoiceDate Then ShipDate = InvoiceDate.AddDays(2) End If
InvoiceDue = InvoiceDate.AddDays(30); // If the ShipDate is earlier than the new InvoiceDate, update it if (ShipDate < InvoiceDate) { ShipDate = InvoiceDate.AddDays(2); }
In Solution Explorer, double-click the InvoiceDetails node.
In the Data Designer select the Product field, click the Write Code drop-down list on the toolbar and then click the Product_Changed link.
In the Code Editor , add the following code to set the unit price and default quantity:
UnitPrice = Product.CurrentPrice Quantity = 1
UnitPrice = Product.CurrentPrice; Quantity = 1;
Press F5 to run the application and view the changes.
Open the Invoice screen and add a new invoice. The date fields, price and quantity are now automatically updated.
Click the Save button to save your changes.
Click the Close button in the upper-right corner of the running application to return to design mode.
On the File menu, click Save All to save your work.
Add More Computed Fields
In the next step, you will add computed fields for SubTotal, Tax, and Totals to the InvoiceDetails and Invoices entities.
To add computed fields
In Solution Explorer, double-click the InvoiceDetails entity node.
In the Data Designer, click <Add Property>.Type SubTotal, and then click the Tab.
In the Type column, select Money from the drop-down list.
In the Properties window, under General Properties, select the IsComputed check box.
Click the Edit Method link.
The Code Editor appears and displays the SubTotal_Compute method.
Add the following code to compute the SubTotal:
result = Quantity * UnitPrice
result = Quantity * UnitPrice;
In Solution Explorer, double-click the Invoices entity node.
In the Data Designer, click <Add Property>.Type Tax, and then click Tab.
In the Type column, select Money from the drop-down list.
In the Properties window, select the IsComputed check box.
Click the Edit Method link.
The Code Editor opens and displays the Tax_Compute method.
Replace the Tax_Compute method with the following code to compute the Tax:
Private Sub Tax_Compute(ByRef result As Decimal) Result = GetSubTotal() * 0.095 End Sub Protected Function GetSubTotal() As Decimal GetSubtotal = 0 For Each item In InvoiceDetails GetSubTotal = GetSubTotal + item.SubTotal Next End Function
partial void Tax_Compute(ref decimal result) { result = GetSubTotal() * (decimal)0.095; } protected decimal GetSubTotal() { return this.InvoiceDetails.Sum(i => i.SubTotal); }
In Solution Explorer, double-click the Invoices entity node.
In the Data Designer, click <Add Property>. Type Total, and then click Tab.
In the Type column, select Money from the drop-down list.
In the Properties window, select the IsComputed check box.
Click the Edit Method link.
The Code Editor opens and displays the Total_Compute method.
Add the following code to compute the Tax:
result = GetSubTotal() + Tax
result = GetSubTotal() + Tax;
On the File menu, click Save All to save your work.
In the next step, you will add the new fields to the Invoices screen.
To add fields to a screen
In Solution Explorer, double-click the InvoiceScreen screen node.
In the center pane, select and expand the Rows Layout | Invoice Details node.
Select and expand the Add drop-down and select Tax.
The Tax field is added to the Vertical Stack | InvoiceDetails section.
Select the Add drop-down again and select the Total field.
Press F5 to run the application and view the results.
Open the Invoice Screen screen. The Tax and Total fields are now displayed for each invoice row.
Click the Design Screen button to change to the customization mode.
In the left pane, select the Data Grid Row |Invoice Detail node and expand it.
Click the Add drop-down and select SubTotal.
Click Save to save the change. A SubTotal field is now displayed in the Invoice Details grid.
Click the Close button in the upper-right corner of the running application to return to design mode.
On the File menu, click Save All to save your work.
Deploy the Application
In the next step, you will deploy the application as a 2-tier desktop application.
To publish a 2-tier desktop application
In Solution Explorer select the Vision Clinic node, and then on the Build menu, click Publish Vision Clinic.
The LightSwitch Publish Application Wizard appears.
On the Welcome to the LightSwitch Publishing Wizard page, verify that Desktop is selected and then click Next.
On the Application Services page, verify that Local is selected and then click Next.
On the Specify Publishing Preference page, select the Where do you want the application files to be placed? field and type C:\Publish.
In the How do you want to publish the default database? section, select Publish directly to database now, and then click Next.
On the LightSwitch Application Database – SQL Database Connection page, accept the default connection string values and then click Next.
On the Install Prerequisites page, accept the default settings and then click Next.
On the Other Connection Information page, accept the default settings and then click Publish.
In File Explorer, locate the C:\Publish directory and double-click the Setup.exe file to install the application on the local computer.
Note
To install the application on a different computer, copy the contents of the Publish folder and all its sub-folders. Before installing you must complete the steps outlined in the Install.htm file, which can be found in the Publish folder.
If an Application Install – Security Warning dialog box appears, click Install.
The Vision Clinic application will be installed and started.
Enter some data and verify that the application works as expected.
Tip
If you want to run the Vision Clinic application again, you can open it from the Start menu.
This completes the Vision Clinic Application walkthrough. You should now have a basic understanding of the end-to-end process of creating a LightSwitch application.
This walkthrough demonstrated the basic capabilities of LightSwitch, but there is much more that you can do with LightSwitch. As you start to build your own applications, you can learn about more capabilities in the product documentation.