#ProjectServer / #ProjectOnline custom PWA homepage #PS2013 #PS2010 #SharePoint #HTML #MSProject

July 30, 2014 at 2:31 pm | Posted in Add-on, Configuration, Customisation, Functionality, Information | 1 Comment
Tags: , , , , , , , , , ,

This post covers an example landing page for PWA using HTML and an image. Firstly select your chosen image and add on containers, other images, text etc. – anything you want really to define the image hotspots. These hotspots will become links. See my example below:

Image for PWA homepage example

This was a picture taken from a recent trip to Venice Smile

Upload the image to the PWA site collection.

Once you have the chosen / updated image you need to create the hotspots or image maps.There are plenty of tools available or online sites that do this. I have used the following site:

http://www.maschek.hu/imagemap/imgmap 

Upload your chosen image then add the image maps as shown below:

image

Once all the maps are added update the other properties such as Href, Alt and the target.

Scroll down and you will see the code, copy and past this into notepad or your favourite HTML editor:

image

Now you need to update the HMTL to add the image reference and tag the map to the image, see the first line:

image

Navigate to you PWA homepage and add a script editor or content editor web part then paste the HTML code in:

image

I used a script editor web part in this example.

Now the image will be loaded to PWA with clickable links on the image maps Smile

image

This was just an example so I didn’t spend much time on the image but with a creative mind you could really liven up your PWA homepage, Project Sites or any SharePoint landing page etc.

Advertisements

1 Comment

  1. Paul,

    That’s a clever idea, will have to use that.

    Nadim


Sorry, the comment form is closed at this time.

Blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: