1 Agenda Overview Review Roles Lists Libraries Columns.
-
Upload
bertram-cameron -
Category
Documents
-
view
212 -
download
1
Transcript of 1 Agenda Overview Review Roles Lists Libraries Columns.
![Page 1: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/1.jpg)
1
Agenda
• Overview• Review• Roles• Lists• Libraries• Columns
• Views• Pages• Web Parts• Navigation• Office• Wrap-Up
![Page 2: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/2.jpg)
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
![Page 3: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/3.jpg)
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
![Page 4: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/4.jpg)
Let’s Learn How to…
Understand the interaction among web parts, lists and pages
4
![Page 5: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/5.jpg)
Demo of List, Web Part and Page
5
![Page 6: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/6.jpg)
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
![Page 7: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/7.jpg)
Announcement List
7
This is the text in the list
![Page 8: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/8.jpg)
Announcement on Page
8
This is thetext displayedin a web part on the page
![Page 9: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/9.jpg)
Web Part on Page
9
This is the page in edit mode – notice the web part on the page
![Page 10: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/10.jpg)
Web Parts Display Content
• List View – Display list items and library files
• Image Viewer – Display images
10
![Page 11: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/11.jpg)
Let’s Learn How to…
• Understand the List View web part• Understand the Image Viewer web part
11
![Page 12: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/12.jpg)
Demo of Content Web Parts
12
![Page 13: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/13.jpg)
Examples of Web Parts
13
News from an Announcements list
Eventsfrom a Calendar
Documents from a Documents library
![Page 14: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/14.jpg)
Example 1: List View Web Part
14
Every list or library has an associated List View web part that is automatically created
![Page 15: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/15.jpg)
Example 1: List View Web Part
15
Edit the library page – you’ll see a web part
![Page 16: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/16.jpg)
Example 1: List View Web Part
16
Edit the web part – it’s a List View web part
![Page 17: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/17.jpg)
Example 2: List View Web Part
17
Here’s a list on its own page in a List View web part
![Page 18: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/18.jpg)
Example 2: List View Web Part
18
And, here’s the list on the home page, shown in another List View web part
![Page 19: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/19.jpg)
Image Viewer Web Part
• Images are stored in an Asset library• Images are displayed on pages using the
Image Viewer web part
19
![Page 20: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/20.jpg)
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
![Page 21: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/21.jpg)
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
![Page 22: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/22.jpg)
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
![Page 23: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/23.jpg)
Demo of Functional Web Parts
23
![Page 24: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/24.jpg)
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
![Page 25: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/25.jpg)
Content Query Web Part
25
Edit the page – you’ll see a web part
![Page 26: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/26.jpg)
Content Query Web Part
26
Edit the web part – it’s a Content Query
![Page 27: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/27.jpg)
Script Editor Web Part
• Insert HTML, CSS or scripts in a page• Useful for embedding YouTube videos,
customizing HTML, and overriding default styles
27
![Page 28: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/28.jpg)
Simple Tabs Web Part
Create a tabbed interface on Inside NCDOT
28
![Page 29: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/29.jpg)
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
![Page 30: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/30.jpg)
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
![Page 31: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/31.jpg)
Demo of Functional Web Parts
31
![Page 32: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/32.jpg)
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
![Page 33: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/33.jpg)
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
![Page 34: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/34.jpg)
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
![Page 35: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/35.jpg)
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
![Page 36: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/36.jpg)
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
![Page 37: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/37.jpg)
Common Properties: Layout
37
Property Description
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.
![Page 38: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/38.jpg)
Common Properties: Advanced
38
Property Description
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)
![Page 39: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/39.jpg)
Common Properties: Advanced
39
Property Description
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
![Page 40: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/40.jpg)
Common Properties: Advanced
40
Property Description
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
![Page 41: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/41.jpg)
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:
3. Open the page for editing
4. Click Close in the Web Part Menu.
41
![Page 42: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/42.jpg)
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
![Page 43: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/43.jpg)
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
![Page 44: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/44.jpg)
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
![Page 45: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/45.jpg)
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
![Page 46: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/46.jpg)
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
![Page 47: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/47.jpg)
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
![Page 48: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/48.jpg)
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
![Page 49: 1 Agenda Overview Review Roles Lists Libraries Columns.](https://reader038.fdocuments.in/reader038/viewer/2022110400/56649daa5503460f94a98a11/html5/thumbnails/49.jpg)
Exercise 6: Web Parts
1. Go to the Designer Class home page
2. Click Exercises for the links you’ll need
49