DemoScript by huanghengdong

VIEWS: 12 PAGES: 50

									Demo Script
Introducing Visual Studio LightSwitch
Lab version:    1.0.0

Last updated:   2/10/2012
CONTENTS

OVERVIEW ................................................................................................................................................... 4
 Key Messages ........................................................................................................................................... 4
   Key Technologies ...................................................................................................................................... 4
   Time Estimates ......................................................................................................................................... 4

SETUP AND CONFIGURATION .................................................................................................................. 5

DEMO FLOW ................................................................................................................................................ 5

OPENING STATEMENT............................................................................................................................... 6

STEP-BY-STEP WALKTHROUGH .............................................................................................................. 7
  Segment #1 – Exploring the LightSwitch Development Environment ...................................................... 9
   Segment #2 – Creating data entities using the Entity Designer ............................................................. 10
   Segment #3 – Business Rules & Calculated Properties ......................................................................... 18
   Segment #4 – Creating and Customizing Screens ................................................................................. 22
   Segment #5 – Working with Queries ...................................................................................................... 33
   Segment #6 – User Permissions and Access Control ............................................................................ 37
   Segment #7 – Walkthrough of Deployment Options ............................................................................... 41

SUMMARY .................................................................................................................................................. 50
Overview
This document provides setup documentation, systematic instructions, and a written script for showing an Introduction to Visual Studio
LightSwitch. This document can also serve as a tutorial or walkthrough of the exposed technologies.
This demo shows how to get started building business applications with Visual Studio LightSwitch. The goal is to demonstrate how LightSwitch
does all the plumbing for you so that you can concentrate on the business value. It walks through creating a simple Vision Clinic application from
scratch that uses data from multiple sources. It also shows how to create entities, screens, queries, and write business rules. As the
demonstration progresses you get deeper into the capabilities of LightSwitch like how use access control and permissions as well as deployment.

Key Messages

        Visual Studio LightSwitch is the simplest way to develop business applications for the desktop and the cloud. LightSwitch handles all the
        plumbing for you so that you can concentrate on the business value. The only code you write is the only code you could write.


Key Technologies

This demo uses the following technologies:
    1. Microsoft Visual Studio LightSwitch


Time Estimates

       Estimated time for setting up and configuring the demo: 3 min

       Estimated time to complete the demo: 75 min
Setup and Configuration
System Requirements
    1. Microsoft Visual Studio LightSwitch (Note: Install LightSwitch on a clean machine. No other SKU should be installed for this intro demo)

    2. Microsoft Excel (for demoing the export to Excel feature)


Setup
This demo requires that the PrescriptionContoso database be attached to your local SQLEXPRESS instance (LightSwitch installs SQL Express).
To install the database:
    1. In Windows Explorer, copy the PrescriptionContoso.mdf and attachContoso.sql files to the C:\Temp directory. Please note that if you
       place the files in a directory with a different name, you will also need to change it in the attachContoso.sql script.

    2. From an elevated command prompt, switch to the C:\Temp directory and type:

        CMD
         sqlcmd -S .\SQLExpress -i attachContoso.sql



        The PrescriptionContoso sample database will be installed in SQL Server Express and will be available for use from LightSwitch.




Demo Flow
The following illustrates the high-level flow for this demo and the steps involved:
Exploring the LightSwitch Development Environment
Creating data entities using the Entity Designer
Writing Business Rules & Calculated Properties
Creating and Customizing Screens
Working with Queries
User Permissions and Access Control
Walkthrough of Deployment Options


Opening Statement
Today I would like to walk you through a new development tool in the Visual Studio Family called Visual Studio LightSwitch. Visual Studio
LightSwitch is a development environment for building data-centric, n-tier, business productivity applications for the Windows desktop or as
browser-based applications. These applications can run locally, on the web or in the Azure cloud.
LightSwitch simplifies the development process because it lets you concentrate on the business logic and does a lot of the remaining work for
you. With LightSwitch, an application can be designed, built, tested, and in your user’s hands quickly. LightSwitch is perfect for small business or
departmental productivity applications that need to get built and deployed quickly and easily.
LightSwitch applications are based on Silverlight and a solid .NET application framework using well-known patterns and best practices like n-tier
application layering and MVVM as well as technologies like Entity Framework and RIA Services. The beauty of LightSwitch is that you don’t have
to know the details of these technologies to get up and running quickly.
Users expect certain features like search, the ability to sort and rearrange grids, and the ability to export data. With every LightSwitch
application, those features are already built in. You don’t have to write any code for navigation, toolbars/ribbons, dirty checking or database
concurrency handling. Common data operations such as adding, updating, deleting are also built in, as well as basic data validation logic. You can
just set some validation properties or write some simple validation code based on your business rules and you’re set. All the plumbing is handled
by LightSwitch which means you can concentrate on the code pertaining to your business. LightSwitch can also connect to a variety of data
sources including SharePoint and SQL Azure.
LightSwitch also allows levels of customization from the UI layer to the data source layer. LightSwitch has extensibility hooks for themes, shells,
screen templates as well as other items that you can install via the Extension Manager. You can also customize LightSwitch UI with your own
controls or build custom data sources specific to your needs.
This demo will take you on a tour of Visual Studio LightSwitch. We’ll take a good look at the development process by building a simple Vision
Clinic application from scratch that uses data from multiple sources. I’ll also show you how to create entities, screens, queries, and write
business rules. As the demonstration progresses you get a little deeper into the capabilities of LightSwitch like how to control user access and
permissions as well as deployment.
In this demo you will specifically see these things:
    1. The LightSwitch development environment and experience

    2. How to build a simple business application end-to-end that uses data from multiple sources

                a. You’ll get a solid introduction to how to build entities, screens and work with queries

                b. You’ll see how to add business logic and computed properties and work with validation

                c. You’ll understand how user access control and deployment works



