Front - Application Objects

Our Front integration works best when combined with the Application Objects (formerly Dynamic Objects) configuration. Perform real-time requests to get shipment details in your Front Client by identifying Tai Shipment Ids in your messages.

Setup Steps

• Get API Key in Tai
• Create an Application Object in Front
• Add Details to your Application Object in Front
• Sample Payload Data

Get API Key in Tai

Before you get started in Front, create a new Public Authentication Key in the TMS. You can do this by navigating to LSP and then selecting Public Authentication Keys.

1. Click on the green "Add Public Authentication Key" button in the top right corner of the page.
2. Choose your LSP Organization.
3. Choose a LSP Staff that they key will be associated with. This will determine the shipment visibility of your requests so this should likely be someone with access to all of your customers and shipments.
4. Click the blue "Save" button in the lower right corner of the modal to create your key.

After creating your key you should see a record on the "Public Authentication Keys" results table. You can click on the "copy" icon to the right to copy the API Key to your clipboard. Next you'll move over to Front.

Create an Application Object in Front

Next you'll access your Front account with administrative privileges. Start by logging in to https://app.frontapp.com/ and performing the following steps.

1. Click the settings icon in the top right corner of the navigation bar.
2. Then click "Developers" on the left side navigation.
3. Next click the blue "Create app" button in the middle of the screen.

1. When the "Create app" modal opens you'll start by naming your app. We recommend using "Tai Shipment Data" since this app will be used to show shipment information associated to shipment ids found in your messages.
2. Add a short description. We recommend "Application Object for detecting Tai Shipment Id and retrieving shipment data.".
3. To start configurating your app click the blue "Create" button on the lower right of the modal.

1. The first step in configuring your app is to click on the "Servers" tab.
2. Then click the blue "Create server" button on the top right of the page.

1. Begin creating your server by adding the "Origin". You can use a custom domain here if you'd like but we recommend sticking with "https://tms.taicloud.net". 
2. Set the "Authentication strategy" to use "API Key" in the dropdown.
3. Our property name needs to be set to "X-Api-Key".
4. For the "Send as" you'll choose the default of "HTTP Header". Click the blue "Create" button in the lower right corner to continue.

After the server is saved you'll need to click the link to get back into the newly created server. From here you can add your API Key from the TMS that you created earlier.

 

1. Click the "Add" button on the right side of the page under "Local credentials".
2. Paste in the API Key that you created in the TMS.
3. Click the blue "Save" button in the lower right of the modal.

1. Return to the "Basic Information" tab of your application.
2. Click the blue "Edit" button next to the blank icon to add an image to your application. We recommend using the following Tai PNG which can be saved by right clicking on the image below.

1. Click the blue "Choose file" link to open up your file explorer and choose the image you saved from above (or another of your choosing).
2. Next click the blue "Save" button in the lower right of the modal to update the image for your app.

1. Next click on the "Features" tab.
2. Scroll down and click on the "See all connectors" button in the "Connectors" card.

1. Click on the blue "Configure application object" button to begin setting up the details of your application. This setup process will have 5 steps noted by the setup wizard in Front.

1. Add a name. We recommend using "Shipment Id Pattern" but anything will work.
2. Add a description that explains what this object is doing. We recommend using "This pattern can be used to detect the presence of a Tai Broker TMS Shipment Id number."

1. Next we'll create a reference by leaving the default selection to "transform text into an application object when" and clicking the blue "plus" icon in the input field.
2. Select "Digits" as your pattern.

1. Next add a "12" by typing in the front of your selected "Digits" pattern.
2. Then click the down arrow to open up the pattern dropdown again.
3. This time, choose the "Customize" option.

1. In the Customize character count modal choose "Exactly".
2. In the number of Occurrences enter "7".
3. Then click the blue "Save" button in the lower right of the modal.

Your final pattern should look like this. When ready, you can click the blue "Next" button on the bottom right of the page to proceed to step 3.

