Tài liệu Module 2: Customizing Default Team Folder Templates ppt

Customizing Default Team Folder Templates Editing Team Folder Home Pages Team Folder Localization Code Using DHTML to Modify the User Interface Using Cascading Style Sheets to Modify

Contents

Overview 1

Customizing Default Team Folder

Templates 2

Specifying the Purpose of a Page 10

Changing the Folder Name 15

Customizing Navigation Buttons 17

Lab A: Modifying Default Team Folder

Templates 39

Review 49

Module 2: Customizing Default Team Folder Templates

to represent any real individual, company, product, or event, unless otherwise noted Complying with all applicable copyright laws is the responsibility of the user No part of this document may

be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Microsoft Corporation If, however, your only means of access is electronic, permission to print one copy is hereby granted

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property

 2000 Microsoft Corporation All rights reserved

Microsoft, ActiveX, BackOffice, FrontPage, MSDN, MS-DOS, Outlook, PowerPoint, Visual Basic, Visual C++, Visual InterDev, Visual J++, Visual Studio, Windows, and Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A and/or other countries/regions

Other product and company names mentioned herein may be the trademarks of their respective owners

Project Advisor: Anne Bockman (Excell Data Corporation)

Project Lead and Instructional Designer: Josh Barnhill (Volt Technical)

Lead Program Manager: Colleena Carr

Technical Contributor: Chris Lodwig

Graphic Artist: Andrea Heuston (Artitudes Layout and Design)

Editing Manager: Lynette Skinner

Editor: Tom Blood (Volt Technical)

Copy Editor: Kaarin Dolliver (S&T Consulting)

Online Program Manager: Debbi Conger

Online Publications Manager: Arlo Emerson (Aditi)

Online Support: David Myka (S&T Consulting)

Multimedia Development: Kelly Renner (Entex)

Testing Leads: Sid Benavente, Keith Cotton

Testing Developer: Greg Stemp (S&T OnSite)

Production Support: Ed Casper (S&T Consulting)

Manufacturing Manager: Rick Terek (S&T OnSite)

Manufacturing Support: Laura King (S&T OnSite)

Lead Product Manager, Development Services: Bo Galford

Lead Product Manager: Janet Wilson

Group Product Manager: Robert Stewart

Instructor Notes: Customizing Default Team Folder

Templates

This module provides students with the ability to customize the default Team

Folder Templates

At the end of this module, students will be able to:

Describe ways to customize the default Team Folder Templates

Change the purpose of a Team Folder Template home page

Change the names of folders within a team folder application folder hierarchy

Customize navigation buttons on a Team Folder Template home page

Customize the View tabs associated with a Team Folder Template home

page

Materials and Preparation

This section provides you with the materials and preparation needed to teach this module

Materials

To teach this module, you need the following materials:

Microsoft® PowerPoint® file 2018a_02.ppt

Module 2, “Customizing Default Team Folder Templates”

Preparation

To prepare for this module, you should:

Read all of the materials for this module

Complete the lab

Presentation:

45 Minutes

Lab:

45 Minutes

Module Strategy

Use the following strategy to present this module:

Customizing Default Team Folder Templates Explain that you edit team folder home pages by modifying dynamic Hypertext Markup Language (DHTML) code Explain that Team Folder Templates use localization code and explain how to modify this code Explain that you can change the appearance of template pages by modifying DHTML code Explain how to modify user interface (UI) elements by modifying the cascading style sheets (CSS) associated with a team folder home page Classify the elements of a Team Folder Template that can be customized

Specifying the Purpose of a Page Explain that there are several ways to use the Team Folder Templates home page in an application, depending on the type of application and folder to which the home page is linked List the three Page Characteristic Variables

(PCVs) in the home page and describe their properties (IsStandAlone, IsParent, FolderType) Provide examples of modifying these variables

Changing the Folder Name Explain that the default Team Folder Templates home page is designed to support six types of application folders plus an administration folder List and describe these six folder types

Customizing Navigation Buttons Explain how to display or hide navigation buttons that, when clicked, change the folder displayed by the Microsoft Outlook® view control Explain how to set the button label text, button folder path, type of folder associated with the button, and the default view of the associated folder

Customizing View Tabs

