1 agenda overview review roles lists libraries columns

1

Agenda

• Overview• Review• Roles• Lists• Libraries• Columns

• Views• Pages• Web Parts• Navigation• Office• Wrap-Up

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 thetext displayedin 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


• 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

Eventsfrom 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


15

Edit the library page – you’ll see a web part


16

Edit the web part – it’s a List View web part


17

Here’s a list on its own page in a 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


• 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


25

Edit the page – you’ll see a 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 tabbedinterface on Inside NCDOT with a Moreoption

• Use if there are too many tabs to fit on one line

29


• 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 andedit the webpart properties

5. Save, checkin 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

Property Description

Title Text that appears in the title bar of the web part

Height Height of the web part

Width Width of the web part

Chrome State

Normal – The entire web part appears when the page loadsMinimized – Only the title bar appears when the page loads

Chrome Type

None – Neither the title bar nor border are displayedTitle and Border – Title bar and border are displayed (default)Title Only – Title bar is displayedBorder Only – Border is displayed

Common Properties: Layout

37


Hidden Checked – 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

Direction None – Direction of the text in the web part is not specifiedRight to Left – For right-to-left languages such as ArabicLeft to Right - For left-to-right languages such as English

Zone Zone where the web part is located. Change the zone to move a web part to that zone.

Zone Index Position of the web part in a zone. Change the zone index to move the web part within the zone.

Common Properties: Advanced

38


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 Mode Do not allow – No data can be exportedNon-sensitive data only – Non-sensitive data can be exportedExport all – All data can be exported(No relationship to NCDOT Data Security Classification)


39


Title URL Destination URL if you want the web part title to be a link

Description Tool Tip that appears when you hover over the web part title or icon

Help URL Address of the web part’s help file; adds a Help icon and link to the Web Part Menu

Help Mode Modal – 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


40


Catalog Icon Image URL Location of the icon (16 by 16 pixel image) for the web part icon in the Web Part Gallery

Title Icon Image URL Location of the icon (16 by 16 pixel image) for the title bar

Import Error Message Text to display if importing the web part fails

Target Audiences Select a target audience if this feature is enabled

Delete or Close a Web Part

To delete a web part:


2. Click X Delete in the Web Part Menu and confirm the deletion.

To close a web part:


4. 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 library44

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 column47

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