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



• Branding

• Master page

• Page Layouts


• SPServices,


• REST API





4

Agenda

Implementation With SharePoint Designer Tool

5

Implementation With SharePoint Designer Tool

6



• Branding

• Master page

• Page Layouts


• SPServices,


• REST API





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



• Branding

• Master page

• Page Layouts


• SPServices


• REST API





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>


16


▶ Tool Query Starmit, Query Helper

17


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


23

Advantages

Flexibility

Easy marketing

Google Recommended

Cost Effective

Just One URL

Disadvantages

A long loading time

Technical

User Experience


▶ 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


25

▶ Media Queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device

orientation


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) { ... }


27


▶ 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


29


▶ For edit the CSS file, open SharePoint Designer > All files > Style Library >

AOTStyle > css

30



• Branding

• Master page

• Page Layouts


• SPServices


• REST API





31

Agenda

▶ Original VS Custom display template

Customize search result with display template

32


33


34


35



• Branding

• Master page

• Page Layouts


• SPServices


• REST API





36

Agenda

▶ Out of the box develop technique

How to apply Ajax for runat server

37


38


39



• Branding

• Master page

• Page Layouts


• SPServices


• REST API





40

Agenda

Q & A

Thank You

41