Explain that every folder within Microsoft Outlook 2000 is associated with

a particular set of views Describe how to create custom views in

Outlook 2000 Introduce the concept of View tab properties for team folder applications Describe how to set View tab properties Describe how to create a new view and add it to the default View tab

Overview

Customizing Default Team Folder Templates

Specifying the Purpose of a Page

Changing the Folder Name

Customizing Navigation Buttons

Customizing View Tabs

At the end of this module, you will be able to:

Describe ways to customize the default Team Folder Templates

Change the purpose of a Team Folder Template home page

Change the names of folders within a team folder application folder hierarchy

Customize navigation buttons on a Team Folder Template home page

Customize the View tabs associated with a Team Folder Template home

In this module, you will learn

about modifying the default

Team Folder Templates

Customizing Default Team Folder Templates

Editing Team Folder Home Pages

Team Folder Localization Code

Using DHTML to Modify the User Interface

Using Cascading Style Sheets to Modify the User Interface

Classifying Elements That Can Be Customized

The Microsoft® Outlook® 2000 Team Folder Templates home page is very sophisticated At the same time, it is designed to be easy to customize With basic knowledge of dynamic Hypertext Markup Language (DHTML), you can change the appearance of a team folder application by modifying and removing elements of a Team Folder Template home page

The following topics describe how to modify these home pages, how team folder applications use localization code, how to use DHTML and cascading style sheets (CSS) to modify the user interface (UI) of home pages, and how to classify the elements of customizable home pages

Slide Objective

To outline this topic

Lead-in

In this section, you will learn

about modifying Team

Folder Template home

pages

Editing Team Folder Home Pages

Team Project - Microsoft Outlook

File Edit View Favorites Tools Actions Help

Done

New Send/Receive Team Project - Team Folder

Team Information Welcome Information

Welcome Information Links Mission Statement Goals Policies

Home Discussion Documents Team Calendar Team Tasks Team Contacts

Team Folder Home Page

File Edit Format Help

Sub SetButton Disp

‘############

‘Set up the properties for the top nav bar

‘Each top nav button has four properties

‘1 style.display (can be “none” or “inline”)

‘3 setAttribute “ShowPage”,”[MyHiddenPageID]” Where [MyHiddenPage FolderBtnHome.style.display = “inline”

FolderBtnHome.innerHTML = L_FolderBtnHomeText_Text

‘FolderBtnHome is a special case and doesn’t take a path FolderBtn0.style.display = “inline”

FolderBtn0.innerHTML = L_FolderBtn0Text_Text FolderBtn0.setAttribute “ShowPage”,”SpanGettingStarted”

FolderBtn0.setAttribute “tdArrow”,”tdArrow1”

if Not IsTasks then ‘Unless this Application has a Team T FolderBtn1.style.display = “none”

Else FolderBtn1.style.display = “inline”

FolderBtn1.setAttribute “ShowPage”,”SpanTasksEdit”

FolderBtn1.setAttribute “tdArrow”,”tdArrow2”

EditTeamTaskHeader.innerHTML = L_FolderBtn1TextA_T

Use a text editor, such as Microsoft Notepad or Microsoft Visual InterDev®

version 6.0 or later (in Source mode only), to edit a Team Folder Templates home page

Do not attempt to modify the Team Folder Templates home page by using a what-you-see-is-what-you-get (WYSIWYG) editor such as Microsoft FrontPage® 2000 WYSIWYG editors may corrupt team folder home pages, rendering them nonfunctional

Editing a Default Template

The Team Folder Templates are designed to meet the basic collaboration needs

of most departments and workgroups, but they can also be customized and extended to fulfill your particular requirements The default Team Folder

Templates are published to the Inetpub\Wwwroot\Project_name directory on

the server running Microsoft Internet Information Server (IIS)

Folder name Folder description

It is recommended that you make a backup copy of any htm files before editing them This is to ensure that if you make a mistake during editing, you can always go back to the original page

Slide Objective

To introduce a Team Folder

Template home page and

Notepad, a text editor you

can use to modify DHTML

code within Team Folder

Template home pages

Lead-in

You use any text editor to

edit DHTML code within

Team Folder Templates

home pages

Important

Team Folder Localization Code

User-Interface Component

Application Component

Localized Product

or part of the world in which it will be used, including translating words and

changing cultural references) The Team Folder Templates use localization