Step-by-Step Walkthrough
This demo is composed of the following segments:
    1. Exploring the LightSwitch Development Environment

    2. Creating data entities using the Entity Designer

    3. Business Rules & Calculated Properties
4. Creating and Customizing Screens

5. Working with Queries

6. User Permissions and Access Control

7. Walkthrough of Deployment Options
Segment #1 – Exploring the LightSwitch Development Environment

Action                                     Script                                        Screenshot


1. Open Microsoft Visual Studio               When you open LightSwitch you’ll
   LightSwitch from Start | All                notice a start page tailored to the
   Programs.                                   LightSwitch developer. Make sure to
                                               visit the Developer Center for more
2. Walk through the Get Started tab            training content and step-by-step
   and point out the resources available       “How Do I” videos.


3. Hover over menu items toolbar and          As you can see the development
   note the simplified, focused                environment is streamlined and
   development environment compared            simplified. Only the tools you need to
   to professional and ultimate editions       build LightSwitch applications are
                                               here.




4. Click New Project                          Notice that the only choice I make up
                                               front is what programming language
5. Select Visual Basic as the                  to use, Visual Basic or C#. I don’t
   programming language and name               have to make any decisions about
   the project VisionClinic.                   what type of application I want. I can
                                               choose to deploy this as a desktop,
                                               web, or cloud application later.
6. Click OK.
                                              Note that you can also install
                                               LightSwitch into Professional and
                                               Ultimate editions and it will just show
                                               up like any other project template in
                                               Visual Studio.
Segment #2 – Creating data entities using the Entity Designer

Action                                  Script                                    Screenshot


1. Solution will be created, Solution      LightSwitch is all about data and
   Explorer will open and “Start with       screens. So the next decision you
   Data” page displayed                     make is whether you want to connect
                                            to an existing data source or start
                                            creating new tables.
2. Click “Connect to exiting Data            We’re going to do both in this
   Source”, select Database as the data       application so first let’s connect to an
   source type and then and select the        existing database I have that contains
   PrescriptionContoso database.              our product catalog

3. Expand the Tables node and select         I’m going to select both the Product
   all of them. Click OK                      and ProductRebate tables.
4. Entity Designer opens                    The entity designer is where you will
                                             spend most time. This is where you
5. Change the ProductRebate.Rebate           model your data, set up relationships,
   property to type Money                    and specify validation and business
                                             rules. The better you describe your
                                             data, the more LightSwitch can do for
6. Select the ProductRebateID and            you when creating screens. Notice
   uncheck “Display By Default” on the       that the Entity Designer keeps you
   properties window                         focused on just the entity you are
                                             designing and any direct
                                             relationships.

                                            I’m going to make a few changes to
                                             our data model. Because we have
                                             connected to an existing Data
                                             Source, LightSwitch will not change
                                             the fundamental storage types of the
                                             properties here. However, I can
                                             select types where the storage is the
                                             same. For instance, I will select type
                                             “Money” for the Rebate field.

                                            I’m also going to uncheck “Display By
                                             Default” for the ID, since this is an
                                             internal primary key that the user
                                             doesn’t need to see
7. Navigate to the Product table by             Next I’ll change a couple fields on the
   clicking the entity at the end of the         Product table. I’ll make MSRP a
   relation                                      Money type and I’ll change the
                                                 ProductImage to type Image. This will
8. Change the Product.MSRP property              create the right controls for us when
   to type Money                                 we create the screens.


9. Change the Product.ProductImage to
   type Image

10. Select the ProductID and uncheck
    “Display By Default” on the properties
    window




11. Right-Click Data Sources in Solution        Our application is going to track
    Explorer and select “Add Table”.             patient prescriptions so I need to add
                                                 a new table.
12. Name table “Patient”.

13. Select the PatientID and uncheck            I’m going to name this table Patient
                                                 and we’ll need to fill out some
    “Display By Default” on the properties       properties here
    window

