Advanced Web Part Advanced Web Part DevelopmentDevelopment

Thomas RobbinsThomas RobbinsMicrosoft Consulting ServiceMicrosoft Consulting Service

New EnglandNew Englandtrobbins@microsoft.comtrobbins@microsoft.com

AgendaAgenda Understand the Digital Dashboard Understand the Digital Dashboard

FrameworkFramework Dashboard ArchitectureDashboard Architecture

Web PartsWeb Parts SchemaSchema Dashboard Factory processingDashboard Factory processing Token ReplacementToken Replacement Digital Dashboard Services ComponentDigital Dashboard Services Component PersonalizationPersonalization Web Parts Development KitWeb Parts Development Kit

DevelopmentDevelopment Microsoft Office XP DeveloperMicrosoft Office XP Developer DebuggingDebugging

Wrapping .NET Web ServicesWrapping .NET Web Services

SPS Dashboard ArchitectureSPS Dashboard Architecture

API for accessing API for accessing Dashboard storeDashboard store

Assembly of Assembly of Dashboard content Dashboard content and formatand format Dashboard FactoryDashboard FactoryDashboard FactoryDashboard Factory

Dashboard ServerDashboard Server

Store InterfaceStore InterfaceStore InterfaceStore Interface

Storage of Storage of Dashboard and part Dashboard and part metadatametadata WSSWSSWSSWSS

Dashboard ClientDashboard Client

Services for Web Services for Web PartsParts DD Services ComponentDD Services ComponentDD Services ComponentDD Services Component

Web PartWeb PartWeb PartWeb Part Web PartWeb PartWeb PartWeb Part

Office/Outlook, Office/Outlook, Internet ExplorerInternet Explorer

Web PartWeb PartWeb PartWeb Part

LOBLOBLOBLOB

BIBIBIBI

KMKMKMKM

ContentContentServicesServices

What is a Web Part Really?What is a Web Part Really?

A Web Part is:A Web Part is: Embedded web applicationEmbedded web application Reusable web component Reusable web component

A Web Part can:A Web Part can: Collect dataCollect data Display DataDisplay Data Contain an independent application (IM)Contain an independent application (IM)

It conforms to schema defined by the It conforms to schema defined by the Web Part SDKWeb Part SDK

Basic Web Part PropertiesBasic Web Part Properties

TitleTitle – Short name for the part – Short name for the part DescriptionDescription – Longer description of the part – Longer description of the part IsIncludedIsIncluded – Whether part is included on the – Whether part is included on the

Dashboard pageDashboard page MasterPartLinkMasterPartLink – URL to “template” version – URL to “template” version

of partof part LastModifiedLastModified – Used to determine whether – Used to determine whether

part needs to be updatedpart needs to be updated PartStoragePartStorage - Part customization information - Part customization information

Web Part Content PropertiesWeb Part Content Properties

ContentTypeContentType – XML, HTML, VBScript or – XML, HTML, VBScript or JScriptJScript

ContentLinkContentLink – URL from which to get content – URL from which to get content (HTML, XML or script)(HTML, XML or script)

ContentContent – Embedded content or fallback – Embedded content or fallback content when content when ContentLinkContentLink fails fails

RequiresIsolationRequiresIsolation – Specifies the part to be – Specifies the part to be isolated from other parts (via IFrame)isolated from other parts (via IFrame)

XSL / XSLLink XSL / XSLLink – Embedded XSL and URL to – Embedded XSL and URL to get XSL used to transform contentget XSL used to transform content

ResourceResource (new) – associate resources (.gifs, (new) – associate resources (.gifs, XSL’s, etc.) with a .dwpXSL’s, etc.) with a .dwp

Behavior PropertiesBehavior Properties

CustomizationLinkCustomizationLink – URL for – URL for customizing part content. Used when customizing part content. Used when user clicks customize link in title baruser clicks customize link in title bar

DetailLinkDetailLink – URL to a full-page, detailed – URL to a full-page, detailed UI. Used when user clicks part titleUI. Used when user clicks part title

AllowRemoveAllowRemove – Enables the user to – Enables the user to remove the part from the Dashboardremove the part from the Dashboard

AllowMinimizeAllowMinimize – Enables the user to – Enables the user to minimize the partminimize the part

Factory Processing FlowFactory Processing Flow

