Hello everyone! Joseph here from GreenFlux, LLC. Appsmith is my favorite program and I am a Shopify Partner Developer.

Although I have written several blog posts about Appsmith integrations, today is my first official post for Appsmith. I am thrilled to work with Appsmith and share my API integration experiences with the community.

Appsmith is something I just discovered after doing a lot with Shopify API over several years. This guide was created to help businesses solve common problems.

But before I get into those particular use-cases…

This guide was written for Shopify API. However, the build process can be easily applied to any API.

Although authentication steps can be slightly different, most of the information in this guide should work with any API.

• Perform CRUD (Create/Read/Update/Delete) operations with the API directly
• Google Sheets API-GET Request Download/sync
• Google Sheets API Data: Find/Modify/Delete a row
• Use Google Sheets to send data to Shopify (Create or Update existing)

Here are the specific use cases

Most shops will only accept orders for products they already have in stock. They then ship the order out when it arrives. Some businesses wait until orders are placed to start ‘creating’ products. This could be T-shirts printing, custom-built skateboards/bikes, or even wholesale produce that is only harvested once an order has been placed.

The creation/harvest process can involve multiple steps, multiple employees, and may even require different access levels. Many industries create products to-order and require a way to track the process without having to share the Shopify admin login with all users.

Let’s suppose you have a Shopify shop that sells high-tech vehicle upgrades.

You have a team consisting of three employees:

[Assembly, Quality Control, Shipping]

Use the Case	Description
Case 1	Google Sheets data is linked to every order so you can track production
Case 2	Workers can edit orders (mark shipped) securely without sharing Shopify login

Let’s build!

Next, enable the Shopify API.

1. Log in to Shopify. Click Apps at the left sidebar.
2. Scroll down and click Manage Private Apps
3. Create a private app
4. To expand, click Show inactive API permissions
5. Select: Orders = Read and Write
6. Note the API Key and Password and save it.

Ok, now on to Appsmith

Add Shopify Datasource

1. Drag & Drop to create a new app
2. Create a new authenticated API under Datasources
3. Set the URL to https://YOUR_STORE_NAME.myshopify.com/admin/apiAPI_VERSION/

4. Change the authentication type to Basic

1. Enter the API Key (as username) and password and click Save.

Add Query

Let’s next create our first query for GET orders.

1. Add a new query named get_orders to the Shopify datasource
2. Add the URL to orders.json
3. Click on RUN.

Awesome! The new app now authenticates API calls to Shopify, returning data and making other requests.

1. Please note the response format. All orders are nestled within the “orders” property

Copy the API, rename get_products and then change the orders to products using the endpoint URL.

Next, we’ll add some widgets to display our data

Add Table Widget

1. Drag a new table widget into the Widgets+ section of the left sidebar.
2. Click the / (Slash), command in the settings panel of the table
3. Choose the order_orders API.
4. To bind the Table Widget with the order array in response body, add and.orders.

Now, connect the Google Sheet data.

Google Sheets APIs can be added

Connecting Google Sheets to Appsmith is your first experience.

Datasources + > Create a New Google Sheets

Appsmith Docs

Follow the prompts to authorize Appsmith to connect with your Google account.

1. You can add a new query under Google Sheets datasource named get_workers
2. Enter the URL to your spreadsheet
3. For the sheet name, enter worker
4. Set Row offset to 0 , and row Limit to 50 .
5. RUN.

Okay, we have GET requests that work to Shopify and Google Sheets so far.

You can add more Table Widgets to Workers and Assignments by following the same procedure as above.

We need to be able to send the get_orders request directly to the orders sheet

Add a POST (Create) API for Google Sheets

Appsmith provides a complete list of methods for performing CRUD operations using Google Sheets. We can insert sheet row to add one order at a time. However, the get_ordersapi returns an array of orders.

The Bulk insert Rows method now expects an array object with keys that match the column names of the sheet.

The map() method returns an array.

So map() can be used to order data and create our rows.

Detailed explanation here: blog.greenflux.us/saving-api-response-data-..

1. Copy the Get_Assignments API, and rename Create_Assignments
2. Modify the method to Bulk Insert rows
3. Enter:

4. RUN

SWEET!

With a single click, all open orders can be saved to Google Sheets!

What happens if we run it again?

Uhhh… I now have two copies for every order.

Hmm… Shopify needs a way to tell Shopify which orders are in progress, and only upload new ones!

Passing values from an API response to a new request

Here is where the fun begins. We first need to obtain_assignments. Next, we need to find the maximum order number in our spreadsheet and then send Shopify a request to receive new orders.

Shopify API documentation

To filter orders returned by customers, we can use the since_id parameter and save new orders to the sheet.

First, we must know the last order number in our sheet. These values are stored in a separate widget so that I can refer to the name and not insert an entire function in the URL.

1. Add a Text Widget called maxId
2. Change the text value to:
3. Update the order_orders API endpoint

This will create an array with all order ids. Sort them to sort out rows that are not in order. Reversing the order of the default sort is low to high. If you want to find the maximum value, then take the first item (zero index [0]).

This is a step in the right direction. You can download orders to your order sheet continuously, but how about updating individual rows?

Let’s first add Widgets that allow us to edit/view the selected assignment. I have added a container widget to the right of the table_assignments. Text widgets display the Order#, Products, Input Widgets, and Instructions Widgets.

Now we can reference the table_assignments.selectedRow properties to populate the default values for our Widgets. This will automatically update the Widgets when the selected row changes.

Let’s next add some Widgets that will set values to the assignment sheets.

We first want to add a Select Widget with all workers. The Options must contain an array with value objects. (literal array or expression that returns an array).

You could also hard-code the Select Widget’s Options.

But wouldn’t it be great if our dropdown could show all current workers from our worker sheet? !

EXCELLENT!

It’s time to try these new input fields.

{dividerUpdate one row in Google Sheets

1. Copy the Get_Assignments api and rename Update_Assignment
2. Modify the Method to Update a Sheet Row
3. Copy one object from the Get_Assignments Response to the Update_Assignment Row.
4. Between properties, add commas
5. Refer to the Widgets’ text values

Shopify allows you to place an order

We’re getting close! Now we need a way to place an order in Shopify.

Note: Orders can have multiple fulfillments per item, and each fulfillment may have a different status. Our app will create one fulfillment per order, ignoring partial fulfillments. This keeps the example simple.

This step will use the /fulfillments.json API endpoint. We need the location ID. This information can be accessed via the API. However, it is easiest to view the location from the URL and obtain the id.

1. Click Settings in the left sidebar of Shopify
2. Click on Locations
3. For fulfillments, click the location you wish to use
4. Copy the URL’s id.

We want our employees to be able select a row from the app and then click ‘Fulfill order’ without having to give them full access to Shopify admin.

We want to use the selectedRow from the table_assignments data to send Shopify a POST request.

1. Add a new query named create_fulfillment to the Shopify datasource.
2. Set the URL to orders/Number(table_assignments.selectedRow.id)/fulfillments.json
3. 3.Set your body to:
4. To run the create_fulfillmentapi, add a button

WHEW! It was quite an adventure!

Thank you for joining me on this first Appsmith post!

Appsmith is so much more than this. We could do so much more with Appsmith, such as connecting to another API, sending Slack messages to workers when an order has been assigned, emailing customers photos of the products in production, and calculating the average processing time per worker or product.