14. Add following properties:
    LastName, String, Required
    FirstName, String, Not Required
    SSN, String, Not Required
    Gender, String, Required
15. For Gender, in the Properties              For gender we have a short, static list
    windows scroll down and make the            of values and we want to only store
    MaxLength = 1                               an M or F in the database. For these
                                                types of fields we can use a Choice
                                                List.
16. Scroll back up and select the “Choice
    List” link.                                Choice Lists are well suited for static
                                                (non-changing) series of values like
17. Enter values:                               Gender, or “Yes, No, Maybe” choices
    F , Female                                  that are fixed list of values
    M, Male

18. Click OK




                                               Notice that I can select a Phone
19. Continue entering properties:               Number type here. This is called a
    Phone, Phone Number, Not Required           Business Type in LightSwitch.
                                                Business types come with built-in
20. Explain business types. Demonstrate         validation and formatting as well as
    declarative validation (like Phone          special controls. Business types in
    number formats) in Properties               LightSwitch are also an extensibility
                                                point, you can create additional ones
    window.                                     and distribute them to other
                                                LightSwitch developers. Email
21. Finish properties                           address, Money and Image are also
    Email, Email Address, Not Required          built-in business types. Business
    Address1, String, Not Required              types also allow you to specify
    Address2, String, Not Required              declarative validation here in the
    City, String, Not Required                  properties window.
    State, String, Not Required
    PostalCode, String, Not Required


22. Click Save
23. Click “Add Table” at the top of the      Patients have Prescriptions so we
    entity designer. Name the table           need to add that table next.
    “Prescription”

24. Select the PrescriptionID and            Now I’ll fill out a couple properties for
                                              this table
    uncheck “Display By Default” on the
    properties window


25. Enter the following properties for
    Prescription:
    RxDate, Date, Required
    Notes, String, Not Required
26. Click the “Relationship” button at the      Next I want to set up some
    top of the Entity Designer.                  relationships. A Patient has many
                                                 Prescriptions and there must be one
27. In the “To” column in the relationship       Product selected for each
    dialog select “Patient”                      Prescription.

                                                So first we’ll set up the relationship
                                                 from this Prescription entity to our
                                                 Patient

                                                Notice that the relationship dialog is
                                                 simplified and descriptive. This sets
                                                 up our referential integrity between
                                                 these tables.
28. Click the “Relationship” button at the      Next we’ll add the Product
    top of the Entity Designer again.            relationship to our prescription entity

29. In the “To” column in the relationship      Notice this time that there is a dotted
    dialog select “Product”                      line between the tables. This is
                                                 because we are setting up a
30. Click OK                                     relationship between two separate
                                                 data sources, the built-in database
                                                 we’re creating with Patients and
                                                 Prescriptions, and the external
                                                 database with our product catalog.
                                                 LightSwitch can manage the
                                                 relationship but can’t enforce the
                                                 referential integrity of the data.

                                                LightSwitch will add the Product ID
                                                 into our Prescription table in order to
                                                 manage the relationship automatically
                                                 for us.
31. Select the Product_ProductID and         Again, we’ll uncheck the “Display by
    uncheck “Display By Default” on the       Default” for the Product_ProductID
    properties window                         field since this is going to be used
                                              only internally by LightSwitch and we
                                              don’t want the user to see this on
                                              screens




Segment #3 – Business Rules & Calculated Properties

Action                                    Script                                      Screenshot
 1. Click the title bar of the Prescription       Next I’m going to specify some
    entity and scroll down to the                  Summary Properties for my entities.
    summary property in the properties             Summary properties describe the
    window.                                        entity when you see it referenced on a
                                                   screen. (You’ll see later when we
 2. Set the Summary Property Of                    create screens.)
    Prescription to RxDate
                                                  By Default, LightSwitch selects the
 3. Click the title bar of the Product             first string property as the summary
    entity in the Entity Designer and              property of an entity. But for
    scroll down to the summary                     Prescription I’ll select the RxDate
    property in the properties window.             since it’s required.


 4. Click the title bar of ProductRebate          Notice that Product already has the
    in the Entity Designer and scroll              ProductName set as the summary
    down to the summary property in                Property. That’s fine.
    the properties window
                                                  I’ll set the Product Rebate summary
 5. Set the Summary Property of                    property as the RebateStart
    ProductRebate to RebateStart


6. Click the title bar of the Patient in the      Now for Patient we really want the
   entity designer and scroll down to the          summary property to be not only the
   summary property in the properties              LastName but also include the
   window                                          FirstName. We can create a
                                                   calculated property to do this.
7. Click Calculated Property button at
   the top of the entity designer                 Enter the code to return LastName,
                                                   FirstName
8. Name the property FullName and
   click the “Edit Method” link in the
   properties window.

9. Click Save
10. Close Patient.vb file to bring you
    back to the Entity Designer

