Export (0) Print
Expand All
10 out of 12 rated this helpful - Rate this topic

Walkthrough: Creating the Vision Clinic Application

This walkthrough demonstrates the end-to-end process of creating an application in Visual Studio LightSwitch 2011. 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.

Download the PrescriptionContoso database from MSDN Code Gallery.

The first step in creating a LightSwitch application is to open a new project.

To create a project

  1. On the Windows Start menu, click All Programs > Microsoft Visual Studio 2010 > Microsoft Visual Studio LightSwitch.

    The LightSwitch designer appears.

  2. On the File menu, click New Project.

    The New Project dialog box opens.

  3. In the Installed Templates list, select the LightSwitch node.

  4. In the center pane, select either LightSwitchApplication (VB) or LightSwitch Application (C#).

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

    The Vision Clinic project

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

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

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

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

  4. Click <Add property> in the Name column and type LastName.

  5. Click <Add property> in the Name column and type Street.

  6. Click <Add property> in the Name column and type Street2.

  7. In the Required column, clear the check box.

    The second line of a street address is optional.

  8. Click <Add property> in the Name column and type City.

  9. Click <Add property> in the Name column and type State.

  10. Click <Add property> in the Name column and type Zip.

  11. Click <Add property> in the Name column and type PrimaryPhone.

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

  13. In the Required column, clear the check box.

  14. Click <Add property> in the Name column and type SecondaryPhone.

  15. In the Type column, select PhoneNumber from the drop-down list.

  16. In the Required column, clear the check box.

  17. Click <Add field> in the Name column and type Email.

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

  19. In the Required column, clear the check box.

  20. Click <Add property> in the Name column and type PolicyNumber.

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

    The Patient entity
  22. 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

  1. In Solution Explorer, click Data Sources. On the Project menu, click Add Table.

    A new instance of the Data Designer appears.

  2. In the Properties window, select the Name property. Type Invoice, and then press Enter.

  3. In the Name column click <Add property>. Type InvoiceDate, and then press Enter.

  4. In the Type column, select DateTime from the drop-down list.

  5. In the Name column click <Add property>. Type InvoiceDue, and then press Enter.

  6. In the Type column, select DateTime from the drop-down list.

  7. In the Required column, clear the check box.

  8. In the Name column click <Add property>. Type InvoiceStatus, and then press Enter.

  9. In the Type column, select Integer from the drop-down list.

  10. In the Name column click <Add property>. Type ShipDate, and then press Enter.

  11. In the Type column, select DateTime from the drop-down list.

    The Invoice entity
  12. In Solution Explorer, click Data Sources. On the Project menu click Add Table.

  13. In the Properties window, select the Name property.Type InvoiceDetail, and then press Enter.

  14. In the Name column click <Add property>.Type Quantity, and then press Enter.

  15. In the Type column, select Integer from the drop-down list.

  16. Click <Add property> in the Name column and type UnitPrice.

  17. In the Type column, select Money from the drop-down list.

    Money is another custom business type that represents and correctly formats currency.

    The InvoiceDetails entity
  18. On the File menu, click Save All to save your work.

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

  1. In Solution Explorer, double-click Invoices.

  2. In the Data Designer, select the InvoiceStatus field.

  3. In the Properties window, click the Choice List link.

    The Choice List dialog box

    The Choice List dialog box appears.

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

  5. On the File menu, click Save All to save your work.

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

To define relationships

  1. In Solution Explorer, double-click Invoices.

  2. On the Data Designer toolbar, click Relationship.

    The Add New Relationship dialog box appears.

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

  4. On the Data Designer toolbar, click Relationship.

    The Add New Relationship dialog box appears.

  5. In the Add New Relationship dialog box, select the To column in the Name: row, and select InvoiceDetail.

  6. Select the From column in the Multiplicity: row, and select One.

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

    The relationship between Invoice and InvoiceDetail
  8. On the File menu, click Save All to save your work.

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

  1. In Solution Explorer, click Data Sources, and then on the Project menu click Add Table.

  2. In the Properties window, change the Name to Appointment.

  3. In the Data Designer, click <Add property> in the Name column and type AppointmentTime.

  4. In the Type column, select DateTime from the drop-down list.

  5. Click <Add property> in the Name column and type AppointmentType.

  6. In the Type column, select Short Integer from the drop-down list.

  7. Click <Add property> in the Name column and type DoctorNotes.

  8. Accept the default type, String, and clear the Required check box.

  9. On the Data Designer toolbar, click Relationship.

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

  11. In the Data Designer, select the AppointmentType field.

  12. In the Properties window, click the Choice List link.

    The Choice List dialog box appears.

  13. In the Choice List dialog box, enter the following values, and then click OK.

    Value

    Display Name

    0

    Annual

    1

    Follow-up

    2

    Emergency

    The Appointment entity
  14. On the File menu, click Save All to save your work.

In the next step, you will create a screen to display a list of patients.

To create a screen

  1. In Solution Explorer, click the Screens node, and then on the Project menu click Add Screen.

    The Add New Screen dialog box opens.

  2. Select Editable Grid Screen in the Select a screen template list.

  3. In the Screen Name text box, type PatientList.

  4. Select the Screen Data drop-down list and select Patients. Click OK.

    Defining the PatientList screen

    The Screen Designer opens, displaying a hierarchical representation of the screen layout.

  5. On the File menu, click Save All to save your work.

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

To run the application

  1. Press F5 to start the application.

  2. In the running application, select the PatientList screen and then click the add +… button.

    An Add New Patient dialog box appears.

  3. Enter data for a new patient. In the Email field, enter an invalid value, for example john#example.com.

    Invalid email address

    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.

  4. Correct the error, finish the data entry, and then click OK.

    The Save button on the application toolbar is now enabled.

  5. Click the add +… button. Add data for a second patient and then click OK.

  6. Click Save to save your data.

    You can now rearrange the columns in the PatientList grid, and you can sort on any column.

  7. Click the Close button in the upper-right corner of the running application to return to design mode.

  8. On the File menu, click Save All to save your work.

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

Note 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

  1. In Solution Explorer, select the Data Sources node.

  2. On the Project menu, click Add Data Source.

    The Attach Data Source wizard opens.

  3. In the Attach Data Source wizard, click Database and then click Next.

    The Choose Data Source dialog box appears.

    Note Note

    If you have previously connected to a database in LightSwitch, this dialog box does not appear and you can skip the next step.

  4. In the Choose Data Source dialog box, click Microsoft SQL Server and then click Continue.

    The Connection Properties dialog box appears.

  5. In the Connection Properties dialog box, enter the values in the following table, and then click OK.

    Field

    Value

    Server Name

    .\SQLExpress

    Log on to the server

    Use Windows Authentication

    Select or enter a database name

    C:\Temp\PrescriptionContoso.mdf

    Connection properties

    The Choose your Database Objects wizard page appears.

  6. Expand the Tables node.

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

  8. In Solution Explorer, right-click C_TEMP_PRESCRIPTIONCONTOSO_MDFData and click Rename, the type PrescriptionContoso

  9. On the File menu, click Save All to save your work.

In the next step, you will make some changes to the ProductRebate and Products entities.

To modify the ProductRebate and Products entities

  1. In Solution Explorer, double-click the ProductRebates node.

  2. Select the Rebate field and change the Type to Money.

  3. In Solution Explorer, double-click the Products node.

  4. In the Data Designer, select the MSRP field and change the Type to Money.

  5. Select the ProductImage field and change the Type to Image.

  6. On the File menu, click Save All to save your work.

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

To create a list and details screen

  1. In Solution Explorer, select the Screens node. On the Project menu, click Add Screen.

  2. In the Add New Screen dialog box, select List and Details Screen in the Select a screen template list.

  3. In the Screen Name field, type ProductList.

  4. Select the Screen Data drop-down list and select PrescriptionContoso.Products.

  5. In the Additional Data to Include list, select both Product Details and Product ProductRebates check boxes, and then click OK.

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

To customize the layout

  1. In the Screen Designer, select the Rows Layout |Product Details node in the Screen Content Tree.

  2. In the Rows Layout drop-down list, select Picture and Text.

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

    Picture and Text layout
  4. Press F5 to run the application and view the results.

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

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

To customize a screen at run time

  1. On the Product List screen, click the Design Screen button in the upper-right corner.

  2. In the left pane, select the Data Grid | Product Rebates node.

  3. In the Properties window, change the Display Name property to Contoso Rebates.

    The name also changes in the application window.

  4. Select the MSRP field and change the Description property to Suggested price before any rebates..

    Design-time customization
  5. Click the Save button to return to the running application and view the changes. Hover over the MSRP field to see the description.

  6. Click the Close button in the upper-right corner of the running application to return to design mode.

  7. On the File menu, click Save All to save your work.

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

To create a parameterized query

  1. In Solution Explorer, select the Products node. On the Project menu, click Add Query.

    The Query Designer appears.

  2. In the Properties window, select the Name field and type RelatedProducts.

  3. In the Query Designer, click Add Filter.

    A filter condition is added to the Filter section.

  4. In the second drop-down list, select Category.

  5. In the fourth drop-down list, select Parameter.

  6. In the fifth drop-down list, click Add New.

    A new Parameter named Category of type String is added to the Parameters section.

    The RelatedProducts query
  7. In Solution Explorer, double-click the ProductList node to open the Screen Designer.

  8. On the Screen Designer toolbar, click Add Data Item.

    The Add Data Item dialog box appears.

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

  10. Select the Category node under Query Parameters.

  11. In the Properties window, select the Parameter Binding property and type Products.SelectedItem.Category.

  12. In the center pane, expand the Add node below the DataGrid |Contoso Rebates node and click Related Products.

    Adding related products
  13. 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.

  14. Click the Close button in the upper-right corner of the running application to return to design mode.

  15. On the File menu, click Save All to save your work.

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

  1. In Solution Explorer, double-click the Products entity node.

  2. In the Data Designer, click <Add Property>. Type CurrentPrice, and then clcik Tab.

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

  4. In the Properties window, click the Edit Method link.

    The Code Editor appears and the CurrentPrice_Compute method is displayed.

  5. Add the following code to the event handler:

    decimal rebates = default(decimal);
    
                
                foreach (var item in ProductRebates)
                {
                    if (item.RebateStart <= System.DateTime.Today && item.RebateEnd >= System.DateTime.Today)
                    {
                        rebates = rebates += item.Rebate.Value;
                    }
                }
    
                result = this.MSRP - rebates;
    
    Code to calculate the Current Price
  6. 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

  1. In Solution Explorer, double-click the ProductList screen node.

  2. In the left pane of the Screen Designer, select the CurrentPrice node and drag it below the (Description) | Description node in the center pane.

    Current Price after drag and drop
  3. Press F5 to run the application and view the results.

  4. In the ProductList screen, edit the Rebate or MSRP field. The CurrentPrice is recomputed. Click the Close button to return to design mode.

  5. Click the Close button in the upper-right corner of the running application to return to design mode.

  6. On the File menu, click Save All to save your work.

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

  1. In Solution Explorer, double-click the InvoiceDetails entity node.

  2. In the Data Designer, click the Relationship toolbar button.

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

    A cross-database relationship
  4. 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.

  5. On the File menu, click Save All to save your work.

In the next step, you will create a new screen to display invoices.

To create a screen

  1. In Solution Explorer select the Screens node. On the Project menu, click Add Screen.

  2. In the Add New Screen dialog box, select List and Details Screen in the Select a screen template list.

  3. In the Screen Name: text box, type InvoiceScreen.

  4. Select the Screen Data drop-down list and select Invoices.

  5. In the Additional Data to Include: list, select Invoice Details and Invoice InvoiceDetails, and then click OK .

    The InvoiceScreen layout
  6. Expand the Data Grid Row | Invoice Detail node. Select the Product Product ID node and delete it.

  7. To reorder the fields, click the UnitPrice node and drag it underneath the Product node.

  8. Press F5 to run the application. In the Menu, click Invoice Screen to display the screen.

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

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

  11. Click the Save button to save your invoice data.

  12. Keep the application open. In the next step, you will make changes in the running application.

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

  1. From the Invoice Screen screen, click the Design Screen button in the upper-right corner.

  2. In the left pane, select the List | Invoices node. Select DataGrid from the List drop-down list.

  3. Select the Patient node. Use the MoveUp arrow in the left margin to move it above the Invoice Date node.

    The customized Invoice screen
  4. Click Save to return to the running application and view the changes.

  5. Click the Close button in the upper-right corner of the running application to return to design mode.

  6. On the File menu, click Save All to save your work.

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

To define screen logic

  1. In Solution Explorer, double-click the Invoices entity node.

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

  3. In the Invoice_Created method, add the following code to set default behavior for dates:

    InvoiceDate = System.DateTime.Today;
    InvoiceDue = System.DateTime.Today.AddDays(30);
    ShipDate = System.DateTime.Today.AddDays(3);
    
  4. In Solution Explorer, double-click the Invoices entity node.

  5. In the Data Designer, select the InvoiceDate field.

  6. Click the Write Code drop-down list on the toolbar and then click the InvoiceDate_Changed link

  7. 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)
        {
            ShipDate = InvoiceDate.AddDays(2);
        }
    
  8. In Solution Explorer, double-click the InvoiceDetails node.

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

  10. In the Code Editor , add the following code to set the unit price and default quantity:

    UnitPrice = Product.CurrentPrice;
    
    Quantity = 1;
    
  11. 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.

  12. Click the Save button to save your changes.

  13. Click the Close button in the upper-right corner of the running application to return to design mode.

  14. On the File menu, click Save All to save your work.

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