code, a term that refers to a section of application code in which all language

modifications take place Localization code allows users to make changes to the

UI while all of the back-end processing remains the same

Any application that will be localized presents two conceptual blocks:

code All UI modification of the Team Folder Templates takes place in the data block code

that is run for all locales All language modification of the Team Folder Templates takes place in the code block code

Slide Objective

To show the relationships

among the data block, code

block, and final product of

Team Folder Template

DHTML files

Lead-in

Code is broken into distinct

parts within Team Folder

Template DHTML files to

enable simple localization

Index for the Team Folder Home Page

If you would like to make modifications to any part of this page, this index will help you locate the correct place in the DHTML code to make your changes

Index name Description

Localization Example

In the following example, the FolderBtn2 Properties section of code is set in the

code block section of the Default.htm file The FolderBtn2.innerHTML

property is set to the L_folderButtonName2_Text string:

In the data block section of the Default.htm file, the

L_folderButtonName2_Text property string property is set to “Discussion.”

This means that on the folder home page UI of a team folder application, the second button displays “Discussion”:

'Folder Button Text L_folderButtonName1_Text = "Home"

L_folderButtonName2_Text = "Discussion"

L_folderButtonName3_Text = "Documents"

L_folderButtonName4_Text = "Team Calendar"

L_folderButtonName5_Text = "Team Tasks"

L_folderButtonName7_Text = "Team Contacts"

L_buttonHelplbl_Text = "Help"

Using DHTML to Modify the User Interface

Team Project - Team Folder

Team Information Welcome Information

Welcome Information Links Mission Statement Goals Policies

Home Discussion Documents Team Calendar Team Tasks Team Contacts Team Folder Home Page

Team Folder Application Navigation Structures

Customizing a Team Folder Template home page requires an understanding of how the page functions Although the page contains hyperlinks that appear to point to different team folder home pages, the hyperlinks are inactive Instead, script routines attached to these hyperlinks hide or display elements on the page and change the folder displayed in the Outlook view control

Benefits of Using DHTML Scripts

Using DHTML scripts to enable user interaction makes Web page files more complex than conventional navigation methods; however, DHTML scripts greatly simplify the task of customizing the Web page by allowing users to change just one Web page file instead of many files

In addition, using DHTML eliminates the potential problem of different pages loading slowly in a user’s browser (in this case, Microsoft Internet Explorer hosted by Outlook 2000.) Although this performance hit is almost negligible for

a single home page, the few extra seconds required to load HTML-based Web pages every time a user changes folders would quickly add up As a result, the user would perceive that the team folder application was running slowly Rather than let this performance hit slow users each time they move to a new folder, the Team Folder Templates use DHTML, which loads all of the page content in one request from the Web server to the client

Slide Objective

To present a view of a Team

Folder Template home

page

Lead-in

Team Folder Templates

home pages take advantage

of DHTML, allowing you to

easily customize elements

of the user interface and

enabling users to quickly

move among pages

Using Cascading Style Sheets to Modify the User Interface

Miscellaneous Files – Microsoft Development Environment [design] – [css.css]

File Edit View Projects Debug StyleSheet Tools Window Help

Toolbox

Design Style sheet

HTML Tags BODY TABLE Classes AdminHeader btnFolder btnFolderFocus btnFolderMOver BtnView BtnViewMOver FauxLink FormButton FormdropDown formTextbox headline helplinks lblFormlink leftHeader newsitem QuickItem tblLeftBar tdFolderID tdMainFrameHome tdSidebar TopBar ViewCTLAction ViewCTLActionMOver Unique Ids

Pointer Textbox Password File Field Text Area Checkbox Radio Button Dropdown Listbox Submit Button Reset Button Button Horizontal Rule Line Break Paragraph Break Space Label

Textbox Password File Field Text Area Checkbox Radio Button Dropdown Listbox Submit Button Reset Button Button Horizontal Rule Line Break Paragraph Break Space Label

Task List Click here to add a new task

Advanced Source Preview Font Background Borders Layout Lists Font preference builder

