Visual Studio LightSwitch in de praktijk–Deel 7–Een detailscherm uitbreiden met gerelateerde informatie

Note: since there’s quite a lot of content on Visual Studio LightSwitch available in English on the web already, I decided to publish this series in Dutch.

Begin 2011 heeft Microsoft de eerste beta van VS LightSwitch met Go-Live licentie gelanceerd, een nieuw product in de Visual Studio familie, waarmee razendsnel zowel web- als desktop SilverLight "Line of Business" applicaties kunnen worden gemaakt. Hoewel de doelgroep van VS LightSwitch niet primair bestaat uit hard-core .net developers, zal het ook voor deze groep zeker waardevol kunnen zijn om de mogelijkheden en beperkingen van LightSwitch te leren kennen.

In de aanloop naar DevDays11 ben ik begonnen met een serie blogs over dit onderwerp. De eerste post was het inleidende artikel. De volgende artikelen zijn/worden:

Inleiding

Tot nu toe heb ik in deze serie alleen schermen gebruikt met gegevens van 1 entiteit daarop. Vanzelfsprekend is dat niet het enige soort scherm waarmee ik in mijn applicatie te maken heb en gelukkig heeft het Visual Studio LightSwitch team ook hierin voorzien.

In mijn applicatie wil ik op het detailscherm van een student, zowel zijn Afspraken en DoorlopendeAfspraken laten zien. Ik kies weer voor Add New Screen in het contextmenu van de Solution Explorer. Ik kies voor “Details Screen” en "de Student entiteit. Tevens vink ik nu de vakjes van de gerelateerde informatie aan:

image
Figuur 1: Een detailscherm met gerelateerde informatie maken

Zonder ook maar iets aangepast te hebben, ziet het scherm er nu al zo uit:

image
Figuur 2: Het gegeneerde scherm met gerelateerde gegevens

Zoals met alles in LightSwitch, is het weer heel doorzichtig hoe dit is gedaan, zodat ik ook later nog extra informatie zou kunnen toevoegen aan het scherm, zonder via de wizard een nieuw scherm te maken. (Merk op dat onderstaand screenshot later is gemaakt en er inmiddels meer functionaiteit aan het scherm is toegevoegd):

image
Figuur 3: Het scherm in de screen designer

Allereerst zijn de gegevenssets aan het ViewModel-deel van de designer (links) toegevoegd. Daarnaast is een Tab Layout control aan de Control Tree (midden) toegevoegd. Tenslotte is voor ieder van de gegevenssets een datagrid toegevoegd. De databinding aan het grid werkt vervolgens wee hetzelfde als we eerder hebben gezien bij een zoekscherm.

Middels de knop “Add Data Item” kan handmatig hetzelfde worden bereikt met een al bestaand scherm:

image
Figuur 4: Handmatig een gegevensset aan een scherm toevoegen

Vervolgens kan met (onder andere) de knop ernaast een element aan het scherm worden toegevoegd, dat aan de nieuwe gegevensset gekoppeld kan worden. Zo wordt eenvoudig exact hetzelfde resultaat bereikt als via de wizard. En dat moet ook, anders ben je in de aap gelogeerd als je aan een eerder gemaakte applicatie, functionaiteit wilt toevoegen.

Visual Studio LightSwitch in de praktijk–Deel 6–Logica toevoegen aan een entiteit

Note: since there’s quite a lot of content on Visual Studio LightSwitch available in English on the web already, I decided to publish this series in Dutch.

Begin 2011 heeft Microsoft de eerste beta van VS LightSwitch met Go-Live licentie gelanceerd, een nieuw product in de Visual Studio familie, waarmee razendsnel zowel web- als desktop SilverLight "Line of Business" applicaties kunnen worden gemaakt. Hoewel de doelgroep van VS LightSwitch niet primair bestaat uit hard-core .net developers, zal het ook voor deze groep zeker waardevol kunnen zijn om de mogelijkheden en beperkingen van LightSwitch te leren kennen.

In de aanloop naar DevDays11 ben ik begonnen met een serie blogs over dit onderwerp. De eerste post was het inleidende artikel. De volgende artikelen zijn/worden:

