Card Window in FileMaker 19 WebDirect

FileMaker 19 offers many new features that can be used to enhance the UI/UX of FileMaker Custom apps. One exciting feature is the ability to use card windows in WebDirect. FileMaker introduced the card windows in FileMaker 16. At the time that feature was not supported in WebDirect. Card Window support in WebDirect is a powerful feature.

Card Windows are modal to its parent window and allows the display of context-independent information from the parent window. Using the card window, users can perform actions without navigating from the parent window.

Card windows in webdirect

We can implement a card window using New Window or Go To Related Record script steps and selecting card as the window type. Only Close Window and Dim Parent Window options are available with card window type.

Please refer to the below screenshot

New window options

We can use the following script steps and Functions with cards in FileMaker WebDirect:

Script Steps

  • New Window
  • Adjust Window
  • Move/Resize Window

Functions

  • Get (WindowStyle)
  • Get (WindowLeft)
  • Get (WindowTop)

Things to bear in mind when using Card Window in WebDirect:

  • The status toolbar and menu bar in the parent window are not active when a card window is open.
  • Changes made in the card window will not be reflected in the parent window until the card window is closed.
  • When the card window is closed, the parent window doesn’t always refresh. We can solve this problem by adding a Refresh Portalor Refresh Window script step to the close window button.
  • When you are using the card window, make sure that close window button is visible in WebDirect solution. Because sometimes the close button may not be visible even if the close window option is selected. This can be handled by providing a custom close button on the layout.

Overall, the card window support in WebDirect offers an enriched user experience to Web users. We hope that this blog gives you valuable insights on card window support in WebDirect.

MetaSys has a team of experienced FileMaker developers. Please feel free to reach out should you need to support or you wish to develop FileMaker Apps. Please feel free to reach out to us at  https://www.metasyssoftware.com/contact

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

 

Publish Product data from FileMaker solution to Shopify store

This blog article describes a simple way to integrate Shopify and Filemaker. Shopify is a popular ecommerce platform used by many businesses around the world, and integrating Shopify and FileMaker can save time and money.

FileMaker integration is made easy due to two powerful features. Firstly, the enhanced cURL options which make it easy to interact with many systems by facilitating many common file transfer options. Secondly, the native functions to create and extract data from JSON, which makes interactions with web services easy. These features allow FileMaker to be integrated with almost any third party products that provide the APIs for communication, including Shopify.

Step One: Create a private app in the Shopify account.

  • We can connect to a Shopify account by creating a private app. Shopify requires an API Key, the API password of the private app, and the store name for authentication.
  • The screenshot below shows how to create a Private app and how to get the API key and API password.

FM Shopify demo image 1

  • Give the appropriate API permissions required by your private app.
  • As described in the Shopify documentation, Shopify authenticates private applications using the following URL format: https://{apikey}:{password}@{hostname}/admin/api/{version}/{resource}.json

Note that the ‘hostname’ refers to the store name, and ‘version’ refers to the API version in use.

Step Two: Store the required Shopify details in FileMaker

  • In the FileMaker database, create the fields to store the API Key, API Password, Store Name and API Version, as shown in the screenshot below.

Shopify details 2

Step Three: Write the script

  • Write a script in FileMaker which will create the product in the Shopify account using the Shopify details mentioned in Step 2. For this step, we will use the cURL and JSON features of FileMaker.
  • In the script, first create the JSON array with Product details such as Product Title, Product Description, Vendor etc.
  • Next, format the URL (using the URL format mentioned in Step 1) with your Shopify account details. Then use this URL in the FileMaker ‘Insert from URL’ script step and pass the JSON array using the cURL option in it.
  • Please see the below screenshot for reference.

Script workspace image 3

After these three steps, we are ready to publish our product from a FileMaker database to a Shopify account. If you are experiencing issues with FileMaker, or FileMaker integration, feel free to contact our FileMaker certified developers. For more details, please visit – https://www.metasyssoftware.com/filemaker