Crafting a Visually Striking and Customizable Login for FileMaker Solutions

One of the (many) things I love about the Claris FileMaker platform is the wide array of tools it gives developers to build beautiful, useful user interfaces. Unfortunately, you only get one chance to make a first impression. For countless users, this sparse (and less helpful than it could be) dialog box is their first interaction with FileMaker…

but it doesn’t have to be. It could be so much better!

via GIPHY

FileMaker Saves FileMaker

As with most FileMaker problems, the solution lies in FileMaker. With the [Guest] account, Re-Login, and Create Account script steps and a bit of script scaffolding, we can build a flexible login routine that can be themed to fit the UI for any solution, and also provide useful information and feedback to the user.

Let’s have a look at what we’ll need to make this work.

Security Settings

Let’s start with the Security Settings we’ll need. Open the Security Manager and click the Advanced Settings button.

Duplicate the [Read-Only] Privilege Set and uncheck everything under Other Privileges except Disconnect user from server when idle and click the OK button.

Now, in the Security Manager, activate the Guest user account (if it isn’t already active) and assign it the Restricted Access Privilege Set we just created. Click the OK button and close the Security Manager.

Open the File Options for the FileMaker file, turn on the Log in using: option and select Guest Account. Now every time the file is opened, the restricted guest account will be used.

Our security settings are all set up and we’re ready to start building our database.

Fields

You’ll need two global fields to capture the username and password data to be passed during the Re-Login or Create Account. I named these fields user_USERNAME and user_PASSWORD but feel free to use your own naming convention.

In this example, I’m only capturing the username and password to log in or create a new account but you could create an entire bank of fields if you needed to capture more user information (e.g. full name, email address, etc.) to store in a Users table.

Layouts

Now, in Layout Mode, create a layout that will be called whenever the first window is opened. 

If you allow new users to create an account, you will also need a layout to capture and validate the username and password entries.

Scripts

Now let’s wire our components together into a cohesive log in routine. I use a Startup script which is triggered OnFirstWindowOpen as the wrapper for this routine.

# Startup

Set Error Capture [ On ]
# 
# ---------[ BYPASS THE STARTUP SCRIPT IF RUNNING ON THE SERVER ]---------
If [ LeftWords ( Get ( ApplicationVersion ); 1) = "Server" ] 
	Exit Script [ Text Result: $null ] 
End If
# 
# ---------[ CHECK FOR SCRIPT PARAMETERS ]---------
Set Variable [ $param ; Value: Get(ScriptParameter) ] 
If [ not IsEmpty ( $param ) ] 
	Set Variable [ $action ; Value: JSONGetElement ( $param ; "action" ) ] 
	Set Variable [ $context ; Value: JSONGetElement ( $param ; "context" ) ] 