Inleiding

Eén van de belangrijke functionaliteiten van de applicatie die ik in deze serie artikelen aan het maken ben, is het eenvoudig kunnen maken van een doorlopende afspraak. De use case is op zich niet moeilijk:

Een docent moet eenvoudig kunnen registreren dat met een student is afgesproken dat deze van datum A tot datum B, op bepaalde momenten in de week voor ondersteuning langs komt. In het overzicht afspraken moeten de studenten die ten gevolge van een dergelijke afspraak worden verwacht, ook te zien zijn, en moet kunnen worden geregistreerd of zij daadwerkelijk zijn gekomen.

Hoewel er – zoals zo vaak in software ontwikkeling – natuurlijk meer wegen zijn die naar Rome leiden, heb ik er hier voor gekozen om bij het bewaren van een DoorlopendeAfspraak te zorgen dat individuele afspraken worden aangemaakt, die aan de DoorlopendeAfspraak gekoppeld zijn. Dat houdt natuurlijk ook in dat, indien de DoorlopendeAfspraak gewijzigd wordt, de bijbehorende afspraken die vòòr vandaag liggen, ook moeten worden aangepast.

Bij een DoorlopendeAfspraak wordt voor iedere dag van de week (maandag t/m vrijdag) vastgelegd of de student op die dat dient de komen (middels een boolean veld) en zo ja, om hoe laat (string). Vooral voor wat betreft het tijd-veld zijn natuurlijk andere keuzes mogelijk, maar omdat ik hier met een bestaand datamodel te maken heb, kies ik nu hiervoor.

Om te beginnen pas ik de visual tree wat aan om het scherm handiger te laten werken en vooral wat minder langerekt te zijn. Dit scherm telt immers veel, kleine velden:

image
Figuur 1: Aanpassingen aan de visual tree voor een handiger schermlayout

De UI is hiermee wat mij betreft klaar. Alles wat ik nu nog moet doen, is het toevoegen van de juiste logica om:

  1. de tijdvelden alleen-lezen te maken wanneer de bijbehorende CheckBox niet is aangevinkt
  2. de tijdvelden te valideren
  3. alle Afspraken te maken wanneer de DoorlopendeAfspraak wordt opgeslagen

Voor al deze aanpassingen moet ik dus NIET in de Screen Designer zijn, maar in de DataModel Designer. Het is hier namelijk geen logica van het scherm waar we het over hebben, maar van het model. Ik dubbelklik in de Solution Explorer dus op de entiteit DoorlopendeAfspraken om op de juiste plaats in de DataModel Designer te komen.

Wie het eerst komt, die het eerst maalt, dus ik begin bij puntje 1. Hiervoor selecteer ik het veld “MaandagTijd” en klik rechts boven in het scherm het menu Write Code open. Je ziet dat er een behoorlijke hoeveelheid methodes is, waarop ik met code kan inhaken. Bovenaan staan gelukkig de methoden die van toepassing zijn op de geselecteerde eigenschap. Ik heb hier dus de _IsReadOnly methode nodig:

image
Figuur 2: De vele methoden om op in te haken bij een entiteit

Vervolgens kom ik in een code editor tik ik de bijzonder eenvoudige regel code die ervoor zorgt dat het veld op het juist emoment niet meer wijzigbaar is:

   1:  public partial class DoorlopendeAfspraak
   2:  {
   3:      partial void MaandagTijd_IsReadOnly(ref bool result)
   4:      {
   5:          result = !Maandag;
   6:      }
   7:  }






.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Listing 1: Zorgen dat een veld “alleen lezen” wordt



Natuurlijk kopieer ik dit voor de velden van de andere dagen.



De validatie (punt 2) werkt op dezelfde manier:



   1:  partial void MaandagTijd_Validate(EntityValidationResultsBuilder results)
   2:  {
   3:      TimeSpan time;
   4:      if (!TimeSpan.TryParseExact(MaandagTijd, "H:mm", System.Globalization.CultureInfo.CurrentCulture, out time))
   5:      {
   6:          results.AddPropertyError("Tijd bij maandag is incorrect.");
   7:      }
   8:  }






