Walkthrough: Creating the Vision Clinic Application in LightSwitch

Article
04/28/2015

This walkthrough demonstrates the end-to-end process of creating an application in LightSwitch. You’ll use many 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 information about any patient.
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.
Add a Mobile Client

Add screens to view patients and appointments on a mobile device.

Create a Project

As your first step in creating a LightSwitch application, you'll create a project for that application.

To create a project

On the menu bar, choose File, New Project.

The New Project dialog box opens.
In the Installed Templates list, expand the Visual Basic or Visual C# node, and then choose the LightSwitch node.
In the center pane, choose the LightSwitch Desktop Application template.
In the Name text box, enter Vision Clinic, and then choose the OK button.

The Vision Clinic Designer window opens, 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 collection of patients). 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 in which you can store data for your application. In the next step, you’ll create a database table to store patient information.

To create the Patient entity

In the Vision Clinic Designer window, choose the Create New Table link.

The Data Designer opens. In Solution Explorer, a Table1Items node appears under the Data Sources node in the Vision Clinic.Server project.
In the Properties window, name the table Patient, and then choose the Enter key.

The name in the Data Designer title bar changes to "Patient", and the name in Solution Explorer changes to "Patients.lsml".
In the Name column of the Data Designer, choose the <Add property> link, enter Name, and then choose the Enter key.

Notice that the appropriate data type, String, appears in the Type column and the Required check box is selected. Users must specify a name for every patient.
In the Name column, choose the <Add property> link, and then enter Street.
In the Name column, choose the <Add property> link, and then enter Street2.
In the Required column, clear the check box.

The second line of a street address is optional.
In the Name column, choose the <Add property> link, and then enter City.
In the Name column, choose the <Add property> link, and then enter State.
In the Name column, choose the <Add property> link, and then enter Zip.
In the Name column, choose the <Add property> link, and then enter PrimaryPhone.
In the Type column, open the list, and then choose PhoneNumber.

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.
In the Name column, choose the <Add property> link, and then enter SecondaryPhone.
In the Type column, open the list, and then choose PhoneNumber.
In the Required column, clear the check box.
In the Name column, choose the <Add field> link, and then enter Email.
In the Type column, open the list, and then choose EmailAddress.

EmailAddress is another custom business type that represents a correctly formatted email address.
In the Required column, clear the check box.
In the Name column, choose the <Add property> link, and then enter PolicyNumber.
In the Properties window, set the Maximum Length property to 12.

This value will prevent users from entering a policy number that contains more than 12 characters.
In the Properties window, clear the Enable Created/Modified properties check box.

You can use created and modified properties to create an audit trail for the table, tracking who created a record or edited it most recently. But you don't need them for this entity.
On the menu bar, choose File, Save All to save your work.

Next you’ll create two more entities to represent an invoice and invoice line items.

To create the Invoice and InvoiceDetail entities

In Solution Explorer, choose the Data Sources node, and then, on the menu bar, choose Project, Add Table.

A new instance of the Data Designer opens.
In the Properties window, set the Name property to Invoice, and then choose the Enter key.
In the Name column, choose the <Add property> link, enter InvoiceDate, and then choose the Tab key.
In the Type column, open the list, and then choose DateTime.
In the Name column, choose the <Add property> link, enter InvoiceDue, and then choose the Tab key.
In the Type column, open the list, and then choose DateTime.
In the Name column, choose the <Add property> link, enter InvoiceStatus, and then choose the Tab key.
In the Type column, open the list, and then choose Integer.
In the Name column, choose the <Add property> link, enter ShipDate, and then choose the Tab key.
In the Type column, open the list, and then choose DateTime.
In Solution Explorer, choose the Data Sources node, and then, on the menu bar, choose Project, Add Table.
In the Properties window, set the Name property to InvoiceDetail, and then choose the Enter key.
In the Name column, choose the <Add property> link, enter Quantity, and then choose the Tab key.
In the Type column, open the list, and then choose Integer.
In the Name column, choose the <Add property> link, and then enter UnitPrice.
In the Type column, open the list, and then choose Money.

Money is another custom business type that represents and correctly formats currency.
In the Properties window, enter $ in the Currency Symbol text box.
On the menu bar, choose File, Save All to save your work.