11. Click the title bar of the Patient in the      Now all we need to do is set the
    Entity Designer and set the                     summary property for Patient to the
    summary property to FullName                    FullName calculated property
12. Select the Patient.SSN property and         Now we want to add a validation rule.
    drop down the “Write Code” button            We need to make sure the
    at the top of the entity designer            Patient.SSN is in the right format.
    (note: if your resolution is small you
    may need to click the arrow at the
    end of the toolbar first to see “Write      The way we access the validation
    Code”)                                       methods of the selected property by
                                                 selecting the “Write Code” button and
                                                 selecting the Property (underscore)
13. Briefly show all the method hooks.           Validate method. Notice you also
                                                 have access to a plethora of other
                                                 methods like entity level methods that
                                                 let you control the data update
                                                 pipeline as well as access control
                                                 methods that let you control user
                                                 access. We’ll get to that later.


14. Select the SSN_Validate method              We can validate this by checking the
                                                 entry against a regular expression.
15. Write code                                   We can easily find regular
                                                 expressions on the internet, my
                                                 favorite site is www.regexlib.com
16. Save
                                                Let’s write the SSN validation code
17. Close Patient.vb file to bring you
    back to the Entity Designer

18. Double-click the ProductRebates             One last rule I want to write is to
    entity in the Solution Explorer under        make sure the Product.RebateStart is
    PrescriptionContosodata to open the          before the Product.RebateEnd
    Entity
                                                Let’s write that code next
19. Select the ProductRebateStart
    property and drop down the “Write
    Code” button at the top of the entity       Now that we’ve written our business
    designer (note: if your resolution is        rules the LightSwitch validation
    small you may need to click the              framework will handle calling these
    arrow at the end of the toolbar first to       rules at the right time for us. Property
    see “Write Code”)                              rules like these run first on the client
                                                   to give immediate feedback to the
                                                   user, and then on the server to
20. Write code for RebateStart
                                                   protect the data integrity no matter
                                                   what client is calling the middle tier.
21. From the Code Editor drop down the             This is best practice in n-tier design.
    list of methods at the top and Select
    the RebateEnd_Validate
                                                  LightSwitch has a rich validation
                                                   framework that allows you to write
22. Write code for RebateEnd                       rules once and run them in multiple
                                                   places. You can also provide
23. Save                                           informational and warning messages
                                                   in addition to validation errors.

24. Close ProductRebate.vb file to bring
    you back to the Entity Designer


Segment #4 – Creating and Customizing Screens

Action                                         Script                                         Screenshot
1. Click the Screen button at the top      Now that we have our data model
   of the Entity Designer                   created we’re ready to create our
                                            screens. Actually we could have
2. Walk through the screen templates        created a screen after we created our
                                            first entity and added business rules
                                            later. This is a key aspect of
3. Select New Data Screen and then          LightSwitch, it supports iterative
   choose Patient for the screen data       development very well.

4. Click OK                                As you can see, LightSwitch has 5
                                            screen templates out of the box.
                                            These quickly set up the layout of the
                                            screens but you can change them
                                            around how you want as you’ll see in
                                            a minute

                                           The first screen I’ll create is a New
                                            Data Screen for Patient since we
                                            need to add some Patients to our test
                                            database. Notice that you can also
                                            select the children if you want, in this
                                            case Prescriptions, but for this screen
                                            we’ll keep it simple.
5. Hit F5 to run the application        This opens the screen designer which
                                         allows us to make further
6. Point out the application shell       modifications if we want. But let’s just
   features you get for free             run the application right away and see
                                         what we get.

7. Close the New Data Screen right
   away to show dirty checking.         LightSwitch has created an entire
                                         application shell for us including a
                                         ribbon across the top, a navigation
                                         menu pane on the left and a tabbed
                                         main window area for our open
                                         screens.

                                        Notice if I try to close the screen or
                                         the application while I have pending
                                         changes, the app will prompt us. I
                                         didn’t have to write any code for dirty
                                         checking, LightSwitch handles this all
                                         for us.
8. Enter Patient Details. Enter an       When I enter invalid data, our
   invalid email and SSN and show         business rules fire.
   the validation in action
                                         Email address uses declarative
9. Hover over the field to show the       validation which comes part of the
   message popup.                         business type. You just set some
                                          properties to control its behavior. For
10. Show the validation summary at        SSN we wrote explicit code to check
   the top of the screen                  this. Notice our custom message
                                          appears in this case.

                                         We also have a validation summary at
                                          the top of the screen. We didn’t have
                                          to write any code to display these
                                          validation messages, we only have
                                          indicate what the validation rules
                                          themselves should be. Again,
                                          LightSwitch is taking care of the
                                          plumbing for us.
11. Show the phone number control         Notice we also get a phone number
   & Gender auto-complete box              editor with the Phone Number
                                           business type

                                          Also our Gender choices show up in a
                                           nice auto-complete box