.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Listing 2: Validatie voor een veld toevoegen



En tenslotte punt 3: het toevoegen van logica waarmee alle afspraken die voortvloeien uit de DoorlopendeAfspraak, worden toegevoegd in de database. Op dezelfde plaats als hiervoor in Figuur 2, klik ik op DoorlopendeAfspraken_Inserting. Het EntityObject dat ik hier aan het toevoegen ben, krijg ik als parameter mee in de methode. Deze gebruik ik dan ook bij het manipuleren van de data:



   1:  partial void DoorlopendeAfspraken_Inserting(DoorlopendeAfspraak entity)
   2:  {
   3:      // hier alle afspraken maken zolang de doorlopendaAfspraak loopt
   4:      var t = entity.BeginDatum;
   5:      if (t < DateTime.Today) t = DateTime.Today;
   6:   
   7:      while (t <= entity.EindDatum)
   8:      {
   9:          switch (t.DayOfWeek)
  10:          {
  11:              case DayOfWeek.Monday:
  12:                  if (entity.Maandag)
  13:                  {
  14:                      var a = entity.Afspraken.AddNew();
  15:                      a.DatumTijd = t.Date.Add(ParseTijd(entity.MaandagTijd));
  16:   
  17:                      a.Locatie = entity.Locatie;
  18:                      a.Student = entity.Student;
  19:                  }
  20:                  break;
  21:              default:
  22:                  break;
  23:          }
  24:          t = t.AddDays(1);
  25:      }
  26:  }






.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Listing 3: Logica om Afpsraken te maken bij het toevoegen van een doorlopende afspraak



Ik heb omwille van de duidelijkheid de meeste dagen weggelaten. Het gaat om het principe en dat lijkt me duidelijk zo. Merk op dat ik hier dus niet zelf hoef te zorgen voor het daadwerkelijk opslaan in de database. Ik pas alleen het model aan, LightSwitch zorgt dat de wijzigingen uit het model in de Database terecht komen.



Zoals je eerder al zag, is er een groot aantal methodes waarvoor je code kunt schrijven. Dit maakt een LightSwitch applicatie bijzonder flexibel en aanpasbaar. De voorbeelden die ik hier gebruikt heb, zijn slechts enkele van de mogelijkheden.

Visual Studio LightSwitch in de praktijk–Deel 5–Een invoerscherm customizen

Note: since there’s quite a lot of content on Visual Studio LightSwitch available in English on the web already, I decided to publish this series in Dutch.

Begin 2011 heeft Microsoft de eerste beta van VS LightSwitch met Go-Live licentie gelanceerd, een nieuw product in de Visual Studio familie, waarmee razendsnel zowel web- als desktop SilverLight "Line of Business" applicaties kunnen worden gemaakt. Hoewel de doelgroep van VS LightSwitch niet primair bestaat uit hard-core .net developers, zal het ook voor deze groep zeker waardevol kunnen zijn om de mogelijkheden en beperkingen van LightSwitch te leren kennen.

In de aanloop naar DevDays11 ben ik begonnen met een serie blogs over dit onderwerp. De eerste post was het inleidende artikel. De volgende artikelen zijn/worden:

Inleiding

Natuurlijk moeten in mijn applicatie ook nieuwe afspraken ingevoerd kunnen worden. Hiervoor voeg ik via de Solution Explorer een nieuw scherm toe, en kies voor het type “New Data Screen”:

image
Figuur 1: Aanmaken van een nieuwe scherm voor afspraken

LightSwitch maakt vervolgens een invoerscherm voor afspraken aan, wat al bijzonder dicht in de buurt komt van wat ik nodig heb. Ik heb voldoende aan de visual tree om te zien wat ik nog moet wijzigen. En dat is niet eens veel:

image
Figuur 2: Invoerscherm voor Afpsraak, zoals LightSwitch dat genereert

