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.
In the getList/getBoard function, we'll add the AJAX call. Make sure to save the state of this before making the AJAX call. We will be doing a GET call to the /list/{id}/cards endpoint of the Trello API. If the call is successful, bind it to the "cards" model on the view we defined in the onInit function. Can you figure out the set-up?
Hint #1: the Trello Docs give you the fully formed URL for the request when you try it out.
Hint #2: Look below 🙂
I like to put a console.log() statement when testing so I can see if the data is returning as expected. If it looks good, we can comment out this line. Don't forget to define your listID, key, and token values.
SAVE your changes.
Let's open up the boards.view.xml file. Let's define a list to bind the cards to. I toyed around with different aggregate containers, and List was the best option I found for the size of the pane and the way the data is displayed. If you don't like lists, you are welcome to use another aggregating container.
Within the list, we have to define the item that will be aggregated. I liked the way a NotificationListItem looked, so I am going to use that. I set the title to the name of the card, the description to the description of the card, and the priority to whether or not I am subscribed. The priority will provide a visual indicator for me when I load the cards as to which ones I was interested in or working on. I use a little expression binding to pick the priority.
Now are view and controller for the right side panel are done. Let's actually create the service needed to display the new panel and icon toggle.
Right click the service folder and select New > File. Name the file:
In this file, we'll define what to do when new right side Icon is clicked. Here is the code for the service:
The SAP Web IDE SDK documentation I linked to earlier will go into detail on what is being done in the service, but the spark notes is that we are loading the xml view into the Pane content that will be displayed when the icon is clicked.
SAVE your changes.
Lastly, we need to create a JSON file to match the service. Right click on the service folder and select New > File. Name it:
Copy the following code into the JSON file.
SAVE your changes.
Now we can run the plugin! Right click on the plugin.json file and select Run as Plugin. This will load a Debug version of SAP Web IDE. Once the debug SAP Web IDE loads, you'll notice a new icon on the right side menu. Hover over it. It should say "Trello Tasks - applicationRightSidebar". That's your new plugin! Click it to toggle the pane open. You'll see a new pane with your Trello tasks/cards!
Cool right?!! Now you don't have to keep switching between tabs or screens or windows to see what you need to work on. You can get a quick reminder here in your SAP Web IDE!
Next week we'll add on some more functionality to the plugin and Trello cards. Feel free to play around yourself to change this blog for your needs!
See you next #APIFriday!
(P.S. Can you implement my Refresh Cards button that I have in the video? It's about 3 lines of code. If not, I'll cover that next week! )
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.
"command",
"commandGroup",
"perspective"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.
"board": {
"implements": "sap.watt.common.service.ui.Part",
"module": "trello_app/service/toggleMyRightSidePane"
}We don't need to provide an interface.
Now we can configure the services. Let's add in the following code under configures -> services.
"command:commands": [{
"id": "myrightpane.switch",
"label": "Trello Tasks",
"icon": "activity-items",
"service": {
"implements": "sap.watt.common.service.ide.AbstractUIPartToggler",
"module": "sap.watt.common.perspective/command/AbstractUIPartToggler",
"configuration": {
"id": "myrightpane.switch",
"service": "@board",
"perspective": "development"
}
}
}],
"commandGroup:items": [{
"parent": "view",
"command": "myrightpane.switch",
"prio": "1"
}, {
"parent": "applicationRightSidebar",
"command": "myrightpane.switch",
"prio": "100"
}],
"perspective:views": [{
"id": "board",
"service": "@board",
"area": "right",
"cssclass": "explorer splitterContainer selectable"
}]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!
//define value
"sap/ui/model/json/JSONModel"
//onInit code
var oMessages = new JSONModel();
this.getView().setModel(oMessages, "cards");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.
getList: function() {
}In the getList/getBoard function, we'll add the AJAX call. Make sure to save the state of this before making the AJAX call. We will be doing a GET call to the /list/{id}/cards endpoint of the Trello API. If the call is successful, bind it to the "cards" model on the view we defined in the onInit function. Can you figure out the set-up?
Hint #1: the Trello Docs give you the fully formed URL for the request when you try it out.
Hint #2: Look below 🙂
var self = this;
$.ajax({
type: 'GET',
url: "https://api.trello.com/1/lists/" + listID + "/cards/?key=" + key + "&token=" + token,
async: true
}).done(function(results) {
console.log(results);
self.getView().getModel("cards").setProperty("/data", results);
});I like to put a console.log() statement when testing so I can see if the data is returning as expected. If it looks good, we can comment out this line. Don't forget to define your listID, key, and token values.
SAVE your changes.
Let's open up the boards.view.xml file. Let's define a list to bind the cards to. I toyed around with different aggregate containers, and List was the best option I found for the size of the pane and the way the data is displayed. If you don't like lists, you are welcome to use another aggregating container.
<List
id="container"
items="{cards>/data}"
growing="true"
growingThreshold="3"
growingScrollToLoad="true" >
</List>Within the list, we have to define the item that will be aggregated. I liked the way a NotificationListItem looked, so I am going to use that. I set the title to the name of the card, the description to the description of the card, and the priority to whether or not I am subscribed. The priority will provide a visual indicator for me when I load the cards as to which ones I was interested in or working on. I use a little expression binding to pick the priority.
<NotificationListItem
title="{cards>name}"
description="{cards>desc}"
showCloseButton="false"
priority="{= ${cards>subscribed} ? 'Low' : 'None' }" />Now are view and controller for the right side panel are done. Let's actually create the service needed to display the new panel and icon toggle.
Right click the service folder and select New > File. Name the file:
toggleMyRightSidePane.jsIn this file, we'll define what to do when new right side Icon is clicked. Here is the code for the service:
define(["sap/watt/common/plugin/platform/service/ui/AbstractPart"], function(AbstractPart) {
"use strict";
var Pane = AbstractPart.extend("trello_app.service.toggleMyRightSidePane", {
_oPainView: null,
getContent: function() {
if (this._oPainView === null) {
this._oPainView = sap.ui.view({
viewName: "trello_app.view.boards",
type: sap.ui.core.mvc.ViewType.XML,
viewData: {
context: this.context
}
});
}
return this._oPainView;
}
});
return Pane;
});The SAP Web IDE SDK documentation I linked to earlier will go into detail on what is being done in the service, but the spark notes is that we are loading the xml view into the Pane content that will be displayed when the icon is clicked.
SAVE your changes.
Lastly, we need to create a JSON file to match the service. Right click on the service folder and select New > File. Name it:
toggleMyRightSidePane.jsonCopy the following code into the JSON file.
{
"name" : "trello_app.service.Pane",
"description" : "Right Pane",
"extends" : ["sap.watt.common.service.ui.Part"] ,
"methods" : {
"isAvailable" : {
"params" : [
{
"name" : "oDocument",
"type" : "object"
}
],
"returns" : "object"
},
"isEnabled" : {
"params" : [
{
"name" : "oDocument",
"type" : "object"
}
],
"returns" : "object"
}
}
}SAVE your changes.
Now we can run the plugin! Right click on the plugin.json file and select Run as Plugin. This will load a Debug version of SAP Web IDE. Once the debug SAP Web IDE loads, you'll notice a new icon on the right side menu. Hover over it. It should say "Trello Tasks - applicationRightSidebar". That's your new plugin! Click it to toggle the pane open. You'll see a new pane with your Trello tasks/cards!
Cool right?!! Now you don't have to keep switching between tabs or screens or windows to see what you need to work on. You can get a quick reminder here in your SAP Web IDE!
Next week we'll add on some more functionality to the plugin and Trello cards. Feel free to play around yourself to change this blog for your needs!
See you next #APIFriday!
(P.S. Can you implement my Refresh Cards button that I have in the video? It's about 3 lines of code. If not, I'll cover that next week! )
- SAP Managed Tags:
6 Comments