Create a Choice List

In the next step, you’ll create a choice list for the Invoice entity. By creating a choice list, you can present the user with a fixed set of values from which to choose.

To create a choice list

In Solution Explorer, open the shortcut menu for the Invoices.lsml node, and then choose Open.
In the Data Designer, choose the InvoiceStatus field.
In the Properties window, choose the Choice List link.
In the Choice List dialog box, enter the following values, and then choose the OK button.

Value

Display Name

0

Active

1

Paid

2

Overdue

When this field appears on a screen, the user can open a list and then choose any of the three Display Name values that you entered.
On the menu bar, choose File, Save All to save your work.

Value	Display Name
0	Active
1	Paid
2	Overdue

Define a relationship

In the next step, you’ll define relationships between the Patient, Invoice, and InvoiceDetail entities.

To define relationships

In Solution Explorer, open the shortcut menu for the Invoices.lsml node, and then choose Open.
On the Data Designer toolbar, choose the Relationship button.

The Add New Relationship dialog box appears.
In the Name: row, choose the To column, open the list, choose Patient, and then choose the OK button.

A one to many relationship is created between the Patient and Invoice entities. A patient can have multiple invoices.
On the Data Designer toolbar, choose the Relationship button.

The Add New Relationship dialog box opens.
In the Name: row, choose the To column, open the list, and then choose InvoiceDetail.
In the Multiplicity: row, choose the From column, open the list, and then choose One.
In the Multiplicity: row, choose the To column, open the list, choose Many, and then choose the OK button.

A one to many relationship is created between the Invoice and InvoiceDetail entities. An invoice can have multiple details.
On the menu bar, choose File, Save All to save your work.

Create the Appointment Entity

In the next step, you’ll add one more entity to represent an appointment, and then you'll add a relationship and a choice list.

To add the Appointment entity

In Solution Explorer, choose the Data Sources node, and then, on the menu bar, choose Project, Add Table.
In the Properties window, choose the Name text box, and then enter Appointment.
In the Data Designer, choose the <Add property> placeholder text in the Name column, and then enter AppointmentTime.
In the Type column, open the list, and then choose DateTime.
In the Data Designer, choose the <Add property> placeholder text in the Name column, and then enter AppointmentDate.
In the Type column, open the list, and then choose Date.
In the Name column, choose the <Add property> placeholder text, and then enter AppointmentType.
In the Type column, open the list, and then choose Short Integer.
In the Name column, choose the <Add property> placeholder text, and then enter DoctorNotes.
Accept the default type, String, and clear the Required check box.
On the Data Designer toolbar, choose the Relationship button.
In the Add New Relationship dialog box, choose the To column in the Name: row.
Open the list, choose Patient, and then choose the OK button.

A one-to-many relationship is created between the Patient and Appointment entities. Each patient can have multiple appointments.
In the Data Designer, choose the AppointmentType field.
In the Properties window, choose the Choice List link.
In the Choice List dialog box, enter the following values, and then click the OK button.

Value

Display Name

0

Annual

1

Follow-up

2

Emergency
On the Perspective bar, choose the DesktopClient tab.
In the Properties window, open the list for the Summary Property, and then choose AppointmentTime.

This property defines the field that will appear when a list of appointments appears.
On the menu bar, choose File, Save All to save your work.

Value	Display Name
0	Annual
1	Follow-up
2	Emergency

Create a Screen

In the next procedure, you’ll create a screen to display a list of patients.

To create a screen

In Solution Explorer, choose the Screens node, and then, on the menu bar, choose Project, Add Screen.

The Add New Screen dialog box opens.
In the Select a screen template list, choose Editable Grid Screen.
In the Screen Name text box, enter PatientList.
In the Screen Data list, choose Patients, and then choose the OK button.

The Screen Designer opens, displaying a hierarchical representation of the screen layout.
On the menu bar, choose File, Save All to save your work.

Create an Appointment Screen

In the next procedure, you’ll create a screen to schedule appointments.

To create the screen

