Part 1 - Setting Up

Step 1) Setting up Appsmith

Appsmith can be self-hosted within your organisation or you can use the cloud service provided by Appsmith themselves. Speak with a member of our team for advice on setting up Appsmith within your organisation.

To begin, open Appsmith and create a new application called “Xero - Invoices” and then click on “Build with drag & drop”. You’ll see an empty page with “Drag and drop a widget here”. We now need to connect Appsmith to your Xero API account.

Step 2) Setting Up the Data Source

On the left-hand side of Appsmith you'll find the following sections; “Widgets”, “Queries/JavaScript” and “Data Sources”. Let’s start by connecting to your business account on Xero through the Xero API.

Click on the plus button to the right of “Datasources” and then select “Authenticated Account”. Appsmith will now create a new REST API datasource within your application. But before we can use it, we need to configure the datasource to correctly communicate with Xero's oAuth Authentication.

1. In the URL field paste the base address of Xero’s API (https://api.xero.com/).
2. Click on the Authentication Type dropdown, and select OAuth 2.0 .
3. Scroll down to Grant Type and select Authorization Code.
4. Within the Access Token URL field paste the following https://identity.xero.com/connect/token.
5. We now need to provide the scope of our API access. In this guide, we'll need to access the contacts and accounting data from our organisation. So paste the following values into the field openid, offline_access, accounting.transactions.read, profile, accounting.contacts.read, email.
6. Within the Authorization URL paste the following https://login.xero.com/identity/connect/authorize

In order to get our Client ID and Client Secret - we need to make a quick diversion to Xero. Head over to the following link and once logged in click on the blue “New App” button. Give your application a name (e.g Northwinds Appsmith) and then paste your generated “Redirect URL” from Appsmith into the box at the bottom.

Once created, go into the registered application and select “Configuration” on the left-hand side. Take note of the Client ID and Client Secret (if you don’t have one click on the generation button). Now return to Appsmith and paste these values into the respective fields.

We should now be ready to authorise your access with Xero. Simply click on the “Save and Authorize” button at the bottom of the page and wait a few moments until you’re redirected to Xero. Select on the organisation you want to grant access to, and click on “Allow access”. You’ll then be taken back to Appsmith.

Hope you enjoyed part 1 of our guide to connecting Xero to Appsmith. Part 2 will be coming soon, if you want to learn more get in touch at : [email protected]