ProWorkflow API & Chrome Extensions

July 8, 2015

We constantly improve ProWorkflow and add new features but sometimes you might want something unique that isn’t available in the main application. In this post we’ll look at one possible solution using the ProWorkflow API and Google Chrome Extensions.

To demonstrate this, I’m going to imagine we want to add a map to the Project Details page for each Project, perhaps to track the location for a photoshoot or some building work. We’d like this to appear below the Contacts section on the right hand side of the page:

image

The first step is to add a new field to store the address, we can do this easily via the ProWorkflow API which offers API Fields for storing information that isn’t part of the main ProWorkflow application:

2

If you aren’t familiar with our API then we have some great documentation available at https://api.proworkflow.net?documentation to get you started.

Once we have the field, then we can look at one of the existing modules on the Project Details Page and borrow some of the classes to make sure our map fits in nicely. In this example we can use the “pdmodulecontainer” as a starting point and combine it with an iframe using Google Maps to give a simple html fragment that will show a map of our address:

WRAP THIS IN <code> tags:

<div class=”pdmodulecontainer” id=”pdmodulemap”>
     <div class=”pdmodulecontainerheader”>
          <div class=”pdmodulecontainerheadertitle”>Map</div>
     </div>
     <div id=”pdmodulecontentmap” class=”pdmodulecontainercontent pdmodulecontainercontentright” style=”text-align:center;”>
          <iframe width=”228″ height=”180″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”https://maps.google.com/maps?q=OUR ADDRESS WILL GO HERE&output=embed”></iframe>
     </div>
</div>

The final step is to create our Google Chrome Extension which will be responsible for fetching the address for our Project and then adding our html fragment to the page. It will also let us change the address from within ProWorkflow.

If you aren’t familiar with creating Google Chrome Extensions then this is a great starting point https://developer.chrome.com/extensions/getstarted

The code required is fairly simple and we’ve included a link below to access the commented code so you are free to use/experiment with it. We haven’t included the full code in this article in order to make it more readable but have outlined the steps involved:

Create the manifest.json file

As with any Chrome Extension, we need to build our manifest file, this lets us describe the extension as well as defining what permissions it needs to have an where it can run. This is also where we declare which files the extension needs.

In our case, we need a background page and a content page. You might also wish to add an authorization step in which case you may want to use a popup page where your users can enter their credentials. In this example we will hard code the authorization into our content page just to make the code simpler to follow.

We also limit the content page to only run on our ProWorkflow account, this isn’t strictly necessary but will ensure this extension doesn’t interfere with any other pages.

The last step is to add the “tabs” permission, this is because we need to access the current URL in order to extract the ID of the Project.

Create the background.js file

In order to know which Project we are viewing we need to get the ID from the URL, to do this we need to use a background page. We add a simple listener that will send a message to the content page whenever we navigate to a Project Details page.

Create the content.js file

The content page needs to do a few things, firstly it listens for the message from our background page, when it receives a URL it checks every 500ms to see if the page has loaded. This check is pretty basic and just looks to see if we have the Contacts module on our page yet.

Once the Contacts module is detected, we add a placeholder for our map and then use the ProWorkflow API to fetch the address for our Project. If there is an address then we add a Google Map for it, if there isn’t then we add a short message to let the user know.

We also add a simple button to add/edit the address, this prompts the user for a new address and updates the map as well as saving the address using the ProWorkflow API.

Testing/Deployment

With our code (hopefully) complete we can now either load it as an unpacked extension (this is great for development/testing) or pack it up once we’re ready to share it with our team.

Final Result

With our code tested and deployed we have our map just like we wanted and our photoshoot is ready to go!

3

The sample code can be accessed here, before using it you will need to add your API Key and authorization details to the contents.js file and add your account URL to the manifest.json file. This is commented in the code so should be easy to find.