Dashboard Extensions: Setting Up Your Development Environment

hello and welcome to this video on setting up a local environment for developing extensions my name is Keisha rose and I'm a product manager on the tableau developer platform team in this video I'll show you how to get set up to start building a dashboard extensions so we're going to actually build an extension take a look at one of our other and walkthrough videos in this video we're going to be using HTTP server a simple node package for serving static files this is the very bare minimum of what you will need to get started with extensions and we won't be going over other complex setups like those for building server-side extensions so here's what you're going to need to get started the first thing you need to develop an extension is an extension some abled version of tableau you can get access to a developer sandbox site for free by signing up for the developer program linked in the description you can also develop extensions using tableau desktop versions 2018 up to you and higher I'll be using a free developer sandbox in this video next you will need a text editor this can be a simple lightweight editor or a full-on IDE whatever you prefer I'll be using Visual Studio code but feel free to use your favorite tool like sublime brackets or notepad plus plus if you are downloading Visual Studio code I suggest checking the boxes in the installation to add open with code to your contacts menus this will make it easier for you to edit your files later on then you're going to need a way to host your extension like I mentioned in this video I'll be showing you how to set up HTTP server a lightweight command-line server that just serve static files like your extension in order to use this you will need to have node installed and when you install node make sure you keep NPM as part of the installation don't worry it's on by default we're going to need this to install the HTTP server package for debugging your extension you will need to have Chrome or a special build of chromium installed depending on what version of tableau you're using if you're using the online sandbox or tableau desktop 20 19.1 you can simply debug in the regular Chrome browser if you're using tableau desktop 20 18.2 or 20 18.3 you'll need to download a specific build of chromium in order to debug the experience is pretty much the same so I'll be going over it in the video but the link for the downloads for chromium can be found in the description as well as instructions on how to get it running lastly you want me to have of course the latest extension API library and also a sample manifest file that you can edit for your extension you can find links to download these in the video description so go ahead take a moment to pause the video o downloads all the required tools but don't worry about setting up HTTP server just get node installed we'll go over the setup okay now that you've got everything installed you didn't install everything right let's get you set up for developing extensions first thing we need to do is create a folder to work in this is where you're going to keep all of your extension work so I'm just going to make a folder on the desktop here for my extension and I'm also going to bring in the files that we downloaded that's the manifest sample file it ends in t-rex and the extensions library so bring these in for my downloads into my extension folder now if you install the Visual Studio code and you check the boxes on the installation to add open with code to your context menus you can simply right click in this folder and open it with code otherwise you can just open visual studio code manually and you can navigate to this folder from the file menu okay so let's go ahead and create an index file so just index on HTML and let's just get set with the basics for an HTML page so I'll add an HTML tag I'll add a head tags add a title to from my extension add a body and in here let's just put some text samms hello so we can test it out later really simple basic HTML structure of course you can also use the automated scaffolding from Visual Studio code to get the set up but very simple now let's make sure we add the extensions API library so I'll add in a new script tag and we're going to bring in that tableau extensions one that latest minified library and this will make sure we can actually communicate with the dashboard and have that two-way communication so I'll go ahead and save this and now that we have the basics of the webpage let's get the a2dp server up and running so let's go ahead and minimize this for now and we're going to open a command prompt write in this extension folder on some machines you'll be able to do this simply by holding shift and right click and you can open a command window right there if not you can just go to your Start menu and search for command prompt and navigate to that folder next we're going to install the package HTTP server and we will want to make sure we're installing this globally so I'm going to go ahead and type in NPM install HTTP server and - gee don't forget the - G - make it a global install I'll go that run okay and once we're here let's go ahead and just run it so HTTP - server the simplest way and there we go if everything went right for you you should see the URL with the port at the end that it is running on so let's go ahead and just check that our server is actually running and serving our index file by opening up Chrome and we're going to go to localhost with this port 8080 and there we go awesome so we know that we are actually serving the files at local host on port 8080 we are good to go we can keep on checking it so now that we know that the server is up and running let's get you set up with the manifest file to link to this page so go ahead and find that manifest file that you downloaded should be my awesome extension t-rex and again if you installed visual studio code with the context menus you can just right click on it and open with code and here we're going to just replace the blank or the placeholder URL with HTTP colon slash slash localhost colon 8080 one thing to note is that localhost is the only URL that you can use HTTP with everything else needs to be HTTPS feel free to edit any of the other information in this t-rex file like your name or the description but that's what we need for now so go ahead and save that and we're good to go now we're ready to test our extension now if you're using desktop to build your extension now would be a good time to pause the video and take a look at our getting started guide to get set up with the debugger if you're using the sandbox site like we are in this video the debugger will already be available for you in the console ok so let's go ahead and open a sample workbook in the sandbox site to test our extension I'm already logged in to the sandbox site already and it's going to choose one of these sample workbooks any of these dashboards will be fine as long as it's a dashboard and we can just hit edit to open the web authoring window then we can drag in our extension as you can see it's very similar to the desktop experience you'll find the extension object in this same location just go ahead and drag that in then I can choose to open my extension I'm already in my extensions folder I'll just grab my awesome extension duck to your ex file and you'll see this asking if I want to allow this extension to run yep I do I hit okay and one thing to note is that we are using a local host on HTTP like I mentioned before so you might get this warning in your address bar and you still load unsaved scripts so go ahead and refresh that again can allow and there we go good to go now in order to debug our extension you can simply open the debugging panel by pressing f12 from here we can go to the console and this is where you're going to find any bugs or errors that are happening in tableau and you can also log out any tests here as well just as a test let's log something to the console from our extension so I'm going to go back to visual studio code and back to our index file and we're going to add a little script line here in the body and we can just console.log oh good save it sandbox and fresh guys click ok and here we go woohoo and that's it you're all set to get started developing extensions this has been Keisha rose from the table developer platform team and I can't wait to see what you guys build

Channel: Tableau Software

Views: 5,144

Rating: 5 out of 5

Keywords: Visual data, Visual analytics, Business analysis, Business analytics, Business analysis tool, Data analytics tool, Data Analytics, Analytics, Analytics platform, Cloud application, Business analytics platform, data analysis, data visualization, business dashboards, business intelligence, tableau, tableau software, #DataDev, DataDev, developer, extensions, API, Tableau extensions, extensions API

Id: lKdGMYKkijE

Length: 11min 31sec (691 seconds)

Published: Mon Apr 22 2019