Installed fonts: Selected fonts:

Tahoma

Arial Arial Black Arial Narrow

Color: Small caps: Italics:

Absolute:

Team Folder Templates use cascading style sheets to set the page appearance You can alter the visual appearance of the Team Folder Template home page from within the CSS associated with a team folder project

CSS are an HTML specification that include typographical information on how

a Web page should appear Cascading style sheets can apply a style to a single element or to a group of elements In addition, CSS can apply multiple styles to each element on a Web page

Capabilities of Cascading Style Sheets

Cascading style sheets give you the ability to define a set of styles for the entire team folder project, giving your home pages a unique and consistent design The same style sheet can reference as many pages as you want Because all of the CSS are stored in a single file, CSS are easier to manage and also conserve storage space on the Web server

Style sheets make it easy to modify the appearance of related Web pages without changing the code in each Web page file You can change a single line

of code in the style sheet—such as increasing the font size of an element—and have that change reflect in multiple pages throughout your team folder

Slide Objective

To present Visual InterDev,

a text editor that you can

use to edit the cascading

style sheets to modify a

Team Folder Template

home page appearance

Lead-in

You can use the cascading

style sheets associated with

a Team Folder Template

home page to modify certain

aspects of the page’s visual

appearance

Editing a Team Folder Template Cascading Style Sheet

The css.css file for a Team Folder Template is published to the

Inetpub\Wwwroot\Project_name directory of a server running IIS You edit a

cascading style sheet by using Microsoft Visual InterDev, a complete Web development environment that is part of Microsoft Visual Studio®

To edit a Team Folder Template cascading style sheet:

1 Start Visual InterDev

2 On the File menu, click Open File

3 Move to and open the Team Project Css.css file located in the

Inetpub\Wwwroot\Project_name directory on the server running IIS

The CSS editor is displayed with your new style sheet

4 Use the CSS editor to modify the file

For more information about using the CSS editor to edit cascading style

sheets, search for editing style sheets on the MSDN™ Web site (msdn.microsoft.com)

Note

Classifying Elements That Can Be Customized

Page Characteristic Variables (PCV) Specify the page’s role in the team folder hierarchy.Specify the page’s role in the team folder hierarchy.

Folder Name Properties (FNP) Associate names of folders with the standard folder names.Associate names of folders with the standard folder names.

view different folders.

Specify the properties of the new navigation bar, which allows the user to view different folders.

View Tab Properties (VTP)

Specify the properties of the View tabs, which allow the users to change the current folder’s view.

Specify the properties of the View tabs, which allow the users to change the current folder’s view.

In most cases, you customize a Team Folder Template home page by adding, changing, or removing predefined variables and property names in the page file The following table lists the categories used to classify these DHTML elements

Folder Name Properties (FNP) Associate names of team folders with the standard

Outlook folder names Change associations when you rename a folder The FNP names must match the name of the Outlook 2000 subfolders exactly This is case sensitive

Navigation Bar Properties (NBP) Specify the properties of the top navigation bar,

which allows the user to view different folders Set these properties to customize, add, or remove navigation buttons

View Tab Properties (VTP) Specify the properties of the View tabs, which

allow users to change the view of the current folder Set these properties to customize, add, or

remove View tabs

You can use the search function on a text editor such as Notepad (on the

Edit menu, click Find) to search for the acronyms in the DHTML text to help

you locate where the properties and variables are set

Slide Objective

To present the categories of

Team Folder Template

home page elements that

can be customized

Lead-in

You can customize Team

Folder Template home

pages by setting properties

related to folder names,

navigation buttons, View

tabs, and other page

characteristics

Point out that the rest of the

module is divided into

sections that describe how

to modify elements of these

four categories

Note

Specifying the Purpose of a Page

Setting Page Characteristic Variables

Considering Examples of Modifying Page Characteristic Variables

You can use a Team Folder Template home page in several ways within a team folder application, depending on the type of folder and application for which it

is the home page For example, the home page takes on a different appearance and function for a root folder than for a subfolder

When customizing Team Folder Templates, you can easily change the appearance and function of existing home pages to reflect a change in the folder hierarchy of your team folder application

Slide Objective

To outline this topic

Lead-in

You can change the

