DataDesigner Getting Started

Transcription

1 Contents 1 DataDesigner Getting Started Copyright 2003 SoftPress Systems Limited. All Rights Reserved. Any rights not expressly granted herein are reserved. Freeway is a trademark of SoftPress Systems Limited. SoftPress is a trademark of SoftPress Systems Limited which is registered in some countries. FileMaker is a registered trademark of FileMaker, Inc. Apple, and Macintosh are registered trademarks of Apple Computer. All other company and product names are the trademarks or registered trademarks of their respective owners. IN NO EVENT WILL SOFTPRESS SYSTEMS LIMITED, OR ITS DEVELOPERS, DIRECTORS, OFFICERS, EMPLOYEES, OR AFFILIATES BE LIABLE TO YOU FOR ANY CONSEQUENTIAL, INCIDENTAL, OR INDIRECT DAMAGES INCLUDING DAMAGES FOR LOSS OF BUSINESS PROFITS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, AND THE LIKE ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF SOFTWARE, DOCUMENTS, PROVISION OF OR FAILURE TO PROVIDE SERVICES, OR INFORMATION REFERRED TO IN THIS DOCUMENT, EVEN IF SOFTPRESS OR AN AUTHORISED SOFTPRESS REPRESENTATIVE HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. BECAUSE SOME US STATES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES, THE ABOVE LIMITATIONS MAY NOT APPLY TO YOU.

2 2 Contents Contents DataDesigner Getting Started...1 Contents... 2 Introduction... 3 What you will need... 3 Before you start... 4 Getting FileMaker to Serve WebPages Using the FileMaker Web Server... 8 Tutorial 1 Today s Date Creating a Page Getting Filemaker to serve your Pages Adding a Dynamic Page Serving a Dynamic Page Links in Data Designer Summary Tutorial 2 Adding a Record Getting Started Creating the Form Forms in DataDesigner A better Thank You Summary Tutorial 3 Contacts Database Starting out A Search Form Lists of Results Lists of Results in DataDesigner Linking Across Sets of Records Dealing with Errors Search Operators Editing a Record Summary Tutorial 4 Companies Database Getting started Enabling web companion sharing Creating a search page Creating the members page Hyperlinking across a portal Summary... 70

3 Introduction 3 Introduction Filemaker supports dynamic web publishing. What this means is that FileMaker can act as a web-server, and can insert data from database files when the web pages are served to a browser. This document is designed, through four short tutorials, to get you started making web front ends using Freeway and Filemaker. It is possible to complete this tutorial with the trial version of both Freeway and Filemaker, Softpress and FileMaker both have a trial version available from their web sites. Freeway is available from Softpress. Filemaker is available from Filemaker Inc. What you will need This is what you will need: 1 A copy of Freeway 3.5 Pro or higher (Demo or Full version). 2 A copy of FileMaker 6.0 or higher (Demo or Full version). 3 A browser Safari, Microsoft Internet Explorer or Netscape Navigator

4 4 Before you start Before you start If you have never attempted to publish a FileMaker database before this section goes over the basics of how to get started; that is, how to configure FileMaker and your Macintosh. Getting FileMaker to Serve WebPages. The first step is to get FileMaker to communicate with your browser. You will either need to have TCP/IP enabled on your machine. What we will do is to publish a database from the Contact Management template and use the browser to access it. 1 Launch FileMaker.

5 Before you start 5 2 After it launches you will see this dialog. 3 Select the Contact Management template and click OK. 4 FileMaker will now present you with a Standard File dialog to save the document. Save it in the Web folder next to your copy of FileMaker. 5 Enter in a few records so that you have something already entered to play with when you start using the web to access the database. If you have not used FileMaker before it is very straightforward. Just hit

6 6 Before you start command-n to create a new record, then when you have entered the fields hit the enter key to add the record to the database. FileMaker needs to be configured so that it will start serving Web Pages. You do this using the Plug-Ins panel in the Application Preferences. 1 Enter in a few records so that you have something already entered to play with when you start using the web to access the database. If you have not used FileMaker before it is very straightforward. Just hit command-n to create a new record, then when you have entered the fields hit the enter key to add the record to the database. 2 Select the Application Preferences option from the Preferences popout menu on the Edit menu.

7 Before you start 7 3 Now select the Plug-Ins tab, to bring up the preferences for the plugins. 4 Make sure that the Web Companion Plug-In is active. The Web Companion Plug-In is the FileMaker extension that is responsible for serving up Web pages. You make it active by checking the Enabled checkbox for that particular plug-in. 5 On this panel there is a Configure button - this will allow you to configure the selected Plug-In. Before you start making our Freeway Web pages we will just check that FileMaker is up and running properly and that we can connect to it with our browser. 6 With the Web Companion plug-in selected, click on the Configure button. This will bring up the configuration dialog for the Web Companion. In this dialog select default.htm as the Home Page, if it is not already selected. You should not have to change any of the

8 8 Before you start other settings. 7 Dismiss all the other dialogs and leave FileMaker running in the background. Open your Web browser. Using the FileMaker Web Server You will now have to enter in the URL of your machine into your browser. 1 Launch your browser. 2 Enter either the IP address of your machine or the loop-back number of in the browser

