Prettifying Your UI
One of the most satisfying things about being a solution developer is the opportunity to create the user interface. You get to create, and modify, how users interact with your software creation. It's like shopping for just the right outfit for that perfect occasion. The one which will present your software in just the right light and with the right amount of pizazz.
Of course, you have to be willing to update and change your style over time. Nothing stays popular forever - right? So, you constantly need to be learning about ways you can make things look and feel differently within your software.
In this video, I showcase a number of tips and tricks related to making your user interface just a little bit prettier. It's not a word you'll use that often, but, by taking the time to prettify your solution, you'll find it's a rewarding task. Learn from this video and the provided example file and make sure your solution's UI is as pretty as it can be. Prettify it!
Comments
WebD?
Admittedly I didn't watch the entire video, but when I tried to run this file in WebDirect the Banner messages didn't appear. Is there something that needs to be done so they work?
Not all features will work in WebD
Because WebDirect is a web technology, the translation of how the UI rendering works means some things you can do in FileMaker client won't work in WebD. Anytime you use a layering trick (one object over another) in the native client you won't get a good translation in WebD per se.
In my limited use of WebD, I almost always make a dedicated layout for WebD and a different one for native clients. The way popovers work in WebD means that you can get some of the features but some others may not work. You will have to experiment to see what you can and can't get working for things in WebD.
-- Matt Petrowsky - ISO FileMaker Magazine Editor
Prettifying Your UI
Wonderful tips - thanks Matts especially the checkbox - Thanks again Simon
Awesome tips!!
See the subject!
Prettifying layouts for touch sceen tablets
Hi Matt.
A lot of the users of my solutions access them on (Windows) tablets or other touch screen devices. These platforms defeat any hover effects that you might want to add to interactive UI objects to distinguish them from non interactive objects. I have struggled for years to come up with a solution for touch that easily defines buttons and other interactive elements visually as something the user can immediately and intuitively recognise as interactive objects.
Would love to see you do another video like this one but for touch screen tablets in particular as these devices seem to be taking over from desk tops and laptops
Hiding objects in portals for related TOs
I'm struggling with how to hide objects in portals for data in a related table. How do you do that?
John D Altman
Emory University
works for Master Detail portal
I too can't get it to work unless the portal is a Master Detail. If it is a related TO portal, this hide doesn't work for me.
If I use [not Get(ActivePortalRowNumber)] it will hide fine, however once you click into a portal row, all of the objects you are hiding show up, not just the active row.
Portals work a bit differently
Sorry about not thinking about this aspect. I've updated the technique file and you'll find the code and example within the updated file.
Essentially, the current context is the primary record (not the portal) and clicking on any row does not switch context to the related record. So, you have determine if the related record (portal row) which is selected is also the active selection.
The easiest way to do this is to use the primary key in the related record because it's unique. The following calculation will work on any related portal row and will hide the object on all rows other than the currently selected row. You'll also need to clean up by using an OnObjectExit trigger on the portal to refresh after the user leaves the portal.
Hide Calc:
RelatedTable::id ≠ GetNthRecord ( RelatedTable::id ; Get ( ActivePortalRowNumber ) )-- Matt Petrowsky - ISO FileMaker Magazine Editor
Portal buttons
Hi Matt,
I copy/pasted the calculation onto a new file just to show the one trashcan, but they are all showing. Is there some catch?
Best regards,
Joost
See my comment above
-- Matt Petrowsky - ISO FileMaker Magazine Editor
User Message
Thanks for the wonderful video. In the User message , in order to dismiss the box that pops up we need to press the escape key. Not very intuitive. Should have a close button on the popover .Unable to do that though. How did you get a close button on the user dialog ?
KevinDez
Popover Close Button
You can place a button on the content area of a popover and it will be contained by that object - it can be tricky if the area is small and the button is too large to be entirely contained by it. In that case, temporarily resize the content area and then drag (or draw) the button onto it. You can use the Object View to double-check (if your version of FileMaker supports that feature).
--
Daniel Farnan
Ignorance is curable, not preventable