End If
# 
# ---------[ BYPASS THE STARTUP SCRIPT IF RUNNING ON THE SERVER ]---------
If [ IsEmpty ( $param ) 		// if there is no incoming script parameter, this is a first time login ] 
	# 
	Perform Script [ Specified: From list ; “Hide Toolbars” ; Parameter:    ]
	Perform Script [ Specified: From list ; “Flexible Log In” ; Parameter:    ]
	Perform Script [ Specified: From list ; “1.0” ; Parameter:    ]
	Perform Script [ Specified: From list ; “Initialize System Vars” ; Parameter:    ]
	Perform Script [ Specified: From list ; “Loading Window” ; Parameter:    ]
	# 
	Set Variable [ $$~loginWindowTitle ; Value: $$@_APP.NAME & " Login" ] 
	# 
	# 
	# ---------[ CHECK IF USER IS GUEST AND PROMPT USER TO LOGIN WITH ACCOUNT ]---------
	If [ Get( AccountName ) = "[Guest]" ] 
		Set Field [ GLOBALS::user_USERNAME ; "" ] 
		Set Field [ GLOBALS::user_PASSWORD ; "" ] 
		Set Field [ GLOBALS::user_PASSWORD[2] ; "" ] 
		New Window [ Style: Card ; Name: $$~loginWindowTitle ; Using layout: “Login” (GLOBALS) ] 
		Adjust Window [ Resize to Fit ]
		Go to Next Field
		Exit Script [ Text Result:    ] 
	End If
	# 
End If
# End If [ not $param ]
# 
# 
# ---------[ CLOSE THE LOGIN WINDOW OR PERFORM SUBSCRIPTS ]---------
If [ $context = "login" and $action = "create" ] 
	Perform Script [ Specified: From list ; “ - Startup | New Account and Login” ; Parameter:    ]
Else If [ $context = "login" and $action = "login" ] 
	Perform Script [ Specified: From list ; “ - Startup | Login” ; Parameter: JSONSetElement (  	"" 	; [ "action" ; "login" ; JSONString ] 	; [ "context" ; "login" ; JSONString ] ) ]
End If
# 
# 
# // Pass parameters from the previous subscript result
Set Variable [ $param ; Value: "" ] 
Set Variable [ $param ; Value: Get(ScriptResult) ] 
If [ not IsEmpty ( $param ) ] 
	Set Variable [ $action ; Value: JSONGetElement ( $param ; "action" ) ] 
	Set Variable [ $context ; Value: JSONGetElement ( $param ; "context" ) ] 
End If
# 
# 
# ---------[ RESET THE USER VARIABLES AFTER RELOGIN ]---------
Perform Script [ Specified: From list ; “Initialize System Vars” ; Parameter:    ]
If [ PatternCount ( 	WindowNames ;	$$~loginWindowTitle ) ] 
	Close Window [ Name: $$~loginWindowTitle ; Current file ] 
End If
Set Variable [ $$~loginWindowTitle ] 
# 
# ---------[ RESET GLOBAL FIELDS AFTER RELOGIN ]---------
Set Field [ GLOBALS::user_USERNAME ; "" ] 
Set Field [ GLOBALS::user_PASSWORD ; "" ] 
Set Field [ GLOBALS::user_PASSWORD[2] ; "" ] 
# 
New Window [ Style: Document ; Using layout: “Technique Form” (ExampleTemplate) ] 
Close Window [ Name: "Loading..." ; Current file ] 
Set Window Title [ Current Window ; New Title: $$@_APP.NAME ] 
# 
# 
Adjust Window [ Resize to Fit ]
Move/Resize Window [ Current Window ; Top: WindowCenter ( "vertical" ) ; Left: WindowCenter ( "horizontal" ) ] 
# 
Exit Script [ Text Result: $null ]

When this script runs, it checks if the current account is [Guest]. If so, it triggers a log-in subroutine. This script does the heavy lifting of validating the user’s data and actually logging into the solution.

#  - Startup | Login

Set Error Capture [ On ]
Allow User Abort [ Off ]
# 
# ---------[ CHECK FOR ANY SCRIPT PARAMETERS ]---------
Set Variable [ $param ; Value: Get(ScriptParameter) ] 
Set Variable [ $action ; Value: JSONGetElement ( $param ; "action" ) ] 
Set Variable [ $context ; Value: JSONGetElement ( $param ; "context" ) ] 
# 
# ---------[ VALIDATE USER DATA ENTRY ]---------
If [ IsEmpty ( GLOBALS::user_USERNAME ) or IsEmpty ( GLOBALS::user_PASSWORD ) ] 
	Set Variable [ $errorMessage ; Value: "Missing Username / Password" ] 
	Beep
	Show Custom Dialog [ $errorMessage ; "Login could not be completed. Please enter a username and password." ] 
	Halt Script
Else
	# ---------[ PASS THE ENTERED USERNAME AND PASSWORD TO RE-LOGIN AND VALIDATE ]---------
	Re-Login [ Account Name: GLOBALS::user_USERNAME ; Password: •••••••• ; With dialog: Off ] 
	Set Variable [ $error ; Value: x.error ] 
	If [ $error ] 
		Beep
		Show Custom Dialog [ x.errorMessage ( $error ) ; "Login could not be completed. Please check your username and password. " & x.errorMessage ( $error… ] 
		Halt Script
	End If
End If
# 
# ---------[ PASS VALIDATION PARAMETERS BACK INTO THE CALLING SCRIPT ]---------
Exit Script [ Text Result: JSONSetElement (  	"" 	; [ "action" ; "validate" ; JSONString ] 	; [ "context" ; "login" ; JSONString ] ) ] 

This script checks to make sure the user has filled in the required fields, username, and password. The values are then passed to the Re-Login script step. If the Re-Login completes successfully, validation parameters are passed back up to the Startup script. Otherwise, the user is warned about the failure and the script is halted.

If you’re allowing new account creation, you’ll need a second script to take user data and create a new Data Entry Only or Read-Only account.

#  - Startup | New Account and Login

Set Error Capture [ On ]
Allow User Abort [ Off ]
# 
# ---------[ CHECK IF THE USERNAME OR PASSWORD OR CONFIRM PASSWORD FIELDS ARE EMPTY ]---------
If [ IsEmpty ( GLOBALS::user_USERNAME ) or IsEmpty ( GLOBALS::user_PASSWORD ) or IsEmpty ( GetRepetition (  GLOBALS::user_PASSWORD ; 2 ) ) ] 
	#  
	Beep
	Show Custom Dialog [ "Username / Password required" ; "Please enter a Username and Password to create a new login." ] 
	Halt Script
	# 
	# ---------[ CHECK IF THE PASSWORD AND CONFIRM PASSWORD MATCH ]---------
Else If [ Get(LayoutName) = "New Account Setup" and ( GLOBALS::user_PASSWORD <> GetRepetition ( GLOBALS::user_PASSWORD ; 2 ) ) ] 
	#  
	Beep
	Show Custom Dialog [ "Passwords do not match" ; "The passwords do not match. Please re-enter your desired password." ] 
	Halt Script
	# 
Else
	# ---------[ CREATE A NEW DATA ENTRY ONLY ACCOUNT USING THE PROVIDED USERNAME AND PASSWORD ]---------
	Add Account [ Account Name: Trim ( GLOBALS::user_USERNAME ) ; Password: •••••••• ; Privilege Set: [Data Entry Only] ] 
	# 
	# ---------[ TRAP FOR ERROR CREATING ACCOUNT ]---------
	Set Variable [ $error ; Value: x.error ] 
	If [ not $error ] 
		#  
		# ---------[ RE-LOGIN USING THE ACCOUNT JUST CREATED ]---------
		Re-Login [ Account Name: GLOBALS::user_USERNAME ; Password: •••••••• ; With dialog: Off ] 
		Set Variable [ $error ; Value: x.error ] 
		# 
		# ---------[ TRAP FOR ERROR LOGGING IN USING NEW ACCOUNT ]---------
		If [ $error ] 
			#  
			Beep
			Show Custom Dialog [ x.errorMessage ( $error ) ; "Login could not be completed. Please check your username and password. " & x.errorMessage ( $error… ] 
			Halt Script
			# 
		End If
	Else
		Beep
		Show Custom Dialog [ x.errorMessage ( $error ) ; "There was an error creating your user account. Please try again. " & x.errorMessage ( $error ) ] 
		Halt Script
		# 
	End If
End If
# 
# ---------[ PASS VALIDATION PARAMETERS BACK INTO THE CALLING SCRIPT ]---------
Exit Script [ Text Result: JSONSetElement (  	"" 	; [ "action" ; "login" ; JSONString ] 	; [ "context" ; "login" ; JSONString ] ) ] 
# 

Final Thoughts

Now you’ve got the framework to build a beautiful and flexible login routine. With this routine, you can give your users more instructive text, a unified interface, and an all-around nicer experience.

A demo file of how the login routine works, is included with this post. Please get under the hood and see how it works in detail. I can’t wait to see what amazing things are done with this routine. If you have questions or suggestions, get in touch with us.