1. To begin building your request you need to add the URL. This can be copied from the "Server" tab and the configuration you completed earlier for your API key. In our example we use "https://tms.taicloud.net".
2. Next we'll add the API endpoint we want to use to end of our URL. In this case we are looking for shipment data so we're going to use the GET Shipments API. The endpoint we'll add here is "/PublicApi/Shipping/v2/Shipments/12" and at the very end we'll add our "Digits{7}" pattern we created in step 2.
3. In order to test this was setup correctly you can grab any Shipment Id in the TMS and paste it into the "Text Reference" input of the "Test Request" section. The user that was linked to your API must have visibility into this shipment for this test to work properly.
4. Click the white "Test request" button and you should see a green "Successful response" alert at the bottom with a sample payload of the shipment matching the provided shipment id.

1. In step 4 we'll define the output of our object by adding a few more details. The "Target URL" field is a redirect URL that a user can visit by clicking on your application object in their message. In this case, we'd like the user to be redirected to the Shipment Detail Page in the TMS of the identified shipment Id. Our Target URL should be "https://tms.taicloud.net/BackOffice/ShipmentDomestic#/Details/12" + the "Digits {7}" pattern from earlier.
2. The Title should be "Shipment Id: 12" + the "Digits {7} pattern from earlier.
3. The Description should be "A Shipment Id has been detected." or something similar.

1. At this point we want to save our progress before adding more information to the object. If you'd like to test this again you can paste the shipment id from earlier and click the white "Test output" button again. You should see a similar result in the image above.
2. Click the blue "Save" button to save your working Application Object.

Add Details to your Application Object in Front

To begin adding details you should first glance over the sample payload data below. You'll have access to any of the data you see in this payload by configuring your app to access the specific properties you would like to display. For our example we'll add a few common properties including:

• Customer Name
• Shipment Type
• Status
• Carrier Name
  
  

You can use the foundations learned in these examples to add any additional properties that you need.

1. Return to step 4 of you application for "Define outputs".
2. Click on the blue "Create new" button under the Output dynamic variables panel.

1. You should see a new panel for creating the variable. Click the blue "Create new" button.

1. Click on "Response".

1. Name this response. We recommend using "Shipment Data" since this will contain all of the shipment data fetched from the API.
2. Click the blue "Save" button in the lower right of the panel.

1. Next we'll create another new variable using the steps above but this time we'll choose "Use result of variable".

1. Start by naming this variable. This time use "customer.name" because we are going to use this variable to get the customer name from the previous variable.
2. In the "Use value of" input click the down arrow and choose our previous variable, "Shipment Data".
3. Next, click "Add a step" to add the next two items.
4. For the first item added choose "Extract object property" and enter a value of "customer". This is coming from the "customer" property of our Shipment Data response.
5. For this second item added choose "Extract object property" and enter a value of "name". This is coming from the "name" property of the "customer" object that was chosen above.
6. Next choose "Parse as String".
7. Last, click the blue "Save" button in the lower right corner to save this new variable.

1. In order to use these variables we now have to add them to the output. Verify the "Shipment Data" and "customer.name" variables are showing under the "Custom variables" section on the right side.
2. Click the "Add output" button to add this variable to our object.

1. If you are reusing a previously created output you can select it or in the case you can click "New custom field".

1. In the "New custom field" modal add a name. We recommend using "Customer Name".
2. Then add a short description. We used "The current customer associated with this shipment.".
3. Choose the "Type" as "Text" since our variable is a text value.
4. Click the blue "Create" button in the lower right corner to create it.

1. Once the output has been added to your list of Map fields, click the "plus" icon and select your previously created variable. In this case, "customer.name".

Shipment Type

Shipment Status

Carrier Name

Sample Payload Data

This is a sample payload of the data that will be available in the Front fetch request. You can add any of these properties to your Dynamic Object by creating new variables like the "status" example above.