12. Finish entering the patient data      Notice when I click Save on our new
   and click Save                          patient, LightSwitch automatically
                                           brings up a screen ready for editing.
13. Close the app                          We didn’t need to create this screen
                                           explicitly. Because we fully described
                                           our data model, LightSwitch can
                                           generate screens for us if we don’t
                                           specify them.

                                          But what if I want to also show the
                                           patient prescriptions when I edit a
                                           patient? We can do that by specifying
                                           our own edit details screen. Let’s do
                                           that now
14. In solution explorer right-click on      So I’m going to add an Edit Details
   the Screens node and select Add            screen for Patient and this time I’ll
   Screen…                                    include the Prescriptions

15. Select Details Screen and                Also notice that LightSwitch wants to
   choose Patient for the screen data.        use this as the default edit screen.
   Include Patient Prescriptions              This means that anytime we edit a
                                              patient in the system this screen will
                                              be used by default. You can also
                                              change this by selecting the Patient
                                              entity in the entity designer and
                                              setting the default screen property.




16. Hit F5 to run the application            So let’s add another patient into the
                                              system
17. Add another Patient and Click
   Save                                      Now notice when we save it our
                                              Patient details screen displays which
                                              allows us to enter prescriptions
18. Click the + button on the grid to        Notice when I enter a new
   add a new Prescription                     Prescription that you have by default,
                                              a generated screen based on the
19. Drop down the Product list and            entity and navigation to the product
   select a product                           lookup list automatically.


20. Save the screen                          This is pretty cool that LightSwitch
                                              uses the relationships to create smart
                                              navigation and screens and will hook
21. Close the app                             them all up automatically for you. This
                                              is why the better you can describe
                                              your data in the Entity Designer, the
                                              more LightSwitch can do for you
                                              when creating screens




22. In solution explorer right-click on      Now that we have some Patient data,
   the Screens node and select Add            let’s create a search screen
   Screen
                                          
23. Select Search Data Screen and
   choose Patients for the screen
   data
24. In solution explorer right-click on      However I want this search screen to
   the Screens node and select Edit           open first. Remember we created the
   Screen Navigation…                         New Data Screen first so that’s what’s
                                              opening first by default. We can
25. Select Search Patients screen             change this easily by editing the
   and click the Set button at the            screen navigation
   bottom to make it the default
   screen                                    Here I’ll set it as the default startup
                                              screen and move it to the top of the
26. Move it up to the top by clicking         Task menu
   the up arrow on the right-side




27. Hit F5 to Run the application            Here’s the search screen. Another
                                              cool feature of all the grids in the
28. Click the Excel button on the left        system is we can Export the data that
   of the search grid                         is showing in the grid to Excel. By
                                              using the search filters and sorting
                                              capabilities, you can create simple
29. Close Excel                               reports this way.
30. Type a search string in the        LightSwitch will automatically support
   search box and hit Enter             searching search across any string
                                        fields in the table using the search
                                        box at the top here

                                       You can shut both of these features
                                        off but they are on by default.

                                       You can also control how many
                                        records in a page are returned from a
                                        query as well as whether the grid
                                        supports sorting on the columns using
                                        the Screen Designer

                                       When grids are sorted or columns
                                        resized by users, these settings are
                                        remembered the next time the user
                                        runs the application


31. Click on the FullName link to      Notice that our summary property is
   open the Patient detail screen       showing as a clickable link. When I
                                        select a patient here our default edit
32. Click on the Design Screen          screen opens.
   button
                                       What if I want to make some quick
                                        layout changes to this screen?
                                        Instead of having to stop the
                                        application, we can do this at
                                        development time by clicking the
                                        “Design Screen” button right here at
                                        the top right of the application
33. Select the Product under the            I want to show the Product on our
   Prescriprions data grid and move it       Prescriptions list a little differently by
   up before the Notes. In the               including the image. I also want to
   properties set the MinWidth to 100        change the order of the fields in the
                                             grid and set the editing of the fields to
34. Delete the Prescription summary          under the Prescriptions data grid
   control under the Prescriptions
   data grid

35. Set the Product control to Picture
   and Text and set Picture = Product
   Image, Title = Product Name,
   SubTitle = MSRP and Description
   = Description

36. Select the Prescription Data Grid
   then click Add at the bottom and
   choose Prescriptions – Selected
   Item. Delete the Patient auto-
   complete box.


37. Select the Prescriptions Data           Since we’ve now got the editing
   Grid Command Bar                          controls under the grid, we don’t need
                                             to display a modal window when we
38. Delete Add… and Edit… buttons            add or edit a record. So I’ll remove
                                             the edit button from the data grid
                                             command bar as well as change the
39. Click Add and select the                 Add button to just add a new row into
   AddNew button and move it to the          the grid. Now when the user selects
   top                                       or adds a row they can edit the
                                             controls below the grid.
