Sep 20

Written by: Michael Washington
9/20/2010 8:01 PM 

This is part III to the article LightSwitch Student Information System.

In this article we will explore taking LightSwitch to the edge of it’s abilities. We will do it for a good reason, and we will demonstrate that it is a tool that is capable of professional development.

This article continues from where the article, LightSwitch Student Information System (Part 2): Business Rules and Screen Permissions ended.

Note: You will need Visual Studio Professional, or higher, to complete this tutorial. You will not be able to create Silverlight Custom Controls if you only have the basic LightSwitch program installed.

In that article we implemented Attendance.

It is important to note that at the end of that article, the application does work. Also, while we added code to implement Business Rules, we did not have to write code for the application to work. It is an option to simply only enter valid data.

LightSwitch was designed for, and can be used effectively by non-programmers. However, if you are a programmer, or have access to one (all it takes is a little money), LightSwitch can be enhanced to be more productive than it already is.

At the end of the last article, the Attendance screen looks like the image above. While it does work, the problems are:

• You must enter the Attendance Code, Date, and Enrollment each time
• It is not easy to see the Attendance already entered

In “the real world”, a Teacher is usually sitting in front of a class (a Section) and staring at Students. In this situation, the Teacher knows what Section it is, and what day it is.

To be most effective, the Teacher wants to see a list of all the Students who are Enrolled in the class on that day (they do not want to see any Students who have dropped the class), and they want to quickly mark the Attendance for the Students.

We will have to implement a Silverlight Custom Control, because we need to perform functionality that does not normally exist in LightSwitch without some programming.

• We need to create in-memory records for Students that are enrolled but do not have an attendance record. LightSwitch is designed to require you to create each new record you want, as a new record, then save it. What people want, is for the computer to create “blank spots”, and allow them to fill in only the relevant data and click one button to “save all records”.
• We need to jump from the Section table to the Attendance table bypassing the Enrollment table. LightSwitch is designed to protect data integrity. When traversing from the Section table to the Attendance table, you need to select an Enrollment record first (a Section can have several Enrollments and an Attendance record is attached to an Enrollment record). We are going to bypass LightSwitch’s normal way of doing things (because we do not want the user to have to select each Enrollment before entering an Attendance record), while still maintaining it’s protections for our data integrity.
• We will only allow a Teacher to take Attendance for their own Students. This is also covered in this article: Filtering data based on current user in LightSwitch apps.

Create The Screen

Starting with the code from the previous article, we create a new Screen.

We create a New Data Screen called AttendanceForm, and we select (None) for Screen Data.

The Screen now looks like the image above.

Data Items

Click the Add Data Item… button, because we need to add two “parameters” that will be set by Screen elements and used to filter data in Query Filters, and in code.

The first one is UserName (String). This will be used to filter the data to only show a Teacher their Attendance.

The second one is AttendanceFormDate (Date). This will be used to filter Attendance to only show the selected date.

They will show up in the Designer.

Add Collections

We know that we will need to have a box for Teachers to select a Section and then take Attendance. Therefore, we need to add a Sections Collection and an Attendance Collection. Click the Add Data Item… button, and add a Sections Collection.

Add an Attendances Collection.

They will show up in the Designer.

Section Collection

Click the Edit Query link next to Sections.

Design the Query above (you can download the full source code at the end of the article).

Click Back to AttendanceForm to return to the Designer.

Click on Sections.

Set the Properties to the settings you see in the image above.

Click on the UserName Query Parameter under Sections.

In the properties, bind it to UserName Data Item.

Also, bind the AttendanceDate parameter to the AttendanceFormDate Data Item.

When you click on a parameter, you will see a line showing it’s associated Data Item.

Attendance Collection

Click the Edit Query link next to Attendances.

While this is a query for Attendance, we can drill into it’s associated tables and set the criteria for the Section Id.

Design the Query above (you can download the full source code at the end of the article).

Click Back to AttendanceForm to return to the Designer.

In the Designer, click on the SectionId Query Parameter under Attendances.

In the Properties, bind it to the Sections parameter.

You will be able to enter a “.” and navigate into the collection, and select SelectedItem.

Enter a “.” after SelectedItem, and select Id.

Bind it to Sections.SelectedItem.Id.

(This is how we are able to bypass the Enrollment collection and go from Sections to Attendance)

When you click on the parameter, you will see a line showing it’s associated Data Item.

Also, bind the AttendanceDate parameter to the AttendanceFormDate Data Item.

