FMEasyWeb with FileMaker Layouts

fmeasywebwithfilemakerlayouts

Tim Dietrich and I have been experimenting with the FileMaker and the Web recently using Custom Web Publishing. One thing led to another.

FMEasyWeb

Tim's been working on FMEasyWeb which makes it crazy easy to put a FileMaker layout on the web. Below you can see what a list layout currently looks like. It generates the layout automatically for list and detail layouts, but detail layouts are just a long column of each field. It works, but it's not similar to the FileMaker layout. It's freaking awesome and completely useable for being automatically generated.

EasyWeb-Alpha-1-List-View-300x298

FMEasyWeb with FileMaker Layouts

We started talking and wished we could get a Custom Web Publishing page to look like a FileMaker Layout. So, I mentioned that we could get the position and size of just about anything on a FileMaker Layout by selecting all the objects on the layout to get the xml representation of the layout.

So, I copied the xml for the FileMaker Layout shown below with no changes to the xml. You can get an idea what the xml looks like near the bottom of this page. The xml represents the field for the Title below. Just the Title field. If you were to copy the all of the objects on the layout, there would be that much xml multiplied by the number of objects. It looks like a total mess, but it's very organized. You can get the xml using a FileMaker plugin like Clipboard Explorer or the MBS Plugin. If there are other plugins, I'd like to know, so please leave a comment.

With that the xml, I created this web page layout. I looped thru each object in the xml and placed it on the layout. There was NO hand coding of anything. Each text and field were added to the webpage in the same position and at the same size. You'll probably notice that the portal isn't show on the webpage. That's next on the list.

FileMaker Layout

Just a FileMaker Layout.

FileMakerLayout-e1415735164886

Web Page Layout

This is a web page generated from the xml of the FileMaker Layout show above. NO HAND coding was done. A bit of the xml is shown below.

FileMakerLayoutWeb-e1415735202462

FileMaker Layout Field XML

This is what the xml looks like for the Title Field on layout shown above.

screencapture-file-Users-benjaminbeck-Desktop-campsoftware-20site-20sucked-blog-fmeasyweb-with-filemaker-layouts-html-1462761168128