Het Id veld is al netjes een niet wijzigbaar veld geworden, een boolean veld is een CheckBox en de Foreign Key relaties hebben een Auto Complete Box gekregen. Het is slechts een kwestie van minuten om dit scherm precies te maken zoals ik het wil hebben:

  1. Id verwijderen
  2. Doorlopende Afspraak verwijderen (die entiteit heeft een andere functie en komt terug in een later artikel)
  3. Het vel “Aanwezig” moet standaard aan komen te staan (aangezien het scherm normaal gebruikt wordt voor registratie wanneer een student onaangekondigd langs komt)
  4. Student moet een popup-scherm worden (want er zijn duizenden studenten in de applicatie)
  5. De volgorde moet voor de gebruiker iets logischer worden

Puntjes 1 en 2 zijn natuurlijk bijzonder eenvoudig: de velden kunnen eenvoudigweg uit de tree worden verwijderd. Ik kan ook de Visible property hiervan uitschakelen, maar ik ga me niet bedenken: ze kunnen weg.

In het vorige artikel heb ik al laten zien hoe een standaardwaarde op een zoekscherm in code te beïnvloeden is. Voor andere schermtypes is dat niet anders. Via Write Code kan ik de methode CreateNewAfspraak_InitializeDataWorkspace aanpassen. Ik heb hier alleen regel 7 toegevoegd:

   1:  public partial class CreateNewAfspraak
   2:  {
   3:      partial void CreateNewAfspraak_InitializeDataWorkspace(List<IDataService> saveChangesTo)
   4:      {
   5:          // Write your code here.
   6:          this.AfspraakProperty = new Afspraak();
   7:          this.AfspraakProperty.IsAanwezig = true;
   8:      }
   9:   
  10:      partial void CreateNewAfspraak_Saved()
  11:      {
  12:          // Write your code here.
  13:          this.Close(false);
  14:          Application.Current.ShowDefaultScreen(this.AfspraakProperty);
  15:      }
  16:  }







.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Listing 1: Eenvoudige code om de standaardwaarde van een veld aan te passen



Punt 4, de Auto Complete box veranderen in een zoekschermpje, lijkt wellicht wat lastiger, maar wederom maakt LightSwitch er een eenvoudige taak van: ik kan het type “Auto Complete Box” veranderen in “Modal Window Picker” en ik ben eigenlijk alweer klaar. LightSwitch maakt dan een zoekscherm op basis van de Summary Property van de Student entiteit, dat kan ik wel aanpassen, maar daaraan heb ik nu geen behoefte.



De volgorde (punt 5) is ook niet zo moeilijk aan te passen, dus kan ik even kijken wat er nu van het scherm geworden is:



image


Figuur 3: Het supersnel gemaakte invoerscherm is behoorlijk goed



Gebruik je dit scherm om een nieuwe afspraak in te voeren, dan opent na het opslaan een standaard gegenereerd detailscherm voor de afspraak. Omdat dat natuurlijk weer net niet precies is wat ik nodig heb, voeg ik ook gelijk een detailscherm voor Afsrpaak toe. Bij het aanmaken geef ik direct aan dat dit het standaardscherm voor Afspraak gaat worden:



image


Firguur 4: Nieuw detailscherm toevoegen als standaardscherm voor een entiteit



Het detailscherm komt er verder nagenoeg hetzelfde uit te zien als het invoerscherm. Het enige dat ik hier graag wil toevoegen, is een indicatie dat de afspraak hoort bij een doorlopende afspraak. Hiervoor klik ik bovenin de Screen Designer op “Add Data Item” en specificeer mijn nieuwe data item. Ik voeg nu dus een element toe aan de ViewModel, het linker deel van de Screen Designer:



image


Figuur 5: Data element toevoegen aan een scherm



Vervolgens kan ik in code een regel toevoegen aan de methode AfspraakDetail_Created, om mijn nieuwe property de juiste waarde te geven:



   1:  partial void AfspraakDetail_Created()
   2:  {
   3:      // Write your code here.
   4:      IsDoorlopendeAfspraak = Afspraak.DoorlopendeAfspraak != null;
   5:  }


