Happy #APIFriday! This week, we are continuing our work on our Trello - SAP Web IDE plugin by exploring some additional endpoints and adding more functionality.
Here's our schedule if you need to catch up on the last #APIFriday:
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!)
This week let's take a look at adding an action to our List items when they are pressed and adding a button to refresh our Trello List in our SAP Web IDE Plugin!
First things first: we need to add a list refresh function and button to our application. You probably noticed that as cards change, they aren't being refreshed in your Web IDE unless you refresh your browser, which is quite time consuming. Let's fix that!
Go to your SAP Web IDE, and open your view in your Trello plugin project.
In the view file, find the opening <List> tag. We'll place a header bar right above that with a title for the app and our refresh button.
Paste in opening and closing Bar container tags between the opening <content> tag and the opening <List> tag.
In a bar container, you can place content on the left, right, and center columns. Let's start with our left side contents which would be a good place to put some information about what is in the pane.
In between the opening and closing <Bar> tags, paste in the <contentLeft> tags.
In between the <contentLeft>, define a new <Text> control and set the text value to To Do Cards.
Here's what that looks like if you need some help:
Now, let's add a button on the right. Go ahead and try to add it without my code snippets. You know how to do the left content, so you have the tools to do it! Don't forget that we need the button to actually do something.
Need some help?
Here's the code:
Did you get it right? (text and press values are flexible) Nice ? !
So now we have defined the name of our press function, but we need to implement it in the controller. Don't forget to save your view file changes!
Open your controller.
In your controller, create the function definition. It should look a little something like this depending on what you named your press property.
Last time, we made a function called getList() that retrieves a list's cards from Trello. We made this a separate function, so now we can re-use it.
In your onPress function, call the getList() function.
Remember how to do this?
If not, look below.
And that's all the changes we need for now! Save your changes and run your project as a plugin.
Being able to see your tasks is great, but what about being able to update them? Let's try that!
Close your Debug version of Web IDE. We don't want to make an code crashes.
In your development SAP Web IDE, open the view file. Let's add the item press property to our notification list item. In your <NotificationListItem> tag, add the press property and define a function name, like this:
Save your change.
Now let's go to the controller.
We need to create this new function to handle when a list item is pressed. Define the shell of your new press function for notification list items. Don't forget to include the event parameter for the function so we can get information from the action taken.
So, we need to get the context of which item was pressed. Using UI5 and the binding properties, this actually is pretty simple. Define a new card variable, and use the binding context to retrieve the object.
Now what do we do with the card once it is pressed? Trello allows you to take actions on cards like move them to a new list, add a comment to them, archive a card, and more. You can choose the action you like, but I am going to move my card to next list when it is clicked. I am seeing my To Do cards, and when I press one, I will move it to the Doing list.
Here is more on the Trello actions for cards. We using the PUT verb to update the features of the card.
So to do this we need the Card ID (which we can get from the binding context we have in our app) and the list ID of the list we want to move the card to. You can get the list ID with the steps we used in the last blog. I created global variables with the List IDs that I would need.
To move a card from one list to the next, in the Trello API we need to set the idList query parameter in the call. Try it out in the Trello Documentation!
Back in your controller function, we need to define a couple variables before we make our Trello API call. First, save the state of this by defining a new variable.
Next, get the ID from the card context we retrieve earlier.
Now we can call our next Trello API endpoint. We'll make a call to the card endpoint to PUT it on a new list when the card is pressed. In our AJAX call (you can copy and paste in the AJAX call from your getList functions if you don't want to re-type it all), we need to change the type to PUT and update the URL for the new endpoint. Can you make the changes?
Here's some help if you need it!
What do we do when a card was successfully moved? Let's add a message toast (that notification that shows up on the bottom of the screen but doesn't require you to interact with it) and refresh our list so we have the latest cards.
Save your changes and run your project as a plugin!
Now when you click on a card, it will move it to the next list. Check your Trello Board and you'll see that the card is in another list.
Easy huh? Awesome!
Well that's all the cat wrote, so join me next #APIFriday to see how to integrate a Trello into your other SAP tools!
Here's our schedule if you need to catch up on the last #APIFriday:
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!)
This week let's take a look at adding an action to our List items when they are pressed and adding a button to refresh our Trello List in our SAP Web IDE Plugin!
First things first: we need to add a list refresh function and button to our application. You probably noticed that as cards change, they aren't being refreshed in your Web IDE unless you refresh your browser, which is quite time consuming. Let's fix that!
Go to your SAP Web IDE, and open your view in your Trello plugin project.
In the view file, find the opening <List> tag. We'll place a header bar right above that with a title for the app and our refresh button.
Paste in opening and closing Bar container tags between the opening <content> tag and the opening <List> tag.
<Bar>
</Bar>In a bar container, you can place content on the left, right, and center columns. Let's start with our left side contents which would be a good place to put some information about what is in the pane.
In between the opening and closing <Bar> tags, paste in the <contentLeft> tags.
<contentLeft>
</contentLeft>In between the <contentLeft>, define a new <Text> control and set the text value to To Do Cards.
Here's what that looks like if you need some help:
<Text
text="To Do Cards" />Now, let's add a button on the right. Go ahead and try to add it without my code snippets. You know how to do the left content, so you have the tools to do it! Don't forget that we need the button to actually do something.
Need some help?
Here's the code:
<contentRight>
<Button
text="Refresh Board"
press="onPress" />
</contentRight>Did you get it right? (text and press values are flexible) Nice ? !
So now we have defined the name of our press function, but we need to implement it in the controller. Don't forget to save your view file changes!
Open your controller.
In your controller, create the function definition. It should look a little something like this depending on what you named your press property.
onPress: function(){
}Last time, we made a function called getList() that retrieves a list's cards from Trello. We made this a separate function, so now we can re-use it.
In your onPress function, call the getList() function.
Remember how to do this?
If not, look below.
this.getList();And that's all the changes we need for now! Save your changes and run your project as a plugin.
Being able to see your tasks is great, but what about being able to update them? Let's try that!
Close your Debug version of Web IDE. We don't want to make an code crashes.
In your development SAP Web IDE, open the view file. Let's add the item press property to our notification list item. In your <NotificationListItem> tag, add the press property and define a function name, like this:
press="onItemPress"Save your change.
Now let's go to the controller.
We need to create this new function to handle when a list item is pressed. Define the shell of your new press function for notification list items. Don't forget to include the event parameter for the function so we can get information from the action taken.
onItemPress: function(oEvent){
},So, we need to get the context of which item was pressed. Using UI5 and the binding properties, this actually is pretty simple. Define a new card variable, and use the binding context to retrieve the object.
var card = oEvent.getSource().getBindingContext("cards").getObject();Now what do we do with the card once it is pressed? Trello allows you to take actions on cards like move them to a new list, add a comment to them, archive a card, and more. You can choose the action you like, but I am going to move my card to next list when it is clicked. I am seeing my To Do cards, and when I press one, I will move it to the Doing list.
Here is more on the Trello actions for cards. We using the PUT verb to update the features of the card.
So to do this we need the Card ID (which we can get from the binding context we have in our app) and the list ID of the list we want to move the card to. You can get the list ID with the steps we used in the last blog. I created global variables with the List IDs that I would need.
To move a card from one list to the next, in the Trello API we need to set the idList query parameter in the call. Try it out in the Trello Documentation!
Back in your controller function, we need to define a couple variables before we make our Trello API call. First, save the state of this by defining a new variable.
var self = this;Next, get the ID from the card context we retrieve earlier.
var cardId = card.id;Now we can call our next Trello API endpoint. We'll make a call to the card endpoint to PUT it on a new list when the card is pressed. In our AJAX call (you can copy and paste in the AJAX call from your getList functions if you don't want to re-type it all), we need to change the type to PUT and update the URL for the new endpoint. Can you make the changes?
Here's some help if you need it!
$.ajax({
type: 'PUT',
url: "https://api.trello.com/1/cards/" + cardID + "?idList=" + doingList + "&key="+key+"&token="+token,
async: true
}).done(function(results) {
});What do we do when a card was successfully moved? Let's add a message toast (that notification that shows up on the bottom of the screen but doesn't require you to interact with it) and refresh our list so we have the latest cards.
sap.m.MessageToast.show("Card moved!");
self.getBoard();Save your changes and run your project as a plugin!
Now when you click on a card, it will move it to the next list. Check your Trello Board and you'll see that the card is in another list.
Easy huh? Awesome!
Well that's all the cat wrote, so join me next #APIFriday to see how to integrate a Trello into your other SAP tools!
- SAP Managed Tags:
