Integrating jQuery datatable in FileMaker application using Perform JavaScript in Web Viewer

In a previous blog, we described the new exciting features of FileMaker 19. One of these features is the new ‘FileMaker JavaScript Web Viewer Integration’. Using this feature, we can establish  smooth communication between FileMaker and Web Viewers. This allows us to extend the functionality of FileMaker systems with features which are not native to FileMaker.

Claris FileMaker 19 introduced a new script step called “Perform JavaScript in Web Viewer,” and JavaScript function, FileMaker.PerformScript(). Using this we can use the features which are readily available in JavaScript in FileMaker.

In this blog article, we will explore the “Perform JavaScript in Web Viewer” script step. Using this new feature, we are adding the jQuery datatable in our FileMaker application.

Demonstration

In our FileMaker application, we have a list of companies and their contacts. On the company list layout we display the list, and for selected companies, we display their contacts in the jQuery datatable. Using jQuery debatable, we get all the inbuilt features available with it. For e.g. We get the sort, search functionality and pagination. We don’t have to write separate code in FileMaker !

Please see the below screenshot

Inventory_19

Let’s take a look at how we can achieve this in FileMaker application.

  • Add a web viewer on the layout and give it a name.
  • Embed the JavaScript function/code as a calculation result in the Web Viewer.

Specify calculation

The screenshot above displays a JavaScript function called “showContacts” that performs the following:

  • Accept one parameter from FileMaker script.
  • Format the parameter in a proper format.
  • Create the datatable and pass the above parameter as data to it.

In the Web Viewer, also add all the JavaScript libraries required for datatable.

Now create the script in FileMaker with “Perform JavaScript in Web Viewer” script step. This script  will call the JavaScript function that we wrote in the web viewer. In this script, create the data in JSON format, and pass this as a parameter to the JavaScript function.  Please refer to the screenshot below.

Perform Javascript in web viewer

Using this new FileMaker feature, we can work on the functionalities which are readily available in JavaScript in our FileMaker application.

If you are looking for support with FileMaker, or FileMaker integration, then feel free to contact our FileMaker certified developers. For more details, please visit –https:// www.metasyssoftware.com/filemaker

 

Implementing OAuth in Custom FileMaker Application

This article is a continuation of the FileMaker OAuth 2.0 Authentication  Here we will show you how OAuth works with some sample code and how it can be used to log on to Custom FileMaker application.Steps Involved-

  1. Configure FileMaker Server / Cloud
  2. Create Application and configure it on provider’s account
  3. Set up Groups or Accounts in FileMaker file

1. Configure FileMaker Server / Cloud

The first step to use OAuth is to enable External Authentication on FileMaker Server/Cloud.

Enabling EA on FileMaker Server: First, you need to login to Admin Console of FileMaker Server and then you can go to Database Server>>Security and in Client Authentication area select FileMaker and External Server Accounts and then enable the OAuth Providers.

Enabling EA on FileMaker Server article 2 image 1

Enabling EA on FileMaker Cloud: In this case, you need to login to Admin Console of FileMaker Cloud and then you can go to Configuration>> Client Authentication, and from there you can enable OAuth Identity Providers.

Enabling EA on FileMaker Cloud article 2 image 2

2. Create Application and configure it on provider’s account

Now that we have enabled OAuth Authentication next we have to Create OAuth Client ID Credentials on provider’s account.

Amazon

  • Sign up at- https://login.amazon.com/manageApps
  • Create OAuth Client ID Credential
  • Set Allowed/Authorized Return URLs (https://FullyQualifiedDomain/oauth/redirect)
    in our case FQD: https://metasys.fmi.filemaker-cloud.com
  • Copy Client ID and Client secret into FileMaker Server / Cloud
  • Set up Accounts in FileMaker file

Creating OAuth on Amazon article 2 image 3.png

FileMaker Cloud article 2 image 4

Manage security

Google

  • Sign up at- https://console.developers.google.com
  • Create OAuth client ID Credential
  • Set Allowed/Authorized Return URLs (https://FullyQualifiedDomain/oauth/redirect)
    in our case FQD: https://metasys.fmi.filemaker-cloud.com
  • Copy Client ID, Client secret into FileMaker Server / Cloud
  • Set up Accounts in FileMaker file

Creating OAuth on Google article 2 image 6

FileMaker Cloud

Managing Contacts

Microsoft Azure

  • Sign up at- https://portal.azure.com
  • Create OAuth client ID Credential
  • Set Allowed/Authorized Return URLs (https://FullyQualifiedDomain/oauth/redirect)
    in our case FQD: https://metasys.fmi.filemaker-cloud.com
  • Copy Client ID, Client secret and Tenant ID into FileMaker Server / Cloud
  • Set up Accounts in FileMaker file

Creating OAuth on Microsoft Azure image 9

 

Manage security Image 2

With Azure, we can also configure to log in with group

  • Create Group in Azure Active Directory
  • Add User to the GroupEnable Group Authentication in Application manifest (set “group membership claims”: “SecurityGroup”)