Tired of switching back and forth between SAP Web IDE and your task manager, like Trello, Jira, and another tool? Well today’s #APIFriday is for you! We’ll take a look at how to build a SAP Web IDE plugin to show your To-Do Trello cards. The concepts we’ll cover today could be applied to building a right-side pane for Jira or another task manager tool. We’ll add some functionality each week, so keep coming back to learn how to make task management easier!

Week 1: Build a Web IDE Plugin for Trello tasks

Week 2: Enhance your plugin

Week 3: Add tasks to Trello from your SAP tooling (coming soon!)

Week 4: Add notifications for task triggers (coming soon!)

To get started, make sure you have a Trello account and have create at least one board (this does not include the Welcome Board).

The endpoint we will be working with today is the List endpoint. You can learn more about the List endpoint for Trello in their API Docs. Their docs also act as a REST client, so give the API a try!

If you try the API, you’ll see there is a couple data points we need to actually make the call. To get the List ID, we need to get a listing of the lists on a board. We can do this in the Board Endpoint, by looking at /boards/{id}/lists. Your board ID can get found in the your Board URL. When looking at your Trello Board, locate the alphanumeric value between trello.com and your board name.

When you click Try It, it is going to ask for your key and token. If you haven’t found those yet, here is where you can get them: API Key Link

You can also find your token by clicking the Token link on that page. This will generate an auth token for you. Note that is does mention this should only be used when building an app for yourself or for testing, so if you share this app with your team, you’ll need to do real authentication.

Back in the docs, when you click Try It, you’ll be asked to authenticate yourself. Plug in your key and token values here.

Cool! Now you should be getting results. What we are interested in the "id" field. This is the unique identifier for the list. Copy the ID value from the To Do (or similar starting point) list. You want the list id of the cards/tasks requiring action.

Now we can try out the List endpoint!

Let’s get all the cards for the list (as that is why we will be using in our Web IDE plugin). Paste in the list ID into the ID field on the /lists/{id}/cards endpoint.

Click Try it! If there are cards in your list, you’ll see the JSON version of them populate here! If you have cards, then we are ready to head into SAP Web IDE.

Load your SAP Web IDE (I imagine you have the linked bookmarked or saved by now ) or open the service through your SAP Cloud Platform account.

In Web IDE, we’ll start by creating a new project from template. Select File > New > Project from Template. In the template wizard, change the category to Feature and Plugin Development and select the SAP Web IDE Feature template.

Click Next. Name the project (you do you on this one), and click next.

On the Template customization screen, it will be easier for us (read you to copy my code) if we have the same name for our feature and plugin, so let’s call it trello_app. Leave Include sample implementation code UNCHECKED, and click Finish.

Did you read the above directions or just look at the picture? If you just looked at the screenshot, life is going to be fun for you

A new project will generate with the file structure for a plugin/feature. Let’s get started with customizing it!

First thing we need to do is make some changes to the plugin.json to create a new right side pane. The right side pane plugins are the features like Git or Search that you probably have been using. We’re going to add another.

For details information and tutorials on create Web IDE plugins, see the SAP Web IDE SDK documentation and tutorials!

In the plugin.json file, let’s define the services we require. Add the following 3 strings to empty array under requires -> services object.

We need to define the services we will be providing. Let’s create a new service called board in the provides -> services array. The board service will implement a UI5 Part using a right side module we will define later.

We don’t need to provide an interface.

Now we can configure the services. Let’s add in the following code under configures -> services.

Make sure to SAVE your changes. Now that we have the plugin structure set up, we actually need to create the models and views we mentioned.

Right click on the trello_app folder and select New > SAPUI5 View. Name the view boards and leave the namespace blank. Click Next and Finish.

Open the boards.controller.js file. Uncomment the onInit function. Let’s update it. We’ll define a JSONModel for the app, and bind it to the view here. You should know what to do, but if you need some help, look at the code snippet below. Don’t forget to add the JSONModel namespace to the defines array and a a function parameter for the controller!

Let’s define a new function to handle the call to the Trello API. I called it getBoard, but a more accurate name would have been getList.