In Solution Explorer, in the Vision Clinic.Server project, open the shortcut menu for the Appointments.lsml node, and then choose Open.
On the Perspective bar, choose the DesktopClient tab, and then, on the toolbar, choose the Screen button.
In the Add New Screen dialog box, in the Select a screen template list, choose New Data Screen.
In the Screen Data list, choose Appointment, and then choose the OK button.
In the Screen Designer, in the center pane, choose the AppointmentTime node.
In the Properties window, clear the Show Date check box.

This change will display just the time section of the Date Time Picker control.

Run the Application and Enter Data

You now have a working application. In the next step, you’ll run it and enter some data.

To run the application

Choose the F5 key to start the application.
In the running application, choose the PatientList screen, and then choose the add (+) button.

The Add New Patient dialog box appears.
Enter data for a new patient, and enter a value that's not valid in the Email field (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 email address that's incorrectly formatted.
Correct the error, finish the data entry, and then choose the OK button.

On the application toolbar, the Save button is now enabled.
Add several more patients.
Choose the Save button to save your data.

You can now rearrange the columns in the PatientList grid, and you can sort on any column.
On the menu bar, choose Tasks, Create New Appointment.

The Create New Appointment screen opens.
Enter data for an appointment, choosing a patient from the Patient list and a time later today.
Add several more appointments for later today, and then choose the Save button to save your data.
In the upper-right corner of the running application, choose the Close button to return to design mode.

Connect to a Database

In the next step, you’ll connect to an external database that contains product information.

Note

Before you perform this step, you must download the PrescriptionContoso database from MSDN Code Gallery and then install the database by following the instructions in the Install.htm file.

To attach to a data source

In Solution Explorer, choose the Data Sources node.
On the menu bar, choose Project, Add Data Source.
In the Attach Data Source wizard, choose the Database icon, and then choose the Next button.

The Choose Data Source dialog box opens.

Note

If you've previously connected to a database in Visual Studio, this dialog box doesn’t appear, and you can skip the next step.
In the list, choose Microsoft SQL Server, and then choose the Continue button.
In the Connection Properties dialog box, enter the values in the following table, and then click the OK button.

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, choose the Product and ProductRebate tables, and then choose the Finish button.

The C_TEMP_PRESCRIPTIONCONTOSO_MDFData data source is added to the project, and entities are created for Products and ProductRebates.
In Solution Explorer, open the shortcut menu for the C_TEMP_PRESCRIPTIONCONTOSO_MDFData node, choose Rename, and then enter PrescriptionContoso.
On the menu bar, choose File, Save All to save your work.

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

Modify the Products and ProductRebate Entities

In the next step, you’ll change the ProductRebate and Products entities.

To modify the ProductRebate and Products entities

In Solution Explorer, open the shortcut menu for the ProductRebates.lsml node, and then choose Open.
Choose the Rebate field, and then change the Type to Money.
In the Properties window, enter $ in the Currency Symbol text box.
In Solution Explorer, open the shortcut menu for the Products.lsml node, and then choose Open.
In the Data Designer, choose the MSRP field, and then change the Type to Money.
In the Properties window, enter $ in the Currency Symbol text box.
Choose the ProductImage field, and then change the Type to Image.
On the menu bar, choose File, Save All to save your work.

Create a List and Details Screen

In the next step, you’ll create a screen to display product information.

To create a list and details screen

In the Data Designer, on the Perspective bar, choose the DesktopClient tab, and then, on the toolbar, choose the Screen button.

The Add New Screen dialog box opens.
In the Select a screen template list, choose List and Details Screen.
In the Screen Name text box, enter ProductList.
In the Screen Data list, choose PrescriptionContoso.Products.
In the Additional Data to Include list, select both the Product Details and Product ProductRebates check boxes, and then choose the OK button.

Change the Screen Layout

In the next step, you’ll change the layout of the ProductList screen.

To customize the layout

In the Screen Designer, in the Screen Content Tree, choose the Rows Layout |Product Details node.
In the Rows Layout list, choose Picture and Text.
In the list for each field below the Picture and Text node, choose the following values:

Field

Value

(PICTURE)

Product Image

(TITLE)

Product Name

(SUBTITLE)

MSRP

(DESCRIPTION)

Description
Choose the F5 key to run the application and view the results.
In the running application, on the menu bar, choose Tasks, Product List to display the ProductList screen.

