Friday, February 10, 2017

Postman - Embed 'Run in Postman' button in Visual Studio Online

Today we managed to embed Postman button in Visual Studio Online dashboard.




Why should we embed this? The Run button in Postman opens a collection of API endpoints directly in the user’s Postman app. By embedding this in your documentation, you'll be able to link a collection of endpoints and workflows that help developers onboard onto your API faster.

What should we do to have this?
First of all, you need to include a new widget type in Visual Studio Online.
You must have permissions to add new widgets.


Then, you need to add a new dashboard tile:


The next steps are to install a widget from Extension Gallery.


Visual Studio Online administrator will need to approve your request. Once this is approved you'll be able to see the new widget in the available list.

Next, you need to obtain embedded code from Postman. Follow these steps:
1. Click on the collection you would like to embed and hit Share


2. Shift to the Embed Button tab


3. Click in Generate Code. This will upload the collection to Postman servers


4. Select an environment, if you want to export it

5. Hit Copy to Clipboard

Now, you need to include this embedded code into your Visual Studio Online widget. Add a new widget of type IFrame Dashboard Widget. Copy the text in Url field, choose a title and a dimension and, what is most important, before the copied text add this data:text/html,<html><body>, at the end add this </body></html>. You have the freedom to customize the widget as you wish. All you have to do is to write html code. There is only one limitation: Url field should not exceed 4000 characters.

When you'll press Run in Postman button, you'll need to right click on Postman for Chrome + open in a new tab, and after this, Postman app. will be opened and will import the collection and/or environment automatically. One observation: the environment will be duplicated every time you'll import it. So, make sure to delete the old one if you already performed an import.
Use Chrome to follow these steps.

That's it. 

Happy testing and... make it green, becomes a dream :).

Popular Posts