Interactive Intranet Portal for Effective Management in Tertiary Institution
AOT Intranet Web Portal
Transcript of AOT Intranet Web Portal
Development Training
AOT Intranet Web Portal
For Developer
4th May, 2017
• Overview Intranet Web Portal Project Development
• Implementation With SharePoint Designer Tool
• Branding
• Master page
• Page Layouts
• Programming for Intranet Web Portal
• SPServices,
• JQuery for SharePoint
• REST API
• CSS & Responsive
• Customize search result with display template
• Server side (Ajax)
• Question & Answer
2
Agenda
Overview Intranet Web Portal Project Development
3
Portal
e-Services
e-Meeting
KM hub Team Site AOT Drive AOT Info
e-Survey
Personal site
CoPs
• Overview Intranet Web Portal Project Development
• Implementation With SharePoint Designer Tool
• Branding
• Master page
• Page Layouts
• Programming for Intranet Web Portal
• SPServices,
• JQuery for SharePoint
• REST API
• CSS & Responsive
• Customize search result with display template
• Server side (Ajax)
• Question & Answer
4
Agenda
Implementation With SharePoint Designer Tool
5
Implementation With SharePoint Designer Tool
6
• Overview Intranet Web Portal Project Development
• Implementation With SharePoint Designer Tool
• Branding
• Master page
• Page Layouts
• Programming for Intranet Web Portal
• SPServices,
• JQuery for SharePoint
• REST API
• CSS & Responsive
• Customize search result with display template
• Server side (Ajax)
• Question & Answer
7
Agenda
Branding
8
Master Page
Page Layout
Branding
9
Master Page of system page
SharePoint lists
Subsites
Branding
10
▶ For edit the master page, open SharePoint Designer > Master Pages
Branding
11
▶ For edit the Page Layouts, open SharePoint Designer > Page Layouts
• Overview Intranet Web Portal Project Development
• Implementation With SharePoint Designer Tool
• Branding
• Master page
• Page Layouts
• Programming for Intranet Web Portal
• SPServices
• JQuery for SharePoint
• REST API
• CSS & Responsive
• Customize search result with display template
• Server side (Ajax)
• Question & Answer
12
Agenda
Programming for Intranet Web Portal
13
CSS
SPServices
JQuery
Programming for Intranet Web Portal SPServices
14
URL of SharePoint list
$().SPServices({
operation: "GetListItems",
async: false,
webURL: “http://portal”,
listName: "HotNewsApproved",
CAMLQuery: “”,
CAMLRowLimit: 5,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var title = ($(this).attr("ows_Title"));
});
}
});
Name of SharePoint list
Condition for query item
Get attribute of item such as Id, title and any fields
of item
▶ CAML Query
15
<Query><Where>
<Eq><FieldRef Name='Disabled'/><Value Type='Boolean'>0</Value>
</Eq></Where>
<OrderBy><FieldRef Name='Order'/><FieldRef Name='Modified' Ascending='False' /></OrderBy>
</Query>
Programming for Intranet Web Portal SPServices
16
Programming for Intranet Web Portal SPServices
▶ Tool Query Starmit, Query Helper
17
Programming for Intranet Web Portal SPServices
Programming for Intranet Web Portal JQuery for SharePoint
$('ul.home-slider').append('<li><img src="/Announcement/PublishingImages/Banner/1.jpg" /></li>'
+'<li><img src="/Announcement/PublishingImages/Banner/2.jpg" /></li>'
+'<li><img src="/Announcement/PublishingImages/Banner/3.jpg" /></li>'
+'<li><img src="/Announcement/PublishingImages/Banner/4.jpg" /></li>');
18
$(‘.home-slider’).bxSlider({mode : 'fade',controls : true,auto : true,pause : 5000,//adaptiveHeight: true,speed : 1000
});
Slide Banner
Append tag html
Programming for Intranet Web Portal REST API
19
http://server/site/_api/web/lists('guid')/items?$select=Title,Products/Name&$expand=Products/Name
Programming for Intranet Web Portal REST API
20
Programming for Intranet Web Portal
▶ For edit any SPServices and JQuery code, open SharePoint Designer > All files >
SiteCollectionDocuments > js > atosscript
21
▶ Responsive Web Design is the approach that suggests that design and development should
respond to the user’s behavior and environment based on screen size, platform and orientation.
Programming for Intranet Web PortalCSS & Responsive
22
Programming for Intranet Web PortalCSS & Responsive
23
Advantages
Flexibility
Easy marketing
Google Recommended
Cost Effective
Just One URL
Disadvantages
A long loading time
Technical
User Experience
Programming for Intranet Web PortalCSS & Responsive
▶ Mobile First is the idea of designing the smartphone experience first and then working
upwards to tablets, desktops, and possibly beyond.
24
▶ Flexible Grid
– Use percentage instead of pixel
Programming for Intranet Web PortalCSS & Responsive
25
▶ Media Queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device
orientation
Programming for Intranet Web PortalCSS & Responsive
26
▶ Popular Media Queries
Large display – 1200px and up/* Large desktop */
@media (min-width: 1200px) { ... }
Landscape tablet and desktop such as iPad, Galaxy Tab
/* Landscape tablet and desktop */
@media (min-width: 980px) and (max-width: 1199px) { ... }
Phone to Tablets – 767px and down such as iPhone 5
/* Landscape phone to portrait tablet */@media (max-width: 767px) { ... }
Phones – 480px and down such as iPhone 3GS/* Landscape phones and down */
@media (max-width: 480px) { ... }
Programming for Intranet Web PortalCSS & Responsive
27
Programming for Intranet Web PortalCSS & Responsive
▶ The meta viewport tag gives the browser instructions on how to adjust the dimensions
and scaling of the page to the width of the device.
28
Programming for Intranet Web PortalCSS & Responsive
29
Programming for Intranet Web PortalCSS & Responsive
▶ For edit the CSS file, open SharePoint Designer > All files > Style Library >
AOTStyle > css
30
• Overview Intranet Web Portal Project Development
• Implementation With SharePoint Designer Tool
• Branding
• Master page
• Page Layouts
• Programming for Intranet Web Portal
• SPServices
• JQuery for SharePoint
• REST API
• CSS & Responsive
• Customize search result with display template
• Server side (Ajax)
• Question & Answer
31
Agenda
▶ Original VS Custom display template
Customize search result with display template
32
Customize search result with display template
33
Customize search result with display template
34
Customize search result with display template
35
• Overview Intranet Web Portal Project Development
• Implementation With SharePoint Designer Tool
• Branding
• Master page
• Page Layouts
• Programming for Intranet Web Portal
• SPServices
• JQuery for SharePoint
• REST API
• CSS & Responsive
• Customize search result with display template
• Server side (Ajax)
• Question & Answer
36
Agenda
▶ Out of the box develop technique
How to apply Ajax for runat server
37
How to apply Ajax for runat server
38
How to apply Ajax for runat server
39
• Overview Intranet Web Portal Project Development
• Implementation With SharePoint Designer Tool
• Branding
• Master page
• Page Layouts
• Programming for Intranet Web Portal
• SPServices
• JQuery for SharePoint
• REST API
• CSS & Responsive
• Customize search result with display template
• Server side (Ajax)
• Question & Answer
40
Agenda
Q & A
Thank You
41