To add computed fields

  1. In Solution Explorer, double-click the InvoiceDetails entity node.

  2. In the Data Designer, click <Add Property>.Type SubTotal, and then click the Tab.

  3. In the Type column, select Money from the drop-down list.

  4. In the Properties window, under General Properties, select the IsComputed check box.

  5. Click the Edit Method link.

    The Code Editor appears and displays the SubTotal_Compute method.

  6. Add the following code to compute the SubTotal:

    result = Quantity * UnitPrice;
    
  7. In Solution Explorer, double-click the Invoices entity node.

  8. In the Data Designer, click <Add Property>.Type Tax, and then click Tab.

  9. In the Type column, select Money from the drop-down list.

  10. In the Properties window, select the IsComputed check box.

  11. Click the Edit Method link.

    The Code Editor opens and displays the Tax_Compute method.

  12. Replace the Tax_Compute method with the following code to compute the Tax:

    partial void Tax_Compute(ref decimal result)
        {
            result = GetSubTotal() * (decimal)0.095;
        }
    protected decimal GetSubTotal()
        {
            return this.InvoiceDetails.Sum(i => i.SubTotal);
        }
    
  13. In Solution Explorer, double-click the Invoices entity node.

  14. In the Data Designer, click <Add Property>. Type Total, and then click Tab.

  15. In the Type column, select Money from the drop-down list.

  16. In the Properties window, select the IsComputed check box.

  17. Click the Edit Method link.

    The Code Editor opens and displays the Total_Compute method.

  18. Add the following code to compute the Tax:

    result = GetSubTotal() + Tax;
    
  19. 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

  1. In Solution Explorer, double-click the InvoiceScreen screen node.

  2. In the center pane, select and expand the Rows Layout | Invoice Details node.

  3. Select and expand the Add drop-down and select Tax.

    The Tax field is added to the Vertical Stack | InvoiceDetails section.

  4. Select the Add drop-down again and select the Total field.

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

  6. Click the Design Screen button to change to the customization mode.

  7. In the left pane, select the Data Grid Row |Invoice Detail node and expand it.

  8. Click the Add drop-down and select SubTotal.

  9. Click Save to save the change. A SubTotal field is now displayed in the Invoice Details grid.

    The updated Invoice screen
  10. Click the Close button in the upper-right corner of the running application to return to design mode.

  11. On the File menu, click Save All to save your work.

In the next step, you will deploy the application as a 2-tier desktop application.

To publish a 2-tier desktop application

  1. In Solution Explorer select the Vision Clinic node, and then on the Build menu, click Publish Vision Clinic.

    The LightSwitch Publish Application Wizard appears.

  2. On the Welcome to the LightSwitch Publishing Wizard page, verify that Desktop is selected and then click Next.

  3. On the Application Services page, verify that Local is selected and then click Next.

  4. On the Specify Publishing Preference page, select the Where do you want the application files to be placed? field and type C:\Publish.

  5. In the How do you want to publish the default database? section, select Publish directly to database now, and then click Next.

  6. On the LightSwitch Application Database – SQL Database Connection page, accept the default connection string values and then click Next.

  7. On the Install Prerequisites page, accept the default settings and then click Next.

  8. On the Other Connection Information page, accept the default settings and then click Publish.

  9. In Windows Explorer, locate the C:\Publish directory and double-click the Setup.exe file to install the application on the local computer.

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

  10. If an Application Install – Security Warning dialog box appears, click Install.

    The Vision Clinic application will be installed and started.

    The finished application
  11. Enter some data and verify that the application works as expected.

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

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.