2012

Jul

30

Av

I FileMaker finns en inbyggd kalender som kan visas för att välja datum i ett datumfält, du slår på den i Granskaren för fältet. Ibland vill du visa en kalender hela tiden och det går också att göra. Vi har sedan flera år en kalender i våra standardtillämpningar Projektet och MV Office för att välja datum när man ska skriva tidrapport.

KalenderEgen

Kalendern i våra standardtillämpningar visar också helgdagar och innehåller många olika komponenter, beräkningsfält och formler. Med andra ord inte helt lätt att åstadkomma.

Från version 12 finns det ett enklare sätt att göra en kalender, dock fungerar den endast i databaser som är delade från en FileMaker Server (eller utdelade från FileMaker Pro) eller finns lokalt i FileMaker Go. Det nya sättet använder en web viewer, ett JavaScript-bibliotek och det nya fmp-protokollet.

I samband med att version 12 kom visade jag hur man kan använda fmp för att navigera med hjälp av ett träd och fmp-protokollet. De som besökte våra FileMaker-seminarier i maj i år såg när Robert och jag visade hur man kan gå mellan poster i en FileMaker-databas genom att klicka på markörer i Google Maps (jag ska försöka göra en video på det inom kort också).

Det svåra är egentligen att välja en lämplig JavaScript-kalender. Jag föredrar Javascript-biblioteket jQuery, som jag tidigare använt till diagram med Google Charts, och det finns en bra kalender i tillägget jQuery UI. Den visar t.o.m. veckonummer enligt ISO-standard, alltså svensk standard, och det är något jag alltid behöver!

KalenderjQuery

I bilden ovan har jag lagt in kalendern i en FileMaker-layout och klickat på den 14 juli. Innan dess behövs några förberedelser.

För det första måste kalendern konfigureras. Jag utgår från ett exempel som finns på jQuery UI och ändrar datumformatet till svenskt format samt ser till att det görs ett webbanrop varje gång användaren klickar på ett datum.

Webbsidan för att visa kalendern ser ut så här (både CSS och Javascript-bibliotek hämtas från webbsidor, har du inte tillgång till internet när du använder FileMaker-databasen kan du kopiera och klistra in filernas innehåll i koden nedan istället för respektive länk):

<!DOCTYPE html><html>
<head>
   <meta charset="UTF-8" />
   <link rel="stylesheet" 
   href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css" type="text/css" 
   media="all" />
   <link rel="stylesheet" 
   href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" 
   media="all" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" 
   type="text/javascript"></script>
   <script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" 
   type="text/javascript"></script>
   
<script type='text/javascript'>
  $(document).ready(function(){
    $('#kalender').datepicker({ 
      changeMonth: true, 
      changeYear:true, 
      dateFormat: 'yy-mm-dd', 
      firstDay: 1, 
      showButtonPanel: true, 
      showWeek: true,
      onSelect: function(dateText, inst) { 
        window.location = 
           'fmp://FILEMAKERSERVER/Databasnamn?script=Datumval&param=' + dateText;
      }
  });
});
</script>

</head>
<body>
<div id='kalender'></div>
</body>
</html>

Webbanropet, i delen onSelect, använder det nya fmp-protokollet i FileMaker 12. Webbanropet inleds med protokollet fmp://, adressen till FileMaker Server (eller FileMaker Pro) där databasen finns utdelad, databasens namn samt ett manus i databasen (här kallat Datumval) som tilldelar ett datumfält med valt datum. Valt datum skickas till manuset som manusparameter.

Manuset Datumval består av ett enda manussteg:

Tilldela fält [Datum; Get (Manusparameter) ]

Jag kopierar in html-koden till ett textfält (kallat html) och skapar en web viewer med webbadress enligt formeln:

"data:text/html," & Kalender::html

Sen är det bara att använda kalendern!

Det går förstås att ändra utseende på kalendern m.m. genom att ändra i CSS och Javascript.

Det här är ytterligare ett sätt att använda fmp-protokollet, ett protokoll som kommer att användas mer och mer för att kommunicera mellan web viewer och FileMaker-databas. Tänk dock på att det (än så länge?) bara fungerar om databasen är utdelad via FileMaker Server (eller körs lokalt på FileMaker Go), du kan alltså inte använda denna teknik om du använder FileMaker Pro med en lokal databas.

4 kommentarer till ”Kalender i web viewer”

  1. David Wikström

    Snyggt!

    Enda förbättringen jag skulle velat se (för FMGo) är en möjlighet att lagra javascript osv lokalt, så det fungerar offline också. Fast det kanske man får göra på egen hand Wink

    Reply
  2. Rolf

    Tack!

    Du kan ersätta länkar till CSS och Javascript genom att kopiera innehållet i respektive fil (CSS och Javascript) till FileMaker-fältet.

    T.ex. kan du ersätta “” med ““.

    FileMaker-fältet kommer att innehålla ganska mycket mer text, men det fungerar alldeles utmärkt (precis som jag skrev “har du inte tillgång till internet när du använder FileMaker-databasen kan du kopiera och klistra in filernas innehåll i koden nedan istället för respektive länk”).

    Reply
  3. David Wikström

    Hej Rolf,

    Jag oroade mig ett tag att begränsningen på 30.000 tecken i en FileMaker-beräkning skulle vara ett problem, men det är det ju inte så länge man lägger de långa texterna ligger i text-fältet och inte inne i själva web-viewern… Jag skulle nog knåpa ihop en grej där jag lagrar URL-arna till de externa filerna och sedan infogar dem i textfältet via manus. Blir lite struligt att redigera ändra i resten av koden annars…

    /David

    Reply
  4. Rolf

    Hej David!

    Man kan t.ex. låta varje CSS- och JavaScript-fil få vars ett fält som läggs ihop i beräkningsfältet för web viewern (manus lär du inte behöva). Då blir det enkelt att underhålla och göra eventuella ändringar även om man inte alltid har internet-uppkoppling och kan använda externa filreferenser..

    Om man vill kan man använda manussteget Infoga från URL för att automatiskt uppdatera innehållet i respektive fil/fält från internet (när man har tillgång till internet), annars räcker det antagligen med att kopiera och klistra in.

    /Rolf

    Reply

Skriv en kommentar

  • (will not be published)
  • 4 × = sixteen

Läs också: