How to Using a ModalPopupExtender in a SharePoint Webpart Class

How to Using a ModalPopupExtender in a SharePoint Webpart Class

Almost all of the examples on how to use the Ajax Control Toolkit ModalPopupExtender are done in ASP.Net, however in this example I’ll explain how to use this control in a SharePoint Webpart with all of the code living in the class.

For our purpose here this example assumes that you have already intergrated the Ajax Control Toolkit with your SharePoint environment.

First create the target control which is going to be used to show the modal view. In my example I made the button invisible because I plan to show the modal on page load. If you haven’t already done so, also add the System.Web.Extensions reference to your project:

Button btn = new Button();
btn.Attributes.Add(“style”, “display: none”);
btn.Text = “Show Modal”;
btn.ID = “btn”;

Next, create you ModalPopupExtender

AjaxControlToolkit.ModalPopupExtender mp = newAjaxControlToolkit.ModalPopupExtender();
mp.CancelControlID = “CancelBTN”;
mp.OkControlID = “OkBTN”;
mp.PopupControlID = “ModalPanel”;
mp.PopupDragHandleControlID = “ModalHeader”;
mp.BackgroundCssClass = “ModalPopupBG”;
mp.TargetControlID = “btn”;

Now create the main panel for your modal view as well as the DIV’s for the main body content

Panel pan = new Panel();
pan.Attributes[“display”] = “none”;
pan.Attributes[“id”] = “ModalPanel”;

HtmlGenericControlDivMain = new HtmlGenericControl(“div”);
DivMain.Attributes[“class”] = “Container”;

HtmlGenericControl div1 = new HtmlGenericControl(“div”);
div1.Attributes[“id”] = “PopupHeader”;
div1.Attributes[“class”] = “PopupHeader”;
LiteralHeaderText = new Literal();
HeaderText.Text = “<p>ALERT</p>”;
div1.Controls.Add(HeaderText);

HtmlGenericControl div2 = new HtmlGenericControl(“div”);
div2.Attributes[“id”] = “PopupBody”;
div2.Attributes[“class”] = “PopupBody”;
LiteralBodyText = new Literal();
BodyText.Text = “<p>This is a simple modal dialog</p>”;
div2.Controls.Add(BodyText);

HtmlGenericControl div3 = new HtmlGenericControl(“div”);
div3.Attributes[“id”] = “PopupBody”;
div3.Attributes[“class”] = “PopupBody”;
LiteralControlText = new Literal();
ControlText.Text = “<input id=’ReviewBTN’ type=’button’ value=’Okay’ /><input id=’DismissBTN’
type=’button’ value=’Dismiss’ />”;
div3.Controls.Add(ControlText);

DivMain.Controls.Add(div1);
DivMain.Controls.Add(div2);
DivMain.Controls.Add(div3);
pan.Controls.Add(DivMain);

Now add your controls to the webpart

this.Controls.Add(btn);
this.Controls.Add(pan);
this.Controls.Add(mp);

// I execute this on load, however it can be applied to an action on the target control button
mp.Show();

Here are the styles I used for the modal

.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
}

.PopupHeader
{
background-color: #5e8cc5;
padding: 5px 15x 5px 15px;
font-family: Arial;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
padding: 1px;
}

.PopupBody
{
padding: 5px 15px 5px 15px;
font-family: Arial;
font-weight: bold;
font-size: 12px;
color: #000000;
clear: both;
}

.Container
{
background-color: #ebf4fe;
border: 2px solid #000000;
padding: 0px 0px 0px 0px;
}

Read More

Create A Simple Org Chart Using SharePoint, PeopleSoft and Google Visualizations

Create A Simple Org Chart Using SharePoint, PeopleSoft and Google Visualizations

If your organization is anything like mine, you have a collection of Org Charts from every department.  Most of them are formatted differently and all of them get out-of-date pretty quickly.  Sure, there are tons of third party solutions, but they all assume that you:

a. Keep all of your organizational information in Active Directory or

b. Don’t mind duplicating (and maintaining) your organizational information in yet another system.

Well, neither of those was true for us.

What I plan to show in this post is a simple approach to create a completely dynamic Org Chart using SharePoint, PeopleSoft, and Google Visualization.  If you don’t use PeopleSoft, don’t worry, these can be EASILY modified to use your data source of choice.

What You Need:

  1. Access to a view of the PeopleSoft data that contains the ID of each employee and that of their manager.
  2. SharePoint Designer
  3. Ability to create a Stored Procedure.
  4. Basic knowledge of XSL, Javascript, and CSS won’t hurt.