WebWebPartPartWebWebPartPart

Req.Req.IsolationIsolation

Req.Req.IsolationIsolation

Render IFrameRender IFramew/ContentLinkw/ContentLinkRender IFrameRender IFramew/ContentLinkw/ContentLink

ContentContentLink?Link?

ContentContentLink?Link?

Get ContentGet ContentFrom ContentLinkFrom ContentLink

Get ContentGet ContentFrom ContentLinkFrom ContentLink

Get EmbeddedGet EmbeddedContentContent

Get EmbeddedGet EmbeddedContentContent

ContentContentContentContent NextNextNextNext

YesYes

NoNo

YesYes

NoNoFailureFailure

SuccessSuccess

ResolveResolveMasterPartLinkMasterPartLink

ResolveResolveMasterPartLinkMasterPartLink

Token ReplacementToken Replacement

Token Replacement

_WPQ__WPQ_ Qualifier for this Web Part instance Qualifier for this Web Part instance with respect to other Web Parts in with respect to other Web Parts in the same dashboard.the same dashboard.

_WPR__WPR_ Location of resource files Location of resource files directory.directory.

_WPID__WPID_ Unique ID of this Web Part. Format Unique ID of this Web Part. Format may vary between data stores.may vary between data stores.

_DashboardID__DashboardID_ Unique ID of this dashboard. Unique ID of this dashboard. Format may vary between data Format may vary between data stores.stores.

_LogonUser__LogonUser_ Value retrieved from ASP Server Value retrieved from ASP Server Variable LOGON_USER.Variable LOGON_USER.

Factory API’sFactory API’s

Server VariablesServer Variables Factory inspectionFactory inspection Standard IIS Server variablesStandard IIS Server variables Object CreationObject Creation Cookies and QueriesCookies and Queries

Function getContent(node)Function getContent(node) Dim strContentDim strContent strContent = "Factory doesn't exist."strContent = "Factory doesn't exist." If (Not (IsEmpty(Factory))) ThenIf (Not (IsEmpty(Factory))) Then If (Not(Factory Is Nothing)) ThenIf (Not(Factory Is Nothing)) Then strContent = "<b>Factory exists</b>"strContent = "<b>Factory exists</b>" ' Test Variables' Test Variables strContent = strContent & strContent = strContent & "<br><b>#Variables: </b>" & "<br><b>#Variables: </b>" & Factory.Variables.CountFactory.Variables.Count strContent = strContent & strContent = strContent & "<br><b>LOGON_USER: </b>" & "<br><b>LOGON_USER: </b>" & Factory.Variables.Item("LOGON_USER")Factory.Variables.Item("LOGON_USER") strContent = strContent & strContent = strContent & "<br><b>SERVER_SOFTWARE: </b>" & "<br><b>SERVER_SOFTWARE: </b>" & Factory.Variables.Item( "SERVER_SOFTWARE")Factory.Variables.Item( "SERVER_SOFTWARE") strContent = strContent & strContent = strContent & "<br><b>HTTP_USER_AGENT: </b>" & "<br><b>HTTP_USER_AGENT: </b>" & Factory.Variables.Item( "HTTP_USER_AGENT")Factory.Variables.Item( "HTTP_USER_AGENT") End IfEnd If End IfEnd If getContent = strContentgetContent = strContentEnd FunctionEnd Function

Factory.Variables.Item(“LOGON_USER”)Factory.Variables.Item(“LOGON_USER”)

Factory.Variables.Item(“SERVER_SOFTWARE”)Factory.Variables.Item(“SERVER_SOFTWARE”)

Factory.Variables.Item(“HTTP_USER_AGENT”)Factory.Variables.Item(“HTTP_USER_AGENT”)

Digital Dashboard Services Digital Dashboard Services Component (DDSC)Component (DDSC) Easy-to-use services for Web PartsEasy-to-use services for Web Parts

DiscoveryDiscovery NotificationNotification

Method definitions are inserted into page by Method definitions are inserted into page by Dashboard factoryDashboard factory

Web Parts can be combined into an Web Parts can be combined into an integrated applicationintegrated application

Allows cooperative Web Parts to be Allows cooperative Web Parts to be developed and deployed independentlydeveloped and deployed independently

Session StateSession State Part StatePart State

Discovery ServiceDiscovery Service