appearance and function of

home pages to reflect a

change in the folder

hierarchy of a team folder

application

Setting Page Characteristic Variables

Setting the IsStandAlone PCV

True or False

Setting the IsParent PCV

True or False

Setting the FolderType PCV

Empty string, or one of these values:

AdministrationType, CalendarType, ContactType, DiscussionType, DocumentsType, TeamType

Page Characteristic Variables (PCVs) specify the role of the home page in the folder hierarchy of the team folder application You specify how the home page functions in the application by setting three PCVs:

root data folder or multiple subfolders of the application root

application

page

Setting the IsStandAlone PCV

You set the IsStandAlone PCV to either True or False

Administration subfolder)

along with an Administration folder, are subfolders of the application root

Slide Objective

To present the possible

values of the three Page

Characteristic Variables

(PCVs)

Lead-in

You set PCVs for home

pages differently to indicate

the different roles the home

pages play within a team

folder application

Setting the IsParent PCV

You set the IsParent PCV to either True or False

application home page

application home page

Setting the FolderType PCV

The FolderType value determines the types of views and commands that are displayed on the home page for the folder You set the FolderType PCV to

either an empty string ("") or to one of six values, depending on the value of other PCVs

If the IsStandAlone value is False and the IsParent value is True, set the FolderType PCV to an empty string

In all other cases, you can set FolderType to any of the following values:

• AdministrationType Indicates an Administration folder

• CalendarType Indicates a Calendar folder

• ContactType Indicates a Contact folder

• DiscussionType Indicates a Discussion folder

• DocumentsType Indicates a Documents folder

• TaskType Indicates a Task folder

• TeamType Indicates a Team folder

Considering Examples of Modifying Page Characteristic Variables

Folder List

Public Folders Testing Calendar Only Team Calendar Administration Deleted Items Tasks Team Project Team Project Administration Calendar Contacts Discussion Documents Tasks

Before you modify PCVs to indicate a different role for a home page, it is helpful to consider examples The following examples demonstrate settings for PCVs that assign common roles for home pages within team folder application hierarchies

Modifying the Home Page of a Calendar Application

To modify the home page to be the application home page consisting solely of a Calendar folder, set the PCVs as shown:

IsStandAlone = True IsParent = True FolderType = CalendarType

Modifying the Home Page of Multiple Folders

To modify the home page to be the application home page that consists of multiple folders, set the PCVs as shown:

IsStandAlone = False IsParent = True FolderType = ""

The FolderType of the default.htm it set to "", which is an initializing

variable

Slide Objective

To present the folder

hierarchy of a team folder

application by using the

example PCV settings

Lead-in

Consider these examples

before you modify PCVs for

home pages within your

team folder application

Be sure to point out that the

slide reflects these code

examples

Point out that the Calendar

Only Folder is a

StandAlone, a Parent, and

of the Calendar type

Point out that the Team

Project root file is a Parent

and is not StandAlone

because there are additional

folders under it The

FolderType is set to Null

because it is the root file

Note

Modifying the Home Page a Single Folder

To modify the home page to be the discussion folder home page within a multiple-folder application, set the PCVs as shown:

IsStandalone = False IsParent = False FolderType = DiscussionType

Delivery Tip

Point out that the Discussion

Folder under Team Project

is not Parent, is not

StandAlone, and is set to

DiscussionType

Changing the Folder Name

Folder List

Journal Notes Outbox Sent Items Tasks Public Folders Testing Calendar Only Deleted Items Tasks Team Project Team Project Administration Calendar Contacts Discussion

Documents

Tasks

Folder List

Journal Notes Outbox Sent Items Tasks Public Folders Testing Calendar Only Deleted Items Tasks Team Project Team Project Administration Calendar Contacts Discussion

Library

Tasks

The Team Folder Templates home page is designed to support six types of application folders, in addition to an Administration folder Setting their corresponding FNP variable within a Web page generated by the Team Folders Wizard designates the names of these application folders

Values of Folder Name Property Variables

The following table lists the FNP variables, their default values, and a description of the folder type

Variable Default Value Folder Description

L_folderNameAdmin_Text Administration Contains Outlook 2000 Post items; special folder

containing items and forms used for administering the application