Set the Properties for the Attendances to the settings you see in the image above.

(Notice we turned off Auto Execute Query. We will create a Button that will run this query on demand. We do this because we would otherwise get inconsistent results when switching from a day that has Attendance records created in-memory, and a day that has actual saved Attendance records)

Design The Form In The Designer

In the Designer, change Rows Layout to Columns Layout.

Add a New Group.

Add the AttendanceFormDate.

Add the Sections.

Change the Sections to a List.

Right-click on the Command Bar, and Delete the Command Bar (you will still see it, but all the Buttons inside it will be removed).

 

Add Code

Add a new Button to the Screen Command Bar.

Name the Button, “Button”.

Right-click on the Button, and select Edit Execute Code.

Enter the following code:

        partial void Button_Execute()
        {
            // Call the method that creates blank Attendance records when needed
            UpdateAttendanceList();
            // Load the Attendance collection
            Attendances.Load();
        }

Also add the following method:

 

    private void UpdateAttendanceList()
    {
        int intSelectedSectionID = -1;
        // Ensure we have a Section
        if (Sections.SelectedItem != null)
        {
            intSelectedSectionID = Sections.SelectedItem.Id;
            // Remove any unsaved Attendance                
            foreach (Attendance attendance in this.DataWorkspace.ApplicationData.Details.GetChanges()
                .AddedEntities.OfType<Attendance>())
            {
                attendance.Details.DiscardChanges();
            }
            // Get all Enrollments for the day
            var EnrollmentsMissingAttendance = from Enrollments in Sections.SelectedItem.Enrollments
                                                where Enrollments.Attendances.
                                                FirstOrDefault(x => x.AttendanceDate == AttendanceFormDate) == null
                                                select Enrollments;
            // We put this into a normal array to avoid the 'collection was modified' error
            int[] intEnrollmentsWithoutAttendance = EnrollmentsMissingAttendance.Select(x => x.Id).ToArray();
            int intTempID = -1;
            // Loop through the Enrollments
            foreach (int item in intEnrollmentsWithoutAttendance)
            {
                // Get the Enrollment record
                Enrollment objEnrollment = DataWorkspace.ApplicationData.Enrollments_Single(item);
                if ((objEnrollment.Attendances.FirstOrDefault(x => x.AttendanceDate == AttendanceFormDate) == null))
                {
                    // Create an Attendance record for the Enrollment
                    Attendance a = objEnrollment.Attendances.AddNew();
                    //a.AttendanceCode = "P";
                    a.AttendanceDate = AttendanceFormDate;
                    // We need to give each record a unique ID so that the Silverlight contro can use this ID
                    // when it creates unique group names for the radio buttons
                    a.Id = intTempID;
                    intTempID--;
                }
            }
        }
    }

 

Also add the following method:

 

        partial void AttendanceForm_Activated()
        {
            Microsoft.LightSwitch.Security.IUser currentUser = this.Application.User;
            if (currentUser != null)
            {
                this.UserName = currentUser.Name;
            }
        }

 

In the Designer, in the properties for the Button, change it’s Display Name to Get Attendance.

 

The Custom Control

See: Creating A LightSwitch Custom Silverlight Control for directions on creating a Silverlight Custom Control project for LightSwitch.

Add a Silverlight 4 Class Library to the project, call it AttendanceForm.

Add two value converters to the project (AttendanceConverter.cs and AttendanceGroupConverter.cs). The code is below:

AttendanceConverter.cs:

 

using System;
using System.Windows.Data;
namespace AttendanceForm
{
    public class AttendanceConverter : IValueConverter
    {
        #region Methods
        public object Convert(object value, Type targetType, object parameter, 
            System.Globalization.CultureInfo culture)
        {
            if (value == null || parameter == null)
            {
                return value;
            }
            return value.ToString() == parameter.ToString();
        }
        public object ConvertBack(object value, Type targetType, object parameter, 
            System.Globalization.CultureInfo culture)
        {
            if (value == null || parameter == null)
            {
                return value;
            }
            return (String)parameter;
        }
        #endregion Methods
    }
}

AttendanceGroupConverter.cs:

 