Allows Web Parts to discover other Allows Web Parts to discover other parts that reside on a Dashboardparts that reside on a Dashboard

Current Dashboard available via the Current Dashboard available via the Dashboard() method on the DDSCDashboard() method on the DDSC

Collection of parts on the current Collection of parts on the current Dashboard available via the Parts() Dashboard available via the Parts() method on the Dashboard objectmethod on the Dashboard object

Part object provides access to DOM Part object provides access to DOM and part propertiesand part properties

Dashboard factory automatically Dashboard factory automatically registers parts on a Dashboard pageregisters parts on a Dashboard page

Notification ServiceNotification Service

Provides standard multi-cast event Provides standard multi-cast event mechanism for Web Partsmechanism for Web Parts

Hides the complexity of the underlying Hides the complexity of the underlying event mechanisms of browser or OSevent mechanisms of browser or OS

System and custom events are System and custom events are handled in exactly the same wayhandled in exactly the same way

OnLoad - urn:schemas-microsoft-OnLoad - urn:schemas-microsoft-com:dhtmlcom:dhtml

Web PartWeb Part

Web PartWeb Part

<Car><Car>......</Car></Car>

urn:company-urn:company-com:caronSelectcom:caronSelect

DDSCDDSC

Web Part NotificationWeb Part Notification

urn:company-urn:company-com:caronSelectcom:caronSelect

Session StateSession State

Provides mechanism for Web Parts to Provides mechanism for Web Parts to interchange context information within a interchange context information within a Dashboard sessionDashboard session

Setting session stateSetting session state PutSessionState ( NamespaceURN, Name, PutSessionState ( NamespaceURN, Name,

Value)Value)

Retrieving session stateRetrieving session state Value = GetSessionState (NamespaceURN, Value = GetSessionState (NamespaceURN,

Name)Name)

Clearing session stateClearing session state ClearSessionState (NamespaceURN, Name)ClearSessionState (NamespaceURN, Name)

Personalized Web PartsPersonalized Web Parts

Recommended way to personalize a SPS Recommended way to personalize a SPS workspaceworkspace

Show/hide based on user/group/roleShow/hide based on user/group/role Script Web Parts have access to the part Script Web Parts have access to the part

schema. This allows developers to change schema. This allows developers to change properties on the fly that are NOT persisted to properties on the fly that are NOT persisted to the storethe store