9 Before you start 9 3 Hit Enter. Your browser will now attempt to connect to FileMaker. You should see the following page appear in your Browser.

10 10 Tutorial 1 Today s Date Tutorial 1 Today s Date This tutorial assumes that you are familiar with Freeway to the extent that you have either completed the tutorial in the Getting Started guide, or that you are quite capable of doing so. Creating a Page The first thing you have to do is to create a web page with some recognizable text on it. 1 Create a New Document. 2 Sketch a Graphic box. 3 Type the words Hello into the box, and set the text to be of a reasonable size. 4 Give your page the title Hello in the page panel of the inspector palette.

11 Tutorial 1 Today s Date 11 5 Save your document as Date Test. 6 Publish your site. When Freeway prompts you for a site folder select the Web folder next to your copy of FileMaker. 7 Preview in the Browser Getting Filemaker to serve your Pages The next thing you have to do is to get FileMaker to serve your Freeway document. 1 If Filemaker is not already running launch, it. 2 Select FileMaker s Application option from the Preferences pop-out menu on the Edit menu. 3 Select the Plug-Ins tab, to bring up the preferences for the plug-ins and ensure that the Web Companion plug-in is active (its checkbox should be checked). 4 Click on the Configure button. If you have correctly published into Web folder next to FileMaker then your page Hello.html should

12 12 Tutorial 1 Today s Date appear in the Home Page popup. Select it and click Ok. 5 Open your browser and enter either the IP address of your machine or the loop-back number of In your browser you should see your web page. It should appear the same as when you previewed it. However, this time it has been served by FileMaker. Adding a Dynamic Page In this step of the tutorial you will get FileMaker to dynamically serve a web page. 1 Create a new page in Freeway called Date. 2 In the page panel of the inspector palette make sure that the file name is date.html.

13 Tutorial 1 Today s Date 13 3 Sketch an HTML box and enter in the text date: [FMP-CurrentDate]. NOTE: The text [FMP-CurrentDate] is CDML it means the current date. 4 Return to the Hello page in your Freeway Document and sketch an HTML box. In this box type the text Static Link. 5 Now select this text and link it to your date page. 6 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser. 7 Click on the link. You should see the following:

14 14 Tutorial 1 Today s Date What has happened, or rather what has not happened? You may have expected that Filemaker would substitute the current date in place of the [FMP-CurrentDate] but it has not. The reason is that Filemaker has not served the page dynamically. When FileMaker serves a page statically it does not look for any of the special tags it just serves the web page blindly like any other web server. Serving a Dynamic Page To get FileMaker to serve the web page dynamically you have to establish a more complex link. The link has to contain extra information telling FileMaker to link dynamically and telling it additional information that it will need to follow the link. 1 In FileMaker open your database Contact Management.fp5 which you saved in your Web folder next to FileMaker. 2 Return to Freeway and sketch a second HTML box below the last. 3 Select the text Dynamic Link and choose the Hyperlink option from Freeway s Edit menu. Enter the following text as the URL FMPro?-db=Contact%20Management.fp5&- format=date.html&-view

15 Tutorial 1 Today s Date 15 This CDML hyperlink is the link that tells Filemaker to serve another page dynamically. The meaning of this link breaks down as follows. FMPro? - A target defining that FileMaker s WebCompanion plugin should service the request -view - An action tag defining what FileMaker should do, in this case serve another page. db= Contact%20Management.fp5 - A variable tag specifying the database to be used -format=date.html - A variable tag specifying which page to serve NOTE: You may be curious why you have to specify a database. You need to do this because FileMaker interprets all dynamic requests as being referenced against a particular database. Most of the dynamic data that FileMaker serves is actually data from a database, so this is not as unusual as it first seems. 4 Publish your site and load the page in your browser. If you don t see your new Dynamic Link refresh your browser. Then click on this link. You should see something like the following (the date should

16 16 Tutorial 1 Today s Date correspond to the date on your machine). 5 If you do not get this, return to Freeway and make sure that your CDML link is entered correctly and that file of your date page is indeed date.html Links in Data Designer Creating a link with the various CDML components is fiddly. There are other problems with this approach. If you edit the name of the HTML file on your date page so that the name is today.html rather than date.html then your link will be broken because the link has the old name of the file embedded within it An alternative to entering in these values manually is to use the DataDesigner; which can CDML automatically. 1 Return to Freeway and make sure that the actions palette is visible. If it is not, choose Actions on the Window menu. 2 Sketch a 3rd HTML box on your Hello page. Enter the text DataDesigner Link. 3 Select the HTML box and attach a FM-Link Action to the box, either by choosing FM-Link from the Actions submenu in the Item menu or by clicking the Add Action icon in the Actions palette and selecting FM-Link from the Add Item Action dialog. 4 Make sure that the Actions palette is visible. If you see a message in the palette stating that the action requires AppleScript you must turn on AppleScript support within Freeway.

