1 Agenda Overview Review Roles Lists Libraries Columns

What are Web Parts? Web parts are reusable “containers” that interact with lists, libraries and web pages They display content They also add functionality to the web page 2

Interaction: Web Parts, Lists, Libraries, Pages 3 Lists and libraries contain content A page contains web parts Web parts link the page to the list or library to display content or add functionality Let’s look at a detailed example – it’s important that you understand this

Let’s Learn How to… Understand the interaction among web parts, lists and pages 4

Demo of List, Web Part and Page 5

Announcement List Content Web Part 6 When you add an announcement to an announcements list, you’ll see it, of course, in that list But, the announcement can appear on other pages, such as the home page. How? There’s a web part on the home page that links to the announcements list and displays its content on the home page

Announcement List 7 This is the text in the list

Announcement on Page 8 This is the text displayed in a web part on the page

Web Part on Page 9 This is the page in edit mode – notice the web part on the page

Web Parts Display Content List View – Display list items and library files Image Viewer – Display images 10

Let’s Learn How to… Understand the List View web part Understand the Image Viewer web part 11

Demo of Content Web Parts 12

Examples of Web Parts 13 News from an Announcements list Events from a Calendar Documents from a Documents library

Example 1: List View Web Part 14 Every list or library has an associated List View web part that is automatically created

Example 1: List View Web Part 15 Edit the library page – you’ll see a web part

Example 1: List View Web Part 16 Edit the web part – it’s a List View web part

Example 2: List View Web Part 17 Here’s a list on its own page in a List View web part

Example 2: List View Web Part 18 And, here’s the list on the home page, shown in another List View web part

Image Viewer Web Part Images are stored in an Asset library Images are displayed on pages using the Image Viewer web part 19

Web Parts Add Functionality Content Query – Display query results for lists, libraries and sites that reside in the same site collection; display results on Connect NCDOT in a specific style Script Editor – Insert HTML, CSS or scripts in a page 20

Web Parts Add Functionality con’t Simple Tabs – Create tabs on Inside NCDOT Simple Tabs More – Create tabs on Inside NCDOT with a More option; use if there are too many tabs to fit well on one line 21

Let’s Learn How to… Understand the Content Query web part Understand the Script Editor web part Understand the Simple Tabs web part Understand the Simple Tabs – More web part 22

Demo of Functional Web Parts 23

Content Query Web Part 24 Display results in a specific style Display query results for lists, libraries and sites that reside in the same site collection

Content Query Web Part 25 Edit the page – you’ll see a web part

Content Query Web Part 26 Edit the web part – it’s a Content Query

Script Editor Web Part Insert HTML, CSS or scripts in a page Useful for embedding YouTube videos, customizing HTML, and overriding default styles 27

Simple Tabs Web Part Create a tabbed interface on Inside NCDOT 28

Simple Tabs – More Web Part Create a tabbed interface on Inside NCDOT with a More option Use if there are too many tabs to fit on one line 29

Let’s Learn How to… Add and configure commonly-used web parts Close and delete a web part Troubleshoot web parts by opening a web page in maintenance view 30

Demo of Functional Web Parts 31

General Process: Add/Edit a Web Part 1.Open the page for editing 2.To insert a web part or app, click Add a Web Part in the web part zone 3.Select web part or app from the web part gallery and add it 32

General Process: Add/Edit a Web Part 4.Use the Edit Web Part command to open the tool pane and edit the web part properties 5.Save, check in and publish the page 33

What’s an App? Web parts and apps are comparable Both are available in the web part gallery Both are added to pages in the same way Both have custom properties For the near future, it’s easiest to think of apps as lists or libraries 34

Common Properties of Web Parts All web parts have properties that can be edited Some are unique to each web part These are common to all web parts Appearance Layout Advanced 35

