First, we must add a new REST API connection and set up some basic configuration.

1. Click the “+” button, in the Data section.

2. Give your datasource a name - this is how it will appear in Budibase. I called mine “GitHub”.

3. Set the URL to https://api.github.com. All requests made through this connector will be prepended with this URL.

4. Add a new “Default Header” for “Authorization”, with the value “token your-token” (replace “your-token” with your GitHub personal access token. All requests made through this connection will include this header.

5. Click Save

We will use GitHub issues to represent our todo items. So, we need to create a query that will list GitHub issues.

1. On your API connector, click “Add Query”

2. Call your query “List Items”

3. The “Function” should be GET

4. For the “Path”, enter /repos/<your_github_username>/<your_repo>/issues.

5. Click on “Run Query”. This query should run successfully. The schema should be that of a GitHub issue.

6. Click “Save Query”

Now that we have created our query, we want to display these items in our app.

1. Go to the design section.

2. In the Home screen, delete the default component.

3. Add new Data provider, setting the “Data” to “List Items” - i.e. our query.

4. Add a new Repeater, inside the Data provider.

5. Add a Paragraph element, inside the repeater.

Now, we want the ability to create a new todo item, directly from the todo list. To achieve this, we will:

1. Create a new form, inside your data provider

2. Add a text input to the form.

3. Set the input’s “Field” property to Title. We will use this to create a new item.

4. Add a button to the form.

5. Click on “Define Actions”, to set the button actions.

6. Add an “Execute Query” action, and choose your “Create new item” request.

7. Assign the item_title parameter to your text input value.

8. Add a “Clear Form” action. This will clear the input, after the request has been executed.

9. Add a “Refresh Data Provider” action, and choose your data provider. This will reload the list, to display your new item.

For every item in our list, we want to display a “Done” button. When clicking on the button, the GitHub issue should be closed and our item should disappear from the list.

1. Create a new query on your GitHub datasource

2. Name your query “Mark as Done”

3. Select the PATCH function

4. Add a new parameter called “item_number”

5. Set the path to /repos/<github-username>/<github-repo>/issues/{{ item_number }}

6. Set the body to { “state”: “closed” }

7. Save your query

Now, we can use this query in our user interface.

1. First, we will add a new container inside our repeater. We want to display the button and title alongside each other, so must use a container to achieve this layout.

2. Drag your title “Paragraph” component inside the container.

3. Add a button to the container and set the text to “Done”

4. Now, click on “Define Actions” for the button

5. Add an “Execute Query” action, choose the “Mark as done” query, and pass in the GitHub issue number as a parameter.

6. Add a “Refresh Data Provider” action.

Our app is a simple Todo list, and we would like to display the list in the center of the page, without a navigation bar.

1. Add a new container to the Home screen.

2. In the component tree, drag your data provider inside the container.

3. Set the container’s Align Items property to “Center”

4. Click on your Home screen in the component tree, and change the “Layout” to “Empty Layout”. This will remove the nav bar.

5. Finally - set your theme to “Darkest”!

Next, we want to add the ability to create a new item from our Budibase app. We want to be able to pass in the item title, to the create query. To do this, we’ll create a query with parameters:

1. Click on your GitHub datasource

2. Click “Add Query”

3. Enter the name “Create new item”

4. The function is “POST”

5. Add a parameter called “item_title”

6. Set the “Path” to /repos/<github_user>/<github-repo>/issues

7. Set the Body to { “title” : “{{ item_title }}” }. This will pass our item_title parameter into the “title” field, in the JSON body.

8. Test your query to make sure that an issue is created.

This guide will show you how to build a CRUD application, with the Budibase REST API connector. For this example, we will build a Todo list, using GitHub Issues to store our items.

If you want to follow along, you will need to:

1. Create a GitHub repository.

2. Create a GitHub access token with the repo > public_repo scope checked.

3. Add a few issues to your repository, so that we have some data to test with.