Keep the application open. In the next step, you’ll make changes in the running application.

Making Changes in the Running Application

In the next step, you’ll modify the Product List screen while the application is running.

To customize a screen at run time

In the lower-right corner of the Product List screen, choose the Design Screen link.
In the left pane, choose the Data Grid | Product Rebates node.
In the Properties window, set the Display Name property to Contoso Rebates.

The name also changes in the application window.
Choose the MSRP field, and then set the Description property to Suggested price before any rebates..
Choose the Save button to return to the running application and view the changes.

For example, you can point to the MSRP field to show the description.
In the upper-right corner of the running application, choose the Close button to return to design mode.
On the menu bar, choose File, Save All to save your work.

Creating a Query

In the next step, you’ll create a parameterized query and bind it to a screen.

To create a parameterized query

In Solution Explorer, open the shortcut menu for the Products node, and then choose Add Query.

The Query Designer opens.
In the Properties window, choose the Name text box, and then enter RelatedProducts.
In the Query Designer, choose the Add Filter link.

A filter condition is added to the Filter section.
In the second list, choose Category.
In the fourth list, choose Parameter.
In the fifth list, choose Add New.

A new Parameter that's named Category of type String is added to the Parameters section.
In Solution Explorer, open the shortcut menu for the ProductList.lsml node, and then choose Open.
On the Screen Designer toolbar, choose the Add Data Item button.
In the Add Data Item dialog box, choose the Query option button.
In the Name column, choose PrescriptionContoso.RelatedProducts, and then choose the OK button.

A RelatedProducts node appears in the left pane.
Under Query Parameters, choose the Category node.
In the Properties window, set the Parameter Binding property to Products.SelectedItem.Category.
In the center pane, expand the Add node below the DataGrid |Contoso Rebates node, and then choose Related Products.
Choose the F5 key to run the application and view the results.

If you open the Products List screen, a list of related products appears for each selected product.
In the upper-right corner of the running application, choose the Close button to return to design mode.
On the menu bar, choose File, Save All to save your work.

Add a Computed Field

In the next step, you’ll 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, open the shortcut menu for the Products.lsml entity node, and then choose Open.
In the Data Designer, on the Perspective bar, choose the Server tab.
Choose the <Add Property> link, enter CurrentPrice, and then choose the Tab key.
In the Type column, open the list, and then choose Money.

In the Properties window, in the General section, the Is Computed check box is selected by default.
In the Properties window, enter $ in the Currency Symbol text box.
In the Properties window, choose the Edit Method link.

The Code Editor opens, and the CurrentPrice_Compute method appears.

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;

Code to calculate the Current Price

On the menu bar, choose File, Save All to save your work.

In the next procedure, you’ll add the computed field to the ProductList screen.

To add a computed field to a screen

In Solution Explorer, open the shortcut menu for the ProductList.lsml screen node, and then choose Open.
In the left pane of the Screen Designer, move the CurrentPrice node below the (Description) | Description node in the center pane.
Choose the F5 key to run the application and view the results.
In the ProductList screen, edit the Rebate or MSRP field.

The CurrentPrice is recomputed.
In the upper-right corner of the running application, choose the Close button to return to design mode.
On the menu bar, choose File, Save All to save your work.

Create a Cross-database Relationship

In the next step, you’ll create a virtual relationship between entities in two databases, and you'll display data from two sources on a single List and Details screen.

To create a cross-database relationship

In Solution Explorer, open the shortcut menu for the InvoiceDetails.lsml node, and then choose Open.
In the Data Designer, on the toolbar, choose the Relationship button.

The Add New Relationship dialog box opens.
In the To column, choose the Name field, open the list, and then choose Product.

A new section appears at the bottom of the dialog box. The section 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.
Choose the OK button to save the relationship.

The designer shows the new relationship as a dotted line. This line indicates that the entities are in different data sources In this case, InvoiceDetails is from the intrinsic database, and Products is from the PrescriptionContoso database.
On the menu bar, choose File, Save All to save your work.

Create a Screen to Display Invoices

In the next step, you’ll create a screen to display invoices.

To create a screen

In Solution Explorer, choose the Screens node, and then, on the menu bar, choose Project, Add Screen.

