Build-On Tutorial:

Social Media Integration

Social Media Integration: Lesson 1

View Member's LinkedIn and Twitter page

Lesson Overview

In this lesson, you will add two new fields to the Member table to keep track of a member’s Twitter feed and LinkedIn page. You will also add these to the Member Detail layout and create scripts to view the member's social media pages in a web viewer.

Step 1 - Create fields

Create new fields in the Member table for tracking social media information.

  1. Open the Manage Database dialog (File > Manage > Database...).
  2. Activate the Fields tab and select the Member table from the table dropdown.
  3. Create two new text fields named SocialMedia_LinkedIn and SocialMedia_Twitter:
  1. Select the z_Globals table from the table dropdown.
  2. Create a new text field named g_WebviewerURL. This field will be used to help display the social media information on the card windowlayout you will create in Step 3.
  3. Click on the Options... button, then click on the Storage tab of the Field Options dialog.
  4. Click on the Global Storage checkbox.
  1. Confirm your settings and close the Manage Database dialog.

Step 2 - Add fields to the Member Detail layout

Next, you will add the two fields created in Step 1 to the Member Detail layout.

  1. Enter Layout mode using the Edit Layout button in the status toolbar.

    Note: You can also enter Layout mode using the View > Layout Mode menu item, or the keyboard shortcut Command-L (macOS) / Control-L (Windows).
  2. Use the Layout pulldown menu in the status toolbar to switch to the Desktop >Member > Member Detail layout.
  3. Using the Fields tab, drag and drop the SocialMedia_LinkedIn and SocialMedia_Twitter fields to the body of the layout. (If the Fields tab is not open, click the Objects paneicon in the status toolbar, then click Fields.)
  1. Arrange and size the fields and their labels to be similar to the layout shown below. Rename the labels as needed:
  1. If it is not already open, open the Inspector using the View > Inspectors > Inspector menu item (you can also access it using keyboard shortcut Command-I (macOS) / Control-I (Windows)).
  2. Activate the Styles tab of the Inspector, which is used for specifying object styles.
  1. Select each of the new fields on the layout and apply the txt Black.left style.
  2. Select each of the field labels and apply the label Left style.
  3. Use the Exit Layout button to return to Browse mode and review your progress. Enter data for both fields in one of the Member records to help with your testing.

    Note: You can also enter Browse mode using the View > Browse Mode menu item, or the keyboard shortcut Command-B (macOS) / Control-B (Windows).

Step 3 - Create a new card window layout

Create a new layout to display a LinkedIn or Twitter page in a web viewer.

  1. Enter Layout mode.
  2. Create the layout using the Layouts > New Layout/Report... menu item.

    Note: You can also use the Manage Layouts dialog (File > Manage > Layouts...) to create a layout. This dialog is also useful for organizing and reordering your layouts.
  3. Using the New Layout/Report dialog:
    1. Change the Show records from: dropdown to the _GLOBAL table occurrence. This setting determines the context of the layout.
    2. Rename the layout to “WebViewer | Card”.
    3. Choose the layout type: Computer and Form, then click Finish.
  1. In the newly created layout, delete the Header and Footer parts.
    1. Select the Layouts > Part Setup... menu item.
    2. In the Part Setup dialog, select the Header part and click the Delete button.
    3. Also select the Footer part and click the Delete button.
  2. Resize the Body layout part:
    1. Select the Body layout part by clicking on its label.
    2. Activate the Position tab of the Inspector and change the Height setting to 660 pt.
  1. Resize the layout width.
    1. Deselect the Body part by clicking in an empty (white) area of the layout.
    2. On the Position tab of the Inspector, change the Width setting to 832 pt.
  2. Insert the Web Viewer object.
    1. Select the Web Viewer tool in the status toolbar and draw an object the size of the entire layout.
    2. In the Web Viewer Setup dialog, click on Specify... next to the Web Address field.
    3. Enter the following code in the Specify Calculation dialog:
     
_GLOBAL::g_WebviewerURL
  1. Confirm the calculation and close the Web Viewer Setup dialog.
  2. Enter Browse mode.
  3. Open the Manage Layouts dialog (File > Manage > Layouts...).
    1. Using the double-arrows, slide the new layout under the Settings | Card layout, so it is grouped with the other card layouts.
    2. De-select the Include in layout menus checkbox.