40. Click Save
                                            It’s cool that we can make layout
                                             changes right here on the left and see
                                             a live preview displayed on the right.
                                             When we save the customization,
                                          those changes are persisted into the
                                          screen.

                                         This is what I mean by LightSwitch
                                          supporting iterative development, you
                                          don’t need to stop debugging, modify,
                                          then rebuild again just to modify the
                                          UI


41. Walk through changes persisted           Now you can see the screen has
   to the screen                              changed right here at runtime.
                                              The design screen functionality is
42. Drop down the Products auto-              available only to the developer
   complete box under the data grid           while in debug mode and allows
   and not sort order                         us to make UI changes quickly.


43. Close App                                However notice that the Products
                                              are out of order. Let’s see how we
                                              can change that.
  44. Double-click on the Patient Detail      Let’s take a quick look at the screen
     screen in the Solution Explorer           designer. What you see in the center
                                               is called the content tree – which is all
  45. Briefly walk through the Screen          the controls and data that they are
     designer                                  bound to. On the left is the View
                                               Model, including the queries,
                                               properties and commands that are on
                                               the screen

                                              When you write code against the
                                               screen you are always writing code
                                               against this model. This makes it
                                               possible for third-parties to create
                                               custom shells which you can install to
                                               completely change the look and feel
                                               of the application.



Segment #5 – Working with Queries

Action                                     Script                                          Screenshot


1. Right-Click on Products entity under       In order to sort the products we need
   Data Sources in the Solution                to add a query.
   Explorer and select Add Query
                                              For this particular query I’ll name it
2. Name the query SortedProucts                SortedProducts and we’ll just ad a
                                               sort order on ProductName
3. Add Sort                                    ascending.


4. Select ProductName, Ascending              Notice however we can create filters,
                                               groups of filters as well as specify
                                               parameters.
5. Drop down the “Write Code” button
   to show additional methods
6. Click Save                               And anything we can’t do here in the
                                             designer we can drop to code by
                                             writing LINQ code in the
                                             PreProcessQuery method


7. Double-click on PatientDetail to         Now we need to add this query to our
   open the screen designer                  Patient Detail screen in order to use it
                                             for the product lookup list
8. Click Add Data Item button at the
   top and select Query for the screen
   member type and choose
   SortedProducts query

9. Click OK
10. At the bottom of the content tree,        Now we just set the query as the
    Select the Product auto-complete           choices property of the Product auto-
    box and in the properties window set       complete box
    the Choices to SortedProducts
                                              Notice that no other queries show up
                                               here and we have a few on this
                                               screen. LightSwitch is smart enough
                                               to only let you select from queries that
                                               return the entity type it expects, in this
                                               case products.




11. F5 to run the application                 Now when we edit or add a new
                                               prescription record the Product list is
12. Select a Patient on the Search             sorted properly
    Screen to open Patient Detail

13. Add a new Prescription by clicking
    the + button on the data grid,
    dropdown the product list

14. Save Screen, Close App



15. Right-click on the Products entity        You can also base entire screens on
    again in the Solution Explorer and         queries. Let’s create a screen that
    select Add Query                           allows us to edit the products but we
                                               want to pull up products based on
16. Drop down the Source dropdown              their Category.
    and select SortedProducts
                                              This time we’ll base this query on the
17. Name the Query                             SortedProduct query. LightSwitch
    ProductsByCategory                         allows us to “build up” queries by
                                                basing them on another query. This is
                                                particularly useful if you have complex
18. Add filter on Category, select
                                                queries and you just need to change
    Parameter type and select “Add
                                                filters or sorts.
    New” parameter

19. Click Save                                 Here we’ll specify the Category as a
                                                parameter to this query. Now let’s
                                                create a screen based on this


20. Right-click on the Screens node in         I’ll create a List and Details screen
    the Solution Explorer and select “Add       this time and base the screen on the
    Screen”                                     query we just created. I’ll also include
                                                the ProductRebates on the screen
21. Select List and Details screen and          and name it ProductsCatalog
    choose the –ProductsByCategory
    query for the screen data

22. Select the Product ProductRebates
    to include on the screen.

23. Name the screen ProductsCatalog

24. Click OK


25. Click on the ProductCategory data          Before we run the application, notice
    item on the left of the screen              that a ProductCategory data item has
    designer and note the                       been added to the screen. This data
    IsParameterProperty                         item is feeding the Query parameter
                                                Category as indicated by the line you
                                                see linking them

                                               If we check the IsParameter here in
                                                the properties window then that
                                                means the screen would need to be
                                                passed the parameter value in code,
                                                which we could totally do. But for this
                                              example, I want the user to enter the
                                              value like a simple search.
                                              LightSwitch has already set that up
                                              for us.

26. Hit F5 to run the application            Notice I can search on Category with
                                              this textbox here at the top now
