Javascript Code to Add Custom Descriptions underneath Project Field on the PDP Page

Environment Used: Project Server 2010

Objective: Custom description for Project Field to be displayed on the PDP page. To achieve this, we will be using the JavaScript in a hidden Content Editor Web Part on the PDP Page. This code will add the custom description for the specified Project field on the PDP page at runtime.

Solution Steps:

1. Open the Project Web App.

2. Click on Server Settings option on the Quick Launch in Project Web App.

3. Click on the Project details pages option under workflow and Project Details Pages on Server Settings page.

step1

4. On PDP page, click on the PDP page where you want to display custom description for the project fields. In this example, I will be using Project information PDP and I will be inserting the custom description as “Date the Project is created in the EPM” for Project field “Start Date”

step2

5. In above screenshot, you may have noticed by default there is no description underneath project field “Start Date”. Now to insert the custom label, firstly,we will be adding the Content Editor Webpart on the bottom of the page. Steps as below:

a. Click on Edit Page under Site Action menu

step3

b. Hit the option Add a WebPart on the page

step4

c. When you click on Add a Web Part, categories of web part will be appeared on the top of the page, afterwords you need to select the Content Editor Webpart available under category Media and Content

step5

d. Click on Add button. afterwhile, Content Editor Web Part will be available on the page. Drag the webpart on to the bottom of the page.

step6

6. Now click on the “Click here to add new content” option available in the content editor web part editor body.

step7

7. After you click on the above highlighted option, you will notice that Format Text menu will be appeared onto the ribbon.

step8

8. Now, click on the Edit HTML source option under HTML pop up list available in the group Markup

step9

9. Add the below JavaScript into the HTML Source dialog box and hit OK button.

step10

step11

10. Now, we will be hiding the Content Editor webpart onto the page. To achieve that below are the steps:

a. You will notice as per previous step 9, Content editor webpart is already in Edit mode so you just need to Click on Web Part Properties under Options menu in the Ribbon.

step12

b. After you click on above highlighted options, you will notice that Web properties options will be displayed on the top right section of the page.

step13

C. Tick the check box Hidden under layout section in the Content Editor Web Part properties. Then hit the Apply button and finally click on OK. This step will hide the content web part on to the page.

step15

11.  Now to close the Page Edit mode, Click on Page menu in the Ribbon and hit the Stop Editing option in the Edit group.

step16

12. Here, you will notice that Content web part editor is disappeared on the page and Custom description has been added as “Date the Project is created in the EPM” under Project field “Start Date”. Bingo!!

step17

Important: Please note this solution will insert the custom description below Start Date, wherever it finds the Start date on the Project Information PDP page. So, please try at your own risk. .

Hope you have enjoyed this blog!

Cheers,

Badal

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: