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

Module 2: Customizing Default Team Folder Templates Contents Overview Customizing Default Team Folder Templates Specifying the Purpose of a Page 10 Changing the Folder Name 15 Customizing Navigation Buttons 17 Customizing View Tabs 27 Lab A: Modifying Default Team Folder Templates 39 Review 49 Information in this document is subject to change without notice The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended 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 Module 2: Customizing Default Team Folder Templates Instructor Notes: Customizing Default Team Folder Templates Presentation: 45 Minutes This module provides students with the ability to customize the default Team Folder Templates Lab: 45 Minutes 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 iii iv Module 2: Customizing Default Team Folder Templates 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 Module 2: Customizing Default Team Folder Templates Overview Slide Objective To provide an overview of the module topics and objectives Lead-in In this module, you will learn about modifying the default Team Folder Templates 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 page Module 2: Customizing Default Team Folder Templates Customizing Default Team Folder Templates 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 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 Module 2: Customizing Default Team Folder Templates Editing Team Folder Home Pages 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 Team Project - Microsoft Outlook File Edit View Favorites Tools Actions Help New file://L:\testing\teamF Send/Receive Team Project - Team Folder Home Discussion Documentsadmin - Notepad Team Calendar File Edit Format Team Tasks Team Contacts Help Team Folder Home Page Sub SetButton Disp ‘############ Team Information Welcome Information Links Mission Statement Goals Policies Unread Summary Send new message to team Done ‘Set up the properties for the top nav bar Welcome Information ‘Each top nav button has four properties ‘1 style.display (can be “none” or “inline”) ‘2 innerHTML (The text that will appear on the face of the button ‘3 setAttribute “ShowPage”,”[MyHiddenPageID]” Where [MyHiddenPage FolderBtnHome.style.display = “inline” Top News 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” FolderBrn1.innerHTML = L_FolderBtnTextA_Text 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 Default.htm Project home page Admin.htm Administration home page Cal.htm Calendar home page Contacts.htm Contacts home page Discuss.htm Discussion home page Docs.htm Documents home page Tasks.htm Tasks home page Important 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 Module 2: Customizing Default Team Folder Templates Team Folder Localization 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 User-Interface Component Data block + Application Component Code block = Localized Product Product Team Folder Templates are designed for easy localization into other languages (Localization is the process of making a program appropriate for the countries 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: Data block Contains all of the localized UI string resources but contains no code All UI modification of the Team Folder Templates takes place in the data block code Code block Conversely, the code block contains only the application code that is run for all locales All language modification of the Team Folder Templates takes place in the code block code Module 2: Customizing Default Team Folder Templates 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 LOC Localizable Areas FNP Folder Name Properties PCV Page Characteristic Variables NBP Navigation Bar Properties VTP View Tab Properties DVT Default View Tab TBB Navigation Buttons VCT View Control Tabs 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: 'FolderBtn2 Properties FolderBtn2.style.display = "inline" FolderBtn2.innerHTML = L_folderButtonName2_Text FolderBtn2.setAttribute "folderPath",L_folderNameDiscussion_Text FolderBtn2.setAttribute "folderType",DiscussionType FolderBtn2.setAttribute "DefaultTab","DiscussionTab1" 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 L_folderButtonName2_Text L_folderButtonName3_Text L_folderButtonName4_Text L_folderButtonName5_Text L_folderButtonName7_Text L_buttonHelplbl_Text = = = = = = = "Home" "Discussion" "Documents" "Team Calendar" "Team Tasks" "Team Contacts" "Help" Module 2: Customizing Default Team Folder Templates Using DHTML to Modify the User Interface Slide Objective To present a view of a Team Folder Template home page Team Project - Team Folder Home Discussion Documents Team Calendar Team Folder 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 Team Tasks Team Contacts Team Information Welcome Information Welcome Information Links Mission Statement Top News Goals Policies Unread Summary Send new message to team Team Folder Templates home pages are designed so you can easily customize their UI elements 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 36 Module 2: Customizing Default Team Folder Templates Adding a View Tab Slide Objective Contacts - Team Folder To show a new View tab added to a View tab container Home Discussion Documents Team Calendar Team Tasks Team Contacts Team Contacts Lead-in New Contact Users often need to create additional views and have them show up in the View tab container Show Me Vendor Address List Customiz Coleman, Pat List of contacts Hampton, Doug List of contacts grouped by company New New View Tab View Tab Set Categories Nay, Lorraine List of contacts grouped by category Verboort, Kevin List of contacts grouped by city Editable contacts view My New View To add a new View tab to a View tab container, create the View tab by inserting HTML code into the container, and then set the View tab properties A View tab is actually a table row consisting of two cells within a table (the View tab container) The first cell displays an image when the View tab represents the active view in the Outlook view control The second cell contains the labeled button of the View tab Mention that each of these steps will be performed in the lab at the end of the module Perform the following steps to create the new View tab that you would like to display in the View tab container: In Outlook 2000, create a new view Open Visual InterDev Open the htm file to which you want to add the view Create the new View tab Set the View tab properties Add the View button text Save the file by using the original htm name Adding a New View Tab The easiest way to insert the HTML code is to copy the equivalent code for an existing tab The following example shows adding an additional view called Documents grouped by size to the Documents folder Module 2: Customizing Default Team Folder Templates 37 Creating a View Tab To create a View tab: In the HTML code of the page, search for the View tab container in which you want to add a View tab Select the code between and , including the tags themselves Copy the selected code Move the insertion point to where you want to add the View tab Paste the copied code Set the value of the tabindex attribute of the new tab and subsequent tabs to order them correctly This attribute specifies the order in which items on the page receive focus when the user presses the TAB key Change the value of the ID attribute of the first tag to match the tdArrow property of the View tab Change the value of the ID attribute of the second tag to a unique value This value identifies the tab when setting the tab's properties: Point out to students that in the code that is copied and modified, the id="tdViews2Sub4”, and tabindex="53" must be unique All that must be changed is the in tdViews2Sub4 and the in tabindex="53" Point out that these properties were copied and the innerHTML, view, and tdArrow properties were updated Setting the Display Properties for the View Tab You must set the View tab properties for the view to display These properties are located under the VTP section of code in the folder to which you are adding the view To set the properties for the View: DocumentsTab4.style.display = "inline" DocumentsTab4.innerHTML = L_DocumentsTab4Text_Text DocumentsTab4.setAttribute "view",L_DocsBySize_Text DocumentsTab4.setAttribute "tdArrow","tdViews2Sub4" To declare the new variables for the view, include the L_DocsBySize_Text property in the Dim statement in the Documents tab Specify the Outlook view to be used (this is set under the Dim statement in the Document Tabs section): L_DocsBySize_Text = "Documents Grouped by Size" Note The text between the quotation marks in the previous code sample must exactly match (including capital and lowercase letters) the name of the view as it is displayed in the Current View list within Outlook 2000 38 Module 2: Customizing Default Team Folder Templates Adding the View Button Text After you create the View tab and set the view properties, you can specify the view button text To set the button text, go to the FNP section of code in the folder to which you are adding the view Before you can set the View button name, you must declare the L_DocumentsTab4Text_Text variable that was used in the view properties: To declare the button text variable for the view, include the L_DocsBySize_Text in the Dim statement for the documents button text To set the view button text, on a new line under the ‘Document Button Texts comment, type L_DocumentsTab4Text_Text = "Documents Grouped by Size" Module 2: Customizing Default Team Folder Templates 39 Lab A: Modifying Default Team Folder Templates Slide Objective To introduce the lab Lead-in In this lab, you will modify the Team Project Template to customize the applications it creates Explain the lab objectives Objectives After completing this lab, you will be able to: Modify a navigation button to reflect a new folder name Update all htm files to reflect a new folder and button name Change the display name of a default folder view Add a new folder view Prerequisites Before working on this lab, you must have: Knowledge about the ways to customize the default Team Folder Templates An understanding of how to change the names of folders within a team folder application An understanding of how to customize navigation buttons on a Team Folder Template home page An understanding of how to customize the View tabs associated a Team Folder Template home page This lab is dependant upon the completion of: • Lab A, “Installing Team Folders,” in module of course 2018A, Creating and Customizing Team Folders 40 Module 2: Customizing Default Team Folder Templates Scenario You are the network administrator at Northwind Traders One of your responsibilities is to support team leaders within the organization by customizing default Team Folder Templates to fit the specific needs of their teams You are tasked with supporting the Computer Services team by modifying the default Team Project template This team requires that the Documents folder of their team folder applications have a different name: Library (The default name for this folder is Documents.) In addition, the team members need a different way to view data within the Documents folder You will build a new view that will help members view documents by subject Estimated time to complete this lab: 45 minutes Module 2: Customizing Default Team Folder Templates 41 Exercise Modifying a Navigation Button to Reflect a New Folder Name In this exercise, you will rename the Documents folder in the Outlook Folder list, open the Default.htm file in Visual InterDev, and change the name of the Documents folder located in the Default.htm directory to the Library folder To rename the Documents folder in the Outlook Folder List Start Outlook 2000 If the Preview pane is visible, close it To this, on the View menu, click Preview Pane In the Folder List, click to expand the Public Folders\All Public Folders\Team Projects\Computer_Services public folder Right-click the Documents folder, click Rename "Documents", type Library and then press ENTER To open the Default.htm file On the Taskbar, click Start, point to Programs, point to Microsoft Visual Studio 6.0, and then click Microsoft Visual InterDev 6.0 In the New Project dialog box, click Cancel On the File menu, click Open File In the Open File dialog box, in the Look in box, move to the drive:Inetpub\wwwroot\Computer_Services folder (where drive is the name of the drive where MOC files were installed), select default.htm, and then click Open To rename the Documents folder as Library in Default.htm In Visual InterDev, if they are open, close the Toolbox, Task List, Project Explorer, and Properties panes At the bottom of the page, click the Source tab Scroll to the top of the page and position your cursor at the top of the page On the Edit menu, click Find and Replace In the Find dialog box, in the Find box, type L_folderNameDocuments_Text and then click Find When the first instance of L_folderNameDocuments_Text is selected, to move to the next instance, press the F3 key to locate L_folderNameDocuments_Text = "Documents", and then close the Find dialog box To change the reference to the renamed folder, in the line that appears as L_folderNameDocuments_Text = "Documents", select "Documents" (including both quotation marks), and then type "Library" (including both quotation marks) On the Edit menu, click Find and Replace In the Find dialog box, in the Find box, type L_folderButtonName3_Text and then click Find 42 Module 2: Customizing Default Team Folder Templates 10 When the first instance of L_folderButtonName3_Text is selected, press the F3 key to locate L_folderButtonName3_Text = "Documents", and then close the Find dialog box 11 To change the navigation bar display to reflect the folder update, in the line that reads L_folderButtonName3_Text = "Documents", select "Documents" (including both quotation marks), and then type "Library" (including both quotation marks) 12 On the File menu, click Save default.htm 13 Switch to Outlook 2000 and then click the Refresh button 14 In the Folder List, verify that the Computer_Services folder is selected 15 Notice that the top navigation bar and the Outlook Folder List now display Library Note Notice that if you click Library on the top navigation bar, the name stays as Library, but if you select the Library folder from the Outlook Folder List, the Navigation bar displays Documents If you select any other team folder it displays Documents instead of Library Module 2: Customizing Default Team Folder Templates 43 Exercise Updating HTM Files to Reflect a New Folder and Button Name In this exercise, you will remove Default.htm files to use as backups, create a new Cal.htm file, create a new Contacts.htm file, create a new Discuss.htm file, create a new Docs.htm file, and create a new Tasks.htm file To remove default htm files to use as backups Start Windows Explorer Move to drive:\Moc\2018a\Labfiles\Lab02a\ and create a new folder named Backup Move to Inetpub\wwwroot\Computer_Services Hold down the CTRL key, select the Cal.htm, Contacts.htm, Discuss.htm, Docs.htm, and Tasks.htm files, and move the files to the Backup folder by using a drag-and-drop operation To create a new Cal.htm file in the Inetpub\Wwwroot directory To switch to Visual InterDev, on the taskbar, click Microsoft Development Environment On the File menu, click Save default.htm As In the Save File As dialog box, in the File Name box, type cal.htm and then click Save Insure that the cursor is positioned at the top of the page On the Edit menu, click Find and Replace In the Find dialog box, in the Find box, type IsParent and then click Find When the first instance of IsParent is selected, press the F3 key to locate IsParent = True, and then close the Find dialog box In the code IsParent = True, select True, and then type False Find FolderType = "", select "", and type CalendarType 10 On the File menu, click Save cal.htm To create a new Contacts.htm file in the Inetpub\Wwwroot directory On the File menu, click Save cal.htm As In the Save File As dialog box, in the File Name box, type contacts.htm and then click Save Select CalendarType, and then type ContactType On the File menu, click Save contacts.htm To create a new Discuss.htm file in the Inetpub\Wwwroot directory On the File menu, click Save contacts.htm As In the Save File As dialog box, in the File Name box, type discuss.htm and then click Save Select ContactType, and then type DiscussionType On the File menu, click Save discuss.htm 44 Module 2: Customizing Default Team Folder Templates To create a new Docs.htm file in the Inetpub\Wwwroot directory On the File menu, click Save discuss.htm As In the Save File As dialog box, in the File Name box, type docs.htm and then click Save Select DiscussionType, and then type DocumentsType On the File menu, click Save docs.htm To create a new Tasks.htm file in the Inetpub\Wwwroot directory On the File menu, click Save docs.htm As In the Save File As dialog box, in the File Name box, type tasks.htm and then click Save Select DocumentsType, and then type TaskType On the File menu, click Save tasks.htm Switch to Outlook 2000 For each of the Computer Services Team Folders in the Outlook Folder List, click the folder, click Refresh, and then verify that Library appears in the top navigation bar Note Notice that all of the folders reflect the Library update Module 2: Customizing Default Team Folder Templates 45 Exercise Changing the Display Name of a Default View In this exercise, you will rename an Outlook view and change the Docs.htm file to display the view name To rename an Outlook View In Outlook 2000, in the Folder List, click the Library folder Click the Refresh button On the View menu, point to Current View, and then click Define Views In the Define Views for 'Library' dialog box, in the Views for folder 'library' box, select TF Documents by Category, and then click Rename In the Rename View dialog box, select Category, and then type Subject Click OK Click Apply View To change the Docs.htm file to display the new view name Switch to Visual InterDev On the File menu, click Open File In the Open File dialog box, select docs.htm, and then click Open Click the Source tab, and then position your cursor at the top of the page On the Edit menu, click Find and Replace In the Find dialog box, in the Find box, type L_DocumentsTab3Text_Text and then click Find When the first instance of L_DocumentsTab3Text_Text is selected, press the F3 key to locate L_DocumentsTab3Text_Text = "Documents grouped by categories", and then close the Find dialog box To change the default view display under Show Me on the Library folder page to match what is in the Outlook 2000 Views menu, find the line that reads L_DocumentsTab3Text_Text = "Documents grouped by categories" Select categories, and then type subject 10 On the File menu, click Save docs.htm 11 Switch to Outlook 2000, and then click Refresh 12 Verify that under the Show Me on the Library folder page the view now reads: Documents grouped by subject 46 Module 2: Customizing Default Team Folder Templates Exercise Adding a New Folder View In this exercise, you will add documents to the Library folder, create a new Outlook view, add a new View tab, set the View tab properties, and add the View tab button text To add documents to the Library folder Switch to Windows Explorer Move to drive:\TFKit\Docs To make the Windows Explorer window smaller so you can see the Library folder (in the Outlook Folder List) while Windows Explorer is open, in the upper right corner of the Windows Explorer window (just to the right of the Close button), click the Restore Down button In Windows Explorer, select the Oltfacl.chm, Ovctl.chm, Tfdeploy.chm, and Tfovervw.chm files Move the selected files to the Library folder (in the Outlook Folder List) by using a drag-and-drop operation Exit Windows Explorer To create a new Outlook view Switch to Outlook 2000 In the Folder List, verify that the Library folder is selected On the View menu, point to Current View, and then click Define Views In the Define Views for “Library” dialog box, click New In the Create a New View dialog box, under Name of the new view, type Documents Grouped by Size Click OK In the View Summary box, click Fields In the Show Fields dialog box, in the Available Fields list, select Size, and then click Add Click the Move Up button until Size appears as the first field in the Show these fields in this order: box, and then click OK 10 In the View Summary dialog box, click OK 11 In the Define Views for “Library” dialog box, click Close To add a New View tab Switch to Visual InterDev Position the cursor at the top of the page On the Edit menu, click Find and Replace In the Find dialog box, in the Find box, type End Documents and then click Find Close the Find dialog box Module 2: Customizing Default Team Folder Templates 47 Copy the seven lines of code above the End Documents comment (starting with tag and ending with the tag) Insert a blank line between the tag and the End Documents comment On the new blank line, paste the code you just copied Edit the id="tdViews2Sub3" text to read id="tdViews2Sub4" 10 Edit the tabindex="52" text to read tabindex="53" 11 Edit the id="DocumentsTab3" text to read id="DocumentsTab4" 12 On the File menu, click Save docs.htm 13 Switch to Outlook 2000 and click the Refresh button 14 Notice the blank area that now appears under Documents grouped by Subject, under the Show Me section on the Library folder Warning If you select the blank View tab you will get a runtime error Do not debug To set the View tab properties Switch to Visual InterDev Position the cursor at the top of the page On the Edit menu, click Find and Replace In the Find dialog box, in the Find box, type 'Document Tabs and then click Find Close the Find dialog box Position your cursor on the line that begins with Dim To position your cursor at the end of the line that begins with Dim, press the END key Type , L_DocsBySize_Text Note There must be a comma and a space between the variables The code should read: L_DocsByCat_Text, L_DocsBySize_Text Position your cursor under L_DocsByCat_Text = "TF Documents by Category" and type L_DocsBySize_Text = "Documents Grouped by Size" 10 Press the ENTER key 11 Scroll down the page and select the section of code beginning with DocumentsTab3.style.display = "inline" and ending DocumentsTab3.setAttribute "tdArrow","tdViews2Sub3" 12 On the Edit menu, click Copy 13 Position your cursor below the DocumentTab3 properties, and press the ENTER key 14 On the Edit menu, click Paste 48 Module 2: Customizing Default Team Folder Templates 15 In the code you just pasted, modify the code to read as follows: DocumentsTab4.style.display = "inline" DocumentsTab4.innerHTML = L_DocumentsTab4Text_Text DocumentsTab4.setAttribute "view",L_DocsBySize_Text DocumentsTab4.setAttribute "tdArrow","tdViews2Sub4" 16 On the File menu, click Save docs.htm To add the View tab button text On the Edit menu, click Find and Replace In the Find dialog box, in the Find box, type 'Document Button Texts and then click Find Close the Find dialog box On the line above the selected text, position your cursor at the end of the Dim statement, and type , L_DocumentsTab4Text_Text Note There must be a comma and a space between variables The code should read L_DocumentsTab3Text_Text, L_DocumentsTab4Text_Text Position your cursor under L_DocumentsTab3Text_Text ="Documents grouped by Subject", and type L_DocumentsTab4Text_Text = "Documents Grouped by Size" Press the ENTER key On the File menu, click Save docs.htm Switch to Outlook 2000, and then click Refresh In the Show Me list, click Documents Grouped by Size 10 Close Outlook 2000 11 Close Visual InterDev Module 2: Customizing Default Team Folder Templates 49 Review Slide Objective To reinforce module objectives by reviewing key points Customizing Default Team Folder Templates Lead-in Specifying the Purpose of a Page The review questions cover some of the key concepts taught in the module Changing the Folder Name Customizing Navigation Buttons Customizing View Tabs What is code localization and why is it used? Code localization is the process of dividing code into two blocks: Data Block and Code Block Code localization is used so UI changes can be made without having to rewrite the application code List the four main elements that are edited when customizing team folder templates Folder Name Properties (FNP), Navigation Bar Properties (NBP), View Tab Properties (VTP), and Page Characteristic Variables (PVC) What is the purpose of the innerHTML property? It points to the variable that specifies the text that is displayed on a button or in a view What is the purpose of the folderType property? It points to the variable that specifies the type of folder to which a folder button points 50 Module 2: Customizing Default Team Folder Templates What is the purpose of the folderPath property? It points to the variable that specifies the path of the Outlook folder to which a button points What is the purpose of the Page Characteristic Variables (PCV)? They are used to specify the role of a home page in the team folder hierarchy ... Customize the View tabs associated with a Team Folder Template home page Module 2: Customizing Default Team Folder Templates Customizing Default Team Folder Templates Slide Objective To outline this... Manager: Robert Stewart Module 2: Customizing Default Team Folder Templates Instructor Notes: Customizing Default Team Folder Templates Presentation: 45 Minutes This module provides students... multiple pages throughout your team folder Module 2: Customizing Default Team Folder Templates Editing a Team Folder Template Cascading Style Sheet The css.css file for a Team Folder Template is published