Step 4 - Create script

The next step is to create a script that will show the card window and display the social media pages of the current member.

Note: If you have not worked with scripts before, you will find it helpful to review the Creating and Editing Scripts section of the FileMaker Pro Advanced Help system before starting this task.

  1. Open the Script Workspace and duplicate the Template Script (which is located in the Example Scripts folder).
  2. Name the new script“Show Webviewer (URL)”, and move it into the General Scripts folder.

    The script name indicates this script takes a parameter named “URL”. This is an optional parameter that, when specified, indicates the URL the web viewer should display. Amend the “Parameters” comment in the script to indicate this.

    Note: The # and #Assign custom functions are used to pass and parse parameters. The # custom function is generally used to define a script parameter and accepts a key-value pair; the #Assign custom function is called in the script and turns key-value pairs into script variables.
  3. Modify the script by adding the highlighted script steps.

Allow User Abort [ Off ]
Set Error Capture [ Off ]

# Parse the parameters
Set Variable [ $parameter_parsing_ok ; Value: #Assign ( Get(ScriptParameter ) ) ]
If [ $parameter_parsing_ok = False ]
# Parameters could not be parsed, exit this script and report back
   Exit Script [ Text Result: False ]
End If

# No URL was specified
If [ IsEmpty ( $URL ) ]
   Exit Script [ Text Result: False ]
End If

If [ $social_media = "twitter" ]
   Set Variable [ $path ; Value: "https://twitter.com/" ]
Else If [ $social_media = "linkedin" ]
   Set Variable [ $path ; Value: "https://www.linkedin.com/in/" ]
Else
   Exit Script [ Text Result: False ]
End If

Set Field [ _GLOBAL::g_WebviewerURL ; $path & $URL ]
New Window [ Style: Card ; Name: "Web Viewer" ; Using layout: “Webviewer|Card” (_GLOBAL) ]

Exit Script [ Text Result: $null ]

  1. Save the script and close the Script Workspace.

Step 5 - Add buttons to the Members layout

Finally, you will add buttons to the Members layout so that the script you just created can be called for each member.

  1. Enter Layout Mode and navigate to the Member Detail layout.
  2. Using the Button Tool in the status toolbar, add a new button below the SocialMedia_LinkedIn field.
  3. In the Button Setup dialog:
    1. Set the text to “See LinkedIn Profile”.
    2. Set the Action: to Perform Script.
    3. Choose Show Webviewer (URL) as script.
    4. To send the script LinkedIn parameters, set the optional script parameter to:

# ( "URL" ; MEMBER::SocialMedia_LinkedIn ) &
# ( "social_media" ; “linkedin")

  1. On the Styles tab of the Inspector, set the button to use the style btn Minimal.Blue.Previous.
  2. With the button still selected, navigate to the Data tab of the Inspector. In the Hide object when area, enter the formula IsEmpty( MEMBER::SocialMedia_LinkedIn ). This will cause the button to be visible only when there is a value in the SocialMedia_LinkedIn field.
  3. To make the Twitter button, begin by duplicating the LinkedIn button (select the button and select Edit > Duplicate). Move the new button below the SocialMedia_Twitter field, and make the following changes:
    1. Set the text to “See Twitter Profile”.
    2. Set the optional script parameter to:

# ( "URL" ; MEMBER::SocialMedia_Twitter ) &
# ( "social_media" ; "twitter" )

  1. In the Data tab of the Inspector, set the Hide object when formula to:
IsEmpty( MEMBER::SocialMedia_Twitter )
  1. Enter Browse mode to save and review your work.

Step 6 - Review your work

  1. Navigate to a member record that has no data in the LinkedIn or Twitter fields. You should not see the buttons to see those profiles.
  2. Enter a valid LinkedIn username for some member. You should see the button to See LinkedIn Profile, and if you click that you should see that profile in a new card window. Because LinkedIn requires a member profile to view other members, you will be prompted to log in first. You should be able to accomplish the login within the card window, and then see the member’s LinkedIn profile.
  3. You should be able scroll through the profile. When you are done, you can click the X at top left to close the card window.
  4. Enter a valid Twitter handle for some member. You should see the button to See Twitter Profile, and if you click that you should see that profile in a new card window.