17 Tutorial 1 Today s Date 17 You can turn on AppleScript support through the Enable AppleScript in Actions checkbox in the general pane in your Freeway Preferences. 5 You should see the following interface in the Actions palette. 6 Click on the Get DB Details button. 7 The first time you click on the Get DB Details button DataDesigner will prompt you for the name of the FileMaker Application. 8 Enter the name of your FileMaker application. NOTE: Typically your copy of FileMaker is simply called FileMaker Pro, however if you use FileMaker Developer it will be called FileMaker

18 18 Tutorial 1 Today s Date Developer. If you have renamed your copy of FileMaker in the Finder enter the new name here. 9 The following dialog should appear reporting to details the Databases that FileMaker has open. 10 In the Actions palette set the Variables popup so that the Action will show those parameters appropriate for a request to view a page. 11 Choose Contact Management.fp5 from the Database popup, and choose your date page as the Next page. The panel should look like

19 Tutorial 1 Today s Date 19 this when you have finished.. NOTE: If you are curious about the CDML that is generated for your link then click on the Advanced disclosure triangle and click on the Custom href button. DataDesigner will display a dialog with the full text of the link. This is for advanced use do not change it. 12 In Freeway go to the Date page, and sketch a fresh HTML box. In this box type the words Date:.

20 20 Tutorial 1 Today s Date 13 Without removing insertion point choose FMP Value from the Action Item sub menu on the Insert menu [WRONG SHOT] 14 Select the inserted item and in the Actions palette choose the Current Date option from the Tag popup. NOTE: To see the CDML that is generated for your link then click on the Advanced disclosure triangle, this will reveal the CDML do not change it.

21 Tutorial 1 Today s Date Upload the web site and go to the Hello page in the browser. Test that your new link works and that your date is also displayed correctly. Summary FileMaker can act as a web-server. It will serve web pages that are placed in its Web folder. You set the default page in the Web Companion plug-in settings in FileMaker s Application preferences. There are two ways that FileMaker can serve web pages; statically and dynamically. CDML (FileMaker s special tags) are only evaluated on dynamic pages. If you use a normal link then when you follow the link in your browser the page that you see will be static. You can enter CDML (e.g. [FMP-CurrentDate]) directly into HTML boxes as text if you choose. You can enter dynamic links manually into the Hyperlinks dialog within Freeway. The FM-Link Action can create dynamic links automatically. The FMP Value Action can add the CDML necessary for getting dynamic values from FileMaker.

22 22 Tutorial 2 Adding a Record Tutorial 2 Adding a Record This tutorial will show you how to create a web site that allows people to add records to a database. It assumes that you have already completed Tutorial 1. Getting Started Create a new Freeway document and configure FileMaker so that it publishes it in the same way as you did in the last tutorial. 1 Give the first page the name Guest Book. 2 Sketch a box at the top of your page and type Guest Book into it. 3 Save your Document. 4 Publish your site. When Freeway prompts you for a site folder select the Web folder next to your copy of FileMaker. 5 Set FileMaker s preferences so that it serves your Guest Book page as its default page. 6 In the Browser enter either the IP address of your machine or the loop-back number of so that you can see your page. Creating the Form Forms allow the web user to add values to a database.

23 Tutorial 2 Adding a Record 23 1 In FileMaker open the database Contact Management.fp5 that you used in Tutorial 1. 2 In Freeway sketch a HTML box and type the text Click here to add yourself to our database the hard way. 3 Select the word here, and choose the Other from the link popup at the bottom of Freeway s window. 4 In the Hyperlinks dialog that appears select New Page from the radio buttons, and click Ok. 5 When Freeway prompts you to name the page enter the name Add to Guest Book. 6 Create a new page called Thank You, and make sure that the HTML filename of this page is thankyou.html. 7 On this Thank You sketch a graphic box with the text Thank You in large letters. 8 Using the Page popup menu at the bottom of the Freeway document window go to your newly created page. 9 Select the Form Setup option from the Page menu.

24 24 Tutorial 2 Adding a Record 10 In the Form panel set the method to Post and the Action to FMPro NOTE: You set the Form Action to FMPro in the same way as you added FMPro when creating a dynamic link in Tutorial 1. As before it defines that FileMaker s WebCompanion plugin should service the request. 11 Choose the Hidden Fields panel and using the New button add two hidden fields; one with the name -db and the value Contact Management.fp5. The other with the name -format and the value thankyou.html. Then click on the Ok button NOTE: The meaning of the -db and the -format fields is the same as in the dynamic link you created in Tutorial 1.

25 Tutorial 2 Adding a Record Sketch an HTML box and enter the text First Name. 13 Without changing or moving the insertion point choose Text Field from the Insert menu. This will insert a text field form item into your HTML box. 14 Select the Text field in the Inspector palette, and give it the name First Name NOTE: The name of this field is the same as the name of the field that you want to set in the database. A value entered in here, when the form appears in your browser, will set the First Name field in the database. 15 Click after the Text Field, to get an insertion point and type a <return>. Then add two more fields Last Name and ,

26 26 Tutorial 2 Adding a Record naming the field items in the same way. 16 Type a <return> and then choose Button from the Insert menu. This will insert a button form item into your HTML box. 17 Select the button. Give the button the name -new and the value Send Information. NOTE: Giving the button the name -new tells FileMaker to create a new record with the information it receives from the form when this button is pressed.