using System;
using System.Windows.Data;
namespace AttendanceForm
{
    public class AttendanceGroupConverter : IValueConverter
    {
        #region Methods
        public object Convert(object value, Type targetType, object parameter, 
            System.Globalization.CultureInfo culture)
        {
            if (value == null || parameter == null)
            {
                return value;
            }
            return String.Format("{0}{1}", value.ToString(), parameter.ToString());
        }
        public object ConvertBack(object value, Type targetType, object parameter, 
            System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
        #endregion Methods
    }
}

 

Add a Silverlight User Control called Attendance.xaml.

Use this code for the XAML:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:AttendanceForm" x:Class="AttendanceForm.Attendance"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="480" VerticalAlignment="Top" Width="Auto">
    <UserControl.Resources>
        <ResourceDictionary>
            <local:AttendanceGroupConverter x:Key="AttendanceGroupConverter"/>
            <local:AttendanceConverter x:Key="AttendanceConverter"/>
            <DataTemplate x:Key="AttendanceTemplate">
                <Grid HorizontalAlignment="Left" VerticalAlignment="Top">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" MinWidth="135.857"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                        <ColumnDefinition Width="0.25*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock TextWrapping="Wrap" Text="{Binding Enrollment.EnrollmentDisplay}" Width="370" HorizontalAlignment="Left" 
                               VerticalAlignment="Center" TextTrimming="WordEllipsis"/>
                    <RadioButton GroupName="{Binding Id, ConverterParameter=P, Converter={StaticResource AttendanceGroupConverter}}"
						IsChecked="{Binding AttendanceCode, ConverterParameter=P, Converter={StaticResource AttendanceConverter}, Mode=TwoWay}"
                                 Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" />
                    <RadioButton GroupName="{Binding Id, ConverterParameter=U, Converter={StaticResource AttendanceGroupConverter}}"
						IsChecked="{Binding AttendanceCode, ConverterParameter=U, Converter={StaticResource AttendanceConverter}, Mode=TwoWay}"
                                 VerticalAlignment="Center" Grid.Column="4" HorizontalAlignment="Left" d:LayoutOverrides="HorizontalAlignment" />
                    <RadioButton GroupName="{Binding Id, ConverterParameter=E, Converter={StaticResource AttendanceGroupConverter}}"
						IsChecked="{Binding AttendanceCode, ConverterParameter=E, Converter={StaticResource AttendanceConverter}, Mode=TwoWay}"
                                 VerticalAlignment="Center" Grid.Column="3" HorizontalAlignment="Left" />
                    <RadioButton GroupName="{Binding Id, ConverterParameter=T, Converter={StaticResource AttendanceGroupConverter}}"
						IsChecked="{Binding AttendanceCode, ConverterParameter=T, Converter={StaticResource AttendanceConverter}, Mode=TwoWay}"
                                 VerticalAlignment="Center" Grid.Column="2" HorizontalAlignment="Left" />
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <ListBox x:Name="AttendancelistBox" ItemsSource="{Binding Screen.Attendances}" 
		ItemTemplate="{StaticResource AttendanceTemplate}" BorderThickness="2" d:LayoutOverrides="GridBox"
                 Margin="2,41,0,0" VerticalAlignment="Top" />
        <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="8,16,0,0" Width="448">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" MinWidth="371.47"/>
                <ColumnDefinition Width="0.299*"/>
                <ColumnDefinition Width="0.238*"/>
                <ColumnDefinition Width="0.269*"/>
                <ColumnDefinition Width="0.194*"/>
            </Grid.ColumnDefinitions>
            <TextBlock TextWrapping="Wrap" Text="Student / Enrollment" VerticalAlignment="Top" Margin="0,0,19,0"/>
            <TextBlock TextWrapping="Wrap" Text="P" Width="13" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <TextBlock TextWrapping="Wrap" Text="T" Width="12" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <TextBlock TextWrapping="Wrap" Text="E" Width="13" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <TextBlock TextWrapping="Wrap" Text="U" Width="13" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Top"/>
        </Grid>
    </Grid>
</UserControl>

Build the Solution.

Consuming The Silverlight Custom Control

Return back to the LightSwitch Designer, right-click on Attendance Form, and select Add Group.

Under the new Group, click Add, and select New Custom Control.

Click the Add Reference Button.

Create a Project reference to the AttendanceForm project.

Select the Attendance control, and click OK.

Set the properties for the control according to the image above.

Run the project.

You need to enter a date for Attendance, then click the Get Attendance button for the Attendance to show. After entering the Attendance, you click the Save button to save the changes.

You can download the code here:

http://silverlight.adefwebserver.com/files/lightSwitch/LightSwitchStudentInformationSystem_part3.zip

 

The LightSwitch Student Information System Series

• Part 1: LightSwitch Student Information System
• Part 2: Business Rules and Screen Permissions
• Part 3: Custom Controls (attendance page)