27. Open the Product Catalog Screen

28. Enter “Allergy” in the Category
    textbox and hit TAB or ENTER

29. Close App




Segment #6 – User Permissions and Access Control

Action                                    Script                                       Screenshot


1. Double-click on the Project               We’ve got a pretty good looking
    Properties in the solution explorer       application but now we’d like to
    and select the Access Control tab         control user access to parts of the
                                              application

                                             In order to do this we need to specify
                                              a set of user permissions and then
                                              check them in code.

                                             There are two parts to security in
                                              LightSwitch, authentication and
                                              authorization. Authentication means
                                              “you are who you say you are” and
                                              Authentication means, “now that I
                                              know who you are, here’s what you
                                            can do in the system”.

                                           We specify these settings on the
                                            Access Control tab of the project
                                            properties


2. Click the Use Forms Authentication      You can add permissions and check
                                            them in code for anything in the
3. Enter user permissions:                  system but typically you add
   CanAccessProductCatalog                  permissions on Screens, Entities and
   CanInsertPatient                         Queries. There are built-in hooks for
   CanUpdatePatient                         you for these types of items in the
   CanDeletePatient                         system.
   CanReadPatient
                                           You can also specify whether you
                                            want to use Windows or Forms
                                            authentication. Windows is
                                            appropriate if all users are on the
                                            same domain and you want to use the
                                            windows logins. Forms authentication
                                            is appropriate for internet-based
                                            applications where LightSwitch will
                                            present a login screen and you
                                            manage passwords through the
                                            LightSwitch application. Let’s choose
                                            Forms Auth.

                                           I’ll add 5 user permissions. One will
                                            be a screen access permission to
                                            determine if a user has access to the
                                            Product Catalog

                                           The other 4 will determine levels of
                                            access to the Patient entity itself.
                                            Entity access control is more secure
                                            than screen access control because it
                                            is checked on the middle tier. No
                                            matter what screen, the entity access
                                            control methods will fire.


4. Check off “Enabled for Debug” for       Next we specify what permissions we
   the CanReadPatient permission            want to enable at debug time. This is
                                            specified by checking the “Enabled for
5. Click Save                               Debug” in the permissions grid. This
                                            allows you to as the developer to
                                            bypass any login screen and easily
                                            test combinations of permissions.

                                           For this test, I’ll just check off
                                            CanReadPatient

                                           Now that we have our permissions set
                                            up, let’s write some code to check
                                            them


6. Double-click the ProductCatalog         As you can see every screen provides
   screen in the solution explorer to       a CanRun access control method.
   open the Screen Designer
                                           Let’s write the code to check the
7. Drop down the “Write Code” button        CanAccessProductCatalog
   and select the                           permission
   CanRunProductCatalog method
   under the Access Control methods

8. Write the permission check code
9. Double-click Patient entity in the        Next we’ll add permission checks for
   Solution Explorer to open the entity       the Patient entity
   designer

10. Drop-down the “Write Code” button
    to see the Access Control methods
    for an entity

11. Select CanDelete, CanInsert,
    CanRead, CanUpdate




12. Write the Permission check code          Next we’ll write the entity aces control
                                              code. This code is going to run on the
                                              server.
13. Hit F5 to run the application              Now when I run this notice right away
                                                I don’t have access to the Product
14. Select a Patient in the search screen       Catalog. I only have access to read
    to open Patient Detail                      patients.

                                               If I select a Patient in the search
                                                screen notice that all the Patient fields
                                                are automatically disabled for me. I
                                                can still add prescriptions, but I can’t
                                                modify the Patient entity. Cool!




15. Click on the Create New Patient            Notice however, that I forgot to control
    screen                                      access to the Create New Patient
                                                screen. Let’s see if we can trick the
16. Fill out required Patient fields            system and add a patient


17. Click Save                                 When I click save, we get an error
                                                thrown from the middle-tier. Our data
                                                is secure no matter if we forget to
18. Click OK                                    secure a screen on the client.

19. Close App




Segment #7 – Walkthrough of Deployment Options

Action                                      Script                                          Screenshot
1. Double-click on the Properties in       Now let’s walk through some
 the Solution Explorer and select the       deployment options for our application
 Application Type tab.                      now that it’s complete. Notice I
                                            haven’t had to make a choice about
                                            deployment until now. That’s the
                                            beauty of LightSwitch, in most cases
                                            you can just build the application,
                                            deploy it and then change the
                                            deployment later as the application
                                            needs to scale up

                                           Here on the Application Type tab we
                                            have a variety of options for
                                            deployment. First we can choose
                                            whether we want to deploy the the
                                            client as a desktop or browser
                                            application. Desktop apps run on
                                            Windows and have access to the
                                            machine and other programs running
                                            on Windows

                                           Browser-based applications don’t
                                            have access to the computer but can
                                            run on a variety of operating systems
                                            and browsers that Silverlight
                                            supports.

                                           If you select Desktop, you can deploy
                                            the middle-tier or application services
                                            onto the same machine, therefore
                                            creating a more traditional client-
                                            server setup where clients connect
                                            directly to the database. This avoids
                                            the need for a web server but also
                                            means the clients must be running the
                                            full .NET framework.
                                       Otherwise you can choose to deploy
                                        the middle-tier on a web server, one
                                        that you own or an ISP, or you can
                                        deploy to Azure. The wizard helps
                                        you set up an Azure account if you
                                        don’t have one.

                                       For this demo I’ll just deploy as a
                                        desktop 2-tier application. Once
                                        deployed, I’ll run through the
                                        administration screens to set up our
                                        users into the system