27 Tutorial 2 Adding a Record Insert another button. Set its value to Clear Form and its type to Reset. 19 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser.

28 28 Tutorial 2 Adding a Record 20 Click on the link, and enter values in the form. and click on the Send Form button. 21 The browser should then show you your Thank You page. 22 If you look in FileMaker you should find a new record has been added. NOTE: If you got an error message or this does not work you should check: That FileMaker has the Contact Management database open. That you have filled in the Form Setup page correctly. Pay close attention to the file named in the format hidden field. That FileMaker is serving your web page. Forms in DataDesigner The DataDesigner can make setting up a form like this a lot easier. So we will add a new page that uses the ProActions.

29 Tutorial 2 Adding a Record 29 1 In your Freeway document go to the Guest Book page and sketch another HTML box. In this box type the words Click here to add yourself to our database the easy way. 2 Select the word here and link it to a new page called Add to Guest Book Easy. 3 Go to the new page, and apply the FM-Form action. You should see the following in the Actions Palette. 4 Configure your document to work with the Contact Management database (this is the database that should currently be open in your copy of FileMaker) through clicking on the Get DB Details button as you did in Tutorial 1. 5 After getting details of databases the Database field will have a popup menu next to it. Choose the Contact Management database from in

30 30 Tutorial 2 Adding a Record this Popup. 6 Using the Tags Popup choose the New Record (-new) option. The actions palette will change to show tags that are relevant to adding a new record.

31 Tutorial 2 Adding a Record 31 7 In the Next popup select the Thank You Page. 8 Sketch an HTML box and enter the text First Name:, and insert a Text Field after it. 9 Select the Text Field and add a FM-Input Action to it. NOTE: The action knows that it is in the Contact Management.fp5 form. So the Field parameter has a popup displaying a list of all the fields available in this database. 10 Click on the Field popup and select the Field First Name.

32 32 Tutorial 2 Adding a Record 11 Using this procedure and add a Last Name and fields, adding the FM-Input Action. 12 Using the Insert menu, insert a button after the other form items. 13 Select the button. Give the button the Send Information. 14 Apply the FM-Input Action. The Action detects that it is within a form configures to show the - new variables. It will by default automatically configure itself as a - new button. NOTE: Should you want to set the Name of the form item manually you can do so through the Name popup. 23 Insert another button. Set its value to Clear Form and its type to Reset. 15 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser. 16 Follow the easy way links in the browser, and add a new record to your database

33 Tutorial 2 Adding a Record 33 A better Thank You Currently the Thank you page just blankly says thank you. We can draw information from the FileMaker database about the current record and create a dynamic page that is personalized. 1 In Freeway go to your Thank You page. 2 Sketch a wide HTML box. 3 In the HTML box enter the text Thank you for signing our Guest Book. 4 Insert a FM-Value Action after the Thank you, from the Actions submenu on the Insert Menu. If you look at the top portion of the panel you will see that the DB is listed as DB: [no context] What this means is that the action does not know of any Database so it cannot list any field names for you to choose fields from. 5 Apply a FM-Form Action to the page. And choose the Contact Management database.

34 34 Tutorial 2 Adding a Record Keep the Tags as None. 6 Click back on the FM-Value action that you inserted earlier. The Action now shows the database and the Field Name has a popup from which you can choose from the fields in this database. The FM- Form Action sets context for the FM-Value Action. In this case the FM-Form generates no output and just establishes a context.

35 Tutorial 2 Adding a Record 35 7 Choose a field from the Field Name popup. 8 Insert a space character after the FM-Value Action and then insert another FM-Value Action. Set it up so that it will draw the Last Name field from the database. Your page should look something like this 9 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser. 10 Follow the easy way links in the browser, and add a new record to your database and add a new record in the browser. You should see a personalized page thanking you for adding your details, something

36 36 Tutorial 2 Adding a Record like this. Summary Adding data to a FileMaker database can be done by entering data in a form. Fields on the form (in this tutorial hidden fields) tell FileMaker which database to use, which page to go to after its request is complete etc. Fields on the form with the same name as fields in the database can add values to the database. The FM-Form Action can set the form s Action and appropriate hidden fields. The FM-Input Action can be used to make it easier to set the names of Text Fields so that they correspond to names of fields in your Database. The FM-Input Action can also be used to set form buttons. The FM-Form Action, can be used just to set a database for other actions (e.g. FM-Value) to use, and does not necessarily have to generate a form. The FM-Value Action can be used to display dynamic values of fields drawn from a database.

37 Tutorial 3 Contacts Database 37 Tutorial 3 Contacts Database This tutorial builds on what was covered in the two preceding tutorials. Using the Contact Management database we will create a contacts database with facilities for editing, searching, deleting records. Starting out 1 Remove all the HTML files that you generated in the previous tutorials from the Web folder next to your copy of FileMaker. 2 Create a new Freeway document. 3 Give the First Page the name Contacts. 4 Sketch a graphic box at the top of your page and type Contacts into it. 5 Save your Document. 6 Publish your site. When Freeway prompts you for a site folder select the Web folder next to your copy of FileMaker. 7 Configure FleMaker s Web-Companion plugin so that it serves your page. 8 Use the Browser to make sure that FileMaker serves you this page. A Search Form 1 Choose the Table tool. Sketch a table with 4 Rows and 2 Columns. 2 Create a cell that spans both the columns in the first row. You do this by clicking on the first cell of the span, shift-clicking on the second