L_folderNameCalendar_Text Calendar Contains Outlook 2000 Appointment items; used to

store shared calendar items

L_folderNameContact_Text Contacts Contains Outlook 2000 Contact items; used to store

L_folderNameTasks_Text Tasks Contains Outlook 2000 Task items; used to store

shared task items

Slide Objective

To present an Outlook 2000

Folder List showing the

default folder names created

by the Team Folders

Wizard, as well as a

modified folder name

Lead-in

You set the Folder Name

property variable to specify

the name of a folder within

the hierarchy of a team

folder application

Changing Default Values of Folder Name Property Variables

If you change the name of any of these standard Outlook folders, you must also change the value for the corresponding FNP variable in the home page to exactly match the folder name For example, if you change the name of the Documents folder to Library, the following DHTML code must appear in the home page:

L_folderNameDocuments_Text = "Library"

Changing the FNP does not change the type of items the folder contains or the views applied to the folder in the Outlook view control In addition, changing the FNP does not change the text that appears on the navigation bar—there is

no relationship between the folder name and the button display To change the

button display, you must modify the L_folderButtonName_Text variable

Explain that this content

applies to renaming an

actual Outlook folder

Customizing Navigation Buttons

Displaying or Hiding Navigation Buttons

Setting the Button Label Text

Setting the Button Folder Path

Setting the Folder Type

Setting the Default Folder View

The top of each Team Folder Template home page contains a set of buttons that, when clicked, change the folder displayed by the Outlook view control along with other UI elements on the home page These buttons are collectively

known as the Navigation bar because it appears that the user is navigating

from folder to folder

Each button is defined by a set of navigation button properties These properties specify:

You can modify each of these five properties to change the appearance and function of the navigation bar buttons

Slide Objective

To outline this topic

Lead-in

Navigation buttons on Team

Folder Template home

pages are defined by four

properties that you can

modify

Displaying or Hiding Navigation Buttons

The following DHTML code example displays the FolderButton button.

The following DHTML code example hides the FolderBtn3 button.

'FolderBtn3 Properties

FolderBtn3.style.display = "inline"

FolderBtn3.innerHTML = L_folderButtonName3_Text FolderBtn3.setAttribute "folderPath",

L_folderNameDocuments_Text FolderBtn3.setAttribute "folderType",DocumentsrType FolderBtn3.setAttribute "DefaultTab",“DocumentsTab1"

'FolderBtn3 Properties

FolderBtn3.style.display = "inline"

FolderBtn3.innerHTML = L_folderButtonName3_Text FolderBtn3.setAttribute "folderPath",

L_folderNameDocuments_Text FolderBtn3.setAttribute "folderType",DocumentsrType FolderBtn3.setAttribute "DefaultTab",“DocumentsTab1"

FolderBtn3.style.display = “none”

You specify whether a button is displayed or hidden by setting the style.display

property in the Default.htm file You can set the property to one of the following values:

Considering a style.display Property Example

The following DHTML code example displays the FolderButton3 button: FolderBtn3.style.display = "inline"

The following DHTML code example hides the FolderBtn3 button:

FolderBtn3.style.display = "none"

Slide Objective

To present the DHTML code

required to hide or display

the FolderBtn3 button

Lead-in

You use the style.display

property to specify whether

a navigation button is

displayed

Setting the Button Label Text

Team Project - Team Folder

Team Information Welcome Information

Welcome Information Links Mission Statement Goals Policies

Home Discussion Documents Team Calendar Team Tasks Team Contacts

Team Folder Home Page

Unread Summary

Send new message

to team

Top News

Team Project - Team Folder

Team Information Welcome Information

Welcome Information Links Mission Statement Goals Policies

Home Discussion Library Team Calendar Team Tasks Team Contacts

Team Folder Home Page

The button label text is not set in the button properties; it is set in the localization area or in the data block of the Default.htm file For example, the following code defines properties for the FolderBtn3 button, which is displayed

by default as Documents In this section of code, there are two localization

variables: L_folderButtonName3_Text and L_folderNameDocuments_Text: 'FolderBtn3 Properties

Setting the innerHTML Property

The innerHTML property in the previous section of code points to a button localization variable where you would change the text that appears on the button face