2. Click Publish                       For client configuration we’ll select
                                        Desktop
3. Client configuration = Desktop
                                    
4. Next
5. Application Server Configuration =      We’ll select Local deployment next
   Local

6. Click Next




7. Publish Options = leave defaults        Here is where we indicate where to
                                            publish the application. This
8. Click Next                               deployment option will create a
                                            clickonce setup.exe for us. If I was
                                            deploying this to other users, I’d
                                            specify a UNC share. The default puts
                                            the setup files under the \Publish
                                            folder of the project

                                           We also have the option of publishing
                                            directly to the database or create a
                                            script to deploy later. I’ll publish
                                            directly
9. Database connections = leave              Next we specify the connection
   defaults                                   strings for the administrator of the
                                              database for deployment of the data
10. Click Next                                base and the user connection string
                                              that is placed in the client
                                              configuration which is used when
                                              users connect to the database. I’ll use
                                              the defaults here as well but notice
                                              that you can create a user database
                                              login right here in the dialog.




11. Enter administrator user name, full      Since we have this application set to
    name and password                         use forms authentication we need to
                                              deploy the administrator account. This
12. Click Next                                user will have access to the
                                              administration screens which allows
                                              them to set up all user access in the
                                              system.
13. Prerequisites = defaults          Next we specify any prerequisites that
                                       need to be installed on the user’s
14. Click Next                         machine to run the application. We
                                       don’t need anything else but the
                                       defaults for our app so I’ll just click
                                       next.




15. Other Connections = defaults      Here is where we specify the
                                       connection string to our external data
                                       source, in our case the
                                       PrescriptionContoso database. Again,
                                       I’ll use the defaults here which is the
                                       same connection we specified when
                                       we added the external data source in
                                       the begining.
16. Specify a Certificate = defaults          Next we can specify a certificate to
                                               use to sign the application so that
                                               when users install, the application is
                                               trusted. You typically get these
                                               certificates form a cert authority like
                                               Verisign or you may have one you
                                               use for your company internally.
                                               Again I’ll just click next.




17. Summary – view settings                   Finally we get to the Summary page
                                               where we can verify our publish
18. Click Publish                              settings and then click Publish.


19. Wait until Publish succeeds (you can      This will take a couple minutes
    see the progress in the output             because it will create the database for
    window if it is open)                      us and then publish the setup.exe
                                               under the \Publish folder
20. Open \Publish folder and Click on       Now I’ll install the application by
    the Setup.exe                            clicking on the setup.exe




21. Click Install                           Click the install button and the
                                             application will install on my machine
                                             and launch




22. Login to the application using the      Forms authentication will prompt us
    username/pass you entered on the         for the login we entered so let me do
    Publish screen                           that

23. Click Log In
24. Enter Roles and Permissions:            Next we specify Roles in the
    Product Planner = Can Access             application. The System Administrator
    Product Catalog                          is entered by default but we can
    Patient Admissions = Can Read            specify any additional roles we want.
    Patient, Can Delete Patient, Can
    Update Patient, Can Insert Patient
    Prescription Entry = Can Read           I’ll add three, Product Planner, Patient
    Patient                                  Admissions, and Prescription Entry

                                            Product Planner will only have
25. Save Roles Screen                        permission to access the Product
                                             Catalog screen

                                            Patient Admissions will be allowed to
                                             Insert,Update,Delete and Read
                                             Patients

                                            Prescription Entry will only be allowed
                                             to Read the Patient


26. Open Users Screen                       Now we can add users to the system
                                             and assign them roles
27. Add another user and assign roles

28. Save Screen

29. Close App
30. Restart app from Windows Start            Notice when I log back into the
    menu: Start menu – Vision Clinic           system as the other user I now have
                                               the right access rights to parts of the
                                               application.

                                              If I want to uninstall the application I
                                               can do so from Add/Remove
                                               Programs like usual.

                                              Cool!




Summary
In this demo, you saw how you can use Visual Studio LightSwitch to create fully functional business applications quickly that runs on the desktop,
the web or the cloud. Use Visual Studio LightSwitch to create business productivity applications that need to get done fast.

								
To top