38 38 Tutorial 3 Contacts Database creating the following selection in the table. Then select Join Cells from the table sub-menu. 3 Create a cell that spans both the columns in the last row. Your table should look like this. 4 Select the table and in the inspector palette set the table Border Width to 0 and the Cell Spacing to 1. NOTE: Selecting tables without borders can be tricky. An easy way to do this is to Command-click on a table cell and then Command-Option-click on the selected cell.

39 Tutorial 3 Contacts Database 39 5 Type Quick Search in the first cell, First Name in the first cell on the second row, and Last Name in the first cell on the third row. Align the first and last name to the right. 6 Select the table, and apply the FM-Form Action to the table. NOTE: This is similar to applying a FM-Form to the page. The difference is that the action will create form that is just local to the item (in this case a table) that it is applied to. This mechanism is useful as it makes it possible to have more that one form on a single page. 7 Configure your document to work with the Contact Management database using the Get DB Details button (this is the database that should currently be open in your copy of FileMaker). 8 Using the Tags Popup choose the Find Record option. 9 Set the Database to be Contact Management.fp5. 10 Click on the Next popup and link the popup to a new page called Results. 11 In the cell to the right of the First Name text insert a Text Field, apply the FM-Input Action and set it to input the First Name.

40 40 Tutorial 3 Contacts Database 12 In the cell to the right of the Last Name text insert a Text Field, apply the FM-Input Action and set it to input the Last Name. 13 In the last cell insert a Button. Apply the FM-Input Action to it (it will default to a -find button). Right align this button. 14 Go to the Results page and sketch a table with 2 rows and 1 column that spans the width of the page. 15 Below it sketch another table with 2 rows and 3 columns that also spans the width of the page. 16 Select the table and in the inspector palette set the table Border Width to 0 and the Cell Spacing to 1. Your page should look like this. 17 Click in the first cell of the first table and insert a FM-Value Action. Set the Tag to Total Records in Found Set 18 Add the text records found after the action, and center the text. 19 Insert text in the first row of the second table so that the table has labels Last Name, First Name and . Your page should look

41 Tutorial 3 Contacts Database 41 something like this. 20 Apply the FM-Form Action to the page, do not set the form, just set the database to Contact Management.fp5. 21 In the table cell below each of the headings enter a FM-Value Action, set them a Field Name, of each action accordingly. 22 Publish your site. 23 Go to FileMaker, enter the names John Smith, Peter Smith, George Smith, Bob Smith, with addresses into the database 24 Enter either the IP address of your machine or the loop-back number of in the browser. You should see a page something like this. 25 Enter the last name Smith and click on the search button. Your Browser should display a page like this.

42 42 Tutorial 3 Contacts Database The database has found 4 records and is displaying details of the first. Lists of Results At the end of the last step the browser showed just the results for a single record. We will now extend it to show the results for all the records found. To display all the results we need to repeat the last row or the table for every record that has been found. In CDML you can repeat a section of code for every record found by enclosing it between the statements [FMP-Record] and [/FMP-Record] If you consider the HTML of a table you would want to do this by adding a [FMP-Record] before the <tr> tag and a [/FMP-Record] after the closing </tr> tag, as this would have the effect of repeating the table row in Freeway for every record. 1 Go to your Results page within Freeway. 2 Click on the bottom left cell (the first cell in the row that we want to repeat), and click on the table-cell tab in the inspector palette.

43 Tutorial 3 Contacts Database 43 3 Click on the row's Markup button. The resulting dialog allows you to enter markup for before and after the </tr> tags. The popup allows you to control which section you can add the markup to. 4 Enter the CDML code [FMP-Record] in the Before <TR> section. 5 Enter the CDML code [/FMP-Record] in the After </TR> section. 6 Click OK to accept the markup dialog. The Markup button is underlined in the inspector palette as a visual clue that the row has

44 44 Tutorial 3 Contacts Database markup attached. 7 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser 8 In the browser search once again for Smith You should see something like this. NOTE: The browser shows 3 records rather than all 4. This is because the default setting in the FM-Form is to show just 3 records at once. This iis controlled by the Max Recs field of the form. 9 Go to the Contacts page in Freeway and select the table, and look in the FM-Form in the Actions Palette. 10 If you look at this form (on the contacts page) in the Freeway Actions palette you should see this setting. Lists of Results in DataDesigner The DataDesigner will add block tags of CDML like [FMP-Record] automatically without having to add markup.. 1 Return to Freeway, and remove the Markup that you added. You should do this selecting the bottom right cell of the table clicking on

