.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

How to Edit and Revert a Page in SharePoint Designer

Posted By:Jean Paul       Posted Date: August 30, 2014    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

In this article we will explore how to Edit & Revert a SharePoint Page using SharePoint Designer. I hope this will be useful in real life scenarios.
 

In the world of SharePoint there are different type of Professionals:

  1. SharePoint Administrator
  2. SharePoint Developer
  3. SharePoint Architect
  4. SharePoint Designer

All the companies won't be able to accommodate all these Professionals.  In such cases an Administrator will do the Job of others & vice-versa.

Pages in SharePoint

As you know, each page in SharePoint is constructed through a lot of server-side processing.  Some part of page will be in the file system, some come from the content database & there will be lot of role specific content too.

Following is the URL of my home page:

http://hp/SitePages/Home.aspx

Following is the URL of my list page:

http://hp/Lists/Expense/AllItems.aspx

SharePoint Designer

We can use SharePoint Designer to edit the page.

image

The editing operation can include:

  1. Add / Edit / Delete of HTML Code
  2. Add / Edit / Delete of JavaScript Code
  3. Add / Edit / Delete of CSS Code

How to edit the Page?

Please follow the steps to edit a page.

Step 1: Open SharePoint Designer

image

Step 2: Open SharePoint Site

Click on the Open Site button & enter your Site URL.

image

You will get to see the site opened as shown below:

image

Step 3: Add following Code

We are trying to Edit the AllItems.aspx page of list named Expense.  Some pages won't exist until it is first time edit.

Go to File menu and click the Open button.

image

Enter the URL of the page.

http://hp/Lists/Expense/AllItems.aspx

Click the Open button.  You will get the following page in Design Mode.

image

Click on the Code View tab on the bottom.  You will see the following code view.

image

Please note that there are certain area colored in Orange.  These areas are coming from the site definition & in order to edit that you can use the Advanced Mode button from the tool bar. 

image

Scroll down to the end & enter the following code in highlighted section.

image

Save the changes to the file.

Step 4: Test Changes

Refresh your list > AllItems.aspx & you can see the change is reflected.

image

In the same way you can add <script> tags, <style> tags into the html pages.  There are specific sections you need to study, for advanced manipulations.

I recommend SharePoint Designer Certification or Course to do that.

When to revert the Changes?

We can Revert the changes on scenarios like:

  1. When pages are slow
  2. Page is corrupted

How to revert the Changes?

You can choose SharePoint Designer > Open Site > All files option.

image

In the appearing page on the right, choose Lists > Expense.  You will get the following page.

image

Click AllItems > Toolbar > Reset to site definition

image

Confirm the Prompt & Save Changes.  Your file is now reverted back.

Summary

In this article we have explored how to Edit & Revert a SharePoint Page using SharePoint Designer.  I hope this will be useful in real life scenarios.


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend