Working with the Visio Web PartPosted: 2011-12-03
Ok, so a client had these requests:
1. We want to be able to navigate to different processes in an easy manner
2. We want to be able to bring up information about a process step
2b.Without loosing focus from the process we are currently at
3. Reuse instructions that we already have about the steps in our processes
This is what we will be working with:
- A Visio file for the master process file that will be used to navigate to the different processes.
- A Visio file for the process Customer Complaints, this process will contain two steps.
- A PDF-file that will contain information about each step.
- Two pages that will show the Visio-files.
First I would like to add that I am no expert in Visio so there might be better or different ways to attack this 🙂
As a matter of fact, I wonder if there is something that I am an expert in…
But anyway, this is how I did.
First of all I have these settings for Adobe Reader.
- Set Adobe Reader to open PDF-files in the browser
- Uncheck to open in Read mode as default
To accommodate request 1 (navigate to different processes)
A main process is created in Visio with links to the pages that holds a Visio web part for each process like Sales and Customer complaints and so on.
The link for the Customer complaints object looks like this:
This Visio-file is uploaded to http://server/site/processdiagrams as MainProcess.vdw
On the start page for http://server/site/start.apsx a Visio web part will be showing this Main process.
I also added a Go back button above this web part so that they in an easy manner could go back to the page that holds the Main process.
To accomodate request 3 (reusing information that we have)
First I made sure that the information about each process step started on a new page in the document. Then I saved the Word-file as a PDF letting Word create bookmarks in the PDF-file from the headings in the document while it was beeing published. That way we get a table of contents in the left navigation of the PDF.
(If you don’t get one, make sure that you have unchecked the default value to open PDF in Read mode.)
This PDF-file is uploaded to http://server/site/documents as CCsteps.pdf
To accomodate request 2 (bring up information on each step)
The Customer complaints visio-file (that is saved as a .vdw-file) holds two different steps ACC CC and Qualify CC.
The link for ACC CC is configured like this:
The sub adress is “Page=2” (because the instructions for the ACC CC step starts at page 2)
Description is set to ACC CC and I don’t use a relative path.
This Visio-file is uploaded to http://server/site/processdiagrams as CustomerC.vdw
To accomodate request 2b (navigate without loosing focus)
Ok, so this is something that I don’t like with the new vdw-type of file, you can not set a link for an object to open in a new window.
On the Visio web part you want to have this script active for edit the web part like this:
I did not get this to work OOTB, so I got some help from some collegues of mine, thanks guys 🙂
This code you could simply copy and paste and put in a CEWP or FormWP on the page where you have your Visio web part, to try it out.
Now when you click on a process step, the actual page in the PDF-file should be brought up in a separate window and give you the instructions about that step. You should also have a table of contents in the left pane in AcrobatReader so that you could easily navigate between different instructions.
Well thats about it guys, I hope this will help you or give you some ideas.