45 Tutorial 3 Contacts Database 45 the row's Markup button, and deleting the markup that you added Before <TR> and After </TR>. NOTE: Be careful that you have actually removed the markup from both sections. When you have finished removing it check that the row s Markup button in the inspector palette is no longer underlined. 2 With the bottom right cell selected apply the FM-Block action. You should see the following in the Inspector palette. The Apply To popup allows you to select which part of the table is wrapped in tags. The Count beneath it will allow you to choose, for example, how many rows to wrap in these tags. 3 The default setting of Tag is Each Record, which will generate [FMP- Record] and [/FMP-Record]. You do not have to change this setting. NOTE: To see the CDML that is generated click on the Advanced disclosure triangle, this will reveal the CDML do not change it. 4 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser. 5 Return to your search page in the browser and search once again for Smith you should see the same results. Linking Across Sets of Records The problem of seeing just 3 of the 4 results remains. The easy way to solve this would be to have a higher maximum, however this would fail on other searches. Another possibility of having no maximum would be very bad for searches that yield a huge number of results. What happens for example if you found 10,000 records?

46 46 Tutorial 3 Contacts Database The better solution to this problem is to show a portion of the results and to allow the user to navigate between these records. 1 Return to the Results page in Freeway. Edit the text in the header area so that it reads thus. 2 Insert FM-Value actions before the of, before the to and after the to. 3 Set the tag to be -rangesize, -rangestart and -rangeend. 4 In the second cell of the same table type the word Previous and centre it. 5 Below the results table, sketch a new table with just a single cell that spans the width of the page. Set the border of it to 0, and the cell spacing to 1. Into this table type the word Next and center it. 6 Select the table cell with the word Next in it and type Apply the FM-LinkRange Action. The Tag is set by default to Next Range, do not change it. 7 In the same way apply the FM-LinkRange Action to the table cell with the word Previous in it. This time set the Tag to Previous Range. 8 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser. 9 Return to your search page in the browser and search once again for Smith You should see something like this.

47 Tutorial 3 Contacts Database 47 The Next link will allow you to link to the next records. Dealing with Errors 1 In the Browser search for someone with the name bogsnopolis. The browser responds with the following dialog. You can, instead, specify a page that the FileMaker server will show instead of this message. To do this you need to add a error tag in the dynamic request. This tag is not available in the FM-Table (it does not appear in the interface), however it is available in one of the FM-Extra actions that are used to customize dynamic requests. 2 Return to your Search page in Freeway. 3 Select the table.

48 48 Tutorial 3 Contacts Database 4 Apply the FM-ExtraError action to the table. 5 Set the Page popup to a new page called Error. NOTE: Setting a Page on its own will actually field all errors. If you want to field a specific error, or range of errors you can set these errors in the From and To fields. 6 Draw a box on your Error page and enter the following helpful text: No records Found, please modify your search criteria and try again. 7 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser.

49 Tutorial 3 Contacts Database 49 8 Return to your search page in the browser and search once again for bogsnololis you should see something like this. NOTE: FMExtra Actions, are used to generally extend dynamic action tags. This means that they can be used to extend the FM-Link actions as well as the FM-Form Actions. Search Operators The search form allows you to successfully find all the people whose surname is smith. If you type in smi as a surname you will also find all the people whose surname is smith. This is because FileMaker s default search operator is begins with so it will find all records whose surname begins with smi, all the smiths. You can specify different search criteria by adding a field with the name -op before the search field. So if you wanted the search to search for all names that equal the surname which you enter you could add a hidden field with the name -Op and the value eq. <input type=hidden name="-op" value="eq"> 1 Return to your Search page in Freeway. 2 Get an insertion point before the Surname Text Field. You can most easily do this by clicking after the surname Text Field, and the cursor left to get an insertion item before the Text Field. 3 Select Markup Item from the Insert Menu. 4 In the dialog that appears type: <input type=hidden name="-op" value="eq">

50 50 Tutorial 3 Contacts Database. 5 After clicking Ok you should see the markup item inserted before the text field. 6 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser. 7 Return to your search page in the browser and try searching for smi and then smith. You should see that smi yields nothing, but entering smith yields all the smiths. If you want to force a given search operator (as you did by adding the hidden field) the FM-Input Actions have the facility to do this automatically. 8 Return to your Search page in Freeway. 9 Delete the Markup item. 10 Click on the surname Text Field.

51 Tutorial 3 Contacts Database 51 At the bottom of the Actions Palette you will see a facility add a op using the Find field. If you selected an operator from here will it would force the Action to generate a hidden field with the name -op and an appropriate value without you having to insert a markup item. However do not select an operator (leave choice as [none] instead we will allow the user to choose the search operator. If we want the user to be able to choose the search operator we would place a field with the name -op before the surname field and with values that they can choose that represent the search criteria that we wish to present. You could do this most easily with a popup menu. The ProActions have a facility for creating such a popup menu automatically. 11 Insert a Menu/List before the Surname Text Field. 12 Apply the FM-SearchOp Action to it.

52 52 Tutorial 3 Contacts Database 13 You should see the following in the Actions palette. This palette has checkboxes that allow you to control the operators that appear in the Menu/List. It has a popup that allows you to select the Default Choice. At the bottom it has three buttons that provide some reasonable default configurations for text, numeric, and date operations. 14 Click on the Text Ops button. This will configure the menu for some standard choices that are generally used when comparing text.

53 Tutorial 3 Contacts Database 53 The palette will change to this 15 Now click on the Default Choice popup and set it to cn - contains 16 Select the Menu/List item in Freeway, copy it and then paste it in front of the First Name Text Field. Your page should look something

54 54 Tutorial 3 Contacts Database like this. 17 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser. 18 Return to your search page in the browser and experiment freely with different search criteria. Editing a Record When someone has found a record it may be that they would want further details on this record, or the opportunity to edit it. You can do this by linking a given record in the list of records to an edit page. 1 Return to your Results page in Freeway. 2 Select the table cell with the Last Name field in it. 3 Apply the FM-LinkRecid Action. You should see the following interface in the Actions palette. 4 Use the Next popup to link the database to a new page. Call this page Edit Record. 5 Copy the table in the Contacts page and paste it on your Edit Record page.

55 Tutorial 3 Contacts Database 55 6 Delete the FM-SearchOp Actions from the table cells where they have been inserted. 7 Change the text at the head of the table from Quick Search to Edit Record 8 Select the table, and in the interface of the FM-Form Action change the Tags to Edit Record.. 9 Change the Next page to the Contact page. 10 Insert a new row below the Last Name in the table. 11 Add the text in the left-most cell in the row that you added. 12 Copy the Last Name Text Field and paste it in the right-most cell in the row that you added.

56 56 Tutorial 3 Contacts Database 13 Select the Text Field that you added and set the field to Open the Advanced disclosure triangle in the interface of the FM- Input Action. You will see that the Action has generated the following This CDML will set the value of the field to the value of the field of the current record in the FileMaker database. 15 Publish your site, and enter either the IP address of your machine or the loop-back number of in the browser.

57 Tutorial 3 Contacts Database Return to your search page and search for smith. You should see the following page in your browser. 17 Click on the first Smith Link. You should see a page that looks something like this. 18 Change Smith to Smithy and click on the submit button. 19 Search for Smithy to make sure that the record has been edited.

58 58 Tutorial 3 Contacts Database Summary There is a version of the FM-Form action that makes it possible to apply a form to an item such as a table. This makes it possible to have more than one form on a single page. The FM-Value action supports the tag -currentfoundcount and similar operators that give details of set of records that are found and displayed. You can repeat a set of records using the record tag. You can add the record using the FM-Block Action. You can manually apply markup (for example the record tag) to the <tr> and </tr> tags of tables using the Markup button on the table cells panel of the inspector palette. The -max tag controls the maximum number of records that are viewed on a results page at a single time. You can link to pages before and after the current set of records displayed parameter using linknext and link previous tags that are generated by the FM-LinkRange Action. The tags that are generated by the FM-Form Action can be extended by the FMExtra Actions, of which the FMExtra-Errors is an example. You can handle errors through one or more errors page. These can be defined using the FMExtra-Errors Action. You can control the operators (characteristics) of a search using a -op tag. This can be fixed to a given operation using a hidden field. You can add custom hidden fields using the Markup items. There is a setting on the FM-Input action to generate the op tag. The FM-SearchOp action can be added to a Menu/List to generate a search item that can be controlled by a web user. You can link to a particular record within a record block using the linkrecid tag available from the FM-LinkRecId Action.

59 Tutorial 4 Companies Database 59 Tutorial 4 Companies Database This tutorial will show you how create web pages that use related database (using a portal) in Freeway. It assumes that you have already completed the previous tutorials, and builds on the database from Lesson 10 of the FileMaker Getting Started Guide. It is recommended that you understand these advanced FileMaker concepts before proceeding. Getting started 1 Remove all the HTML files that you generated in the previous tutorials from the Web folder next to your copy of FileMaker. 2 Copy the files Companies10.fp5 and Members10.fp5 from within the Sample Files folder, which is in the FileMaker Tutorial folder next to your copy of FileMaker. 3 Create a new Freeway document. 4 Give the first page the name Companies. 5 Sketch a graphic box at the top of your page and type Companies into it. 6 Save your document. 7 Configure FileMaker so that it publishes your Companies page. Enabling web companion sharing Before the FileMaker Web Companion can access your database, you must enable sharing from within the FileMaker application. The template database we used in earlier tutorials had this enabled by default, but for most databases you will have to carry out this step. If you do not, FileMaker will not allow web access to your database. 1 Open the Companies10.fp5 database in the Web folder. 2 Select Sharing from the File menu. This will bring up the File Sharing configuration dialog.

60 60 Tutorial 4 Companies Database 3 In the Companion Sharing area, check the box next to Web Companion. 4 Click OK to dismiss the dialog. 5 Select (Members10.fp5) from the Windows menu (the file name appears within brackets in the menu as the file is related but not yet open). 6 Repeat the steps to enable the Web Companion plug-in for the Members10.fp5 database. Creating a search page We need to provide our users with a mechanism to find the company they are looking for, so we will create a simple search page. We assume that there will only be one company with a given name. 1 In Freeway, create a table with 3 rows and 2 columns below the graphic item that has the word Companies.

61 Tutorial 4 Companies Database 61 2 Create a cell that spans both columns on both the top and bottom row. 3 Type Quick Search in the first cell and Company in the first cell on the second row. Align Company to the right. 4 Apply the FM-Form Action to the table. 5 Configure your document to work with the Contact Companies10 and Members10 databases (these are the databases that should currently be open in your copy of FileMaker) by clicking on the Get DB Details button as you did in Tutorial 1. 6 Using the Tags popup choose the Find Record option. 7 Click on the Next popup and link to a new page called Company Members. 8 Select the Layout called Layout #1. NOTE: You must select the layout that contains the portal; otherwise FileMaker will not let you access the fields in the related database. 9 In the cell to the right of Company, insert a text field, apply the FM- Input Action and set its field to Company.

62 62 Tutorial 4 Companies Database 10 In the bottom cell, insert a button, right justify it and apply the FM- Input Action. Creating the members page We will list the members of the company we found using the portal in Layout #1 within the Companies database. 1 Switch to the Company Members page and sketch a graphic item to contain its name. 2 Apply a FM-Form Action to the page and set its database to Companies10.fp5. 3 Create a table with 3 rows and 2 columns below the graphic item. 4 Create a cell that spans both columns in the top row of the table. 5 Type Showing members for in the top row of the table, then insert a FM-Value Action Item to display the Company field.

63 Tutorial 4 Companies Database 63 6 In the first cell of the second row, type Last Name, and in the second cell type First Name. 7 Select the first cell of the third row, and apply a FM-Block action to it. 8 Use the Tag popup to select Each record in portal.

64 64 Tutorial 4 Companies Database 9 Choose Members10 from Relationship popup. 10 Insert a FM-Value Action Item into the first cell of the third row. Notice that at the top of the Action, the Action mentions the Portal. The action has detected that it is within a portal.

65 Tutorial 4 Companies Database Set the field its field to Members10::Last Name from the popupmenu. This is the last name in the related Members 10 file. NOTE: Notice that the Field Name popup now lists fields from across the portal. As the Action is within an FM-Block it will list these fields. 12 Publish your site. 13 Enter either the IP address of your machine or the loop-back number of in the browser. 14 Check that you can search for companies and that the companies list their employees. Hyperlinking across a portal Linking to an individual record across a portal from within a FM-Block is achieved in a similar way to linking to a specific record from a list of records within an FM-Block. To achieve this FileMaker has to be able to identify the record by a unique field or key field. The Members database has a field Membership Number that is unique to each member. If you search for a member you will always get the same record. We will use this as a key field. 1 On the Company Members page, select the first cell of the third row.

66 66 Tutorial 4 Companies Database 2 The FM-Block Action s interface should appear in the Actions Palette. Click on the Key Field popup. This popup only shows two fields in the related database. This is because only two fields have been exposed in a FileMaker layout. In order to make this link we will have to expose these fields in a layout. To do this we will create a new layout. 3 In FileMaker bring Companies database window to the front. 4 In the View Menu choose Layout Mode. 5 Select New Layout from the Layouts Menu. 6 Give it the name Access Members select the Standard Form layout and click on the Next button. 7 Choose (move) all the fields into the Layout Fields list and click on the Next button. 8 Select the Default Theme. Click OK. 9 Drag a field onto a blank portion of the layout.

67 Tutorial 4 Companies Database In the dialog that appears choose related file Members Choose the field Member Number and click OK. 12 Add related fields First Name and Last Name in the same way. 13 In the View Menu choose Browse Mode. 14 Return to Freeway. 15 Click on a blank part of the Page. The Actions Palette should show the FM-Form Action. 16 Click on the Get DB Details button. This will ask FileMaker for fresh details of the Databases, fields and Layouts. We need to do this to update the details that DataDesigner has stored. 17 Click OK to the two dialogs that appear including the one that warns you about overwriting Database details. 18 On the Company Members page, select the first cell of the third row. 19 The FM-Block Action s interface should appear in the Actions Palette. Click on the Key Field popup

68 68 Tutorial 4 Companies Database Choose Members10:Member Number. 20 Apply the FM-LinkPortal Action to the same table cell that the FM- Block action applied.

69 Tutorial 4 Companies Database In the Action s interface choose Member Details as the Next page. 22 In Freeway go to the Companies page. 23 Select the Quick Search table.

70 70 Tutorial 4 Companies Database 24 In the Actions Palette change the layout to Access Members. 25 Enter either the IP address of your machine or the loop-back number of in the browser. 26 Check that you can search for a record and link to the Members in the Browser. Summary For the FileMaker Web Companion to be able to access your database you have to set the Sharing settings of the database. To access fields in a related file (across a portal) you must specify a layout in the preceding dynamic request. This layout must have the portal visible. Records in a portal can be related by an FM-Block Action. Some Actions (e.g. the FM-Value Action) are sensitive to being within an FM-Block Action and will allow you to choose records from across the portal. Linking across a portal can be done using the FM-LinkPortal Action. The FM-LinkPortal Action requires a Key Field to have been set in the FM- Block Action. The only portal fields that are available in Data Designer (and CDML) are those that are defined in layouts.