How To Create And Use A Table of Documents


The following step-by-step tutorial demonstrates how to work with a documents table. The tutorial provides detailed instructions on adding and displaying documents that are stored in the database.

1) Create a new LightSwitch project and enable the Document Toolkit for LightSwitch extension (see also How To Install Document Toolkit for LightSwitch).

2) Add a new table named Document and add required columns Name (string) and File (Binary). Add a Computed Property FileSize of type String.

DocumentTable.png

3) The FileSize property contains the size of the file in kilobytes. Edit the FileSize compute method and enter the following code:

C#
partial void FileSize_Compute(ref string result)
{
  // format to KB
  var value = (double)this.File.Length / 1024;
  if (value < 1 && value != 0) {
    value = 1;
  }
  result = string.Format("{0:#,0} KB", value);
}

VB.NET
Private Sub FileSize_Compute(ByRef result As String)
  ' format to KB
  Dim kb = CType(Me.File.Length, Double) / 1024

  If kb < 1 And kb <> 0 Then
    kb = 1
  End If
  result = String.Format("{0:#,0} KB", kb)
End Sub

4) Add a new Screen, select the Search Data Screen template and set the Screen Data to Documents.

5) Remove the binary column File from the Data Grid.

DeleteFile.png

6) Add a new AddNew button to the Command Bar.

AddNewButton.png

7) Right-click the created button and select Override Code.

OverrideCode.png

8) When the Add button is clicked we want to display a file dialog where the user can select a file from disk. Add the following code:

C#
using Microsoft.LightSwitch.Threading;
using System.Windows.Controls;
using DocumentToolkit.Client;

partial void gridAddNew_Execute()
{
  var file = SelectFile();
  if (file != null) {
    using (var reader = DocumentReader.Create(file)) {
      var document = this.Documents.AddNew();
      document.Name = file.Name;
      document.File = reader.ToBinary();
    }
  }
}

private FileInfo SelectFile()
{
  FileInfo result = null;
  Dispatchers.Main.Invoke(() => {
    var dlg = new OpenFileDialog();
    if (dlg.ShowDialog() == true) {
      result = dlg.File;
    }
  });
  return result;
}

VB.NET
Imports Microsoft.LightSwitch.Threading
Imports System.Windows.Controls
Imports DocumentToolkit.Client

Private Sub gridAddNew_Execute()
  Dim file = SelectFile()
  If Not file Is Nothing Then
    Dim reader = DocumentReader.Create(file)
    Using reader
      Dim document = Me.Documents.AddNew
      document.Name = file.Name
      document.File = reader.ToBinary
    End Using
  End If
End Sub

Private Function SelectFile()
  Dim result As FileInfo = Nothing
  Dispatchers.Main.Invoke(
  Sub()
    Dim dlg = New OpenFileDialog()
    If dlg.ShowDialog = True Then
      result = dlg.File
    End If
  End Sub)

  SelectFile = result
End Function

Note: Dispatchers.Main.Invoke ensures the code is run on the UI (= Main) thread. By default screen code runs in a background thread. This code only works for desktop applications, you'll get a SecurityException 'Dialogs must be user-initiated.' when deployed as a web application. There is currently no good solution to initiate dialogs in web applications. For a workaround see this blog post by James.


9) Hit F5 to compile and run the application. Go to the Search Documents screen and add a new document. Select a document from disk and click save to store the document in the database. Selecting the document in the grid displays the default details screen. Since LightSwitch doesn't know how to display the Binary data property, it doesn't display anything.

DefaultDetailsScreen.png

10) Stop the application and add a new screen. Select the Details Screen template and set the Screen Data to Document.

11) Change the Rows Layout of the Document Detail to a Table Layout and disable vertical scrolling by unchecking the Vertical Scroll Enabled property in the property grid.

TableLayout.png

12) Select the File cell and change the Control Type to Document Viewer Control.

DocumentViewerControl.png

13) Hit F5 to compile and run the application again. Add a new or select an existing document in the Search Documents screen and the selected document is rendered.

Result.png

Next step: learn to support Office documents even when Office is not installed in How To Display Office Documents When Office is Unavailable

Last edited Jul 27, 2011 at 8:39 AM by kozw, version 14

Comments

MardenLR Dec 30, 2011 at 3:24 PM 
Please create web applications examples for the lightswitch. I am very interested in purchasing and is only missing documenttoolkit exemplifying the web for this to happen.

kozw Aug 26, 2011 at 11:22 AM 
@TakalaneSesame: what happens if you do activate office? and care to share the PDF document so I can take a look at it?

TakalaneSesame Aug 20, 2011 at 7:42 AM 
My computer freezes and processor goes to 100% when I click on a document name in the list to open the detail screen (the detail screen never opens). A process called sllauncher seems to be the culprit. Any ideas? Oh just, to mention, my office installation is not activated and displays that activation box when I open it. But even if I use a pdf document I get the same problem.

kozw Jul 27, 2011 at 8:39 AM 
@themyth07: I've updated the tutorial referencing a workaround for web applications. see above

themyth07 Jul 22, 2011 at 7:16 PM 
Can you provide the instruction for Web application type ? thanks

kozw Jul 9, 2011 at 2:35 PM 
Yes you can download the file. I've created a new tutorial for that -> [How To Download and Update Documents]

mribeiral Jul 8, 2011 at 9:45 PM 
Can I download the file?

kozw Jul 4, 2011 at 9:08 PM 
VB.NET code has been added

jhhenao Jun 24, 2011 at 9:58 PM 
It looks very interesting and could be very useful, but I can't make it work. May help with visual basic code, maybe this error there.

Thanks

kozw Jun 16, 2011 at 10:33 PM 
Done. thanks!

DubbaU Jun 6, 2011 at 5:28 PM 
Need to add the following references for the Add button Code.

System.Windows.Controls
Microsoft.LightSwitch.Threading

=)