The Add New Screen dialog box opens.
In the Select a screen template list, choose List and Details Screen.
In the Screen Name text box, enter InvoiceScreen.
In the Screen Data list, choose Invoices.
In the Additional Data to Include list, choose Invoice Details and Invoice InvoiceDetails, and then choose the OK button.
Expand the Data Grid Row | Invoice Detail node, and then delete the Product Product ID node.
To reorder the fields, move the Quantity and UnitPrice nodes under the Product node.
Choose the F5 key to run the application.
On the menu bar, choose Tasks, Invoice Screen to display the screen.
In the Invoices pane, choose the add (+) button, and then enter some invoice data.

The InvoiceStatus field provides a list of values, and the Patient field contains a button that opens a dialog box that lists patients.
In the Invoice Details pane, choose the add +… button, and then enter some invoice-detail data.

The Product field provides a list of products from the PrescriptionContoso database.
Choose the Save button to save your invoice data, and keep the application open.

In the next procedure, you’ll make changes in the running application.

Modify the Invoices Screen

In the next step, you’ll change the Invoices screen in the running application.

To modify a screen in the running application

In the lower-right corner of the Invoice Screen screen, choose the Design Screen link.
In the left pane, choose the List | Invoices node, open the List list, and then choose DataGrid.
Choose the Patient node, and then choose the MoveUp arrow in the left margin to move the node above the Invoice Date node.
Choose the Save button to return to the running application and view the changes.
In the upper-right corner of the running application, choose the Close button to return to design mode.
On the menu bar, choose File, Save All to save your work.

Define Screen Logic

In the next step, you’ll add code to define the default logic for invoice dates.

To define screen logic

In Solution Explorer, open the shortcut menu for the Invoices.lsml node, and then choose Open.
In the Data Designer, on the toolbar, open the Write Code list, and then choose Invoice_Created.

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, open the shortcut menu for the Invoices.lsml node, and then choose Open.
In the Data Designer, choose the InvoiceDate field.
On the toolbar, open the Write Code list, and then choose InvoiceDate_Changed.

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, open the shortcut menu for the InvoiceDetails.lsml node and choose Open.
In the Data Designer, choose the Product field.
On the toolbar, open the Write Code list, and then choose Product_Changed.

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;

Choose the F5 key to run the application, open the Invoice screen, and add an invoice.

The date fields, price, and quantity are now automatically updated.
Choose the Save button to save your changes.
In the upper-right corner of the running application, choose the Close button to return to design mode.
On the menu bar, choose File, Save All to save your work.

Add More Computed Fields

In the next step, you’ll add computed fields for SubTotal, Tax, and Totals to the InvoiceDetails and Invoices entities.

To add computed fields

In Solution Explorer, open the shortcut menu for the InvoiceDetails.lsml node, and then choose Open.
In the Data Designer, choose the <Add Property> link, enter SubTotal, and then choose the Tab key.
In the Type column, open the list, and then choose Money.
In the Properties window, enter $ in the Currency Symbol text box
In the Properties window, in the General Properties section, select the IsComputed check box, and then choose the Edit Method link.

The Code Editor opens and displays the SubTotal_Compute method.

Add the following code to compute the SubTotal:

result = Quantity * UnitPrice

result = Quantity * UnitPrice;

In Solution Explorer, open the shortcut menu for the Invoices.lsml node, and then choose Open.
In the Data Designer, choose the <Add Property> link, and enter Tax, and then choose the Tab key.
In the Type column, open the list, and then choose Money.
In the Properties window, enter $ in the Currency Symbol text box.
In the Properties window, select the IsComputed check box, and then choose 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, open the shortcut menu for the Invoices.lsml node, and then choose Open.
In the Data Designer, choose the <Add Property> link, enter Total, and then choose the Tab key.
In the Type column, open the list, and then choose Money.
In the Properties window, enter $ in the Currency Symbol text box.
In the Properties window, select the IsComputed check box, and then choose the Edit Method link.

The Code Editor opens and displays the Total_Compute method.

Add the following code to compute the Total:

result = GetSubTotal() + Tax

result = GetSubTotal() + Tax;

On the menu bar, choose File, Save All to save your work.

In the next step, you’ll add the new fields to the Invoices screen.

To add fields to a screen

