Clean UI Can Be Functional

FileMaker DevCon ended a few weeks ago and what an awesome honor to have received the FileMaker Business Alliance Excellence Award for Design on Jarvis CRM. Go check out the post on  FileMaker Developer Conference 2017 to see photos and read a little about it.

Coming off that, I wanted to share a design element we are using in Jarvis but with an added twist. When I was coming up with the topic for this post, I was challenged to not only do it about Design but also about Function.

Keep reading to see how I am using Button Bars for field labels, by allowing it to be localized.

How is it setup?

Looking over to the left column the labels for the fields are actually styled Button Bars, which is key to keeping the UI clean while making it functional. Using Button Bars allows us to change from a button to a popover button, which permits additional fields to display or a portal picker list for companies instead of a popup.

 

Button Bars can also contain calculations which a regular button cannot. So, you could have a Button Bar that shows Quotes Total as the Label, but in that same label, you could have the count of all the Quotes right next to it without the need for another field in the database.

How Does it Work?

The Button Bar is using a Custom Function that passes the default field label in English, which references a text object containing JSON off the layout to pull the correct label.

 

This is the calculation the button bar contains.

 

Here’s the LabelDisplay custom function.

 

A simple OnObjectModify script trigger is on the Choose Language popup which commits and refreshes the window to update the labels when a different language is selected.

 

Google Translate was used to get the labels translated so if something is not translated properly that would be why. But below is a snippet of the JSON in French.

{

“French” : 

{

“Address” : “Pays”,

“Cancel” : “Annuler”,

“City” : “Ville”,

“Country” : “Adresse”,

“Drag Photo Here” : “Faites glisser photo ici”,

“Edit” : “Modifier”,

“Email” : “Courrier électronique”,

“First Name” : “Prénom”,

“Last Name” : “Nom de famille”,

“Mobile” : “Téléphone Portable”,

“Phone” : “Téléphone”,

“Postal Code” : “Code Postal”,

“Save” : “Sauvegarder”,

“State” : “Etat”,

“Street 1” : “Rue 1”,

“Street 2” : “Rue # 2”

}

}

For a little bit of fun select the language Floral Colossus and have a good week!

Email me with any questions!

– James

James Scarpetta
The Scarpetta Group, Inc.
FileMaker 16 Certified Developer
james@scarpettagroup.com


2017-08-23T13:28:39+00:00 August 21st, 2017|