Common Properties: Appearance 36 PropertyDescription TitleText that appears in the title bar of the web part HeightHeight of the web part WidthWidth of the web part Chrome State Normal – The entire web part appears when the page loads Minimized – Only the title bar appears when the page loads Chrome Type None – Neither the title bar nor border are displayed Title and Border – Title bar and border are displayed (default) Title Only – Title bar is displayed Border Only – Border is displayed

Common Properties: Layout 37 PropertyDescription HiddenChecked – Web part is hidden when the page loads. Hide a web part if it performs a function, but doesn’t need to be seen. Unchecked – Web part is visible when the page loads DirectionNone – Direction of the text in the web part is not specified Right to Left – For right-to-left languages such as Arabic Left to Right - For left-to-right languages such as English ZoneZone where the web part is located. Change the zone to move a web part to that zone. Zone IndexPosition of the web part in a zone. Change the zone index to move the web part within the zone.

Common Properties: Advanced 38 PropertyDescription Allow Minimize Close Hide Zone Change Connections Editing in Personal View Check to Include Minimize on the Web Part Menu Include Close on the Web Part Menu Include Hidden as a Layout option Enable Zone as a Layout option Enable Connections in the Web Part Menu Make web part editable in a personal view; grayed out if disallowed elsewhere Export ModeDo not allow – No data can be exported Non-sensitive data only – Non-sensitive data can be exported Export all – All data can be exported (No relationship to NCDOT Data Security Classification)

Common Properties: Advanced 39 PropertyDescription Title URLDestination URL if you want the web part title to be a link DescriptionTool Tip that appears when you hover over the web part title or icon Help URLAddress of the web part’s help file; adds a Help icon and link to the Web Part Menu Help ModeModal – Help appears in a separate browser window; user must close the window to continue. Modeless – Help appears in a separate browser window; user does not have to close the window to continue (default) Navigate – Help appears in the current browser window

Common Properties: Advanced 40 PropertyDescription Catalog Icon Image URLLocation of the icon (16 by 16 pixel image) for the web part icon in the Web Part Gallery Title Icon Image URLLocation of the icon (16 by 16 pixel image) for the title bar Import Error MessageText to display if importing the web part fails Target AudiencesSelect a target audience if this feature is enabled

Delete or Close a Web Part To delete a web part: 1.Open the page for editing 2.Click X Delete in the Web Part Menu and confirm the deletion. To close a web part: 1.Open the page for editing 2.Click Close in the Web Part Menu. 41

What’s the Difference? Delete Removes the web part from the page Removes web part configuration Does not remove the web part from the web part gallery Close Places the web part in the Closed Parts category of the web part gallery Hides the web part so it is not visible on a page Retains web part configuration Keeps the web part available for use on the page 42

Plan Your Web Parts A web part does not have versions! Changes to a web part overwrite previous content and settings Store content in lists and libraries with versioning, rather than in web parts 43

Plan Your Web Parts If you add a List View web part, you can use an existing view in the web part Changes made the view in the list or library later do not update the view in the web part If you Edit the current view within the List View web part, that work is lost if you delete the web part Changes made to a view within a web part do not update the view in the list or library 44

Plan Your Web Parts Decide which is better in your situation If you think the view is useful for many users, create it in the list or library If you think the view is only useful within the web part, edit the view in the web part 45

Plan Your Web Parts Change the Toolbar Type to No Toolbar if you want to remove the options to add or edit items or files 46

Plan Your Web Parts To sort a list or library in some order other than numeric or alphabetic (such as geographic) 1.See if there is a column for Order. 2.If not, add a column named Order and define the type of information as number 3.In the Order column, give a number (1, 2, 3) to each item to define its display order 4.In the web part, sort by the Order column 47

When Do Changes Go Live? Inside Immediately Connect team/project sites Immediately Unauthenticated (public) area of Connect Changes are made on a staging server and are copied to a production server at :42 after the hour There may be review or approval processes in your area 48

Exercise 6: Web Parts 1.Go to the Designer Class home page 2.Click Exercises for the links you’ll need 49