Steps:

  1. Create a stored procedure to recursively retrieve managers and their staff, accepting a parameter for the Employee ID of the top level manager you are looking for and Level <= 2 means give me 2 levels below the top level manager:
    WITH DirectReports (Name, ReportsTo, Position, JobTitle, EmployeeID, Level)
    AS
    (
         SELECT
           rtw.Name,
           rtw.ReportsTo,
           rtw.position,
           rtw.JobTitle,
           rtw.EmployeeID,
           0 AS Level
        FROM [PeopleSoft].[WhoReportsToWhoView] AS rtw
        WHERE EmployeeID = @EmployeeID 
    
    UNION ALL 
    
        SELECT
           rtw.Name,
           rtw.ReportsTo,
           rtw.Position,
           rtw.JobTitle,
           rtw.EmployeeID,
           Level + 1
        FROM [PeopleSoft].[WhoReportsToWhoView] AS rtw
    
        INNER JOIN DirectReports AS d ON rtw.ReportsTo = d.Position
    )
    Select
       dr.Name,
       dr.JobTitle,
       dr.EmployeeID,
       dr2.EmployeeID as ReportsTo
    FROM DirectReports as dr
    LEFT OUTER JOIN
    DirectReports as dr2 ON dr.ReportsTo = dr2.Position Where dr.Level <= 2
  2. From SharePoint Designer create a SQL DataSource for the Stored Procedure above, passing in the EmployeeID paramter as a querystring parameter. You should be able to Google that, it is pretty well documented.  Sorry, I can’t hold your hand forever.
  3. Download this XSLT file and add it to your SharePoint Style Library:
  4. From SharePoint Designer add a Data View WebPart to the page. Set the XSLT path to that of the newly uploaded file.
  5. Viola! You should end up with something similar to the image below.  Just click on any employee to drill down into his/her organization.

To learn more about the inner-workings and various options of Google Visualization, check out Google’s documentation.

Read More

How to Embedding a PDF Object in a SharePoint 2010 Web part using C#

How to Embedding a PDF Object in a SharePoint 2010 Web part using C#

Recently I was assigned the task of displaying a PDF in a SharePoint Web part. I figured it’d be easy enough to display it in an <iframe> or simply embed it on the page, but unfortunately my assumption couldn’t have been further from the truth.

Attempting to load the PDF in an <iframe>

Quite simply, and by default, SharePoint does not allow users to automatically open documents within a browser window. There is a setting on the web application called Browser File Handling, which if set to Permissive is supposed to allow documents to open within the browser. Alas, this setting does not afford the ability to view PDFs within the browser window. Also, within the Document Library, there’s a setting called Opening Documents in the Browser, which defaults to opening files within the browser anyway… So SharePoint is working against us.

Using the <embed /> tag

The <embed /> tag was deprecated for XHTML in favor of the <object> tag, so it’s not “supported” in Visual Studio. There is however a way around this; create a Literal control in C# and then write it to your page at run-time to avoid any compile errors. Upon assigning the src attribute, this strategy proves fruitful as it simply embeds the PDF in the window as desired. This is great, except for the fact that this strategy is completely invalid. I wanted to do one better.

Using the <object> tag

The <object> tag is a not only a valid XHTML control; it’s also supported in Visual Studio. Unfortunately, it requires a Class, ClassID, or ProgID attribute. I wasted hours scouring the web for this specific ClassID, and in the end, I could not locate it. This drove me to create a new strategy; a hybrid of the <embed /> and <object> strategies. This way I can ensure maximum browser support while doing my best to implement valid code.

//Create your URL to the pdf file, including path and URL variables
string url = web.Url + “/” + “DocumentLibrary” + “/” + CurrentMonday.ToString(“MM-dd-yyyy”) + “.pdf” +
“#scrollbar=0&statusbar=0&navpanes=0&toolbar=1&zoom=75″;
//Establish Literal control
Literal l1 = new Literal();
//Write the Object code to the Literal
l1.Text = “<object id=’AcrobatFrame’ type=’application/pdf’ classid=’clsid:CA8A9780-280D-11CF-A24D-444553540000′ width=’711′ height=’956′><param name=’src’ value=’” + url + “‘ /><a href=’” + url + “‘>Click here to download “ + CurrentMonday.ToString(“MM-dd-yyyy”) + “.pdf</a></object>”;
//Add the Literal to the Page
Panel.Controls.Add(l1);

Acrobat URL variables

In the code above you can see that I am passing URL variables to define what application components are visible and the zoom of the pdf. This way I can set a static height and width for the object because I know the size of the document will always be the same. See a list of all URL variables.

 

Read More