Trello Tech Talk | How To Build A Trello Power-Up In An Hour

thank you for coming to our very first trailer Tech Talk how to build up child power up in an hour I'll be your host today leva Mia I'm a product designer at Trello working on a platform team and the person leaving this presentation today is Bentley cook developer advocate a Trello on the platform team as well so thank you very much again everyone for coming and say hi Bentley let's introduce yourself awesome great so I'm gonna switch out to my screen right now for my then I'm sharing right now and I'm gonna hand it over to Bentley I'm gonna stop sharing my screen and like I said if you have any questions throughout this session put them in through the questions and answer section on the right-hand pane and GoToWebinar and I'll be able to answer questions as we go through so Bentley I believe you are now the presenter coolin yeah Masumi you can see my screen a very pretty Trello board yes I can't see that maybe you can let us know yeah it looks good okay excellent thank you much so take it away from here Bentley cool well thank you lemon and thank you everyone for being here today super excited to talk about power-ups and we're going to build a power of today but before we dive into that let's talk about what a power PES for some of those that may not know we have over here in the menu nice little power-ups button and on any trail of board you can hop in here and you can see all the power-ups that we have available and power-ups are kind of like add-ons for Trello so you can see tools in here that you might be familiar with box bit bucket maybe third party tools that you use turning on these power-ups add in some information from those services to your Trillo board but they don't have to work with a third party tool we have some standalone ones that do you need things to sewing the ones I like to show off is calendar so I just hit unable and just like that I've got a little bit of extra functionality on my Trello board and you notice a little button popped up here we call the board button and when I click on that you'll see I get a nice calendar view unsurprising and I have my card in there so that's the card that I have on this board and it's pulling the date from my due date you know I can check it let me change it around a little bit let me move it we gotta check out my calendar and it's updated and so you so parrots are intended to be kind of composed together you know you have a board maybe that's for your product team and that's where they track deadlines and kind of brainstorming ideas maybe you have a board for your engineering team and that's where they track poor requests that sort of thing so power-ups are are meant to take cello to the next level and add a little bit of extra functionality and in addition to having these public power-ups and we'll talk a little bit later about what is required to make a public powerup you can actually have custom power-ups so you and your team you know let's say you have a very specific process the way you like to do things and you say man it'd be really great if trouble enabled us to kind of dial this in a little bit more like let's say for instance you wanted to track time on a Trello card you have you know this is a project and it's like finish ma ups and you want to be able to track how long work is taking on that as a way of also understanding kind of the state of the card sounds sounds reasonable well that's what we're gonna build today and to build it we're gonna use this really great tool called glitch so you can go check out glitch comm slash Trello and glitches a community tool for building little web projects it's amazing for throwing something together really quickly and having a kind of MVP proof of concept out the door super fast and so we actually on our Trello page here we have some example power projects and we're gonna use one today to get started so it's called Trillo powerup skeleton let's hop into that what we can do in glitches this is a set of code and you know similar to forking code and get we can grab our own copy of it and so we're gonna do that by remix in our own and by remix Inc what is happening here is glitches spinning up our own copy of this project so it's given a new random name and you can see here's our IDE so we can hop in and we can see the code very cool we can make changes to it we can see it live and we can rename it so let's start there I'll call it powerup webinar great and I'm gonna go check it out live it's gonna open in a new tab and so I've got a HTML page coming across there so what this project was is powerup skeleton it's just kind of a bare-bones set of code that you need to get started with a powerup and you can see we've had a server which is running node for us and so it's just spinning up this nice little Express server and for those of you that aren't familiar with express all we're doing here is if for every type of request that is a git we're just sending back this index.html and then for anything else if we have a static file it's going to look for that static file in public so let's go check out our index.html okay so that looks like the live page that we are seeing and a really cool thing about glitch that makes Lich awesome is it live updates there's no need to do anything except for just type so I'm going to change that around and just like that my page is updated so easy enough all right so we've got this bare-bones project and what we probably want to do first is get this registered with Trello the bare-bones project gives us a manifest JSON and we'll dive into what the manifest is and the Artic architecture for power up a little bit later on but just take my word here and follow along the manifest we need to grab to register with Trello so we can see it's coming out of public so we go grab I'm just telling manifesto chase cool that looks like the manifest file that we were just looking at so let's grab that URL and we're gonna hop over to Trello comm slash powerup slash admin so this is where you're able to add power-ups custom power-ups to your team you saw how to enable power-ups that weren't custom on boards this is how you make this power there's custom powers available so you can see here I remember a number of teams if you don't see any teams here that means you're not an admin on a trillo team so to add a custom power up to a trillo team you have to be an admin so if you don't see something here that's why we're gonna hop over to our webinar team and click create new power up we'll give it a name and lo and behold there's our manifest URL and the way I knew that this team is the reason I'm using this team is because if I go check out my board I can actually see right here the team that the board I'm using is on so I mean I know to grab webinar team and that's why I'm adding it there so let me go ahead and register you'll see assigned joint developer agreement you might be prompted if you haven't created a custom power before you may be prompted to go ahead and fill that out that just lets us know who you are as you're building things you click Save all right Trillo power up webinar successfully saved so let me go back to my Trello board and let's see if it works disable this and yep cool we've got a brand new powerup in our list you can see it looks just like every other powerup we get a little bit of information about it it's called sprints and let's change it doesn't make a lot of sense because we're building something it's time tracking so I'm gonna go back over to very very handy glitch and as you can probably discern here the manifest is letting trailer know a little bit of information about the powerup so when you enable a powerup it's Trello is looking at this manifest for more information so here's where being pulled from call it time tracking we've got that nice little description we can actually do some fun things you know we could toss in markdown is actually supported in here so we could do some markdown if we wanted or pulling an icon and the nice thing about glitches it kind of packs everything all up together so we can actually hop over to our assets and you're able to upload files and view them and here you can see that we're giving a URL so that is what's being pasted right here author and then some capabilities all right so let's dive into the power of architecture and and what these capabilities really are we've got this manifest file so that's how you kind of register with Trello and say hey this is some this is some kind of meta information about my powerup and in the manifest you can see that it actually has a connector URL index.html the same one we were looking at earlier what happens when you enable a powerup on a Trello board what Trello does is it loads the iframe it loads that connector HTML into a hidden iframe on the board so when we click enable what's actually just happened is it's pulled in our connector your page and hit put it as a hidden iframe and so let's go check that out because this is where the the cool stuff kind of really happens is you know this we can't see this it's a hidden iframe like I said we're pulling in the Trello powerup client library so this is where we've packed all of the code and all the cool things that you can do with Trello are all part of this library so you want to include that and most importantly you want to point to a JavaScript file somewhere in this case we're looking at client j/s so let's go take a look at that all right this is this is starting to look like something we can play around with so this is where we initialize our powerup and this is really where we do all of the cool stuff this is where we tell Trello what we want to happen with our era we had in our manifest there some capabilities and these capabilities are you ex-hooker that as a developer you can say hey I want to add this functionality to my power up the calendar you know had a nice button in the top right that was called a forward button and as you can probably guess a card button gives you a button on a card there are also card badges in fact there are all kinds of really cool capabilities and we have them all documented at developers at Trello calm you can see there are a number of capabilities that let you do all kinds of different things card badges card detail badges some neat show settings some authorization helpers but to get started we're just gonna use card buttons my thinking is we want to add a button to the back of the card that allows you to start tracking time so we're letting trol know that we want that it should expect for us to use card buttons and tracing this again so here from our connector hop over here from our connector dart client touch is all right so let's let's initialize this capability that we've told charlie we want to make use of because at the point in time that trailer loads it's gonna say hey what should I do you told me you wanted card buttons here I'm asking you for card buttons give me something back and this is where we define what we want to give back so we're given a function or we write a function that is passed in T which is a reference to the Trello client library so the total powerup library and so that's where it will use to do some of the other neat things go into that in a little bit and then options the options is just an object that contains some information about the context that we're in so again this is this is we're saying hey Trello when you have the context of a cook you need to know what card buttons you want our power to display call this function and trailers gonna pass these things in to us so we're able to let's really know what card ones we want and to get started we're gonna get rid of this stuff that came as part of the boiler plates and let's just call this trap time so we're just gonna return an array that contains a single object in this in this instance that has an icon and some text and that is it alright so that is a bare-bones button let's go check it out refresh and nothing happens here because we're not in the context of card back oh look at that we've got a brand new button right there on the back of the card power-ups are given their own little namespace and the card buttons and there's our button very chewy looking and when we click it not a whole lot happens right now yep nothing really happening so let's add some functionality clues this time alright so we probably want something to happen when the user clicks the button so we're gonna we're going to take this a step further you can change the name up a little bit this is gonna be called console.log and then we're gonna also pass in a callback so this callback if you'll notice was one of the capabilities that we outlined in our manifest and this capability allows us to add a bit of dynamic back and forth to our capabilities in this case at the point in time that the user clicks the button that we've defined we want this function to be called and again Trello will call this function and pass in the T reference as well as options objects here we're gonna get started just by doing something you know little console.log just just as a proof of concept so let's refresh and hop over to console and just like that every time I click it I get a console log cool making some progress so let's take this a little bit further because that's not very exciting I was thinking you know maybe when the user clicks the button we get a nice little visual you know a window that tells us whether like it's like some information about the state of our time tracking so I'm going to upgrade what we have a little bit and then our callback here I'm going to lean into that T objects and use one of the methods that we provide to you t dot pop up is a way of telling Trello hey the users click this thing you've called me now what I want you to do Trello is show a pop up in the context of where the users clicked I want it to have this title and I want it to show this HTML page and be this height cool it makes sense we probably want to go ahead and create that HTML page so we'll do that we want to be public and this is just HTML so we'll come up man to get started let's just do a nice little header emoji and that's it and what's cool is if we wanted to we could go check this out live say I've got it open already should be able to say HTML and look at that cool glitch is pretty sweet and makes that really easy let's refresh refresh our page here and so now when we click this instead of console logging what we expect is for Trello to show us a nice little trailing pop up look at that we get a nice header we get the HR Trello takes care of doing some of the trickier things and it feels very Trello eat right so you can click off and it closes you can click X and it closes and you'll notice it has the same shape and format as these other buttons that's really nice what that means is that using that T dot pop-up you can make something that feels very much you know like a part of Trello framework but the we want to do a little more here that the HTML page that each one's kind of boring so let's let's take that to the next level we're just gonna toss in some HTML here you can see that we've got in our body we've got a span that tells us to start time to stop time we've got a nice little button called track time we're also pulling in a new JavaScript file but if we go check out up here we had this really cool thing happen we're pulling in this style sheet that Trello provides for you and what this does is it contains a number of styles so that you can do as little styling as necessary and you didn't kind of a real trouble you feel to it so if we go and check this out now actually before we check it out I'm gonna go ahead and add in we want this pop up that CSS so CSS up that's SS and because I know where I'm going with this I probably need a hidden class display:none nothing too fancy happen here and then I was also pulling in pop-up yes we'll leave that as is for now and get that in a minute let's refresh this and let's check out our new button all right cool very nice so we're gonna we're gonna narrow down here that's expected because we didn't we don't have that JavaScript file yet but you can kind of see where this is headed right we want this pop-up to happen if there's a start time we want to display here if there's a stop time when it's say displayed here and we want to be able to use this button to track time and you'll notice again like this is this is a default Trello button I didn't do anything fancy in my HTML all I did was give it the mod primary class which is one of the classes that is included in that powerup dot CSS and out-of-the-box I got this nice really kind of trouble we feel to it something that makes it easy for users to kind of track what's going on they're used to seeing these buttons to our Trello so it's a great thing to use but it's kind of disappointing right right now our button doesn't do anything it's kind of tall and awkward looking like he's other buttons look really nice there the height that you'd expect this one's kind of tall and gangly like uh we don't want on that space down there so we're going to take care of that I'm going to do that by adding in that other javascript file that we're talking about so hop in public and this is Jess and that file in and the first thing I'm going to do is I'm going to pull in our Trello power up so to again in the context of where we are remember first the connector is loaded and then after the connected connectors loaded Trello calls to us and says hey what do you want me to do and we say Trello we want pop up so we call pop up and so it renders this so because of that stack and the way those calls are being made we still have reference to our Trello chope our client library on the window so we can still do some of the magical things that we provide in in that client library so the first thing we're going to do is let's add a little bit of functionality to our button we're just going to make sure that we're not doing anything too crazy here we're gonna console blog let's go check that out really quickly refresh track time check time all right we're getting we're getting a console log there nice button works as expected but let's get rid of this so that's really bothering me what we want to do is we could call new document download and then you know try and figure out how tall we are but the nice thing is that because we have reference to that T object we can use this method called T dot render T don't render exists so that Trello calls calls this render method at the point in time that it knows something needs to be rendered sometimes you know maybe some date data or state changes and you need you want to your pal wants to take advantage of that and make some changes so now is the time that Trillo would call and say hey you need to re-render and it does so by calling the function that you provide so it works similar to a TDR to a document onload but has some nuances that are pretty meaningful when you get deeper into building power-ups right now all we're gonna do in there is is add this T dot size to so again using the trail powerup client library it's method called size 2 we give it a selector our content and if you notice in our HTML pop-up dice um we have div ID content so that is what we're gonna sighs - so let's it that cleaned up the problem that we were having track time ooh nice filling a lot more Trello II all right so we've got this button still not doing anything but console logging and it's a little bit weird because normally if I click that button I probably want it to close so let me let me get it closing we do that by using again this client library and you'll be surprised by how many cool little things are in here if you check out the documentation on a client library there are all kinds of methods and functions you can use to do some really nice trilli things while building your power up so we're gonna keep leading into that we're gonna called T dot close pop-up and that should do exactly what it sounds like it's gonna do that's just gonna close our pop-up after we click that button alright cool let's do a little bit more we want to start tracking some time if only we had a way to store data right we could we could here at the point in time that the user clicks the button maybe make a call out to a third-party service and say hey you know I what time is it I want to start tracking time or here's an ID you know start tracking time for me but that gets a little bit messy and requires you need a third party service we've baked into the client library a really nice set of data manipulation methods so here they're called T dot set and there's another one we'll see t dot get and what they allow you to do is they allow you to store data within the context of the powerup so you get to use Trello power-ups as you know we've been a tiny little back in that you can make use of and it's great for storing things like this so when the user clicks track time we're gonna say T dot sets and we have to dot set the scope at which or the level at which we want it stored so you can pass a board card member and then the visibility scope shared a private so shared means that anyone that has read access will be able to see it private means only the person that is setting it will to see it and then a key start time and then the value that we want stored there and T dot set returns the promise so we're able to kick off a promise chain and keep this function nice and clean so after we've stored the time we're just storing the current date we're gonna close our pop-up it's good to give that a try making you nurse I don't have to refresh you don't have to save it's actually funny if you if you hit save which yells at you and says hey re save for you quit hitting save so it's a hard habit to get over and glitch so we'll go over here and we refresh this just to clean up our console I hit track time we hit track time hmm I want to think that something happened I'm not positive so let me show you how to check out using our API see if there's any data set so normally when you use our API you have to go to and pass in know your API key and a token but so long as you're logged into Trello oh we can actually use this nice or concepts one we're good boards and we're passing in the short ID here I got this just from oh that's the card I actually doing with that I grabbed this short idea of the card here and we go to cards passing that short ID and since we already logged in we can use this little shortcut to play around with things and this is just using the cookie that's stored normally from using Trello all right so there is our card and it has all of the normal responses back from the API we expect it's got the you know link to it it's got the name to it so what we want now is we want to go check out whether that data was stored so we can go to plug-in data cool so here we see the scope that we said the access that we specified the ID model this is the ID of the card because we're storing it on the card and then the ID plug-in is actually the ID of our power-up and you can see it's a string if I'd object here we've got a start time key with a value of our date nice so we know data is being stored what do we want to do now let's go ahead and if we have a track time or if we start tracking time right we wanted to update this so let's hop back over to our pop-up j/s and we're gonna do a little bit of logic here right so we've rendered and we may or may not have some data stored so we should probably check to see if we do have data story and here's where that nice sibling function from TDOT set comes into play very similarly we can use ticket to pull that data back out and so we're gonna say go see if and plug-in data we have something at the card that is shared for the key start time and again returning a promise of kicking off our Chane if we do have it let's go ahead and update start time and then just sighs to everything nice refresh here I'm good to track time oh yeah there we go so we've got we've done a new track time we can probably click this it closes 1333 so a different time all right well that's not super helpful because we we probably want to build a clear time to be able to see all the different states to test all the states so let's go back over to our client J US and we're gonna add a nice little button another button here this is just gonna be a helper one that's temporary and so remember we were returning an array of objects each object in the array represented the button the buttons were able to have a callback which is the function that Trello calls when the user clicks the button and so here we're just gonna say T don't remove again you'll notice a nice little helper method this one very similar to T right T on set and T get this is just gonna delete this stuff from our plugin data so we're gonna get rid of an array of keys start time stop time at the card and shared so let's go refresh and see if that button shows up all right we're gonna go look over here here's our plug-in data yep we've got something we're gonna say clear time and go over here refresh sure enough it's gone and in our track time button it's gone nice okay so track time we see it clear time it's gone all right this is starting to feel a little bit a little bit more useful so what do we want to do next I think that we probably want to at the point in time that we call T or the trilha calls T dot renderer we know that we've got some extra information this time around right so we know that we've got a start time we were updating it let's make this look a little bit nicer we probably want to change the state buttony we're gonna use some more there's nice trolley classes that are provided we're gonna update the button a little bit and very similarly we're using the promise chains which you got get doing these things and then sizing too so let's go check that out our button should look a little bit different it's clear all right as expected we're gonna track time okay nice so this time our start times there we have changed the button here to look a little bit you know more warning a little bit more dangerous so let's correspondingly probably want to at the point in time that this is click now we want to track the stop time just like we did with the start time so let's update this method and now we're just doing a nice little if else if we already have a start time go ahead and track a stop time if we don't have a start time that means that this is our first time where we are beginning to track time so let's grab that let's go check that out truck time clear time first clear time I'm gonna say track time alright nice so we've got our start start time in there and this time we should hit stop time and instead of saving a new start time we're gonna save a new key stop time and look at that we've got it in there so very similar to before we can update our renderer such that it does a little check to see if there is a start time if there's a stop time so let's walk through that alright I'm introducing a new method here this one's called T get all and what it does is it returns every key in value at the scope and permissions that you are asking so this time we're gonna get everything in there and we're gonna do just a little bit of object D structuring this just gives us the stop time and start time variables and this time we're saying if there is a start time and stop time go ahead and hide the button we're all done let's update the values here so that we're shutting the start time and stop time and then if we only have a start time then let's go ahead and change it to the stop time so what we saw before otherwise everything gets left alone so let's go here refresh all clear a time track time track time stop time all right nice so now we don't have our button we're able to track the time very cool you've got a clear time button hmm that's all well and good and it certainly allows someone to come in you know and on a car start tracking time alright so now I've got a bunch of cards and they all have time tracked on them but you know this one I've only started time these two have stop times and we can have another and this one doesn't have any time but I can't really tell like I'm looking at this board and if I were trying to figure out what what needs to be worked on or what hasn't been worked on I'd be at a total loss for what's happening so let's add that we want to build something that adds as much perspective as possible to our users we want someone to come in here and say oh I know exactly what's happening so we're gonna use another one of those capabilities that we were playing around with earlier so we're gonna hop back over to client at je s so again this is the JavaScript file that is being loaded onto the hidden iframe when the power-ups enabled and we're telling Trello what we want to happen whenever it's in the context of card buttons it reaches out and says hey what method do you want me or what function you want me to call and we're saying hey this is the function we're giving you some buttons let's add in another one let's let's add a little badge to show on the front of the card kind of the state of the card in terms of time tracking this is to you know just a little a little visual indicator to let someone know where things are at so we're gonna use a new capability so make sure to add it to your manifest all of the time people will start adding a new capabilities just to this file here in the web cast not working it's almost always because you forgot to add it to the manifest so always remember to declare the capabilities you want your manifest so we're going to call it card badges and I'm client J s we're going to add in another capability and all the capabilities have a pattern that looks they'll fall a very similar pattern we've got a key function we're getting access to patrol object we're getting some context and the options there and in this case very very similar lead to before we're expected to just return an array of objects and each object is going to represent the card badge that we want shown let's see so based on the way this one works I mean I guess that we're gonna get a card badge that has a thumbs up as the text the black rocket icon will be the icon and the color of the badge will be blue so let's go give it a try do a refresh nice look at that we've got a badge now on every single card that's exactly what we expect but a little bit mm-hmm confusing here because we're we've got the same badge on every single arm you want to differentiate them a little bit and so what happens is card badges actually gets cold once per a card so we could you know pass in a random function here we we could reach out to something and get some you know new data this is being called in the context each card is having this function called so what that means is we can use that T get all and we know that we're in the context of the card so we can get all of the data that we have stored from the stuff that we're doing earlier and very similar to before we can say hey if we've got the start time or the stop time let's change the button around a little bit so we're setting the default to red and we're making the text just a little person waving and we're saying alright if we've got a start time in a stop time that means don't touch this card probably want to make it green everything's all good work is complete on this if we only have a start time that means someone's probably heads down it's yellow it's in progress no need to yell just yet and then our default is it doesn't have a start time or a stop time which is hey we need to take a look here and it's red and so we're just returning that array so we could we could have multiple new we could return multiple objects here but we really only want this one so let's go check that out yeah we'll refresh oh nice just like that now we can see each state of our start time and stop time tracked here so if you watch over here a bit when I hit track time yep I've got my heads down and then let me stop tracking time nice said I'm all good and then when I hit clear time it's updated cool so just like that we have the ability to show the different states of the data that we have no need for you know a third-party backends we're storing an all in Trello and we can go see that one's all gone so there we have it you can imagine how easy it would be to take this and extend it a little bit further where you show some contacts maybe if the card is underway so it only has a start time you could add another batch that displays how long the card has been under has been worked on like you could you could do some filtering here and say hey you know this has been weren't this has been underway for three days let's add an extra special warning badge so you have all kinds of opportunities to play around and really build a powerup that allows you and your team to have the process that you want in Trello cool so you built an awesome power up and you're like man I actually think that other Charlie users could get some use out of this I wonder how I get it listed in this nice powerup menu over here what we have a process for that in our documentation we have a guide on submitting your powerup there's a review process and we just grab that powerup when we say hey does it do what it says it does on the tin we give it a try and after putting it through a few paces will launch it into the powerup library and you can check out all of the Trello power-ups at Charlotte calm slash drops so you've built something really cool that you want to share with millions of trouble users let us know we want to see it and we want to make sure that we share it and with that I'm all done with how to build a powerup really quickly in an hour if anyone wants to grab this code you actually can if you did glitch comm open up again here and we called it you to the power webinar you have your own copy of this project and you can remix it yourself so have at it we see the fat well hop over stop my screen sharing awesome thank you so much friendly that was great I I learned a lot this is a third time I watched it so I think I can do one now so that's great so thanks again Bentley very much and now we're gonna set this up for a little Q&A so for the question to come through I believe it's just admins I can see it and Anthony yeah only 45 minutes it took to build this so I'm just gonna lower everyone's hands in the chat so then certain you can sometimes that way we can see who would like to ask a question so thanks so much again Evan for attending announces a great time for you to participate in this webinar is if you can just raise your hand through the webinar panel there I'll see that being raised and I'll go to you to ask us a question if you're too shy to do an audio question that's quite okay just submit a question through the chat within the GoToWebinar panel as well so all right all right anyone want to have any questions on the presentation or any questions around power ups in general all right so jess has a question Bentley and she says I'll read this up for the group can you go through the process of how to find and add the manifests URL very slowly please it's easier to miss so let's say you should be able to see my screen again and yeah I'm a main screen - oh nice it looks like we've all got someone checking out the power up so after you've remixed your own you can hit show live and this takes you to just this HTML page and your should be up to at a point in time that you remix that yours should update with the new name of the project and you just add on to the end there manifest.json and that should give you the manifest and you just grab that URL and head over to chota slash power-ups admin give it a second to load find the team and again you need to be an admin on the team so if you don't see any lists if you don't see any names here that means you're not an admin on the team you just go there you hit create new powerup give it a name and paste it in and hit save awesome and again this is being recorded as well so if you want to go through any back through the steps we will show the recording within a week or so and you'll be able to rewatch any of the steps that Bentley has gone through but I hope that helped Jess anyone else have any questions again if you're shy you can certainly put it in through the questions panel or we can take an audio if you just want to like raise your hand within GoToWebinar what I really like about this presentation Bentley is that you can show how much parts of trouble you can manipulate to make it power up really useful so like the badges in the card front are such an interesting way of showing that something is happening and that sometimes it kind of gets missed sometimes when like everyone's working on many different things it's cool that your power can like leverage that and especially emojis yeah it's nice too you can do you know it's really powerful no pun intended but you can actually make you know asynchronous requests out to a third party service so you know that's that's how these when you check on the status of app or request and bitbucket you can go and get data from other places so maybe you and your have some proprietary you know piece of software that sits behind the firewall and you want to go grab data from it you can with the with these nice little badges and it feels so truly that's what I love about it is you know we give you the ability to add in just like a Trello you know just like Trello does we give you the ability to build something that feels very very much like Trello see is it's a lot of fun to build these things mm-hmm so we have our first raised hand and for a question and it's Julie so I'm just gonna unmute your mic Julie and Julie can hear me yes yes okay so um go through the card badges section that you did at the end of quick yeah like the very first there there that's a complex statement there one statement with the ver their cards share equal shared data that was the statement they've got me I did this to have brief code at the expense of it being very confusing this this is object D structuring so so what this would look like not like this is a number of if statements because this object is so deeply nested this is just a way to unpack it really easily so I can actually if you're curious we can do new console about log and will actually take a look at what this looks like raw when we get it so this is what it looks like the different times that it's called this car doesn't have any data set for it this card has just a start time and so you can see it's an object within an object with an object and so that's that's what I'm doing here is just unpacking it and again this this is confusing line but I did it just for the sake of brevity yeah okay so the shared data is aver this stop time and start time or the two variables we get out of it okay thank you yeah awesome all right music here's a question sec how easy is to pull down the code and upload it to github or another repository from glitch it's it's actually super easy in the share now let's see so that's here yeah so in up here and Advanced Options you can actually import from github and export to github as well as download the project so they give you a lot of options to move it around so so yeah if you want to hop in here you should be able to download the project great I think Doug had a question as well are there any special requirements for using power-ups I think they're called business it can't be emitted before but I haven't checked recently so Doug I see that you wrote there again to say that you kind of looked it up and right now power-ups Trello users are limited to one power up and then 2/3 power ups with the called account and unlimited power ups if you upgrade to a business class account and Joey I'm sorry I kind of just see their questions they're nice and you were you were willing to type so I apologize if you don't wonder the other question but I see it now all right any any further questions that you have for for a group I think Bentley's going through this I don't know Bentley I think I may have lost your audio there for a second so if there was something I thought your trying to finish then let's really go ahead and do that I know just grabbing a drink of water okay okay cool sometimes you can't tell what not being in the same room sounds kind of like see-through time in space but that's cool okay good you're back okay all right jess has a question where can we get the link to this video and session is done so we're hoping to have the recording done about it within the week and then I'm going to send a personal email out to people work to where you can find it it could be potentially on the developer site or we may create a blog posts and the video will be there but we will also try to put it up on YouTube so you can just watch it there as well well so email you with the link to that give us about a week or so too it's a recording done as we also want to get all these resources and links that Bentley went through obviously it's very hard to kind of see URLs or keep them all Amman and write them down quickly I'll make sure to send those out to you as well okay and Bentley has this great blog post here I think yeah it's gonna say if you're just itching to get going and going a little bit further than what we did today a series of blog posts that tech Trello comm that allow you to start they walk you through what we a little bit what we just went through and a great great way to follow along via reading on what was going on so definitely go give that a look if you're if you want to start building today that's great resource it's a great blog so I always check and to keep bookmarked as well so we have about four minutes left so if you have any questions or any comments in general you might have certainly let us know because you're all such great attendees I will let you know that we are working on a way to display power-ups better within Trello so to have featured power-ups and to like maybe group different power-ups and different categories so they're easier to find so if you've used power works in the past probably I have a we have a very long list now power watts which is great but it's not it's a good user experience in terms of browsing through all those so the great news is that we are working on the new layout and a new display for power-ups which is very exciting we think that this would be a great way to highlight new power-ups maybe some popular power-ups and to learn more about them so definitely keep an eye out for that so quite exciting okay so we have three minutes left got me while we wait any potential ask questions and there anything you want to add or something you want to like just mention again know I would say good go check out if you want to look at the code that was live today you can just glitch calm till the powerup webinar and you'll be able to look at exactly what I wrote today it's all there and what you said you can remix it and and start building your own excellent that's awesome and a great thing to know is that we're obviously if you have any questions so I think there's a mail Oh be sent out with me for myself or through Bentley so I just have your plan on that and you went to the questions you have or if you get stuck on anything but it looks like we've done great for time here I think we answered I think every question if I miss someone I apologize sometimes I'm too see-through gotowebinar all the questions but I think we got to them all these job just came in alright yeah this is their way to write power-ups for the middle trillo app currently no there that's something that we are we want to enable in the future but it's not something you can do right now yeah hopefully that's something we can do in the future for sure alright thanks for catching that badly I was about to great no we still have a minute we still have like 30 seconds left so I know sometimes a little bit hard to type in too good a webinar but again Bentley you've done an awesome job like I said I think I've learned a lot I think well it's just great tool to kind of get quickly get started and copy kind of the people that you have there so I think that's a valuable tool yeah thank you everyone for listening yeah and all right so we have thanks for the great great session awesome I'm glad you enjoyed it like I said there'll be an evil coming from us within the week hopefully with a recording or a little bit sooner but again thank you all so much for coming and attending and we'll see you next time

Channel: Trello

Views: 9,370

Keywords: Trello, Power-Up, Power-Ups, Webinar, Develop, Design, Integrations, Trello Integrations

Id: G9SCcfaOMqM

Length: 55min 23sec (3323 seconds)

Published: Tue Dec 19 2017