In Solution Explorer, open the shortcut menu for the InvoiceScreen.lsml node, and then choose Open.
In the center pane, expand the Rows Layout | Invoice Details node, expand the Add list, and then choose Tax.

The Tax field appears in the Vertical Stack | InvoiceDetails section.
Open the Add list again, and then choose the Total field.
Choose the F5 key to run the application, and then open the Invoice Screen screen.

The Tax and Total fields now appear for each invoice row.
Choose the Design Screen link to change to the customization mode.
In the left pane, expand the Data Grid Row |Invoice Detail node, expand the Add list, and then choose SubTotal.
Choose the Save button to save the change.

A SubTotal field now appears in the Invoice Details grid.
In the upper-right corner of the running application, choose the Close button to return to design mode.
On the menu bar, choose File, Save All to save your work.

Add a Mobile Client

So far, the screens that you’ve created are optimized for data entry on a desktop computer. Some tasks in the clinic, such as viewing patient information and upcoming appointments, are better suited for mobile devices. You can use LightSwitch to create screens that users can view in a browser on most tablets and phones. In the next step, you’ll create HTML client screens to browse patients and appointments.

To add an HTML client project

In Solution Explorer, open the shortcut menu for the Vision Clinic node, and then choose Add Client.
In the Add Client dialog box, choose the HTML Client item, and then choose the OK button.

A VisionClinic.HTMLClient project is added to the solution.

To add a screen to browse patients

In Solution Explorer, in the Vision Clinic.Server project, open the shortcut menu for the Patients.lsml node, and then choose Open.
On the Perspective bar, choose the HTMLClient tab, and then, on the toolbar, choose the Screen button.

The Add New Screen dialog box opens.
In the Select a screen template list, choose Browse Data Screen.
In the Screen Data list, choose Patients, and then choose the OK button.

To customize the browse screen

In the Screen Designer, in the Screen Content Tree, choose the List |Patients node.
In the List list, choose Tile List.

This option will display a tile for each patient. By default, the tile shows all fields for the patient.
Under the Rows Layout | Patient node, delete all fields except First Name, Last Name, and Policy Number.
In Solution Explorer, in the Vision Clinic.HTMLClient project, open the shortcut menu for the BrowsePatients.lsml node, and then choose Set as Home Screen.
Choose the F5 key to run the application.

If you resize the browser window, the tile arrangement changes as the window gets narrower, optimizing the view for screens on smaller devices, such as phones.
In the upper-right corner of the running application, choose the Close button to return to design mode.
On the menu bar, choose File, Save All to save your work.

Next, you’ll add a screen to view patient details.

To add a details screen

In the Screen Designer, in the Screen Content Tree, choose the Tile List |Patients node.
In the Properties window, in the Actions section, choose the Item Tap: None link.
In the Edit ItemTap Action dialog box, expand the ShowTab list, choose viewSelected, and then choose the OK button.
In the Add New Screen dialog box, accept the default values, and then choose the OK button.
Choose the F5 key to run the application.
On the Browse Patients screen, choose a patient to open the View Patient screen.

Notice that the Primary Phone, Secondary Phone, and Email fields are hyperlinks. These fields are based on custom business types, and the ability to initiate a phone call or send an email is built into the custom controls for these types.
In the upper-right corner of the running application, choose the Close button to return to design mode.
On the menu bar, choose File, Save All to save your work.

Next, you’ll add a query-based screen to view upcoming appointments.

To create a query

In Solution Explorer, open the shortcut menu for the Appointments.lsml node, and then choose Add Query.
In the Properties window, enter UpcomingAppointments in the Name text box.
In the Query Designer, choose the Add Filter link.
In the third list, choose >= (is greater than or equal to).
In the fourth list, choose Global.
In the fifth list, choose Today.
Choose the Add Filter link again.
In the second list, choose AppointmentTime.
In the third list, choose >= (is greater than or equal to).
In the fourth list, choose Global.
In the fifth list, choose Now.
Choose the Add Sort link, and then accept the default values of AppointmentDate and Ascending.
Choose the Add Sort link again, and then accept the default values of AppointmentTime and Ascending.
On the menu bar, choose File, Save All to save your work.

To create an appointment screen