Listing 2: Toegevoegde property een waarde geven in code





.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }



Omdat ik het element wel als een checkbox op het scherm wil hebben, maar toch niet wil dat het gewijzigd wordt,



pas ik nog even een simpel trucje toe in de IsDoorlopendeAfspraak_Changed methode:



   1:  partial void IsDoorlopendeAfspraak_Changed()
   2:  {
   3:      // We're just setting it back to it's original value
   4:      if (IsDoorlopendeAfspraak != (Afspraak.DoorlopendeAfspraak != null))
   5:      {
   6:          IsDoorlopendeAfspraak = Afspraak.DoorlopendeAfspraak != null;
   7:      }
   8:  }







.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Listing 3: IsDoorlopendeAfspraak terugzetten als het veld gewijzigd wordt. Poor man’s readonly…

Visual Studio LightSwitch in de praktijk–Deel 4–Parameters toevoegen aan een scherm

Note: since there’s quite a lot of content on Visual Studio LightSwitch available in English on the web already, I decided to publish this series in Dutch.

Begin 2011 heeft Microsoft de eerste beta van VS LightSwitch met Go-Live licentie gelanceerd, een nieuw product in de Visual Studio familie, waarmee razendsnel zowel web- als desktop SilverLight "Line of Business" applicaties kunnen worden gemaakt. Hoewel de doelgroep van VS LightSwitch niet primair bestaat uit hard-core .net developers, zal het ook voor deze groep zeker waardevol kunnen zijn om de mogelijkheden en beperkingen van LightSwitch te leren kennen.

In de aanloop naar DevDays11 begin ik met een serie blogs over dit onderwerp. De eerste post was het inleidende artikel. De volgende artikelen zijn/worden:

Inleiding

In dit deel van de serie, ga ik het afspraken scherm uit het vorige deel nog en stap verder uitbouwen. De gebruiker is namelijk neit geïnteresseerd in een scherm waar alle afspraken op staan, maar een scherm waar alle afspraken van een dag op staan. Bij het opnen van dat scherm, moeten dat natuurlijk de afspraken van “vandaag” zijn.

Om dit te kunnen realiseren, moeten we de query die aan het scherm ten grondslag ligt, kunen parametriseren. Het goede nieuws is dan gelukkig weer, dat LightSwitch hierin voorziet. Er zijn zelfs verschillende mogelijkheden om dit te doen. Eén mogelijkheid is, om in de Screen Designer van SearchAfspraken voor “Edit Query” (in het linker deel van het scherm (het ViewModel-deel)) te kiezen:

image
Figuur 1: Edit Query Link

Een parameter “DateParameter” toe te voegen:

image 
Figuur 2: Parameter toevoegen aan de query van een scherm

En de data op deze nieuwe parameter te filteren:

image
Figuur 3: Filtermogelijkheden staan niet toe een DateTime veld te filteren op Date

Lastigheidje is hier, dat ik de entiteit Afspraak alleen een veld DatumTijd van het type DateTime heb gegeven. De standaard filtermogelijkheden, geven me wel de mogelijkheid om te filteren op een parameter, maar staan niet toe op de parameter eerst een methode (Zoals DateParameter.Date() ) aan te roepen.

Back to the drawing board dus…

Gelukkig biedt LightSwitch diverse mogelijkheden om dit probleem toch op te lossen.

Ik zou bijvoorbeeld een custom veld “Datum” van het type Date kunnen toevoegen aan de entiteit Afspraak en dit veld de waarde geven van het datum-deel van het “DatumTijd” veld. Vervolgens kan ik een filter toevoegen dat het nieuwe veld “Datum” vergelijkt met mijn DateParameter. Gevolg is dan wel, dat bij het openen van het scherm, alle Afspraken moeten worden opgehaald om het Datum-veld te berekenen en te zien of het voldoet aan mijn filter.

Een andere – en in dit geval betere – oplossing is het om de DateParameter direct in de query te laten controleren. Het scherm Overzicht Afspraken is nu gebaseerd op een query die alle Afspraken retourneert. In plaats daarvan heb ik nu een geparametriseerde query nodig, die de afspraken van 1 dag retourneert. Hiervoor klik ik in de Solution Explorer in het contextmenu van de entiteit Afspraken op “Add Query”:

