Mammals / Ola Anderson

Detta är bloggen för min enskilda firma Mammals. Den innehåller sådant jag är intresserad av eller vill berätta om.
Teckensnitts storlek: +

Visa relaterade poster i horisontell led, dvs horisontella portaler i FileMaker, det går!

Laama

Det finns mycket coolt och användbart man kan göra nuförtiden, då vi utvecklare har fått tillgång till funktioner som webbvisaren, triggers, relationer, portaler och den fiffiga funktionen GetNthRecord. Med den senare går det nämligen att göra sk horisontella portaler, där relaterade poster visas som en horistontell rad. Istället för det vanliga i portaler där relaterade poster visas i vertikal led, som en kolumn.

Denna artikel innehåller hur man bygger en databas som visar relaterade poster på en horisontell rad, istället för en vertikal kolumn som i "vanliga" portaler. I exempelt visas hur man kan visa bilder/foton på det viset.

Klicka på "Fortsätt läs mer..."-nedan till höger för att läsa resten.

 

 

GetNthRecord?

Detta är en funktion som är väldans fiffig. Säg att du har en relation mellan två tabeller. Ståendes i den ena tabellen så ser du exempelvis 10 poster i den andra tabellen. Om du visade dessa poster i en portal i FileMaker så skulle du alltså få tio rader i den. (Tex orderrader på en order). GetNthRecord är en funktion där du kan skapa en beräkning som returnerar vilken som helst av de tio posterna, du kan tex ange att du vill ha just den femte posten. En sådan beräkning kan se ut så här:

GetNthRecord(Relationens namn::Fältets namn; 5)

Detta är väldigt användbart och en av de funktioner som gör det möjligt att visa flera poster i horisontell led. Den kan förstås användas till mycket annat. 

Tre poster i rad

Cool video - En iPhoto-liknande FileMaker databas

Jag blev inspirerad till detta inlägg på min site av en cool video jag såg häromdagen hos Troi, de utvecklar en mycket användbar plugin som heter Troi File Plugin. Denna plugin är inte nödvändig  för det som beskrivs i denna artikel, men den ger dig ännu flera möjligheter att göra något coolt. Videon finns här och visar en FileMaker-databas man kan använda för att organisera bilder. Gränssnittet är väldigt likt iPhoto och man kan tom dra och släppa mappar med bilder eller bilder på databasen, så importeras de automatiskt. Den coola grejen är förstås att han klickar på knappar nere i hörnet för att öka och minska storleken på de hittade bilderna, från 1, 3, 5, 10, 15 bilder i rad. Det är just den funktionen jag blev nyfiken på och ville återskapa. Filmen finns här.

Troi File Plugin As Media Manager

{youtube}8K7is4g6fjA{/youtube}

Det hela visar sig att det är inte speciellt svårt att bygga. För att testa detta så knackade jag ihop en liten databas som innehåller bilder. 

Först - en FileMaker tabell över bilder

Fyra fält ur FileMaker

Att importera bilder är lätt att göra i FileMaker, man skapar en ny tabell "Bilder" fyra fält (två container, två textfält). Att lägga till ett fält ID_Bild, numeriskt, löpnummer, är också en bra ide. 

Välj sedan Arkiv > Importera poster > Mapp.... Peka på en mapp med bilder. I nästa nästa ruta får du sedan ange att bilden skall importeras till containerfält 1, miniatyren till containerfält 2 och filnamn och sökväg till de två textfälten. 

En FileMaker tabell som visar upp bilderna.

En separat tabell Display skapade jag sedan för att visa upp bilderna. Den innehåller ett ID_Display, löpnummer, numeriskt från 1. Den innehåller också DisplayStartNummer och DisplaySlutNummer, det är två numeriska fält som anger på en viss post vilken GetNthRecord den skall hämta. 

I denna tabell skapade jag sedan 100 poster (håll ner kommando+N på Mac, CTRL+N på PC). 

