Jump to content

Designing FileMaker

Membres
  • Posts

    47
  • Joined

  • Last visited

    Never

Profile Information

  • Gender
    Non précisé

FileMaker Profile

  • Certif.
    FileMaker 15 Certified Developer

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Designing FileMaker's Achievements

Newbie

Newbie (1/14)

0

Reputation

  1. Are you creating a FileMaker Pro subsummary report? A subsummary layout part is used to sort a set of records into groups based on the values contained in a break field. Typically, you can only create one subsummary part per field on a layout. But what if you need both a leading and trailing subsummary part for the same field on a single report? Well, you can do it, given a little creativity! Use case Let me explain the situation first. I was working on designing a report for a client for their FileMaker solution, formatted as a proposal. It had a very simple structure. There was a Proposal table to hold data such as the proposal name, customer name, and date, and a Proposal Line Items table related by ProposalID to hold the individual items added to the proposal. To produce the report, I had created a list view layout showing records from the context of the Proposal Line Items table, with merge fields placed in a Trailing Grand Summary part displayed at the bottom of the list to display the summary total and monthly amounts. So far, so good. Nothing too complicated here. In Preview mode, It looked something like this: In Layout mode, it looked like this: Adding some complexity After I built this simple report, the client told me that they’d like to be able to add some “optional” items to the proposal as well. The catch was that they didn’t want the optional items to be included in the overall total. Instead, they wanted the regular items to show with a total below them, and then the optional items below that. They also wanted a checkbox next to each optional item, so that the proposal recipient could print out the proposal, manually mark which optional items they wanted, sign the proposal, and scan it back. Here’s how they wanted it to look: Ok…so now it‘s getting interesting. At this point, I didn’t know how I was going to do that yet. I knew that creating a total in the middle of the report was going to be challenging, because of the way FileMaker handles subsummary parts. But since I’m writing this blog post, you can imagine that I eventually found a way! Simple subsummary part display When faced with a difficult problem, I always remind myself, “Solve the simple case first!” So to start, I tackled the regular/optional issue, which was straightforward. I knew I’d be able to use a simple subsummary report to split the regular and optional items from each other. I decided to add a simple checkbox to the entry portal for the line items, so the user could indicate that the item was optional. It was formatted as a number field, where Optional items would have a value of 1 (checkbox on), and regular items would be empty (checkbox off). Note: this is the FileMaker version of a boolean field, where 0 is off/false, and 1 is on/true. The only difference is that in FileMaker, we typically use the values “empty” and “1”. This avoids the extra step of having to fill in a value of 0 in a field when we could just leave it empty and still test for a 1 in cases that are on/true. Going back to my layout, I modified it and added a subsummary part, then chose the “Optional” field as the break field. Then I adjusted the Preview proposal script, to automatically sort the records by the “Optional” field, so that the subsummary part would show when viewed in Preview mode. This successfully split the regular and optional items into two groups. FileMaker subsummary parts sort, group, and display records that have no value first. This is followed by records that do have a value, in numeric order (assuming the break field is formatted as a number field). In this case, we have only two groups: regular items, which have no value in the Optional field; and Optional items, where the Optional field is set to 1. (If we did have records with 0 value, they would be separated, and come after the group of blank records. So a value of “0” in a field is not the same as an “empty” value for sorting purposes.) This is how it looked in Preview after adding the subsummary part: The two groups were now separated. However, it was obvious that simply adding a subsummary part wasn’t enough. I still needed a heading above the optional items so the user can tell the difference between the two groups. But I only wanted the heading to show above the optional items, and not the regular ones. Conditional headings using a hide condition So now I have somewhat veered off the original goal of creating a total in the middle of the report. That part is coming…but first I want to show you how I solved the issue of the heading, because it showcases some other interesting FileMaker features. To sum up the goal here: I wanted to have a heading called “Optional Items” that shows above the optional items, but not the regular ones. I chose to use the feature “Hide object when”, found in the Data/Behavior section of the Inspector palette, to control the visibility of objects. Since the context of the layout is Proposal Line Items, I could test whether the Optional field was “on” or “off” (empty or 1). I used the test not PROPOSAL_ITEM::Optional. In other words, if the item is not marked as optional (i.e. is a regular item), hide the “Optional Items” heading object. Here’s how that looked in Preview mode: Great! Now we have a heading, which only appears above the optional items. But what about that empty space above the regular items? I wanted to get rid of it if possible, since it looks weird. “Resize enclosing part” to the rescue With the heading object selected, I chose “Sliding up based on:” and “All objects above” in the Sliding & Visibility area of the Inspector palette. I also checked the option “Also resize enclosing part”. This feature allows you to dynamically adjust the size of a layout part to accommodate different lengths of text in a field when printing from Preview mode. On the layout, set the field to the maximum height you think will accommodate the field’s longest contents. Then use the “Also resize enclosing part” option to shrink the part down when previewing. This avoids large amounts of wasted space on printed reports, in cases where the user didn’t actually enter a lot of text. Here we only have a small amount of text, but we’re going to use the “resizing part” feature to get rid of the extra space caused by the subsummary part. The hide condition will cause the heading to not appear at all when the layout is viewed in Preview mode. The subsummary part (which contains the heading object) will then be resized to the remaining available space, which in our case is only 1 point. This works well—as long as the heading object’s size almost completely fills the available space inside the subsummary part. As mentioned, remaining empty space above or below the object will still be displayed. Troubleshooting layout parts To demonstrate what I mean, I’ll show you a small trick I use when I’m trying to troubleshoot layout parts. It can be hard to tell one layout part from another in Preview mode. So sometimes I select the part and fill it with a colour to make it obvious which part is being displayed. This makes it really easy to see your subsummary part in Preview mode. As you can see above, there is a bit of yellow showing just above the regular items. That’s because I added some extra space below the heading object, just to demonstrate what happens. Below, I’ve fixed it, and made the subsummary part just one point larger than the “Optional Items” heading object. It makes the part almost completely disappear above the regular items. I played with making the parts exactly the same size as the objects, and got unpredictable results. I think there can be display issues if the boundaries of an object have the exact same coordinates as its enclosing part (i.e. the object exactly overlaps the top and/or bottom edges of the part). For my purposes, I can live with a 1 pt space above the regular items. This is how it looks without the highlighting: More conditional hiding The last issue I wanted to resolve before diving into the totals, is how to show a checkbox next to the optional items. Once again, I used the “Hide object when” condition. The checkbox doesn’t need to be functional, since the end user will be printing this out on paper. I created a copy of the existing Description merge field, and added a button beside it, with an icon of a checkbox attached. After grouping these two objects, I set the hide condition to: not PROPOSAL_ITEM::Optional, the same as the “Optional Items” header. That way, the checkbox will hide on the records displaying regular items (and show on the optional ones). I put the opposite hide condition, Hide object when: PROPOSAL_ITEM::Optional on the original Description merge field (the one we want to show on regular items). This way, either one or the other Description label will show on the corresponding record. Here’s how it looks with both fields visible in layout mode: And here’s how the report looks in Preview, after all these changes: So, we’ve got a report with a subsummary part sorting on the Optional field. We’ve got our optional items showing below our regular items. We’ve got an “Optional Items” heading to differentiate them. We got rid of the blank space above the regular items. And we are showing a checkbox next to the optional items. Yay! By this point, you’re probably wondering when we’re going to get back to the totals. All righty then! Let’s do that now! Showing the totals The last remaining problem is to figure out how to show the totals below the regular items, then followed by the optional items. (The total field is formatted as a Summary field summarizing the Subtotal calculation from each record. The Monthly Amount field is a calculation with the formula GetSummary ( zcn_Total ; Optional ) / 12.) At first, I thought of simply using the subsummary part I had already created, and just expanding it. So I added the trailing total line above the Optional header. I also changed the totals to reference the subsummary fields from the local table, like this: Here’s what it looked like in Preview mode: While the labels are in the right place, the totals are not correct. Since the subsummary part is technically a leading subsummary for the Optional items below it, it shows the totals for the Optional group of records, which is not what we want. I thought about getting the totals from the parent Proposal instead, but that figure includes the Optional items, which we actually want to exclude. I suppose theoretically you might be able to reference a calculation on the Proposal that excludes the optional items through a relationship or something like that, but I didn’t end up trying it. Two subsummaries for the same field As I was considering this problem, it occurred to me that what I really wanted was to have two different subsummary parts for the same break field: a leading subsummary part for the heading, and a trailing subsummary part for the totals for the same group of records. Except that FileMaker only lets you create one subsummary part per field on a given layout…hmmm… This got me thinking about how I could possibly get around this limitation. I suddenly thought, I wonder if you could create a calculated version of the Optional field, and create a second subsummary part, but with the calculated field as the break field? This would effectively give you two subsummary layout parts for the same field. It turns out that you can! (Probably I’m not the first person to think of this…but it was new to me when I made the connection.) So I did just that. I created an unstored calculation field that simply referenced the Optional field: This way, the value of the Optional text field and the Optional calculation field will always be the same. Then, I created a subsummary part below the body part, with the new calculation field as the break field: …and placed the subsummary fields into it. Now, it looked like this in layout mode: The last step was to add the new field to the sort order, so that the second subsummary part would show up when the layout was previewed: And finally…voilà! We have our finished report, with everything in the right place! Conclusion In the end, I was able to provide what the client requested: a nicely formatted report of regular items, followed by a total for just those items, followed by the “Optional Items” heading, and finally the optional items themselves with a checkbox beside them. Sometimes it takes a bit of experimentation to get the results we want. A lot of the time, the solution is not at all clear at the beginning, and we don’t even know if we’ll find a way to do it. I always have to remind myself to work through the problems one at a time. And not to worry too much about whether it will work or not yet, but just keep trying different things along the way. Our creativity kicks in when we’re able to connect two or more pieces of seemingly unrelated knowledge together. But it can involve a lot of trial and error, so if you’re working on something, don’t give up! This solution is also an example of how combining different FileMaker features together helps us get our desired final result. In this case, we used subsummary fields and parts, together with “Hide object when” and the “Also resize layout part” feature to achieve our goals. Hopefully this will help someone in future who’s struggling with their subsummary reports in FileMaker! The post Reporting in FileMaker: How to Make Subsummary Parts Work Hard! appeared first on UI Design for FileMaker Pro Developers. Afficher la totalité du billet
  2. Have you ever needed to create a FileMaker icon from scratch because you can’t find the specific one you need? This post will tell you what you need to know to get you out of your pickle. <<Insert pickle icon here>> It can be hard to find an icon set that has every symbol you need. I use the ones that come pre-loaded with FileMaker, but sometimes I need one that isn’t included in the default set. Since I want all my icons to blend in with each other, I’m left scouring the web to find something that fits in well with my chosen icon style. (There’s nothing that says “sloppy design” quicker than mis-matched icons…but maybe that’s just me.) Finding icons There are a few resources you can use to find icons. First, there’s always a Google search for the name of the symbol, plus the word “icon.” Or you can try searching an icon website such as Icon Finder, Icon Scout, or The Noun Project for your specific symbol. (These search results will also let you know if you’re onto the correct symbol for what you’re trying to represent.) Be sure to check the licensing terms before you use any icon from the Web in your own work. Some icons are free or open-source (such as those from Material Design Icons), but others are for sale and/or have attribution requirements. It might be easiest for you to simply pay to get the icons you want. Given the skill, time, and effort that goes into creating an icon—and especially a comprehensive set of icons in a style you like—it can certainly save you oodles of time (read: money). You can try Streamline icons which are well worth the modest price. When you buy a set, you can be totally confident that they’ll blend seamlessly in your app. Even so, you still might not find an icon in the exact style you want. Or you might not want to pay for a whole set just to get the one icon you need. Something I’ve been doing lately is drawing my own in SVG format. And, for some simple but perhaps hard-to-find icons, you can too. SVG what? SVG stands for Scalable Vector Graphics format. FileMaker introduced support for SVG-formatted icons in FileMaker 14. It’s different from other graphics formats because instead of an image file, an SVG file consists of XML text that tells FileMaker how to draw the icon at any size or screen resolution. It means you can resize an icon in this format without losing any crispness on screen. And because it’s XML, SVG files are also considerably smaller than other graphics formats. SVG format also gives you the added ability to set the colour of an icon based on the results of a calculation, using Conditional Formatting. This is incredibly useful if you’d like to show a different icon colour for an “active” vs. “disabled” button, for instance, based on certain data or conditions. To make this work, you need to modify the text of the SVG file slightly, and add the class “fm_fill” wherever you see the fill colour specified. (Instructions below.) Creating your own icon So, back to creating your own icon. I’m far from an SVG expert, but I have learned enough about it to successfully create icons for use in FileMaker, and I’m sure you can, too. I’m only going to focus on the practical steps for this post, and skip all the theory. I’m using Sketch 49.3 (Mac only) for this demo. (Windows users, you may be able to adapt these instructions to Inkscape.) The end goal is to create an SVG file you can import as an icon in FileMaker. As an example, I’m going to show you how to draw a simple flag icon in Sketch, and then convert it for use in FileMaker. It consists of two shapes, the “flagpole” and the “flag.” A note about Sketch: You can begin drawing directly on the canvas without creating an Artboard, but it’s easier to judge the scale of what you’re drawing by creating an Artboard first. Especially if you end up drawing a series of icons, it’s easier to compare them if they are on their own individual Artboards. 1. Setting up the Artboard: Create a new document in Sketch and select Insert > Artboard. 2. Click “Create Custom Size,” found at the bottom of the Inspector panel on the right. 3. Name the Custom Preset and enter 16px x 16px for the size. Click Save. 4. In the Inspector panel, make sure “Custom” from the dropdown selector of Artboard sizes is selected. 5. Select your custom preset as the size for the Artboard. Sketch creates the Artboard where you can now draw your icon. 2. Drawing the icon: Zoom in on the Artboard so you can see it better. 2. Insert a rounded rectangle Shape to create the “flagpole”. 3. Make the size 1px x 14px. 4. Remove the border attribute and make sure there is a fill attribute. Move the shape closer to the middle of the Artboard. 5. Insert a Vector. 6. Create the first point of your triangle “flag” by clicking on the empty Artboard to the right of the first shape. While holding down the shift key, click again at about the horizontal midpoint of the first shape. Click once more, up and to the right, to form the apex of the triangle, and then click your starting point again to close the shape. 7. With the triangle selected, remove any border attributes and make sure there is a fill attribute. 8. Using the Inspector, move the flagpole .5px closer to the flag. Adjust the size of the triangle to make it look more like a flag, if necessary. You now have an icon ready to be saved as an SVG file. You can save the Sketch file at this point if you like, and continue to add Artboards and icons to it as many times as you like. Making a FileMaker-compatible SVG icon The process to make an SVG icon fully compatible with FileMaker features is the same whether you draw the icon in Sketch yourself, or purchase an icon set that you open in Sketch. (I was able to open an EPS file containing a set of icons in Sketch, and then create SVG icons for use in FileMaker using this method. Note that Sketch can’t open AI files except as a single flattened layer.) 3. Creating the SVG file: Select both shapes and right-click or Control-click to select “Copy SVG Code”. 2. Create a new Text Edit document and paste the copied text into it. 3. Locate the “fill” tag containing the hex code for the fill colour. 4. Next to this, insert a space, and then paste the following text: class=”fm_fill” (If you don’t type a space, your document won’t save properly.) Save your file and make sure to use the “.svg” extension at the end of the filename. TextEdit may warn you about this, but go ahead and save it anyway. (Note that if you want to open this file again later to edit it, you’ll have to either go to TextEdit and use File > Open, or right-click the file in the Finder, select Open With…Other and then locate the TextEdit app. If you simply double-click on the file in the Finder, it will open in Sketch.) A note about adding the class=“fm_fill”. If you don’t add this, you’ll still be able to save the icon as SVG format, and import it into FileMaker. However, you won’t be able to change the icon fill colour—it will retain whatever fill colour it originally had in your Sketch file. FileMaker likewise won’t be able to change the icon fill colour using Conditional Formatting. 4. Importing the icon into FileMaker: In FileMaker, draw a button and double-click to bring up the Button Setup panel. Select the icon setup you want and click to add a new icon. 2. Select your SVG icon file from your computer, and the icon will automatically update. Change the icon size if you wish. 3. You can change the icon colour using the Inspector panel. 4. If you wish, you can enter a calculation in the conditional formatting dialog to change the colour of the icon under certain circumstances. That’s it. Phew! It might seem like a lot, but once you get the hang of it, it goes pretty quickly. This is everything I wish I’d known when starting out with creating SVG icons. Perhaps now you’ll be inspired to create your own! Bonus: You can take a Material SVG icon, open it in Sketch (double-click on Mac), and make the same alterations as above to make the fill responsive in FileMaker. Just make sure you copy only the icon shapes, and there are no other invisible artifacts present when you copy the icon, such as a masking rectangle. You can see these in the layers palette. Select the mask and delete it if present. Links: SVG Wikipedia page: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics W3 Schools SVG Tutorial: https://www.w3schools.com/graphics/svg_intro.asp FileMaker SVG Grammar for Buttons: https://fmhelp.filemaker.com/docs/edition/en/svg/ About Sketch Artboards: https://www.sketchapp.com/docs/grouping/artboards/ SVG 2 Language Reference: https://svgwg.org/svg2-draft/Overview.html Grouping the “g” element: https://svgwg.org/svg2-draft/struct.html#TermContainerElement Afficher la totalité du billet
  3. Have you ever needed to create a FileMaker icon from scratch because you can’t find the specific one you need? This post will tell you what you need to know to get you out of your pickle. <<Insert pickle icon here>> It can be hard to find an icon set that has every symbol you need. I use the ones that come pre-loaded with FileMaker, but sometimes I need one that isn’t included in the default set. Since I want all my icons to blend in with each other, I’m left scouring the web to find something that fits in well with my chosen icon style. (There’s nothing that says “sloppy design” quicker than mis-matched icons…but maybe that’s just me.) Finding icons There are a few resources you can use to find icons. First, there’s always a Google search for the name of the symbol, plus the word “icon.” Or you can try searching an icon website such as Icon Finder, Icon Scout, or The Noun Project for your specific symbol. (These search results will also let you know if you’re onto the correct symbol for what you’re trying to represent.) Be sure to check the licensing terms before you use any icon from the Web in your own work. Some icons are free or open-source (such as those from Material Design Icons), but others are for sale and/or have attribution requirements. It might be easiest for you to simply pay to get the icons you want. Given the skill, time, and effort that goes into creating an icon—and especially a comprehensive set of icons in a style you like—it can certainly save you oodles of time (read: money). You can try Streamline icons which are well worth the modest price. When you buy a set, you can be totally confident that they’ll blend seamlessly in your app. Even so, you still might not find an icon in the exact style you want. Or you might not want to pay for a whole set just to get the one icon you need. Something I’ve been doing lately is drawing my own in SVG format. And, for some simple but perhaps hard-to-find icons, you can too. SVG what? SVG stands for Scalable Vector Graphics format. FileMaker introduced support for SVG-formatted icons in FileMaker 14. It’s different from other graphics formats because instead of an image file, an SVG file consists of XML text that tells FileMaker how to draw the icon at any size or screen resolution. It means you can resize an icon in this format without losing any crispness on screen. And because it’s XML, SVG files are also considerably smaller than other graphics formats. SVG format also gives you the added ability to set the colour of an icon based on the results of a calculation, using Conditional Formatting. This is incredibly useful if you’d like to show a different icon colour for an “active” vs. “disabled” button, for instance, based on certain data or conditions. To make this work, you need to modify the text of the SVG file slightly, and add the class “fm_fill” wherever you see the fill colour specified. (Instructions below.) Creating your own icon So, back to creating your own icon. I’m far from an SVG expert, but I have learned enough about it to successfully create icons for use in FileMaker, and I’m sure you can, too. I’m only going to focus on the practical steps for this post, and skip all the theory. I’m using Sketch 49.3 (Mac only) for this demo. (Windows users, you may be able to adapt these instructions to Inkscape.) The end goal is to create an SVG file you can import as an icon in FileMaker. As an example, I’m going to show you how to draw a simple flag icon in Sketch, and then convert it for use in FileMaker. It consists of two shapes, the “flagpole” and the “flag.” A note about Sketch: You can begin drawing directly on the canvas without creating an Artboard, but it’s easier to judge the scale of what you’re drawing by creating an Artboard first. Especially if you end up drawing a series of icons, it’s easier to compare them if they are on their own individual Artboards. 1. Setting up the Artboard: Create a new document in Sketch and select Insert > Artboard. 2. Click “Create Custom Size,” found at the bottom of the Inspector panel on the right. 3. Name the Custom Preset and enter 16px x 16px for the size. Click Save. 4. In the Inspector panel, make sure “Custom” from the dropdown selector of Artboard sizes is selected. 5. Select your custom preset as the size for the Artboard. Sketch creates the Artboard where you can now draw your icon. 2. Drawing the icon: Zoom in on the Artboard so you can see it better. 2. Insert a rounded rectangle Shape to create the “flagpole”. 3. Make the size 1px x 14px. 4. Remove the border attribute and make sure there is a fill attribute. Move the shape closer to the middle of the Artboard. 5. Insert a Vector. 6. Create the first point of your triangle “flag” by clicking on the empty Artboard to the right of the first shape. While holding down the shift key, click again at about the horizontal midpoint of the first shape. Click once more, up and to the right, to form the apex of the triangle, and then click your starting point again to close the shape. 7. With the triangle selected, remove any border attributes and make sure there is a fill attribute. 8. Using the Inspector, move the flagpole .5px closer to the flag. Adjust the size of the triangle to make it look more like a flag, if necessary. You now have an icon ready to be saved as an SVG file. You can save the Sketch file at this point if you like, and continue to add Artboards and icons to it as many times as you like. Making a FileMaker-compatible SVG icon The process to make an SVG icon fully compatible with FileMaker features is the same whether you draw the icon in Sketch yourself, or purchase an icon set that you open in Sketch. (I was able to open an EPS file containing a set of icons in Sketch, and then create SVG icons for use in FileMaker using this method. Note that Sketch can’t open AI files except as a single flattened layer.) 3. Creating the SVG file: Select both shapes and right-click or Control-click to select “Copy SVG Code”. 2. Create a new Text Edit document and paste the copied text into it. 3. Locate the “fill” tag containing the hex code for the fill colour. 4. Next to this, insert a space, and then paste the following text: class=”fm_fill” (If you don’t type a space, your document won’t save properly.) Save your file and make sure to use the “.svg” extension at the end of the filename. TextEdit may warn you about this, but go ahead and save it anyway. (Note that if you want to open this file again later to edit it, you’ll have to either go to TextEdit and use File > Open, or right-click the file in the Finder, select Open With…Other and then locate the TextEdit app. If you simply double-click on the file in the Finder, it will open in Sketch.) A note about adding the class=“fm_fill”. If you don’t add this, you’ll still be able to save the icon as SVG format, and import it into FileMaker. However, you won’t be able to change the icon fill colour—it will retain whatever fill colour it originally had in your Sketch file. FileMaker likewise won’t be able to change the icon fill colour using Conditional Formatting. 4. Importing the icon into FileMaker: In FileMaker, draw a button and double-click to bring up the Button Setup panel. Select the icon setup you want and click to add a new icon. 2. Select your SVG icon file from your computer, and the icon will automatically update. Change the icon size if you wish. 3. You can change the icon colour using the Inspector panel. 4. If you wish, you can enter a calculation in the conditional formatting dialog to change the colour of the icon under certain circumstances. That’s it. Phew! It might seem like a lot, but once you get the hang of it, it goes pretty quickly. This is everything I wish I’d known when starting out with creating SVG icons. Perhaps now you’ll be inspired to create your own! Bonus: You can take a Material SVG icon, open it in Sketch (double-click on Mac), and make the same alterations as above to make the fill responsive in FileMaker. Just make sure you copy only the icon shapes, and there are no other invisible artifacts present when you copy the icon, such as a masking rectangle. You can see these in the layers palette. Select the mask and delete it if present. Links: SVG Wikipedia page: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics W3 Schools SVG Tutorial: https://www.w3schools.com/graphics/svg_intro.asp FileMaker SVG Grammar for Buttons: https://fmhelp.filemaker.com/docs/edition/en/svg/ About Sketch Artboards: https://www.sketchapp.com/docs/grouping/artboards/ SVG 2 Language Reference: https://svgwg.org/svg2-draft/Overview.html Grouping the “g” element: https://svgwg.org/svg2-draft/struct.html#TermContainerElement Afficher la totalité du billet
  4. Have you ever needed to create a FileMaker SVG icon from scratch because you can’t find the specific one you need? This post will tell you what you need to know to get you out of your pickle. <<Insert pickle icon here>> It can be hard to find an icon set that has every symbol you need. I use the ones that come pre-loaded with FileMaker, but sometimes I need one that isn’t included in the default set. Since I want all my icons to blend in with each other, I’m left scouring the web to find something that fits in well with my chosen icon style. (There’s nothing that says “sloppy design” quicker than mis-matched icons…but maybe that’s just me.) Finding icons There are a few resources you can use to find icons. First, there’s always a Google search for the name of the symbol, plus the word “icon.” Or you can try searching an icon website such as Icon Finder, Icon Scout, or The Noun Project for your specific symbol. (These search results will also let you know if you’re onto the correct symbol for what you’re trying to represent.) Be sure to check the licensing terms before you use any icon from the Web in your own work. Some icons are free or open-source (such as those from Material Design Icons), but others are for sale and/or have attribution requirements. It might be easiest for you to simply pay to get the icons you want. Given the skill, time, and effort that goes into creating an icon—and especially a comprehensive set of icons in a style you like—it can certainly save you oodles of time (read: money). You can try Streamline icons which are well worth the modest price. When you buy a set, you can be totally confident that they’ll blend seamlessly in your app. Even so, you still might not find an icon in the exact style you want. Or you might not want to pay for a whole set just to get the one icon you need. Something I’ve been doing lately is drawing my own in SVG format. And, for some simple but perhaps hard-to-find icons, you can too. SVG what? SVG stands for Scalable Vector Graphics format. FileMaker introduced support for SVG-formatted icons in FileMaker 14. It’s different from other graphics formats because instead of an image file, an SVG file consists of XML text that tells FileMaker how to draw the icon at any size or screen resolution. It means you can resize an icon in this format without losing any crispness on screen. And because it’s XML, SVG files are also considerably smaller than other graphics formats. SVG format also gives you the added ability to set the colour of an icon based on the results of a calculation, using Conditional Formatting. This is incredibly useful if you’d like to show a different icon colour for an “active” vs. “disabled” button, for instance, based on certain data or conditions. To make this work, you need to modify the text of the SVG file slightly, and add the class “fm_fill” wherever you see the fill colour specified. (Instructions below.) Creating your own icon So, back to creating your own icon. I’m far from an SVG expert, but I have learned enough about it to successfully create icons for use in FileMaker, and I’m sure you can, too. I’m only going to focus on the practical steps for this post, and skip all the theory. I’m using Sketch 49.3 (Mac only) for this demo. (Windows users, you may be able to adapt these instructions to Inkscape.) The end goal is to create an SVG file you can import as an icon in FileMaker. As an example, I’m going to show you how to draw a simple flag icon in Sketch, and then convert it for use in FileMaker. It consists of two shapes, the “flagpole” and the “flag.” A note about Sketch: You can begin drawing directly on the canvas without creating an Artboard, but it’s easier to judge the scale of what you’re drawing by creating an Artboard first. Especially if you end up drawing a series of icons, it’s easier to compare them if they are on their own individual Artboards. 1. Setting up the Artboard: Create a new document in Sketch and select Insert > Artboard.2. Click “Create Custom Size,” found at the bottom of the Inspector panel on the right. 3. Name the Custom Preset and enter 16px x 16px for the size. Click Save. 4. In the Inspector panel, make sure “Custom” from the dropdown selector of Artboard sizes is selected. 5. Select your custom preset as the size for the Artboard. Sketch creates the Artboard where you can now draw your icon. 2. Drawing the icon: Zoom in on the Artboard so you can see it better. 2. Insert a rounded rectangle Shape to create the “flagpole”. 3. Make the size 1px x 14px. 4. Remove the border attribute and make sure there is a fill attribute. Move the shape closer to the middle of the Artboard. 5. Insert a Vector. 6. Create the first point of your triangle “flag” by clicking on the empty Artboard to the right of the first shape. While holding down the shift key, click again at about the horizontal midpoint of the first shape. Click once more, up and to the right, to form the apex of the triangle, and then click your starting point again to close the shape. 7. With the triangle selected, remove any border attributes and make sure there is a fill attribute. 8. Using the Inspector, move the flagpole .5px closer to the flag. Adjust the size of the triangle to make it look more like a flag, if necessary. You now have an icon ready to be saved as an SVG file. You can save the Sketch file at this point if you like, and continue to add Artboards and icons to it as many times as you like. Making a FileMaker-compatible SVG icon The process to make an SVG icon fully compatible with FileMaker features is the same whether you draw the icon in Sketch yourself, or purchase an icon set that you open in Sketch. (I was able to open an EPS file containing a set of icons in Sketch, and then create SVG icons for use in FileMaker using this method. Note that Sketch can’t open AI files except as a single flattened layer.) 3. Creating the SVG file: Select both shapes and right-click or Control-click to select “Copy SVG Code”. 2. Create a new Text Edit document and paste the copied text into it. 3. Locate the “fill” tag containing the hex code for the fill colour. 4. Next to this, insert a space, and then paste the following text: class=”fm_fill” (If you don’t type a space, your document won’t save properly.) Save your file and make sure to use the “.svg” extension at the end of the filename. TextEdit may warn you about this, but go ahead and save it anyway. (Note that if you want to open this file again later to edit it, you’ll have to either go to TextEdit and use File > Open, or right-click the file in the Finder, select Open With…Other and then locate the TextEdit app. If you simply double-click on the file in the Finder, it will open in Sketch.) A note about adding the class=“fm_fill”. If you don’t add this, you’ll still be able to save the icon as SVG format, and import it into FileMaker. However, you won’t be able to change the icon fill colour—it will retain whatever fill colour it originally had in your Sketch file. FileMaker likewise won’t be able to change the icon fill colour using Conditional Formatting. 4. Importing the icon into FileMaker: In FileMaker, draw a button and double-click to bring up the Button Setup panel. Select the icon setup you want and click to add a new icon. 2. Select your SVG icon file from your computer, and the icon will automatically update. Change the icon size if you wish. 3. You can change the icon colour using the Inspector panel. 4. If you wish, you can enter a calculation in the conditional formatting dialog to change the colour of the icon under certain circumstances. That’s it. Phew! It might seem like a lot, but once you get the hang of it, it goes pretty quickly. This is everything I wish I’d known when starting out with creating SVG icons. Perhaps now you’ll be inspired to create your own! Bonus: You can take a Material SVG icon, open it in Sketch (double-click on Mac), and make the same alterations as above to make the fill responsive in FileMaker. Just make sure you copy only the icon shapes, and there are no other invisible artifacts present when you copy the icon, such as a masking rectangle. You can see these in the layers palette. Select the mask and delete it if present. Links: SVG Wikipedia page: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics W3 Schools SVG Tutorial: https://www.w3schools.com/graphics/svg_intro.asp FileMaker SVG Grammar for Buttons: https://fmhelp.filemaker.com/docs/edition/en/svg/ About Sketch Artboards: https://www.sketchapp.com/docs/grouping/artboards/ SVG 2 Language Reference: https://svgwg.org/svg2-draft/Overview.html Grouping the “g” element: https://svgwg.org/svg2-draft/struct.html#TermContainerElement The post Creating SVG icons for FileMaker appeared first on UI Design for FileMaker Pro Developers. Afficher la totalité du billet
  5. Have you ever needed to create a FileMaker icon from scratch because you can’t find the specific one you need? This post will tell you what you need to know to get you out of your pickle. <<Insert pickle icon here>> It can be hard to find an icon set that has every symbol you need. I use the ones that come pre-loaded with FileMaker, but sometimes I need one that isn’t included in the default set. Since I want all my icons to blend in with each other, I’m left scouring the web to find something that fits in well with my chosen icon style. (There’s nothing that says “sloppy design” quicker than mis-matched icons…but maybe that’s just me.) Finding icons There are a few resources you can use to find icons. First, there’s always a Google search for the name of the symbol, plus the word “icon.” Or you can try searching an icon website such as Icon Finder, Icon Scout, or The Noun Project for your specific symbol. (These search results will also let you know if you’re onto the correct symbol for what you’re trying to represent.) Be sure to check the licensing terms before you use any icon from the Web in your own work. Some icons are free or open-source (such as those from Material Design Icons), but others are for sale and/or have attribution requirements. It might be easiest for you to simply pay to get the icons you want. Given the skill, time, and effort that goes into creating an icon—and especially a comprehensive set of icons in a style you like—it can certainly save you oodles of time (read: money). You can try Streamline icons which are well worth the modest price. When you buy a set, you can be totally confident that they’ll blend seamlessly in your app. Even so, you still might not find an icon in the exact style you want. Or you might not want to pay for a whole set just to get the one icon you need. Something I’ve been doing lately is drawing my own in SVG format. And, for some simple but perhaps hard-to-find icons, you can too. SVG what? SVG stands for Scalable Vector Graphics format. FileMaker introduced support for SVG-formatted icons in FileMaker 14. It’s different from other graphics formats because instead of an image file, an SVG file consists of XML text that tells FileMaker how to draw the icon at any size or screen resolution. It means you can resize an icon in this format without losing any crispness on screen. And because it’s XML, SVG files are also considerably smaller than other graphics formats. SVG format also gives you the added ability to set the colour of an icon based on the results of a calculation, using Conditional Formatting. This is incredibly useful if you’d like to show a different icon colour for an “active” vs. “disabled” button, for instance, based on certain data or conditions. To make this work, you need to modify the text of the SVG file slightly, and add the class “fm_fill” wherever you see the fill colour specified. (Instructions below.) Creating your own icon So, back to creating your own icon. I’m far from an SVG expert, but I have learned enough about it to successfully create icons for use in FileMaker, and I’m sure you can, too. I’m only going to focus on the practical steps for this post, and skip all the theory. I’m using Sketch 49.3 (Mac only) for this demo. (Windows users, you may be able to adapt these instructions to Inkscape.) The end goal is to create an SVG file you can import as an icon in FileMaker. As an example, I’m going to show you how to draw a simple flag icon in Sketch, and then convert it for use in FileMaker. It consists of two shapes, the “flagpole” and the “flag.” A note about Sketch: You can begin drawing directly on the canvas without creating an Artboard, but it’s easier to judge the scale of what you’re drawing by creating an Artboard first. Especially if you end up drawing a series of icons, it’s easier to compare them if they are on their own individual Artboards. 1. Setting up the Artboard: Create a new document in Sketch and select Insert > Artboard. 2. Click “Create Custom Size,” found at the bottom of the Inspector panel on the right. 3. Name the Custom Preset and enter 16px x 16px for the size. Click Save. 4. In the Inspector panel, make sure “Custom” from the dropdown selector of Artboard sizes is selected. 5. Select your custom preset as the size for the Artboard. Sketch creates the Artboard where you can now draw your icon. 2. Drawing the icon: Zoom in on the Artboard so you can see it better. 2. Insert a rounded rectangle Shape to create the “flagpole”. 3. Make the size 1px x 14px. 4. Remove the border attribute and make sure there is a fill attribute. Move the shape closer to the middle of the Artboard. 5. Insert a Vector. 6. Create the first point of your triangle “flag” by clicking on the empty Artboard to the right of the first shape. While holding down the shift key, click again at about the horizontal midpoint of the first shape. Click once more, up and to the right, to form the apex of the triangle, and then click your starting point again to close the shape. 7. With the triangle selected, remove any border attributes and make sure there is a fill attribute. 8. Using the Inspector, move the flagpole .5px closer to the flag. Adjust the size of the triangle to make it look more like a flag, if necessary. You now have an icon ready to be saved as an SVG file. You can save the Sketch file at this point if you like, and continue to add Artboards and icons to it as many times as you like. Making a FileMaker-compatible SVG icon The process to make an SVG icon fully compatible with FileMaker features is the same whether you draw the icon in Sketch yourself, or purchase an icon set that you open in Sketch. (I was able to open an EPS file containing a set of icons in Sketch, and then create SVG icons for use in FileMaker using this method. Note that Sketch can’t open AI files except as a single flattened layer.) 3. Creating the SVG file: Select both shapes and right-click or Control-click to select “Copy SVG Code”. 2. Create a new Text Edit document and paste the copied text into it. 3. Locate the “fill” tag containing the hex code for the fill colour. 4. Next to this, insert a space, and then paste the following text: class=”fm_fill” (If you don’t type a space, your document won’t save properly.) Save your file and make sure to use the “.svg” extension at the end of the filename. TextEdit may warn you about this, but go ahead and save it anyway. (Note that if you want to open this file again later to edit it, you’ll have to either go to TextEdit and use File > Open, or right-click the file in the Finder, select Open With…Other and then locate the TextEdit app. If you simply double-click on the file in the Finder, it will open in Sketch.) A note about adding the class=“fm_fill”. If you don’t add this, you’ll still be able to save the icon as SVG format, and import it into FileMaker. However, you won’t be able to change the icon fill colour—it will retain whatever fill colour it originally had in your Sketch file. FileMaker likewise won’t be able to change the icon fill colour using Conditional Formatting. 4. Importing the icon into FileMaker: In FileMaker, draw a button and double-click to bring up the Button Setup panel. Select the icon setup you want and click to add a new icon. 2. Select your SVG icon file from your computer, and the icon will automatically update. Change the icon size if you wish. 3. You can change the icon colour using the Inspector panel. 4. If you wish, you can enter a calculation in the conditional formatting dialog to change the colour of the icon under certain circumstances. That’s it. Phew! It might seem like a lot, but once you get the hang of it, it goes pretty quickly. This is everything I wish I’d known when starting out with creating SVG icons. Perhaps now you’ll be inspired to create your own! Bonus: You can take a Material SVG icon, open it in Sketch (double-click on Mac), and make the same alterations as above to make the fill responsive in FileMaker. Just make sure you copy only the icon shapes, and there are no other invisible artifacts present when you copy the icon, such as a masking rectangle. You can see these in the layers palette. Select the mask and delete it if present. Links: SVG Wikipedia page: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics W3 Schools SVG Tutorial: https://www.w3schools.com/graphics/svg_intro.asp FileMaker SVG Grammar for Buttons: https://fmhelp.filemaker.com/docs/edition/en/svg/ About Sketch Artboards: https://www.sketchapp.com/docs/grouping/artboards/ SVG 2 Language Reference: https://svgwg.org/svg2-draft/Overview.html Grouping the “g” element: https://svgwg.org/svg2-draft/struct.html#TermContainerElement Afficher la totalité du billet
  6. Previously, I wrote about how to convert your solution away from the Classic theme. In this part, I discuss five FileMaker 14-exclusive changes you might want to make while updating your solution. These interface features will add professionalism, usability, and—dare I say?— “glory” to your solutions. Read Part 1 Now that you’ve decided to update your layouts to a modern theme in FileMaker, there are a few things you might want to do at the same time, that don’t require any major changes to your layouts. Since you’re already touching every layout in your solution, why not take advantage of some of the new features in FileMaker 14? It makes sense to get the most bang for your buck. Here are…drumroll please…Five Things New in FileMaker 14 That Will Improve Your Interfaces (in no particular order): 1. Hidden Scroll Bars Readers of this blog know I like scrollbars! I’ve written about them before, probably because they can be one of the most distinctive elements of a layout, and in FileMaker there is very little about scrollbars that can be styled. So choosing the look of the scrollbars is a major portion of deciding on a new theme. And no other theme’s scrollbar is exactly like the Classic scrollbar style. So finding something to replace it with is a bit of a challenge. Here is the layout after switching from Classic to a custom theme based on Cool: Well, instead of styling the scrollbar, how about hiding it altogether? This new feature is an option on fields and portals, and allows you to only show a scrollbar slider when the user’s cursor is actually scrolling. It’s the same way that scrolling works inside the FileMaker window itself—you only see a scrollbar slider when you activate the scroll wheel or perform a scrolling gesture on the mouse. This is the standard way scrolling is done on the Mac, in fact. Limitation: Make sure that users have scrolling capability on their mice, or this feature won’t work. 2. Button Bar The new button bar object is awesome! Buttons are one of the most complex objects to style, with all the different parts and states they can have. The button bar drastically cuts down on the number of objects you need to deal with across potentially many layouts, and can even be conditionally or dynamically populated if you want. (Here’s an article from Digital Fusion describing how to create an abstracted navigation system using the button bar object.) Now, rather than managing a row of individual button objects when creating a navigation bar, for instance, you can use a button bar instead. A single object can take the place of five or six separate objects. Be sure to go through all the button bar parts and states and make sure they are set how you want—There are a lot of them and the format painter transfers hardly any styles from a button object to a button bar object. There may be inactive, in focus and hover states inherited from the theme that you probably will want to change to match the previous behaviour, so you’ll have to do some work setting up the first button bar. You can also mix a button bar with a regular button. In these examples, the Menu button is its own button, placed beside the button bar. Limitation: You can dynamically set a button label, but you can’t conditionally specify an icon. Also, all the buttons in the button bar get the same width, no matter how long or short their label might be. So you have to set the button width to accommodate the longest button label, including some white space on either side. This might mean that short labels (such as the “Print” button below) end up with more space than before. So make sure you are okay with buttons possibly being more spread out, and have the space for them if you switch out individual buttons for the button bar. 3. Top Navigation Part The new top header navigation part keeps the most important objects (like primary navigation) accessible at the top, where users need it most. It helps prevent users from getting lost, and provides them a quick way of getting around with a minimum of window scrolling. Don’t forget to check the style for the top navigation part, it may have a fill or border that you may want to change or remove to match your layout. Limitation: Any background colour you set for a top navigation part stretches across the whole layout, even the inactive part (seen when the user stretches the window to the right). However, when objects on it are anchored to the top and left, the body background colour ends at the edge of the active part of the layout. When you pull the body part down with the mouse, a gray (or default layout background-coloured) gap opens up between the top navigation and the body part. You can mitigate this by anchoring objects in the header to stretch between the left and right edges of the window. Or, create a rectangle the exact size of your top navigation part and send it to the back, and then remove any background fill colour on the top navigation part. This way, your top navigation will appear to end at the edge of the layout when objects are anchored to the top left, just like the body part. White rectangle is placed at the back of the top navigation part One final alternative is to anchor the body objects to the middle. In this case, the white body background fills the screen and no “inactive” colour is seen. Body objects are anchored to the center of the layout 4. Placeholder Text Who hasn’t wanted to dispense with field labels at times, especially on obvious fields, such as addresses? The user needs a text label to guide them when they’re entering data, but once a record has been filled out, it’s clear where the Street Name, City, Prov/State, and Zip Code should go. You don’t really need to devote layout space to them forever and ever. And yet, creating inline placeholder text has been too much work to maintain in the past, so I often didn’t bother with it, except when really necessary. Now, placeholder text is an option on the field itself. You can have field descriptors show up inside an empty field without creating a separate text object. You can even set this text dynamically by calculation if you want. Placeholder text is also helpful in cases where you want to guide the user to a field, without cluttering the layout with field borders, which can be distracting when there is a lot of data. Placeholder text subtly cues the user to the text entry location, without disrupting the layout once all the data has been entered. Limitation: Don’t do away with field labels completely. You’ll still likely need some field labels under certain circumstances, such as multiple phone numbers (e.g. home, office, mobile), or numerical data which needs to be identified to be understood. 5. Custom Theme Colours This is such a useful update to the colour palette! You can now drag a colour to the theme colours grid, located directly below the hex picker colour swatch. FileMaker will store the colour, and automatically create both a lighter and darker shade. This is a super easy way to create a range of hues to represent different button states (e.g. lighter on hover, darker when pressed) with literally the click of a button. You can reorder the colours by dragging the swatches around the colour grid. Limitation: You can’t directly remove a colour from the colour grid. You can replace an existing colour by dragging a new colour onto it, or you can drag white onto it to “clear” it (although you’ll get gray as the top colour as a result). Conclusion Using or implementing one or more of these new features will definitely improve your solutions and make them more usable and polished. Whether they’ll make them glorious or not—well, that will be up to you! Resources New in 14: Hidden scroll bar feature https://community.filemaker.com/docs/DOC-6266 Button bar https://community.filemaker.com/docs/DOC-6263 Navigation parts https://community.filemaker.com/docs/DOC-6262 Placeholder text https://community.filemaker.com/docs/DOC-6265 Custom theme colours http://help.filemaker.com/app/answers/detail/a_id/14417 Afficher la totalité du billet
  7. Previously, I wrote about how to convert your solution away from the Classic theme. In this part, I discuss five FileMaker 14-exclusive changes you might want to make while updating your solution. These interface features will add professionalism, usability, and—dare I say?— “glory” to your solutions. Read Part 1 Now that you’ve decided to update your layouts to a modern theme in FileMaker, there are a few things you might want to do at the same time, that don’t require any major changes to your layouts. Since you’re already touching every layout in your solution, why not take advantage of some of the new features in FileMaker 14? It makes sense to get the most bang for your buck. Here are…drumroll please…Five Things New in FileMaker 14 That Will Improve Your Interfaces (in no particular order): 1. Hidden Scroll Bars Readers of this blog know I like scrollbars! I’ve written about them before, probably because they can be one of the most distinctive elements of a layout, and in FileMaker there is very little about scrollbars that can be styled. So choosing the look of the scrollbars is a major portion of deciding on a new theme. And no other theme’s scrollbar is exactly like the Classic scrollbar style. So finding something to replace it with is a bit of a challenge. Here is the layout after switching from Classic to a custom theme based on Cool: Well, instead of styling the scrollbar, how about hiding it altogether? This new feature is an option on fields and portals, and allows you to only show a scrollbar slider when the user’s cursor is actually scrolling. It’s the same way that scrolling works inside the FileMaker window itself—you only see a scrollbar slider when you activate the scroll wheel or perform a scrolling gesture on the mouse. This is the standard way scrolling is done on the Mac, in fact. Limitation: Make sure that users have scrolling capability on their mice, or this feature won’t work. 2. Button Bar The new button bar object is awesome! Buttons are one of the most complex objects to style, with all the different parts and states they can have. The button bar drastically cuts down on the number of objects you need to deal with across potentially many layouts, and can even be conditionally or dynamically populated if you want. (Here’s an article from Digital Fusion describing how to create an abstracted navigation system using the button bar object.) Now, rather than managing a row of individual button objects when creating a navigation bar, for instance, you can use a button bar instead. A single object can take the place of five or six separate objects. Be sure to go through all the button bar parts and states and make sure they are set how you want—There are a lot of them and the format painter transfers hardly any styles from a button object to a button bar object. There may be inactive, in focus and hover states inherited from the theme that you probably will want to change to match the previous behaviour, so you’ll have to do some work setting up the first button bar. You can also mix a button bar with a regular button. In these examples, the Menu button is its own button, placed beside the button bar. Limitation: You can dynamically set a button label, but you can’t conditionally specify an icon. Also, all the buttons in the button bar get the same width, no matter how long or short their label might be. So you have to set the button width to accommodate the longest button label, including some white space on either side. This might mean that short labels (such as the “Print” button below) end up with more space than before. So make sure you are okay with buttons possibly being more spread out, and have the space for them if you switch out individual buttons for the button bar. 3. Top Navigation Part The new top header navigation part keeps the most important objects (like primary navigation) accessible at the top, where users need it most. It helps prevent users from getting lost, and provides them a quick way of getting around with a minimum of window scrolling. Don’t forget to check the style for the top navigation part, it may have a fill or border that you may want to change or remove to match your layout. Limitation: Any background colour you set for a top navigation part stretches across the whole layout, even the inactive part (seen when the user stretches the window to the right). However, when objects on it are anchored to the top and left, the body background colour ends at the edge of the active part of the layout. When you pull the body part down with the mouse, a gray (or default layout background-coloured) gap opens up between the top navigation and the body part. You can mitigate this by anchoring objects in the header to stretch between the left and right edges of the window. Or, create a rectangle the exact size of your top navigation part and send it to the back, and then remove any background fill colour on the top navigation part. This way, your top navigation will appear to end at the edge of the layout when objects are anchored to the top left, just like the body part. White rectangle is placed at the back of the top navigation part One final alternative is to anchor the body objects to the middle. In this case, the white body background fills the screen and no “inactive” colour is seen. Body objects are anchored to the center of the layout 4. Placeholder Text Who hasn’t wanted to dispense with field labels at times, especially on obvious fields, such as addresses? The user needs a text label to guide them when they’re entering data, but once a record has been filled out, it’s clear where the Street Name, City, Prov/State, and Zip Code should go. You don’t really need to devote layout space to them forever and ever. And yet, creating inline placeholder text has been too much work to maintain in the past, so I often didn’t bother with it, except when really necessary. Now, placeholder text is an option on the field itself. You can have field descriptors show up inside an empty field without creating a separate text object. You can even set this text dynamically by calculation if you want. Placeholder text is also helpful in cases where you want to guide the user to a field, without cluttering the layout with field borders, which can be distracting when there is a lot of data. Placeholder text subtly cues the user to the text entry location, without disrupting the layout once all the data has been entered. Limitation: Don’t do away with field labels completely. You’ll still likely need some field labels under certain circumstances, such as multiple phone numbers (e.g. home, office, mobile), or numerical data which needs to be identified to be understood. 5. Custom Theme Colours This is such a useful update to the colour palette! You can now drag a colour to the theme colours grid, located directly below the hex picker colour swatch. FileMaker will store the colour, and automatically create both a lighter and darker shade. This is a super easy way to create a range of hues to represent different button states (e.g. lighter on hover, darker when pressed) with literally the click of a button. You can reorder the colours by dragging the swatches around the colour grid. Limitation: You can’t directly remove a colour from the colour grid. You can replace an existing colour by dragging a new colour onto it, or you can drag white onto it to “clear” it (although you’ll get gray as the top colour as a result). Conclusion Using or implementing one or more of these new features will definitely improve your solutions and make them more usable and polished. Whether they’ll make them glorious or not—well, that will be up to you! Resources New in 14: Hidden scroll bar feature https://community.filemaker.com/docs/DOC-6266 Button bar https://community.filemaker.com/docs/DOC-6263 Navigation parts https://community.filemaker.com/docs/DOC-6262 Placeholder text https://community.filemaker.com/docs/DOC-6265 Custom theme colours http://help.filemaker.com/app/answers/detail/a_id/14417 Afficher la totalité du billet
  8. Previously, I wrote about how to convert your solution away from the Classic theme. In this part, I discuss five FileMaker 14-exclusive changes you might want to make while updating your solution. These interface features will add professionalism, usability, and—dare I say?— “glory” to your solutions. Read Part 1 Now that you’ve decided to update your layouts to a modern theme in FileMaker, there are a few things you might want to do at the same time, that don’t require any major changes to your layouts. Since you’re already touching every layout in your solution, why not take advantage of some of the new features in FileMaker 14? It makes sense to get the most bang for your buck. Here are…drumroll please…Five Things New in FileMaker 14 That Will Improve Your Interfaces (in no particular order): 1. Hidden Scroll Bars Readers of this blog know I like scrollbars! I’ve written about them before, probably because they can be one of the most distinctive elements of a layout, and in FileMaker there is very little about scrollbars that can be styled. So choosing the look of the scrollbars is a major portion of deciding on a new theme. And no other theme’s scrollbar is exactly like the Classic scrollbar style. So finding something to replace it with is a bit of a challenge. Here is the layout after switching from Classic to a custom theme based on Cool: Well, instead of styling the scrollbar, how about hiding it altogether? This new feature is an option on fields and portals, and allows you to only show a scrollbar slider when the user’s cursor is actually scrolling. It’s the same way that scrolling works inside the FileMaker window itself—you only see a scrollbar slider when you activate the scroll wheel or perform a scrolling gesture on the mouse. This is the standard way scrolling is done on the Mac, in fact. Limitation: Make sure that users have scrolling capability on their mice, or this feature won’t work. 2. Button Bar The new button bar object is awesome! Buttons are one of the most complex objects to style, with all the different parts and states they can have. The button bar drastically cuts down on the number of objects you need to deal with across potentially many layouts, and can even be conditionally or dynamically populated if you want. (Here’s an article from Digital Fusion describing how to create an abstracted navigation system using the button bar object.) Now, rather than managing a row of individual button objects when creating a navigation bar, for instance, you can use a button bar instead. A single object can take the place of five or six separate objects. Be sure to go through all the button bar parts and states and make sure they are set how you want—There are a lot of them and the format painter transfers hardly any styles from a button object to a button bar object. There may be inactive, in focus and hover states inherited from the theme that you probably will want to change to match the previous behaviour, so you’ll have to do some work setting up the first button bar. You can also mix a button bar with a regular button. In these examples, the Menu button is its own button, placed beside the button bar. Limitation: You can dynamically set a button label, but you can’t conditionally specify an icon. Also, all the buttons in the button bar get the same width, no matter how long or short their label might be. So you have to set the button width to accommodate the longest button label, including some white space on either side. This might mean that short labels (such as the “Print” button below) end up with more space than before. So make sure you are okay with buttons possibly being more spread out, and have the space for them if you switch out individual buttons for the button bar. 3. Top Navigation Part The new top header navigation part keeps the most important objects (like primary navigation) accessible at the top, where users need it most. It helps prevent users from getting lost, and provides them a quick way of getting around with a minimum of window scrolling. Don’t forget to check the style for the top navigation part, it may have a fill or border that you may want to change or remove to match your layout. Limitation: Any background colour you set for a top navigation part stretches across the whole layout, even the inactive part (seen when the user stretches the window to the right). However, when objects on it are anchored to the top and left, the body background colour ends at the edge of the active part of the layout. When you pull the body part down with the mouse, a gray (or default layout background-coloured) gap opens up between the top navigation and the body part. You can mitigate this by anchoring objects in the header to stretch between the left and right edges of the window. Or, create a rectangle the exact size of your top navigation part and send it to the back, and then remove any background fill colour on the top navigation part. This way, your top navigation will appear to end at the edge of the layout when objects are anchored to the top left, just like the body part. White rectangle is placed at the back of the top navigation part One final alternative is to anchor the body objects to the middle. In this case, the white body background fills the screen and no “inactive” colour is seen. Body objects are anchored to the center of the layout 4. Placeholder Text Who hasn’t wanted to dispense with field labels at times, especially on obvious fields, such as addresses? The user needs a text label to guide them when they’re entering data, but once a record has been filled out, it’s clear where the Street Name, City, Prov/State, and Zip Code should go. You don’t really need to devote layout space to them forever and ever. And yet, creating inline placeholder text has been too much work to maintain in the past, so I often didn’t bother with it, except when really necessary. Now, placeholder text is an option on the field itself. You can have field descriptors show up inside an empty field without creating a separate text object. You can even set this text dynamically by calculation if you want. Placeholder text is also helpful in cases where you want to guide the user to a field, without cluttering the layout with field borders, which can be distracting when there is a lot of data. Placeholder text subtly cues the user to the text entry location, without disrupting the layout once all the data has been entered. Limitation: Don’t do away with field labels completely. You’ll still likely need some field labels under certain circumstances, such as multiple phone numbers (e.g. home, office, mobile), or numerical data which needs to be identified to be understood. 5. Custom Theme Colours This is such a useful update to the colour palette! You can now drag a colour to the theme colours grid, located directly below the hex picker colour swatch. FileMaker will store the colour, and automatically create both a lighter and darker shade. This is a super easy way to create a range of hues to represent different button states (e.g. lighter on hover, darker when pressed) with literally the click of a button. You can reorder the colours by dragging the swatches around the colour grid. Limitation: You can’t directly remove a colour from the colour grid. You can replace an existing colour by dragging a new colour onto it, or you can drag white onto it to “clear” it (although you’ll get gray as the top colour as a result). Conclusion Using or implementing one or more of these new features will definitely improve your solutions and make them more usable and polished. Whether they’ll make them glorious or not—well, that will be up to you! Resources New in 14: Hidden scroll bar feature https://community.filemaker.com/docs/DOC-6266 Button bar https://community.filemaker.com/docs/DOC-6263 Navigation parts https://community.filemaker.com/docs/DOC-6262 Placeholder text https://community.filemaker.com/docs/DOC-6265 Custom theme colours http://help.filemaker.com/app/answers/detail/a_id/14417 Afficher la totalité du billet
  9. Previously, I wrote about how to convert your solution away from the Classic theme. In this part, I discuss five FileMaker 14-exclusive changes you might want to make while updating your solution. These interface features will add professionalism, usability, and—dare I say?— “glory” to your solutions. Read Part 1 Now that you’ve decided to update your layouts to a modern theme in FileMaker, there are a few things you might want to do at the same time, that don’t require any major changes to your layouts. Since you’re already touching every layout in your solution, why not take advantage of some of the new features in FileMaker 14? It makes sense to get the most bang for your buck. Here are…drumroll please…Five Things New in FileMaker 14 That Will Improve Your Interfaces (in no particular order): 1. Hidden Scroll Bars Readers of this blog know I like scrollbars! I’ve written about them before, probably because they can be one of the most distinctive elements of a layout, and in FileMaker there is very little about scrollbars that can be styled. So choosing the look of the scrollbars is a major portion of deciding on a new theme. And no other theme’s scrollbar is exactly like the Classic scrollbar style. So finding something to replace it with is a bit of a challenge. Here is the layout after switching from Classic to a custom theme based on Cool: Well, instead of styling the scrollbar, how about hiding it altogether? This new feature is an option on fields and portals, and allows you to only show a scrollbar slider when the user’s cursor is actually scrolling. It’s the same way that scrolling works inside the FileMaker window itself—you only see a scrollbar slider when you activate the scroll wheel or perform a scrolling gesture on the mouse. This is the standard way scrolling is done on the Mac, in fact. Limitation: Make sure that users have scrolling capability on their mice, or this feature won’t work. 2. Button Bar The new button bar object is awesome! Buttons are one of the most complex objects to style, with all the different parts and states they can have. The button bar drastically cuts down on the number of objects you need to deal with across potentially many layouts, and can even be conditionally or dynamically populated if you want. (Here’s an article from Digital Fusion describing how to create an abstracted navigation system using the button bar object.) Now, rather than managing a row of individual button objects when creating a navigation bar, for instance, you can use a button bar instead. A single object can take the place of five or six separate objects. Be sure to go through all the button bar parts and states and make sure they are set how you want—There are a lot of them and the format painter transfers hardly any styles from a button object to a button bar object. There may be inactive, in focus and hover states inherited from the theme that you probably will want to change to match the previous behaviour, so you’ll have to do some work setting up the first button bar. You can also mix a button bar with a regular button. In these examples, the Menu button is its own button, placed beside the button bar. Limitation: You can dynamically set a button label, but you can’t conditionally specify an icon. Also, all the buttons in the button bar get the same width, no matter how long or short their label might be. So you have to set the button width to accommodate the longest button label, including some white space on either side. This might mean that short labels (such as the “Print” button below) end up with more space than before. So make sure you are okay with buttons possibly being more spread out, and have the space for them if you switch out individual buttons for the button bar. 3. Top Navigation Part The new top header navigation part keeps the most important objects (like primary navigation) accessible at the top, where users need it most. It helps prevent users from getting lost, and provides them a quick way of getting around with a minimum of window scrolling. Don’t forget to check the style for the top navigation part, it may have a fill or border that you may want to change or remove to match your layout. Limitation: Any background colour you set for a top navigation part stretches across the whole layout, even the inactive part (seen when the user stretches the window to the right). However, when objects on it are anchored to the top and left, the body background colour ends at the edge of the active part of the layout. When you pull the body part down with the mouse, a gray (or default layout background-coloured) gap opens up between the top navigation and the body part. You can mitigate this by anchoring objects in the header to stretch between the left and right edges of the window. Or, create a rectangle the exact size of your top navigation part and send it to the back, and then remove any background fill colour on the top navigation part. This way, your top navigation will appear to end at the edge of the layout when objects are anchored to the top left, just like the body part. White rectangle is placed at the back of the top navigation part One final alternative is to anchor the body objects to the middle. In this case, the white body background fills the screen and no “inactive” colour is seen. Body objects are anchored to the center of the layout 4. Placeholder Text Who hasn’t wanted to dispense with field labels at times, especially on obvious fields, such as addresses? The user needs a text label to guide them when they’re entering data, but once a record has been filled out, it’s clear where the Street Name, City, Prov/State, and Zip Code should go. You don’t really need to devote layout space to them forever and ever. And yet, creating inline placeholder text has been too much work to maintain in the past, so I often didn’t bother with it, except when really necessary. Now, placeholder text is an option on the field itself. You can have field descriptors show up inside an empty field without creating a separate text object. You can even set this text dynamically by calculation if you want. Placeholder text is also helpful in cases where you want to guide the user to a field, without cluttering the layout with field borders, which can be distracting when there is a lot of data. Placeholder text subtly cues the user to the text entry location, without disrupting the layout once all the data has been entered. Limitation: Don’t do away with field labels completely. You’ll still likely need some field labels under certain circumstances, such as multiple phone numbers (e.g. home, office, mobile), or numerical data which needs to be identified to be understood. 5. Custom Theme Colours This is such a useful update to the colour palette! You can now drag a colour to the theme colours grid, located directly below the hex picker colour swatch. FileMaker will store the colour, and automatically create both a lighter and darker shade. This is a super easy way to create a range of hues to represent different button states (e.g. lighter on hover, darker when pressed) with literally the click of a button. You can reorder the colours by dragging the swatches around the colour grid. Limitation: You can’t directly remove a colour from the colour grid. You can replace an existing colour by dragging a new colour onto it, or you can drag white onto it to “clear” it (although you’ll get gray as the top colour as a result). Conclusion Using or implementing one or more of these new features will definitely improve your solutions and make them more usable and polished. Whether they’ll make them glorious or not—well, that will be up to you! Resources New in 14: Hidden scroll bar feature https://community.filemaker.com/docs/DOC-6266 Button bar https://community.filemaker.com/docs/DOC-6263 Navigation parts https://community.filemaker.com/docs/DOC-6262 Placeholder text https://community.filemaker.com/docs/DOC-6265 Custom theme colours http://help.filemaker.com/app/answers/detail/a_id/14417 The post Converting from the Classic Theme Part 2: The Glory appeared first on UI Design for FileMaker Pro Developers. Afficher la totalité du billet
  10. Over time, one collects bits and pieces of knowledge about different corners of development. Features that are a little more difficult to discover, or shortcuts that can help out in a pinch. Some of these nuggets can make developing faster, easier, or more accurate. Here are five helpful features you may or may not already know about, but which I’m thankful we have available. 1. Multiple Inspector palettes I think we can all agree that the Inspector palette is indispensable. But did you know you can create more than one Inspector window at a time? It’s found in Layout mode under View > New Inspector. I sometimes do this to cut down on the amount of switching between tabs when creating styles, for instance. You can keep one Inspector on the Appearance tab so you can modify fill, line and other attributes, and the other on the Styles tab, to easily manage and create styles as you go. There are also lots of other situations where having multiple Inspectors is useful. You can even make one of them quite small and tuck it away in a corner. If you find yourself switching panels in the Inspector a lot, it might be easier to open a new Inspector instead. 2. Change measurement units Let’s stay with the Inspector for a moment. Have you been stuck designing in inches because you didn’t know you could change the measurement units? You can change them by clicking on the unit label in the Position area. I’m not sure who showed this to me, and I’ve known this forever, but it’s not necessarily obvious to everyone. I often change units when switching between designing interfaces (where I generally use points), and designing reports (where I sometimes use inches or centimetres to measure printed pages). The other way to change units is to show the Ruler ( View > Rulers) and click on the units at the origin. 3. Shorten merge fields using Position When you place a merge field on a layout, the length of the field name (including any relationship) determines the space it takes up on the layout. However, in some cases the data it is intended to contain is quite a lot shorter. I sometimes have long relationship names, so this can be an issue. If you simply try and drag the handle to make it shorter, the text wraps to the next line, possibly throwing off the baseline alignment or encroaching on nearby objects such as portal rows or tab panels. However, you can shorten a merge field using the Position area of the Inspector. Simply type in the desired width, and—ta-da! A short merge field, no matter how long its name happens to be. 4. Show Sample Data Sometimes you want to see how record data will look while you’re still designing in Layout mode. Rather than switching back and forth between Layout and Browse, there is an option to show data from your records in Layout mode (View > Show > Sample Data). This will show you data in Layout mode from the record you’re on in Browse mode. If there is no data to show, then the fields are filled with lorem ipsum text. You might want to navigate to a record that has lots of text first in order to see how it will look as you adjust field lengths and so on. It’s a useful little feature that I sometimes forget about, but does come in handy from time to time. 5. Hiding/showing sub summary parts on a single layout Like that super-cool minimalist coffee table that opens up to reveal a personal lap pool underneath (just kidding!), interface elements that do double duty are always welcome. Here, we can take advantage of the fact that sub-summary parts on a layout only show when the data is sorted. That means we can have as many sub-summary parts as we want, and they will only show if the user sorts the data. So one layout can have multiple purposes, cutting down on overhead. Conclusion I hope you found one or two useful things here to help you solve a problem or make your development a bit easier. If you have any favourite hidden features that you’d like to share with everyone, please leave a comment below! Afficher la totalité du billet
  11. Over time, one collects bits and pieces of knowledge about different corners of development. Features that are a little more difficult to discover, or shortcuts that can help out in a pinch. Some of these nuggets can make developing faster, easier, or more accurate. Here are five helpful features you may or may not already know about, but which I’m thankful we have available. 1. Multiple Inspector palettes I think we can all agree that the Inspector palette is indispensable. But did you know you can create more than one Inspector window at a time? It’s found in Layout mode under View > New Inspector. I sometimes do this to cut down on the amount of switching between tabs when creating styles, for instance. You can keep one Inspector on the Appearance tab so you can modify fill, line and other attributes, and the other on the Styles tab, to easily manage and create styles as you go. There are also lots of other situations where having multiple Inspectors is useful. You can even make one of them quite small and tuck it away in a corner. If you find yourself switching panels in the Inspector a lot, it might be easier to open a new Inspector instead. 2. Change measurement units Let’s stay with the Inspector for a moment. Have you been stuck designing in inches because you didn’t know you could change the measurement units? You can change them by clicking on the unit label in the Position area. I’m not sure who showed this to me, and I’ve known this forever, but it’s not necessarily obvious to everyone. I often change units when switching between designing interfaces (where I generally use points), and designing reports (where I sometimes use inches or centimetres to measure printed pages). The other way to change units is to show the Ruler ( View > Rulers) and click on the units at the origin. 3. Shorten merge fields using Position When you place a merge field on a layout, the length of the field name (including any relationship) determines the space it takes up on the layout. However, in some cases the data it is intended to contain is quite a lot shorter. I sometimes have long relationship names, so this can be an issue. If you simply try and drag the handle to make it shorter, the text wraps to the next line, possibly throwing off the baseline alignment or encroaching on nearby objects such as portal rows or tab panels. However, you can shorten a merge field using the Position area of the Inspector. Simply type in the desired width, and—ta-da! A short merge field, no matter how long its name happens to be. 4. Show Sample Data Sometimes you want to see how record data will look while you’re still designing in Layout mode. Rather than switching back and forth between Layout and Browse, there is an option to show data from your records in Layout mode (View > Show > Sample Data). This will show you data in Layout mode from the record you’re on in Browse mode. If there is no data to show, then the fields are filled with lorem ipsum text. You might want to navigate to a record that has lots of text first in order to see how it will look as you adjust field lengths and so on. It’s a useful little feature that I sometimes forget about, but does come in handy from time to time. 5. Hiding/showing sub summary parts on a single layout Like that super-cool minimalist coffee table that opens up to reveal a personal lap pool underneath (just kidding!), interface elements that do double duty are always welcome. Here, we can take advantage of the fact that sub-summary parts on a layout only show when the data is sorted. That means we can have as many sub-summary parts as we want, and they will only show if the user sorts the data. So one layout can have multiple purposes, cutting down on overhead. Conclusion I hope you found one or two useful things here to help you solve a problem or make your development a bit easier. If you have any favourite hidden features that you’d like to share with everyone, please leave a comment below! Afficher la totalité du billet
  12. Over time, one collects bits and pieces of knowledge about different corners of development. Features that are a little more difficult to discover, or shortcuts that can help out in a pinch. Some of these nuggets can make developing faster, easier, or more accurate. Here are five helpful features you may or may not already know about, but which I’m thankful we have available. 1. Multiple Inspector palettes I think we can all agree that the Inspector palette is indispensable. But did you know you can create more than one Inspector window at a time? It’s found in Layout mode under View > New Inspector. I sometimes do this to cut down on the amount of switching between tabs when creating styles, for instance. You can keep one Inspector on the Appearance tab so you can modify fill, line and other attributes, and the other on the Styles tab, to easily manage and create styles as you go. There are also lots of other situations where having multiple Inspectors is useful. You can even make one of them quite small and tuck it away in a corner. If you find yourself switching panels in the Inspector a lot, it might be easier to open a new Inspector instead. 2. Change measurement units Let’s stay with the Inspector for a moment. Have you been stuck designing in inches because you didn’t know you could change the measurement units? You can change them by clicking on the unit label in the Position area. I’m not sure who showed this to me, and I’ve known this forever, but it’s not necessarily obvious to everyone. I often change units when switching between designing interfaces (where I generally use points), and designing reports (where I sometimes use inches or centimetres to measure printed pages). The other way to change units is to show the Ruler ( View > Rulers) and click on the units at the origin. 3. Shorten merge fields using Position When you place a merge field on a layout, the length of the field name (including any relationship) determines the space it takes up on the layout. However, in some cases the data it is intended to contain is quite a lot shorter. I sometimes have long relationship names, so this can be an issue. If you simply try and drag the handle to make it shorter, the text wraps to the next line, possibly throwing off the baseline alignment or encroaching on nearby objects such as portal rows or tab panels. However, you can shorten a merge field using the Position area of the Inspector. Simply type in the desired width, and—ta-da! A short merge field, no matter how long its name happens to be. 4. Show Sample Data Sometimes you want to see how record data will look while you’re still designing in Layout mode. Rather than switching back and forth between Layout and Browse, there is an option to show data from your records in Layout mode (View > Show > Sample Data). This will show you data in Layout mode from the record you’re on in Browse mode. If there is no data to show, then the fields are filled with lorem ipsum text. You might want to navigate to a record that has lots of text first in order to see how it will look as you adjust field lengths and so on. It’s a useful little feature that I sometimes forget about, but does come in handy from time to time. 5. Hiding/showing sub summary parts on a single layout Like that super-cool minimalist coffee table that opens up to reveal a personal lap pool underneath (just kidding!), interface elements that do double duty are always welcome. Here, we can take advantage of the fact that sub-summary parts on a layout only show when the data is sorted. That means we can have as many sub-summary parts as we want, and they will only show if the user sorts the data. So one layout can have multiple purposes, cutting down on overhead. Conclusion I hope you found one or two useful things here to help you solve a problem or make your development a bit easier. If you have any favourite hidden features that you’d like to share with everyone, please leave a comment below! Afficher la totalité du billet
  13. Over time, one collects bits and pieces of knowledge about different corners of development. Features that are a little more difficult to discover, or shortcuts that can help out in a pinch. Some of these nuggets can make developing faster, easier, or more accurate. Here are five helpful features you may or may not already know about, but which I’m thankful we have available. 1. Multiple Inspector palettes I think we can all agree that the Inspector palette is indispensable. But did you know you can create more than one Inspector window at a time? It’s found in Layout mode under View > New Inspector. I sometimes do this to cut down on the amount of switching between tabs when creating styles, for instance. You can keep one Inspector on the Appearance tab so you can modify fill, line and other attributes, and the other on the Styles tab, to easily manage and create styles as you go. There are also lots of other situations where having multiple Inspectors is useful. You can even make one of them quite small and tuck it away in a corner. If you find yourself switching panels in the Inspector a lot, it might be easier to open a new Inspector instead. 2. Change measurement units Let’s stay with the Inspector for a moment. Have you been stuck designing in inches because you didn’t know you could change the measurement units? You can change them by clicking on the unit label in the Position area. I’m not sure who showed this to me, and I’ve known this forever, but it’s not necessarily obvious to everyone. I often change units when switching between designing interfaces (where I generally use points), and designing reports (where I sometimes use inches or centimetres to measure printed pages). The other way to change units is to show the Ruler ( View > Rulers) and click on the units at the origin. 3. Shorten merge fields using Position When you place a merge field on a layout, the length of the field name (including any relationship) determines the space it takes up on the layout. However, in some cases the data it is intended to contain is quite a lot shorter. I sometimes have long relationship names, so this can be an issue. If you simply try and drag the handle to make it shorter, the text wraps to the next line, possibly throwing off the baseline alignment or encroaching on nearby objects such as portal rows or tab panels. However, you can shorten a merge field using the Position area of the Inspector. Simply type in the desired width, and—ta-da! A short merge field, no matter how long its name happens to be. 4. Show Sample Data Sometimes you want to see how record data will look while you’re still designing in Layout mode. Rather than switching back and forth between Layout and Browse, there is an option to show data from your records in Layout mode (View > Show > Sample Data). This will show you data in Layout mode from the record you’re on in Browse mode. If there is no data to show, then the fields are filled with lorem ipsum text. You might want to navigate to a record that has lots of text first in order to see how it will look as you adjust field lengths and so on. It’s a useful little feature that I sometimes forget about, but does come in handy from time to time. 5. Hiding/showing sub summary parts on a single layout Like that super-cool minimalist coffee table that opens up to reveal a personal lap pool underneath (just kidding!), interface elements that do double duty are always welcome. Here, we can take advantage of the fact that sub-summary parts on a layout only show when the data is sorted. That means we can have as many sub-summary parts as we want, and they will only show if the user sorts the data. So one layout can have multiple purposes, cutting down on overhead. Conclusion I hope you found one or two useful things here to help you solve a problem or make your development a bit easier. If you have any favourite hidden features that you’d like to share with everyone, please leave a comment below! The post 5 Hidden FileMaker Design Tools I’m Thankful For appeared first on UI Design for FileMaker Pro Developers. Afficher la totalité du billet
  14. Many of us who have been working in FileMaker for some time have solutions built on the Classic Theme. “Classic” sounds good, doesn’t it? Who wouldn’t want to build something “Classic?” Well, fellow FileMaker developers, in this case we do want to clear out that old classic, Classic Theme. In this article, find out about a 2-step process to update the meat of your layouts to something leaner, faster, and better-looking than the good old Classic solution you have today. The concept of a theme was introduced in FileMaker 12, providing developers with a coordinated set of layout objects. Each theme is a collection of styles that can be applied to objects, specifying the fill, line, font, padding, and other attributes for each type of object on a layout, including its various potential states (active, inactive, hover, pressed, in focus, etc). Some objects are more complex and have more attributes than others. Lines are fairly simple, while button bars have many different components you can customize. (You can read a previous article about themes and styles here.) Styles, once defined, can be reused for similar objects across layouts in a solution that share the same theme. This saves both space in the solution and developer effort in specifying attributes for objects. FileMaker 12 Layout Mode FileMaker 13 added the ability to save your own custom styles and themes based on an existing theme, as well as some theme management tools, such as the ability to import a theme into another file. It also increased the number of attributes exposed in the Inspector, such as inner/outer shadows and text padding. FileMaker 13 Layout Mode There were some minor updates to themes in FileMaker 14, such as the new Minimalist themes. A number of FileMaker 13 themes were deprecated (although any layouts built on those themes will continue to work), and some new ones were added. Finally, the Classic theme was removed as an option for new layouts, although any layouts created in Classic from previous versions remain. What’s up with Classic? Once themes were introduced, any layouts that were created in FileMaker 11 or earlier were labeled “Classic,” to differentiate them from the new, optimized themes provided by FileMaker. This doesn’t sound too bad, except that Classic comes with a number of inherent drawbacks, which are only magnified with each new version of FileMaker. Because the Classic theme predated FileMaker’s current themes and styles feature, the only styles it contains are “default.” Chances are that you changed line attributes, fonts and colours in your layouts from the defaults in Classic, so those objects are likely to have lots of local styling (meaning that objects don’t share any styles, so attributes are defined and stored behind the scenes on an object-by-object basis). This can exact a significant performance penalty, especially in WebDirect. Speaking of WebDirect, the Classic theme is strongly discouraged as it will not render properly in WebDirect. Some built-in Classic behaviours are simply not supported on the web, and are likely to cause visual or functional problems. Even in FileMaker, Classic has a number of undesirable behaviours you can’t control, such as dimming inactive tab controls and the inactive tab size change. You can save changes to a style on a Classic-themed layout, but FileMaker 14 will not allow you to save any changes to the Classic theme itself, nor will you find it listed as one of the choices for a theme in FileMaker 14. It will persist in the file if it already exists from a previous version, but you can’t choose it for a new layout in 14. You could customize the Classic layout and save it as a new theme, but because of its inherent drawbacks, that is not recommended either. (FileMaker remembers your base theme in the CSS that runs behind the scenes.) In short, the Classic theme is meant as a way for you, the developer, to transition to one of the newer, more modern themes. Choose a new theme So now that we know why Classic needs to go, what do we do? We may have legacy solutions built entirely on this theme. Personally, I have invested significant time and effort making Classic themed-layouts look good in solutions originally built in FileMaker 12 or earlier. (See below.) In any case, it’s time to roll up our sleeves and get to work. Don’t worry, though. Here’s a strategy for converting an existing solution away from the Classic Theme, so that you can make the most of what FileMaker has to offer. Once you’re done, you’ll be rewarded with smaller files, faster layouts, and a much easier, organized and more efficient way to build new layouts in the future. First off, you have a decision to make. You can: A) keep the sizing the same as what was used in Classic (best if you want to do as little revision as possible to the design of your layouts), or B) choose to do a little more work and change to a new theme that has different default field height, scrollbar width, and other size differences. You should select option A if you want to do as little work as possible to transition away from Classic. In this case, choose one of the Classic Refined themes as your base theme. The default object sizes are the same as those in the Classic theme, so your layouts will undergo minimal changes when you switch themes. You may, however, want to take the opportunity to redesign and update the look of your solution at the same time as converting, in which case choose one of the other available themes. If you are touching every layout anyway, now is a good time to do a facelift. If you’re planning to do a lot of heavy customization, choose the Minimalist theme. It contains no styles other than the defaults, freeing you from having to remove a lot of stuff you don’t want from the theme later. When choosing a new theme, pay special attention to the style of the theme’s scrollbar and drop down menu, as these aren’t exposed in the inspector and can’t be changed in FileMaker. Make sure to choose one you like, including the colour of the scrollbar. Controversy alert: Note that you may be able to tweak the CSS using a tool such as Theme Studio, however this approach is not recommended by FileMaker, as their CSS interpretation could (and likely will) change without notice in the future. It’s unlikely you’d lose any data as a result, but you could potentially experience FileMaker overwriting, changing, or ignoring your CSS tweaks and ruining your carefully-crafted design. On the other hand, I have heard the argument that CSS is a standard outside of FileMaker’s control so whatever changes they make must comply with CSS rules. Consider yourself warned and proceed at your own risk, knowing that any tweaks you make directly to the CSS are unsupported and not recommended. One last note about scrollbars: There is a new option to use inline scrollbars in FileMaker 14. This only shows a scrollbar slider on a portal when the user is actually scrolling, which looks very slick and frees you from the issue of how the scrollbars look in a given theme. It does require a scroll wheel or scrolling capability on the user’s mouse, so make sure that your users are equipped appropriately if you choose this option. Do the work Step 1. Create a custom theme layout Navigate to an existing Classic layout that has most or all of the objects you plan to style on it. Select all the objects on the layout and copy them to the clipboard. Create a new layout (name it “Theme” or something similar) with the new theme of your choice. I like to delete the header and footer and enlarge the body part so that I have enough space for everything. Paste the copied objects onto the layout. Select an object and save the changes back to the style, or create a new style (see below) where appropriate. You actually only need to save one object type for each separate style you have, e.g. one main header text, one secondary header text, one default text field, one 2-line text field, one default portal, one default tab, etc. You can delete other copies of similarly-styled objects from the layout. Make sure to specify a “default” for each object type, since that is the style all your Classic objects will inherit. This will lessen the amount of work you’ll have later in selecting objects when you convert your Classic layouts. Save the changes to the theme, or save it as a new custom theme (I recommend saving it as a new theme so you know definitively that it’s the one you customized). Step 2. Change your existing layouts Navigate to an existing Classic layout. Change the theme to your new custom theme. All the objects will now have the theme’s default attributes for their type. This will be perfect for the majority of objects on the layout, but some others will require you to assign them a style. Before doing anything else, immediately select Edit > Undo Style to preserve any local styling you may have on the layout. Anything that was changed by the theme will change back as a result of this step. Select each object and make sure it is assigned one of the theme’s styles. If you missed an object and need to create a new style (and you very likely will), then make sure to copy and paste it afterwards to your Theme layout for future reference. You may want to delete any styles that were part of the original theme, that you aren’t using. (In BaseElements, you can find these as an Alert on the Style.) Watch-outs Name your styles by function, never by colour. It will make it easier to keep track of what is used where, especially if you decide to change colour schemes in the future. Beware of using the Format Painter. Even if the original object has a style, it paints the target object with local styling, which is to be avoided. [Update: Apparently the Format Painter will paste the style to the target object, but you must still save the object to the style after pasting, or it’s considered locally styled. An extra step, but it works.] Make sure you have every object assigned to a Style. You can find locally styled objects using BaseElements or Inspector Pro. In BaseElements, it’s found as a Performance Alert on the object. FileMaker 12 can read but not edit custom themes. So don’t make a custom theme in FileMaker 13 or 14 and then try and edit those layouts in layout mode in FileMaker 12. Because it’s a feature that it doesn’t understand, FileMaker 12 will revert all your changes and your hard work will be lost, even if you reopen it in FileMaker 13 or higher. Ideally, migrate away from FileMaker 12 completely if possible. One last wish The only desirable thing that the Classic theme has that the others don’t, is the ability to change the line and fill colour of the scrollbars. I fervently wish for this attribute to be customizable in a future version of FileMaker! (Scrollbars are a big issue for me, clearly.) Conclusion Transitioning from Classic to another theme is definitely an investment in time, but you can be confident it’s worth it. Being able to use themes and styles is a huge advantage in any development you do going forward, and you’ll be rewarded by quicker performance and more efficient use of resources for the continuing life of the system. Put on your favourite music to help you push through all the copying, pasting and selecting, and go for it with gusto! Stay tuned for Part 2 of this article: Converting from the Classic Theme – The Glory Additional resources Here is a collection of resources about themes and styles that you may find useful. The FileMaker Community (DevCon) links require a free membership to access: Layouts, Themes, and Styles Andrew Paulsen, DevCon 2015 Real World Theme & Style Planning Bob Shockey , DevCon 2014 Custom Themes and Styles Adam Ward, DevCon 2014 WebDirect Under the Hood Vin Addala, DevCon 2014 Style Picker, Style Editing, and Theme Saving in FileMaker Pro FileMaker Help Like this? Sign up to get blog updates by email Afficher la totalité du billet
  15. Many of us who have been working in FileMaker for some time have solutions built on the Classic Theme. “Classic” sounds good, doesn’t it? Who wouldn’t want to build something “Classic?” Well, fellow FileMaker developers, in this case we do want to clear out that old classic, Classic Theme. In this article, find out about a 2-step process to update the meat of your layouts to something leaner, faster, and better-looking than the good old Classic solution you have today. The concept of a theme was introduced in FileMaker 12, providing developers with a coordinated set of layout objects. Each theme is a collection of styles that can be applied to objects, specifying the fill, line, font, padding, and other attributes for each type of object on a layout, including its various potential states (active, inactive, hover, pressed, in focus, etc). Some objects are more complex and have more attributes than others. Lines are fairly simple, while button bars have many different components you can customize. (You can read a previous article about themes and styles here.) Styles, once defined, can be reused for similar objects across layouts in a solution that share the same theme. This saves both space in the solution and developer effort in specifying attributes for objects. FileMaker 12 Layout Mode FileMaker 13 added the ability to save your own custom styles and themes based on an existing theme, as well as some theme management tools, such as the ability to import a theme into another file. It also increased the number of attributes exposed in the Inspector, such as inner/outer shadows and text padding. FileMaker 13 Layout Mode There were some minor updates to themes in FileMaker 14, such as the new Minimalist themes. A number of FileMaker 13 themes were deprecated (although any layouts built on those themes will continue to work), and some new ones were added. Finally, the Classic theme was removed as an option for new layouts, although any layouts created in Classic from previous versions remain. What’s up with Classic? Once themes were introduced, any layouts that were created in FileMaker 11 or earlier were labeled “Classic,” to differentiate them from the new, optimized themes provided by FileMaker. This doesn’t sound too bad, except that Classic comes with a number of inherent drawbacks, which are only magnified with each new version of FileMaker. Because the Classic theme predated FileMaker’s current themes and styles feature, the only styles it contains are “default.” Chances are that you changed line attributes, fonts and colours in your layouts from the defaults in Classic, so those objects are likely to have lots of local styling (meaning that objects don’t share any styles, so attributes are defined and stored behind the scenes on an object-by-object basis). This can exact a significant performance penalty, especially in WebDirect. Speaking of WebDirect, the Classic theme is strongly discouraged as it will not render properly in WebDirect. Some built-in Classic behaviours are simply not supported on the web, and are likely to cause visual or functional problems. Even in FileMaker, Classic has a number of undesirable behaviours you can’t control, such as dimming inactive tab controls and the inactive tab size change. You can save changes to a style on a Classic-themed layout, but FileMaker 14 will not allow you to save any changes to the Classic theme itself, nor will you find it listed as one of the choices for a theme in FileMaker 14. It will persist in the file if it already exists from a previous version, but you can’t choose it for a new layout in 14. You could customize the Classic layout and save it as a new theme, but because of its inherent drawbacks, that is not recommended either. (FileMaker remembers your base theme in the CSS that runs behind the scenes.) In short, the Classic theme is meant as a way for you, the developer, to transition to one of the newer, more modern themes. Choose a new theme So now that we know why Classic needs to go, what do we do? We may have legacy solutions built entirely on this theme. Personally, I have invested significant time and effort making Classic themed-layouts look good in solutions originally built in FileMaker 12 or earlier. (See below.) In any case, it’s time to roll up our sleeves and get to work. Don’t worry, though. Here’s a strategy for converting an existing solution away from the Classic Theme, so that you can make the most of what FileMaker has to offer. Once you’re done, you’ll be rewarded with smaller files, faster layouts, and a much easier, organized and more efficient way to build new layouts in the future. First off, you have a decision to make. You can: A) keep the sizing the same as what was used in Classic (best if you want to do as little revision as possible to the design of your layouts), or B) choose to do a little more work and change to a new theme that has different default field height, scrollbar width, and other size differences. You should select option A if you want to do as little work as possible to transition away from Classic. In this case, choose one of the Classic Refined themes as your base theme. The default object sizes are the same as those in the Classic theme, so your layouts will undergo minimal changes when you switch themes. You may, however, want to take the opportunity to redesign and update the look of your solution at the same time as converting, in which case choose one of the other available themes. If you are touching every layout anyway, now is a good time to do a facelift. If you’re planning to do a lot of heavy customization, choose the Minimalist theme. It contains no styles other than the defaults, freeing you from having to remove a lot of stuff you don’t want from the theme later. When choosing a new theme, pay special attention to the style of the theme’s scrollbar and drop down menu, as these aren’t exposed in the inspector and can’t be changed in FileMaker. Make sure to choose one you like, including the colour of the scrollbar. Controversy alert: Note that you may be able to tweak the CSS using a tool such as Theme Studio, however this approach is not recommended by FileMaker, as their CSS interpretation could (and likely will) change without notice in the future. It’s unlikely you’d lose any data as a result, but you could potentially experience FileMaker overwriting, changing, or ignoring your CSS tweaks and ruining your carefully-crafted design. On the other hand, I have heard the argument that CSS is a standard outside of FileMaker’s control so whatever changes they make must comply with CSS rules. Consider yourself warned and proceed at your own risk, knowing that any tweaks you make directly to the CSS are unsupported and not recommended. One last note about scrollbars: There is a new option to use inline scrollbars in FileMaker 14. This only shows a scrollbar slider on a portal when the user is actually scrolling, which looks very slick and frees you from the issue of how the scrollbars look in a given theme. It does require a scroll wheel or scrolling capability on the user’s mouse, so make sure that your users are equipped appropriately if you choose this option. Do the work Step 1. Create a custom theme layout Navigate to an existing Classic layout that has most or all of the objects you plan to style on it. Select all the objects on the layout and copy them to the clipboard. Create a new layout (name it “Theme” or something similar) with the new theme of your choice. I like to delete the header and footer and enlarge the body part so that I have enough space for everything. Paste the copied objects onto the layout. Select an object and save the changes back to the style, or create a new style (see below) where appropriate. You actually only need to save one object type for each separate style you have, e.g. one main header text, one secondary header text, one default text field, one 2-line text field, one default portal, one default tab, etc. You can delete other copies of similarly-styled objects from the layout. Make sure to specify a “default” for each object type, since that is the style all your Classic objects will inherit. This will lessen the amount of work you’ll have later in selecting objects when you convert your Classic layouts. Save the changes to the theme, or save it as a new custom theme (I recommend saving it as a new theme so you know definitively that it’s the one you customized). Step 2. Change your existing layouts Navigate to an existing Classic layout. Change the theme to your new custom theme. All the objects will now have the theme’s default attributes for their type. This will be perfect for the majority of objects on the layout, but some others will require you to assign them a style. Before doing anything else, immediately select Edit > Undo Style to preserve any local styling you may have on the layout. Anything that was changed by the theme will change back as a result of this step. Select each object and make sure it is assigned one of the theme’s styles. If you missed an object and need to create a new style (and you very likely will), then make sure to copy and paste it afterwards to your Theme layout for future reference. You may want to delete any styles that were part of the original theme, that you aren’t using. (In BaseElements, you can find these as an Alert on the Style.) Watch-outs Name your styles by function, never by colour. It will make it easier to keep track of what is used where, especially if you decide to change colour schemes in the future. Beware of using the Format Painter. Even if the original object has a style, it paints the target object with local styling, which is to be avoided. [Update: Apparently the Format Painter will paste the style to the target object, but you must still save the object to the style after pasting, or it’s considered locally styled. An extra step, but it works.] Make sure you have every object assigned to a Style. You can find locally styled objects using BaseElements or Inspector Pro. In BaseElements, it’s found as a Performance Alert on the object. FileMaker 12 can read but not edit custom themes. So don’t make a custom theme in FileMaker 13 or 14 and then try and edit those layouts in layout mode in FileMaker 12. Because it’s a feature that it doesn’t understand, FileMaker 12 will revert all your changes and your hard work will be lost, even if you reopen it in FileMaker 13 or higher. Ideally, migrate away from FileMaker 12 completely if possible. One last wish The only desirable thing that the Classic theme has that the others don’t, is the ability to change the line and fill colour of the scrollbars. I fervently wish for this attribute to be customizable in a future version of FileMaker! (Scrollbars are a big issue for me, clearly.) Conclusion Transitioning from Classic to another theme is definitely an investment in time, but you can be confident it’s worth it. Being able to use themes and styles is a huge advantage in any development you do going forward, and you’ll be rewarded by quicker performance and more efficient use of resources for the continuing life of the system. Put on your favourite music to help you push through all the copying, pasting and selecting, and go for it with gusto! Stay tuned for Part 2 of this article: Converting from the Classic Theme – The Glory Additional resources Here is a collection of resources about themes and styles that you may find useful. The FileMaker Community (DevCon) links require a free membership to access: Layouts, Themes, and Styles Andrew Paulsen, DevCon 2015 Real World Theme & Style Planning Bob Shockey , DevCon 2014 Custom Themes and Styles Adam Ward, DevCon 2014 WebDirect Under the Hood Vin Addala, DevCon 2014 Style Picker, Style Editing, and Theme Saving in FileMaker Pro FileMaker Help Like this? Sign up to get blog updates by email Afficher la totalité du billet
×
×
  • Create New...