image
Figuur 4: Nieuwe query toevoegen voor een entiteit

De nieuwe query geef ik een handige naam (“AfsprakenByDate”) en voeg de DateParameter toe, zoals ik dat in het scherm ook al gedaan had. De volgende stap is dat ik zorg dat in de query de DatePArameter daadwerkelijk gecontroleerd wordt.

image
Figuur 5: Een eigen query, met eigen parameters

In het dropdown-lijstje “Write Code” kan ik kiezen voor de methode “<querynaam>_PreProcessQuery”. Als ik dat doe krijg ik de mogelijkheid om de query van het scherm aan te passen, voordat hij wordt uitgevoerd. De DateParameter die ik aan de query had toegevoegd, krijg ik hier als parameter in de methode tot mijn beschikking. In mijn geval voek ik een paar regels code toe om te zorgen dat de controle op het DatumTijd veld correct wordt uitgevoerd:

   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Linq;
   4:  using System.Text;
   5:  using Microsoft.LightSwitch;
   6:  using Microsoft.LightSwitch.Security.Server;
   7:  namespace LightSwitchApplication
   8:  {
   9:      public partial class SterDataService
  10:      {
  11:          partial void AfsprakenByDate_PreprocessQuery(DateTime? DateParameter, ref IQueryable<Afspraak> query)
  12:          {
  13:              var minDate = DateParameter.GetValueOrDefault();
  14:              var maxDate = DateParameter.GetValueOrDefault().AddDays(1).AddSeconds(-1);
  15:              query = from a in query
  16:                      where a.DatumTijd >= minDate && a.DatumTijd <= maxDate
  17:                      select a;
  18:          }
  19:      }
  20:  }

Listing 1:  Code om de query te laten werken met mijn parameter



Nu ik de query gemaakt heb om de Afspraken per dag op te halen, moet ik het overzicht afspraken nog aanpassen om deze query te gaan gebruiken. In de Properties van de Screen Designer kan ik hiervoor de Query Source aanpassen (bij de rode pijl). In de groene elips zie je dat LightSwitch zelf de DateParameter aan het scherm heeft toegevoegd.



image


Figuur 6: Het scherm met de aangepaste query



Overigens zijn alle elementen in het ViewModel deel van de Screen Designer aangepast aan het resultaat van mijn query, maar omdat hieraan verder niets gewijzigd is, zie je dat hier niet terug.



Volgende stap is het toevoegen van een datumveld op het scherm, waar de gebruiker de datum kan selecteren. We voegen dus in de View een control toe, dat via databinding gekoppeld is aan de property DateParameter van de ViewModel. Of liever gezegd, dat laten we LightSwitch doen:



image


Figuur 7: Schermelement toevoegen voor de invoer van een parameter



Ik verplaats het toegevoegde veld vervolgens naar boven, omdat ik het graag bovenin het scherm wil hebben en pas de property “Display Name” aan. Wat nu nog rest, is dit veld bij het openenen van het scherm de datum van vandaag te geven. Hiervoor schrijf ik een paar regels code in de methode InitializeDataWorkspace van het scherm:



image
Figuur 8: Ook bij een scherm kun je eigen code invoegen



Geheel volgens MVVM geef ik dus de property DateParameter van de ViewModel een waarde:



   1:  public partial class SearchAfspraken
   2:  {
   3:      partial void SearchAfspraken_InitializeDataWorkspace(List<IDataService> saveChangesTo)
   4:      {
   5:          // Write your code here.
   6:          AfspraakDateParameter = DateTime.Today;
   7:      }
   8:  }


Listing 2: Parameterveld van een standaardwaarde voorzien



Het resultaat is nu dat er een parameterveld op het scherm staat, dat standaard de datum van dandaag als waarde heeft. De getoonde data is altijd gefilterd op de waarde van die parameter:



image
Figuur 9: Het aangepaste scherm met datumparameterveld.