In Solution Explorer, open the shortcut menu for the Appointments.lsml node, and then choose Open.
In the Data Designer, on the Perspective bar, choose the HTMLClient tab.
In the Properties window, open the Summary Property list, and then choose AppointmentTime.
In the Data Designer, on the toolbar, choose the Screen button.
In the Add New Screen dialog box, in the Select a screen template list, choose Browse Data Screen.
In the Screen Data list, choose UpcomingAppointments, and then choose the OK button.

To create an appointment detail screen

In the Screen Designer, in the Screen Content Tree, choose the List | Upcoming Appointments node.
In the Properties window, in the Actions section, choose the Item Tap: None link.
In the Edit ItemTap Action dialog box, expand the ShowTab list, choose viewSelected, and then choose the OK button.
In the Add New Screen dialog box, accept the default values, and choose the OK button.

In Solution Explorer, open the shortcut menu for the Vision Clinic.HTMLClient node, and then choose Edit Screen Navigation.
In the Application Designer, choose the Include Screen link, and then choose Browse Patients.
Choose the Include Screen link again, and then choose Browse Upcoming Appointments.
Choose the F5 key to run the application.
On the Browse Patients screen, choose the down arrow next to the title bar, and then choose Browse Upcoming Appointments to open the Appointments screen.

Notice that the Appointments screen now has a back button, which you can choose to return to the Patients screen. Also notice that, when you resize the browser window, the navigation menu is still available, but the title is truncated. You’ll fix that problem by adding some JavaScript code in the final procedure.
In the upper-right corner of the running application, choose the Close button to return to design mode.
On the menu bar, choose File, Save All to save your work.

To modify the screen title

In Solution Explorer, open the shortcut menu for the BrowseUpcomingAppointments.lsml node, and then choose Open.
In the Screen Designer, on the toolbar, open the Write Code list, and then choose created.
In the Code Editor, add the following code to the created method:
```
screen.details.displayName = "Appointments";
```
Choose the F5 key to run the application.
On the Browse Patients screen, choose the down arrow next to the title bar, and then choose Browse Upcoming Appointments to open the Appointments screen.

Notice that the title is now Appointments.
In the upper-right corner of the running application, choose the Close button to return to design mode.
On the menu bar, choose File, Save All to save your work.

This procedure completes the Vision Clinic Application walkthrough. You should now have a basic understanding of the end-to-end process of creating a LightSwitch application.

At this point you could publish your application to either Internet Information Services (IIS) or to Microsoft Azure, making the application available to other users.

This walkthrough demonstrated the basic capabilities of LightSwitch, but you can use it to do much more. As you start to build your own applications, you can learn about more capabilities in the product documentation.

Field	Value
(PICTURE)	Product Image
(TITLE)	Product Name
(SUBTITLE)	MSRP
(DESCRIPTION)	Description

Share via

Walkthrough: Creating the Vision Clinic Application in LightSwitch

Prerequisites

Steps

Create a Project

To create a project

Define Tables

To create the Patient entity

To create the Invoice and InvoiceDetail entities

Create a Choice List

To create a choice list

Define a relationship

To define relationships

Create the Appointment Entity

To add the Appointment entity

Create a Screen

To create a screen

Create an Appointment Screen

To create the screen

Run the Application and Enter Data

To run the application

Connect to a Database

To attach to a data source

Modify the Products and ProductRebate Entities

To modify the ProductRebate and Products entities

Create a List and Details Screen

To create a list and details screen

Change the Screen Layout

To customize the layout

Making Changes in the Running Application

To customize a screen at run time

Creating a Query

To create a parameterized query

Add a Computed Field

To add a computed field

To add a computed field to a screen

Create a Cross-database Relationship

To create a cross-database relationship

Create a Screen to Display Invoices

To create a screen

Modify the Invoices Screen

To modify a screen in the running application

Define Screen Logic

To define screen logic

Add More Computed Fields

To add computed fields

To add fields to a screen

Add a Mobile Client

To add an HTML client project

To add a screen to browse patients

To customize the browse screen

To add a details screen

To create a query

To create an appointment screen

To create an appointment detail screen

To add screen navigation

To modify the screen title

See Also

Concepts

Other Resources

Additional resources