{
  "shipmentId": 119121287,
  "mileage": 100,
  "customer": {
    "name": "Marine Solutions",
    "referenceNumber": "1233",
    "staffID": 92712,
    "staffName": "Front Office (Imp)",
    "salesRepNames": "Sales Rep",
    "billToOrganizationId": 54931,
    "officeOrganizationId": 53207,
    "officeName": "Implementation Demo"
  },
  "payerOrganization": {
    "organizationId": 54931,
    "name": "Marine Solutions",
    "address": {
      "streetAddress": "20 Triad S Dr",
      "city": "Saint Charles",
      "state": "MO",
      "zipCode": "63304",
      "country": "USA"
    }
  },
  "totalBuy": 285.6,
  "totalSell": 328.37,
  "status": "Quote",
  "carrierList": [
    {
      "carrierMasterId": 17840,
      "name": "ROADRUNNER TRANSPORTATION SERVICES INC",
      "scac": "RDFS",
      "dotNumber": "242009",
      "mcNumber": "170247",
      "trackingURL": "",
      "city": "MILWAUKEE",
      "state": "WI",
      "zipCode": "53224",
      "phoneNumber": "+14146151500",
      "tariffName": "BL - Implementation Demo - RDFS - API",
      "transitType": "Linehaul",
      "status": "Quote",
      "buy": 285.6,
      "sell": 328.37
    }
  ],
  "attachments": [],
  "shipmentType": "LTL",
  "stackable": false,
  "trailerType": "Van",
  "trailerSize": "Full",
  "weightUnits": "lbs",
  "dimensionUnits": "in",
  "serviceLevel": "Normal",
  "shipmentReferenceNumbers": [
    {
      "referenceType": "API Quote Number",
      "value": "8591216"
    },
    {
      "referenceType": "Customer Confirmation",
      "value": "False"
    },
    {
      "referenceType": "Carrier Confirmation",
      "value": "False"
    },
    {
      "referenceType": "Shipment Id",
      "value": "119121287"
    }
  ],
  "stops": [
    {
      "shipmentStopId": 32283923,
      "companyName": "Tai Software - St. Louis",
      "streetAddress": "4500 S Kingshighway Blvd",
      "streetAddressTwo": "",
      "city": "Saint Louis",
      "state": "MO",
      "zipCode": "63109",
      "country": "USA",
      "contactName": "",
      "phone": "",
      "email": "",
      "estimatedReadyDateTime": "2024-05-28T14:26:28-06:00",
      "estimatedCloseDateTime": "2024-05-28T14:26:28-06:00",
      "stopType": "First Pickup",
      "shipmentStopReferenceNumbers": []
    },
    {
      "shipmentStopId": 32283924,
      "companyName": "Tai Software",
      "streetAddress": "401 Main St",
      "streetAddressTwo": "Suite 201",
      "city": "Huntington Beach",
      "state": "CA",
      "zipCode": "92648",
      "country": "USA",
      "contactName": "",
      "phone": "",
      "email": "",
      "estimatedReadyDateTime": "2024-06-01T14:26:28-08:00",
      "estimatedCloseDateTime": "2024-05-28T00:00:00-08:00",
      "stopType": "Last Drop",
      "shipmentStopReferenceNumbers": []
    }
  ],
  "commodities": [
    {
      "handlingQuantity": 1,
      "packagingType": "Pallet",
      "length": 40,
      "width": 40,
      "height": 40,
      "weightTotal": 500,
      "hazardousMaterial": false,
      "piecesTotal": 1,
      "freightClass": "85",
      "description": "Widgets",
      "hazardClasses": []
    }
  ],
  "accessorialCodes": [
    {
      "code": "LFTD",
      "name": "Liftgate - Delivery"
    }
  ],
  "shipmentAlerts": [
    {
      "type": 226,
      "createdDate": "2024-05-28T14:26:51.14+00:00",
      "resolved": false
    },
    {
      "type": 108,
      "createdDate": "2024-05-28T14:26:52.5766667+00:00",
      "resolved": false
    }
  ]
}