Hide a Part SampleHide a Part Sample Node.SelectSingleNode(“//IsIncluded”).text =0 Node.SelectSingleNode(“//IsIncluded”).text =0

Consider creating business functions in Consider creating business functions in dashboardextensions.vbs to determine dashboardextensions.vbs to determine visibilityvisibility

Microsoft Office XP Developer Microsoft Office XP Developer

The first integrated development tool The first integrated development tool for building dashboardsfor building dashboards

Easily create sub-dashboards and web Easily create sub-dashboards and web partsparts Familiar interface for setting propertiesFamiliar interface for setting properties

Shell is built on top of Visual Shell is built on top of Visual Studio .NetStudio .Net HTML and XML IntelliSense®HTML and XML IntelliSense®

No built-in debuggingNo built-in debugging

Working with DashboardsWorking with Dashboards

Create a new Dashboard ProjectCreate a new Dashboard Project Location:Location:

http://<server>/<workspace>http://<server>/<workspace> Name:Name: Portal Portal

Digital Dashboard Digital Dashboard Resource Kit 3.0Resource Kit 3.0 Unsupported toolkit for building Web Parts Unsupported toolkit for building Web Parts

and custom digital dashboardsand custom digital dashboards Three CD setThree CD set

SQL Server Sample dashboard and mobile SQL Server Sample dashboard and mobile dashboard previewdashboard preview Mobile preview: PocketPC (offline), WAPMobile preview: PocketPC (offline), WAP MOD XP patch for SQL dashboards (preview)MOD XP patch for SQL dashboards (preview)

SharePoint Portal Server 120 day evalSharePoint Portal Server 120 day eval Web Part Development KitWeb Part Development Kit

Papers, tools and sample Web PartsPapers, tools and sample Web Parts Snapshot of the online WP GallerySnapshot of the online WP Gallery Web Part schema matches SPSWeb Part schema matches SPS

Server Side DebugServer Side Debug

Set up Server to enable server side debugSet up Server to enable server side debug Bring up IIS Manager Bring up IIS Manager

Program – Admin tools – Internet Services ManagerProgram – Admin tools – Internet Services Manager

Locate the “Portal” vroot for the workspaceLocate the “Portal” vroot for the workspace Select “properties”Select “properties” Change Application Protection to “Low”Change Application Protection to “Low” ““Configuration” buttonConfiguration” button ““App Debugging” tab,App Debugging” tab,

Check “Enable ASP server side script debugging”Check “Enable ASP server side script debugging”

Recycle W3svcRecycle W3svc

Server Side Debug (cont’)Server Side Debug (cont’)

Attach the script debuggerAttach the script debugger You need to open the portal page at least once after You need to open the portal page at least once after

W3svc is startedW3svc is started Launch Script debugger ORLaunch Script debugger OR

Windows script debugger is “free” in Win2KWindows script debugger is “free” in Win2K Programs – Accessories – Microsoft Script debuggerPrograms – Accessories – Microsoft Script debugger

Microsoft Visual Interdev 6.0Microsoft Visual Interdev 6.0 Attach to inetinfo.exe processAttach to inetinfo.exe process

Debug - ProcessDebug - Process

Server Side Debug (cont’)Server Side Debug (cont’)

VBScript Web Part debuggingVBScript Web Part debugging From the running documents, find the From the running documents, find the

dashboard.aspdashboard.asp Search for “Execute(”, and set break points Search for “Execute(”, and set break points

on “Execute(init)” and on “Execute(init)” and “Execute(GetContent)”“Execute(GetContent)”

Why ? Because that’s how dashboard Why ? Because that’s how dashboard factory process the Web Part.factory process the Web Part.

From your browser, navigate to (or refresh) From your browser, navigate to (or refresh) the dashboard with this Web Part. You the dashboard with this Web Part. You should see the break point hit.should see the break point hit.

Server Side Debug (cont’)Server Side Debug (cont’)

XML/XSL involvedXML/XSL involved Use XML/XSL tools to validateUse XML/XSL tools to validate XSL Debugger in XML SDK or commercial XSL Debugger in XML SDK or commercial

program (ex. Visual XSLT)program (ex. Visual XSLT) Make change on XSL. To apply the changes, Make change on XSL. To apply the changes,

you may have to flush cacheyou may have to flush cachein the management dashboardin the management dashboardOr recycle w3svcOr recycle w3svc

Debugging Tips and TricksDebugging Tips and Tricks

Between part saves flush the cache and Between part saves flush the cache and open a new browser windowopen a new browser window

Open a second browser windows to flush Open a second browser windows to flush the cache between changesthe cache between changes

If you’ll be doing significant development If you’ll be doing significant development create a temporary dashboard with just that create a temporary dashboard with just that partpart

Within dashboard.asp the current webpart is Within dashboard.asp the current webpart is called xmlwebpartcalled xmlwebpart

If an error occurs in the XSL transformation If an error occurs in the XSL transformation find the function ApplyPartXSL. Set a break find the function ApplyPartXSL. Set a break point at the end. The Err object will contain point at the end. The Err object will contain the error from the transformationthe error from the transformation

Wrapping .NET Web ServicesWrapping .NET Web Services

Web Parts support consuming Web Web Parts support consuming Web ServicesServices Call a .NET Web ServiceCall a .NET Web Service Return an XML data streamReturn an XML data stream Transform to HTMLTransform to HTML

Visual Studio.NETVisual Studio.NET Hello World ExampleHello World Example Single Web method called HelloWorldSingle Web method called HelloWorld

No CLR support yetNo CLR support yet

Configure Web PartConfigure Web Part

http://<server>/http://<server>/webservice2/webservice2/service.asmx/service.asmx/HelloWord?HelloWord?

Final Web PartFinal Web Part

SummarySummary

Web Parts as an application Web Parts as an application development platformdevelopment platform

Understanding the framework Understanding the framework provided by the Digital Dashboard on provided by the Digital Dashboard on top of SPStop of SPS

Development strategyDevelopment strategy Resources to move forwardResources to move forward

Questions ???Questions ???

For copies of slides:For copies of slides:trobbins@microsoft.com

http://www.microsoft.com/usa/newenglandhttp://www.microsoft.com/usa/newengland