Slide Objective

To present a Team Folder

Template home page in

which the Documents

Considering an innerHTML Property Example

For example, suppose that you want to change the text label displayed by the

FolderBtn3 button from Documents to Library In the previous section of DTHML code, you can see that the innerHTML property points to the variable L_folderButtonName3_Text To change the label text that appears on the button face, you find and modify the L_folderButtonName3_Text property

Before Code Change

Localization code for Folder Button 3, which is set by default to Documents, is

presented below This is the button that appears in the top navigation bar: L_folderButtonName3_Text = "Documents"

After Code Change

This code sample shows how to change the navigation button text label from

Documents to Library:

L_folderButtonName3_Text = "Library"

Completing the Code Change Example

To complete the text change shown in the example above, use Visual InterDev

to open the Default.htm file (this file is located in the

Inetpub\Wwwroot\Project_name directory of your server running IIS)

To modify the button display text:

1 Open Visual InterDev

2 In the New Project dialog box, click Cancel

3 On the File menu, click Open File

4 In the Open dialog box, open the Default.htm file in the

Inetpub\wwwroot\your_project_name directory

5 Find the L_folderButtonName3_Text variable, and change Documents to

Library

6 To save the file as Default.htm, on the File menu, click Save

7 On your team folder home page, click Refresh

Setting the Button Folder Path

The following example sets the path of the FolderBtn3 button to the Calendar folder, which is a subfolder of the top-level team folder.

'FolderBtn3 Properties FolderBtn3.style.display = "inline"

FolderBtn3.innerHTML = L_folderButtonName3_Text

FolderBtn3.setAttribute "folderPath", L_folderNameDocuments_Text

FolderBtn3.setAttribute "folderType",DocumentsrType FolderBtn3.setAttribute "DefaultTab",“DocumentsTab1"

'FolderBtn3 Properties FolderBtn3.style.display = "inline"

FolderBtn3.innerHTML = L_folderButtonName3_Text

FolderBtn3.setAttribute "folderPath", L_folderNameDocuments_Text

FolderBtn3.setAttribute "folderType",DocumentsrType FolderBtn3.setAttribute "DefaultTab",“DocumentsTab1"

The folderPath property is defined in the code block section of the Default.htm

file generated by the Team Folders Wizard

You specify the path of the folder to which a navigation button refers by setting the data block localization code This path is relative to the root team folder

It is not necessary that the folder name match the label text of the navigation button However, the type of folder referenced by the navigation button

property must match the type specified by the button's folderType property

Do not delete the folderPath property If it is removed from the

code block section, an error will occur stating that the attribute has not been set This attribute is used internally by team folders to construct the page layout

Setting Button Properties in the Code Block

The code block for FolderBtn3 properties is shown There are two localization variables in this example, L_folderButtonName3_Text and

To present the DHTML code

required to set the path for

the FolderBtn3 button to the

Calendar folder

Lead-in

You use the folderPath

property to specify the folder

to which the navigation

button refers

Important

Demonstrate how to locate

the localization variables,

find the display name of the

folder, and find the Outlook

folder to which it points

Localization Code

Code from the data block for Folder Button 3 is shown The

L_folderNameDocuments_Text variable is set to the default folder Documents and the display name variable L_folderButtonName3_Text is set

to Team Documents:

L_folderNameDocuments_Text = "Documents"

L_folderButtonName3_Text = "Team Documents"

Setting the Folder Type

Possible Values of the folderType Property

You specify the type of folder to which a navigation button refers by setting its

folderType property The type of folder referenced by this property must match the type specified by the button's folderType property

For example, if you set a folderType to calendar you cannot then specify the folderPath as contacts

The folderType property accepts any of the following values:

Do not delete the folderType property If it is removed from the

code block section, an error will occur stating that the attribute has not been set This attribute is used internally by Team Folders to construct the layout of the page

Locating Navigation Button Properties

To locate the navigation button properties in the DHTML code of the home

page, open the Default.htm Web page in Visual InterDev On the File menu,

click Search, and then click Find Search for the text NBP

Slide Objective

To list the possible values of

the folderType property

Lead-in

You use the folderType

property to specify the type

of folder to which the

navigation button refers

Important