Rel_X - En statisk relation

Sedan skapade jag ett beräkningsfält Rel_X med beräkningen "X" (resultat text) i båda tabellerna och skapade en relation från Display till Bilder. Den relationen heter Display_Bilder_Rel_X. Med den ser jag alltså ALLA bilder i Bilder, när jag står i tabellen Display.

Denna relation använder jag i det här exemplet bara för att ha någon relation mellan de två tabellerna, den med bilder och den som skall visa upp bilderna. Självklart går det att göra andra typer av relationer för att filtrera poster på något vettigare vis, tex på datum, bildgallerinummer, motivtyp osv osv. Men i det här exemplet är inte hur relationen är gjord det intressanta, det intressanta kommer strax.

Relation X - ur relationsdiagrammet

Det fiffiga - beräkningsfält som visar upp posterna i horisontell led

Nu kommer det fiffiga, vi skapar nu i varje post i Display ett antal beräkningsfält, tex 15 stycken, om man vill ha max 15 bilder i rad, som innehåller just funktionen GetNthRecord. Ett par saker att ta hänsyn till är:

  • Postens ID är även radnummer. Vilket betyder att om vi är på posten med id=5 och vi skall ha 5 bilder i varje rad, så betyder det att det sista beräkningsfältet på denna rad är GetNthRecord nummer 25. Så i beräknigsfältet måste vi räkna ut det, radnummer* 5 + 5 för sista bilden på raden.

  • Viktigt är också att vi måste kolla om det faktiskt finns en 25:e repetition innan vi ber FileMaker om den. Om FileMaker försöker accessa den 25 relaterade posten, och den inte finns, så kommer FileMaker att returnera ett ? istället, vilket inte är speciellt snyggt. Därför använder jag i samma beräkning Count(Relationens namn::Fältets namn)≥25 för att kolla att det finns just 25 relaterade poster, innan jag använder GetNthRecord-funktionen.

  • En grej som jag lagt in som gör detta ännu lite fiffigare är att jag har på varje post lagt in startnummer och slutnummer, vilket betyder att jag på varje rad kan ange hur många bilder jag vill ha i bredd. Även om max är tex så kanske jag bara vill ha en eller 3? Just nu har jag tex 1, 3, 5, 10 och 15 i bredd. Men alla poster har 15 beräkningsfält, men om det är inställt på 3 poster i bredd betyder det att fält nummer 4-15 skall direkt lista ut att de skall vara tomma i denna post. Så därför kollar jag även att fältet ifråga faktiskt skall innehålla något. 

  • Avslutningsvis så har jag byggt ett manus och lite annat lullull som dels fyller i ordningssiffran på varje post (när jag vill ha tre poster i bredd, så fyller manuset i startnummer 1 och slutnummer 3 på första posten, 4-6 på andra posten, 7-9 på tredje posten osv, och slutar när det inte finns flera nummer att fylla, i, för det finns inte flera poster. (Samma manus hoppar till rätt layout, den som visar X antal poster i bredd.)

Så här ser min beräkning ut för att visa upp bild nr 1

If( Count(Display_Photos_Rel_X::ID_Photo)  ≥  (DisplayStartNo + 0 ) and 

(DisplayStartNo + 0)   ≤  DisplayEndNo and 

not IsEmpty(DisplayStartNo) ;

GetNthRecord ( Display_Photos_Rel_X::Container ; DisplayStartNo + 0 ); "")

Lite förklaring: Detta är en if-sats som består av tre saker If(villkoret; "villkoret är sant"; "villkoret är falskt"). Som synes så är villkoret i denna if-sats de första tre raderna, sedan kommer om villkoret är sant, dvs GetNthRecord. Om villkoret är falskt, så returneras "", vilket syns i slutet på sista raden. 

Om vi kollar på första raden igen så står det ungefär: Om antalet foton som syns via denna relation är större eller lika med startnumret + 0 (detta är första fältet, så noll är det här, i nästa fält är det ett, i nästa fält två, i nästa fält tre osv)  i denna post.... 

och....

Startnumret för foton + noll på denna post är mindre eller lika med slutnumret på denna post. Det är till för att om denna post bara skall innehålla tre bilder, så får det här fältet inte räkna ut något, om det är det fjärde fältet. För att inte FileMaker skall returnera ett frågetecken.

och....

DisplayStartNo är inte tomt, för då pajar ju hela grejen, det måste innehålla något.

Så här ser min beräkning ut för att visa upp bild nr 2

If(Count(Display_Photos_Rel_X::ID_Photo)  ≥  (DisplayStartNo + 1) and (DisplayStartNo + 1)  ≤ DisplayEndNo and not IsEmpty(DisplayStartNo) ;GetNthRecord ( Display_Photos_Rel_X::Container ; (DisplayStartNo + 1) ); "")

Jag har fetmarkerat ettorna för att det skall synas var de är. I nästa fält för bild nr tre, så har du istället för en etta, en tvåa. 

Sedan är det bara resten kvar

I tabellen Display har jag sedan skapat 200 poster, (bara att hålla ner kommando + N och vänta).

Sedan har jag ett fiffigt manus som varje gång man klickar på att ändra storlek på antalet bilder (öka eller minska antalet bilder i bredd som visas) gör följande tre saker.

1. För att öka: Ändra siffran i en serie, är den 1, ändra till 3, är den 3, ändra till 5, är den 5, ändra till 10 osv, upp till 15. Detta ökar siffran för antalet visade bilder, vilket betyder att bildena blir mindre. Så på knappen står det "Mindre bilder" med manusparametern "Öka". Tvärtom förstås för den andra knappen "Större bilder" med manusparametern "Minska", som går från 15, 10, 5, 3, 1. Ovan syns manuset och nedan syns beräkningen för just steget "Tilldela fält" i manuset. Notera att tredje steget är att utföra manuset "Fyll i", se steg 2 nedan.

2. Loopa igenom poster och peta in på varje post i ordning, startbild och slutbild och antalet bilder som skall visas. Så att första posten innehåller 1 som startbild, 3 som slutbild och 3 som antalet bilder som skall visas. Nästa post innehåller 4 som startbild, 6 som slutbild och också 3 bilder som skall visas. Tredje posten, 7 och 9, fjärde posten 10 och 12 osv osv. När antalet poster som syns via relationen är slut, dvs slutbilden är mer än 123 via relationen hittade bilder, som finns i min testdatabas, så slutar manuset att fylla i siffror. Så här ser det manuset ut.

3. Byt sedan layout till den layout som visar just 1, 3, 5, 10, eller 15 bilder i bredd. 

De manusstegen syns i första manuset.

Så här kan det se ut när det är klart!

Klicka på bilden för att se den större.
 
{rokbox album=|Photos| title=|Tabellen foton, översikt| thumb=|/images/stories/filemaker/tips/vertikala_portaler_foton/foton_500x302.jpg| }/images/stories/filemaker/tips/vertikala_portaler_foton/foton.jpg{/rokbox} 

{rokbox album=|Photos| title=|Ett foto i taget.| thumb=|/images/stories/filemaker/tips/vertikala_portaler_foton/foto_500x302.jpg| }/images/stories/filemaker/tips/vertikala_portaler_foton/foto.jpg{/rokbox} 

{rokbox album=|Photos| title=|Tre foton i rad.| thumb=|/images/stories/filemaker/tips/vertikala_portaler_foton/foton_3_i_rad_500x302.jpg| }/images/stories/filemaker/tips/vertikala_portaler_foton/foton_3_i_rad.jpg{/rokbox} 

{rokbox album=|Photos| title=|Fem foton i rad.| thumb=|/images/stories/filemaker/tips/vertikala_portaler_foton/foton_5_i_rad_500x302.jpg| }/images/stories/filemaker/tips/vertikala_portaler_foton/foton_5_i_rad.jpg{/rokbox} 

{rokbox album=|Photos| title=|Tio foton i rad.| thumb=|/images/stories/filemaker/tips/vertikala_portaler_foton/foton_10_i_rad_500x302.jpg| }/images/stories/filemaker/tips/vertikala_portaler_foton/foton_10_i_rad.jpg{/rokbox} 

{rokbox album=|Photos| title=|Femton foton i rad.| thumb=|/images/stories/filemaker/tips/vertikala_portaler_foton/foton_15_i_rad_500x302.jpg| }/images/stories/filemaker/tips/vertikala_portaler_foton/foton_15_i_rad.jpg{/rokbox} 

Foton av:

Efter som det är så många bilder, så har jag sparat ihop en lista med länkar till fotografiernas upphovsmän/kvinnor nedan. De är alla foton från Flickr Creative Commons med användningsvillkoret Attribute. Jag får använda dem om jag anger vem som tagit dem. Du hittar alla fotons namn, upphovsman/kvinna och en länk till fotot på Flickr.

Några special:

Foto av Laman längst upp: Just a little off the top.... by: law_keven @ Flickr Creative Commons Project

De tre fotona i rad, heter Lucid Dream av akshay moon och Mermaid doing a photo shoot av Alaskan Dude (det finns tre stycken i serien).

Alla foton som syns i bilderna inifrån databasen:

Money by: ace10414 @ Flickr Creative Commons Project
LUCID DREAM by: akshay moon @ Flickr Creative Commons Project
Mermaid doing a photo shoot on South Beach, Miami by: Alaskan Dude @ Flickr Creative Commons Project
Mermaid doing a photo shoot on South Beach, Miami by: Alaskan Dude @ Flickr Creative Commons Project
Mermaid doing a photo shoot on South Beach, Miami by: Alaskan Dude @ Flickr Creative Commons Project
Simple, like Water... by: albertopveiga @ Flickr Creative Commons Project
Thin by: aleske @ Flickr Creative Commons Project
miami sunrise by: alexdecarvalho @ Flickr Creative Commons Project
Xserve Cluster by: an iconoclast @ Flickr Creative Commons Project
Windmills at Middelgrunden by: andjohan @ Flickr Creative Commons Project
| under construction | by: arquera @ Flickr Creative Commons Project
Exit by: audi_insperation @ Flickr Creative Commons Project
my new alarm clock by: b1gw1ght @ Flickr Creative Commons Project
bike day may 2009 by: bagaball @ Flickr Creative Commons Project
jellyfish by: baxterclaus @ Flickr Creative Commons Project
Beer selection @ Lowlander by: Bernt Rostad @ Flickr Creative Commons Project
chain by: BotheredByBees @ Flickr Creative Commons Project
Mellow Johnny's Bike Shop by: BruceTurner @ Flickr Creative Commons Project
funny money by: Carlos R @ Flickr Creative Commons Project
NYC gig by: ChrisDag @ Flickr Creative Commons Project
Amazing Office by: chrismeller @ Flickr Creative Commons Project
"Breede" jellyfish by: coda @ Flickr Creative Commons Project
Project 365 #76: 170309 A Little Lift by: comedy nose @ Flickr Creative Commons Project
Search-Engine-Marketing by: Danard Vincente @ Flickr Creative Commons Project
simple object by: Darwin Bell @ Flickr Creative Commons Project
CLICK! by: Davichi @ Flickr Creative Commons Project
Why does nobody know how to please a woman? by: diegopetrucci @ Flickr Creative Commons Project
Foto raderat / Photo deleted by: Digital Sophia @ Flickr Creative Commons Project
$26 by: dno1967 @ Flickr Creative Commons Project
$28 by: dno1967 @ Flickr Creative Commons Project
Bangui Windmills by: _dougie @ Flickr Creative Commons Project
Beautiful Women by: DownTown Pictures @ Flickr Creative Commons Project
garanimals by: duluoz cats @ Flickr Creative Commons Project
garanimals by: duluoz cats @ Flickr Creative Commons Project
garanimals by: duluoz cats @ Flickr Creative Commons Project
Unsubscribe by: eddiedangerous @ Flickr Creative Commons Project
Chain by: Ella’s Dad @ Flickr Creative Commons Project
smothered in love by: eye of einstein @ Flickr Creative Commons Project
Série com a Coruja-buraqueira (Speotyto cunicularia) - Series with the Burrowing Owl 18-01-2008 273 by: Flávio Cruvinel Brandão @ Flickr Creative Commons Project
Série com a Coruja-buraqueira (Speotyto cunicularia) - Series with the Burrowing Owl 18-01-2008 273 by: Flávio Cruvinel Brandão @ Flickr Creative Commons Project
Rose champagne - infinite bubbles - If you use it fav it or leave a comment please by: Gaetan Lee @ Flickr Creative Commons Project
MCCALL COVER, JUNE BRIDE by: George Eastman House @ Flickr Creative Commons Project
MCCALL STYLE & BEAUTY by: George Eastman House @ Flickr Creative Commons Project
Mo Money Mo Problems by: greggoconnell @ Flickr Creative Commons Project
Eternal Love by: Hamed Saber @ Flickr Creative Commons Project
Estocolmo de Noche..... " Blue hour " by: Hector Melo A. @ Flickr Creative Commons Project
Email Icon by: husin.sani @ Flickr Creative Commons Project
pirate party cupcakes by: I Don't Know, Maybe. @ Flickr Creative Commons Project
Face To Face With A Gentle Giant by: ianmichaelthomas @ Flickr Creative Commons Project
moving day by: idogcow @ Flickr Creative Commons Project
The sleeping fairy by: ifraud @ Flickr Creative Commons Project
Life furrows by: ifraud @ Flickr Creative Commons Project
28TB by: jared @ Flickr Creative Commons Project
A Better Way To Budget by: Jeff Keen @ Flickr Creative Commons Project
The Triplets by: Jiaren Lau @ Flickr Creative Commons Project
Box o' Receipts by: Jim Frazier @ Flickr Creative Commons Project
Christmas 2008 by: Joe Shlabotnik @ Flickr Creative Commons Project
Pizza! by: Joe Shlabotnik @ Flickr Creative Commons Project
A Hard Rockin' Beer by: Johan Larsson @ Flickr Creative Commons Project
A Hard Rockin' Beer by: Johan Larsson @ Flickr Creative Commons Project
File:Heart left-highlight jon 01.svg - Wikimedia Commons by: Jon Phillips @ Flickr Creative Commons Project
File:Heart left-highlight jon 01.svg - Wikimedia Commons by: Jon Phillips @ Flickr Creative Commons Project
my mobile production gear by: jonrawlinson @ Flickr Creative Commons Project
Maria Jose_4715 by: jorgemejia @ Flickr Creative Commons Project
Miami beach chairs by: juicyverve @ Flickr Creative Commons Project
L2 Certification Flight by: jurvetson @ Flickr Creative Commons Project
BSOD 0x07B by: Justin Marty @ Flickr Creative Commons Project
Live Simple by: Katie@! @ Flickr Creative Commons Project
Dance of Love by: Kjunstorm @ Flickr Creative Commons Project
IMG_0533.JPG by: kludgebox @ Flickr Creative Commons Project
Just a little off the top.... by: law_keven @ Flickr Creative Commons Project
Miami summer 07 #20 by: [le]doo @ Flickr Creative Commons Project
Love's Old Sweet Song by: linda yvonne @ Flickr Creative Commons Project
This must be holland by: loufi @ Flickr Creative Commons Project
IMG_8903 by: Malabooboo @ Flickr Creative Commons Project
First computer mouse by: Marcin Wichary @ Flickr Creative Commons Project
Ops... I´m leaving! Sorry by: Marcos Dornbusch Lobo @ Flickr Creative Commons Project
PayDay by: Mark Strozier @ Flickr Creative Commons Project
Taxes by: Mat Honan @ Flickr Creative Commons Project
Computer History Museum by: michaeldbeavers @ Flickr Creative Commons Project
Longwood Fireworks Show by: MonsterPhotoISO @ Flickr Creative Commons Project
Ginger Kerns Head Shot_121707_2430_1 by: MonsterPhotoISO @ Flickr Creative Commons Project
GingerHeadshots by: MonsterPhotoISO @ Flickr Creative Commons Project
GingerHeadshots by: MonsterPhotoISO @ Flickr Creative Commons Project
Ginger HeadShot by: MonsterPhotoISO @ Flickr Creative Commons Project
Video spanned over three monitors. Oh, wait. by: moonhouse @ Flickr Creative Commons Project
Video spanned over three monitors. Oh, wait. by: moonhouse @ Flickr Creative Commons Project
Welcome to Miami Beach by: Mr. Usaji @ Flickr Creative Commons Project
Cultural VICTORY by: MShades @ Flickr Creative Commons Project
Wind Power by: nateOne @ Flickr Creative Commons Project
Jellyfish by: Neil Barman @ Flickr Creative Commons Project
A Purple Spring Flower by: noahg. @ Flickr Creative Commons Project
Spring Blossoms by: Noël Zia Lee @ Flickr Creative Commons Project
Picture 146 by: norhendraruslan @ Flickr Creative Commons Project
Treehouse by: nyki_m @ Flickr Creative Commons Project
get your taxes done by: Paul Keleher @ Flickr Creative Commons Project
Apple Xserve by: Peter Alfred Hess @ Flickr Creative Commons Project
All Tables! by: Peter Kaminski @ Flickr Creative Commons Project
365---3 - AKA Should have used a Mac! by: preciouskhyatt @ Flickr Creative Commons Project
If only! by: psd @ Flickr Creative Commons Project
Accounting Sense != Common Sense by: psd @ Flickr Creative Commons Project
A mystery box by: RBerteig @ Flickr Creative Commons Project
end of the line by: Robert S. Donovan @ Flickr Creative Commons Project
Email Icon Green by: Shane Fullwood @ Flickr Creative Commons Project
My Trusty Gavel by: steakpinball @ Flickr Creative Commons Project
Love is all.... by: suchitra prints @ Flickr Creative Commons Project
email logo by: surfstyle @ Flickr Creative Commons Project
Laughing Monks by: Swami Stream @ Flickr Creative Commons Project
My iPhone tapping technique is unstoppable by: TenSafeFrogs @ Flickr Creative Commons Project
windmill by: the russians are here @ Flickr Creative Commons Project
Is there a sale on? @ Lowestoft, Suffolk by: timparkinson @ Flickr Creative Commons Project
Miami @ Night by: totalAldo @ Flickr Creative Commons Project
Bean under construction by: tsc_traveler @ Flickr Creative Commons Project
Gavel by: walknboston @ Flickr Creative Commons Project
Pumping sand, water into the sea by: wfyurasko @ Flickr Creative Commons Project
safety? by: wim314 @ Flickr Creative Commons Project
Simpler Times 083009Su by: vmiramontes @ Flickr Creative Commons Project
Arrival by: Wrote @ Flickr Creative Commons Project
Traffic Light Tree by: wwarby @ Flickr Creative Commons Project
Taxes by: x_jamesmorris @ Flickr Creative Commons Project
Cafe au lait by: xb3 @ Flickr Creative Commons Project
Worldwide Delivery Service (from Japan) by: *yasuhiro @ Flickr Creative Commons Project
Tax Time Tax Time by: Zevotron @ Flickr Creative Commons Project

 

TinyMCE och Filemaker Pro
Lära dig mera om FileMaker
 

Kommentarer

Kommentarer saknas