All About SharePoint: How to connect a web part to the aspx page?

How to connect a web part to the aspx page?

Scenario: I have created a workflow application for Document and Form Libraries. I have also created an "Administration" application for this workflow application. Admin application consists of a web part. I want to include a button in the navigation bar of the document/form library and clicking that button will take the user to an aspx page which will contain my "admin" web part.

1. Here is the screen shot of the document library:

Note the "Administration" button in the menu bar (encircled in red). This is the new button i just added. This page is linked to the aspx page that contains my web part. Here are the steps:

1. First, decide where you want to include this new link. In your document library? In your form library? Do you want to create a new document library or do you want to modify default document library? Modifying the default document library is not recommended. Keep the default document library intact and create a new document library template instead. As an example, i am adding this button to my form library. Edit the schema.xml file in your form library template. The path is:

C:Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATE1033STSLISTSXMLFORM

Edit the schema.xml file in editor. Locate following text in the file:

</Case>

<HTML><![CDATA[

<TD class="ms-toolbar"> <table cellpadding=1 cellspacing=0 border=0> <tr> <td class="ms-toolbar" nowrap> <a tabindex=2 ID=diidEditInGridButton class="ms-toolbar" title=]]></HTML><HTML>"Edit in Datasheet"</HTML><HTML><![CDATA[ ACCESSKEY=G href="BLOCKED SCRIPTEditInGrid(]]></HTML><GetVar Name="WPQ"/><HTML><![CDATA[varPageUrl,']]></HTML><GetVar Name="View" URLEncode="TRUE"/><HTML><![CDATA[');" target=_self> <img src="/_layouts/images/editgrid.gif" ID="tbbuttonstart1" alt=]]></HTML><HTML>"Edit in Datasheet"</HTML><HTML><![CDATA[ border=0 width=16 height=16></a></td> <td nowrap> <a tabindex=2 ID=diidEditInGridButton class="ms-toolbar" ACCESSKEY=G href="BLOCKED SCRIPTEditInGrid(]]></HTML><GetVar Name="WPQ"/><HTML><![CDATA[varPageUrl,']]></HTML><GetVar Name="View" URLEncode="TRUE"/><HTML><![CDATA[');" target=_self>

]]></HTML><HTML>Edit in Datasheet</HTML><HTML><![CDATA[

</a> </td> </tr> </table> </TD>

At the end of the above code, copy the following additional code. This will add a new button:

<TD class="ms-toolbar"> <table cellpadding=1 cellspacing=0 border=0> <tr> <td class="ms-toolbar" nowrap> <a tabindex=2 ID=diidEditInGridButton class="ms-toolbar" title=]]></HTML><HTML>"Edit in Datasheet"</HTML><HTML><![CDATA[ ACCESSKEY=G href="BLOCKED SCRIPTAdministration(]]></HTML><GetVar Name="WPQ"/><HTML><![CDATA[varPageUrl,']]></HTML><GetVar Name="View" URLEncode="TRUE"/><HTML><![CDATA[');" target=_self> <img src="/wpresources/EPWebParts/1.0.0.0__32bb15c33a2f8eca/images/admin.jpg" ID="tbbuttonstart1" alt=]]></HTML><HTML>"Workflow Administration"</HTML><HTML><![CDATA[ border=0 width=16 height=16></a></td> <td nowrap> <a tabindex=2 ID=diidEditInGridButton class="ms-toolbar" ACCESSKEY=G href="BLOCKED SCRIPTAdministration(]]></HTML><GetVar Name="WPQ"/><HTML><![CDATA[varPageUrl,']]></HTML><GetVar Name="View" URLEncode="TRUE"/><HTML><![CDATA[');" target=_self>

]]></HTML><HTML>Administration</HTML><HTML><![CDATA[

</a> </td> </tr> </table> </TD>

Note the bold text in the above code. Administration() is the function that will be called on the click of the new link. Where this function will be added, i will tell you later. You also need to provide proper path to the link's image. "wpresources" is a good location to add store your image along with your web part.

Location of the "wpresources" folder in your inetpub. On my machine the path is:

C:Inetpubspsroot1wpresourcesEPWebParts1.0.0.0__32bb15c33a2f8ecajs

Because i have installed SharePoint on a different port other than the default port, therefore, i have a different path. Whatever is your default site path, add the "wpresources" folder. This folder will contain another folder that will contain your web part files. "js" folder contains the javascript file that contains the "Administration()" function. Another good location to include this function which many people find easier to find is "ows.js" in the following default path:

C:Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATELAYOUTS1033

"ows.js" is the default script file that contains all the SharePoint functions. Modifying this file is not a good practice. Either take back up of the original file before modifying it or there are other methods, for example, creating a new script file that will overwrite your default script file. See SDK for more information. Right now, i will be modifying the default js file. Edit the ows.js in your favorite editor and add the following function anywhere in the file:

function Administration(using, viewguid)
{
document.location = 'AppForm.aspx';
}

Now, you also need to include the AppForm.aspx that you are using in your function. Where will this page be added? The aspx page will be added in your form library's folder. For example, if you are adding new link in your Form library, then add AppForm.aspx in the following folder:

C:Program FilesCommon FilesMicrosoft Sharedweb server extensions60TEMPLATE1033STSLISTSXMLFORM

This ASPX page contains your webpart:

<%@ Register Tagprefix="EPWebParts" Namespace="SharePoint.AdminWebParts" Assembly="AdminWebPart, Version=1.0.0.0, Culture=neutral, PublicKeyToken=65fb13d34a5f5gsa"%>

Download sample aspx page here.

All About SharePoint

A Practical Guide to SharePoint 2013

Tuesday, February 28, 2006

How to connect a web part to the aspx page?

No comments:

Post a Comment