All About SharePoint: May 2014

Saturday, May 31, 2014

SharePoint Branding Part 5

Adding Sign-In

Here is another snippet that you can add in your master page. Sign In link is automatically displayed on your page in the upper left corner. You can customize the look and feel and change its position to display it anywhere you like. The Sign In snippet is a security trimmed control. You can add a new Sign In snippet and remove the one that is part of the master page by default or you can customize the one that is already on the page. Below we will look at both options. To add a new snippet, repeat the steps explained previously to add a snippet to the master and choose Sign In snippet. Copy the HTML to clipboard and return to the master page (in editor) and paste the snippet where you want it displayed and then remove the default snippet from the page. For your convenience, I am listing the steps again below:

1. Go to Design Manager and select Edit Master Pages link on the left side.

2. Click the HTML master page (index365.html).

3. Click the Snippets link in the top right corner.

4. Click Design tab.

5. Click Sign In snippet in the ribbon.

6. Click Copy to Clipboard button to copy the snippet HTML.

7. Paste the snippet to the master page at your desired location.

8. Locate following code in the master page and remove it. This is the default Sign In link code.

Listing 12-14: Default Sign In Link

Now, the second option is to re-use the default Sign In link. All you can do with it is add some style and change its location otherwise it works perfectly fine. Depending on the design of your site, you may want to put it in an appropriate location. To add styling to the Sign In link, you have to add a style class to the CSS and embed the code shown in the above listing within a div with that style class.

9. Locate the code shown in the previous listing and add <div class=”signin_btn”> before it and </div> after it. Updated code looks like this:

<div class="signin_btn">

</div>

Listing 12-15: Sign In Link

10. Now cut the whole snippet (as shown in the listing above) by pressing Ctrl+X (or Cut command from the context menu)

11. Locate following line in the master page and paste the code (from the clipboard) immediately after it:

Listing 12-16: Location of Sign In link

After moving the Sign In snippet to new location, code looks like this:

<div class="signin_btn">

</div>

Listing 12-17: Sign In link new location

By default, Sign In link appears in the top left corner. We have moved it to the right corner just above the Search box and have add some style to it. Class signin_btn is in the main.css and looks like this:

.signin_btn{
   float:right;
   font-size:12px;
   text-transform:uppercase;
   color:#49176d;
   margin-right:10px !important;
   margin-top:5px !important;
   padding:0;
   margin:0

}

.signin_btn span a {

display: inline;

float: right;

line-height: 0 !important;

margin-bottom: -19px;

margin-left: 0 !important;

margin-right: 0 !important;

margin-top: 9px;

padding: 0 !important;

}

Listing 12-18: Sign In link styling

Publishing the site

Now, you are reading to publish the site. Publishing the site is not difficult but there are several small steps that must be completed before the site is published.

1. Go to Site Actions > Site Settings > Design Manager and click Publish and Apply Design link on the left side. In the first paragraph, second line, there is a link Go to the Master Page Gallery, click it.

2. Go to social folder. You will see four subfolders: css, fonts, images, js and five or six files. Go to each folder one by one and publish all the files within each folder. On the root folder (social), publish the master page (index365.html). I will show you how you can publish the master page. Follow the same procedure to publish all other files in all folders. Hover mouse over index365.html and click the down-arrow that appears to open

the menu, and select Publish a Major Version. Add some comments in the Comments box and click OK.

Final Steps

Final steps include setting up the navigation links (in header and footer), adding facebook and twitter links in the footer, setting up SEO, page titles, and so on.

1. From the mapped drive, open master page in an editor.

2. Change page names in the navigation (menu2 – see below).

Figure 12-16: Page names

3. Replace index.html with ../../../Pages/default.aspx, about-us.html with ../../../Pages/aboutus.aspx, services.html with ../../../Pages/services.aspx, resources.html with ../../../Pages/resources.aspx, contactus.html with ../../../Pages/contactus.aspx. Note that new pages are located in the Pages library and master page is located in the _catalogs/masterpage/social folder, therefore, you have to give correct path to access the pages.

4. Locate <div class="menu_footer"> and replace page names with new ones under this tag. Replace index.html with ../../../Pages/default.aspx, about-us.html with ../../../Pages/aboutus.aspx, services.html with ../../../Pages/services.aspx, resources.html with ../../../Pages/resources.aspx, contactus.html with ../../../Pages/contactus.aspx.

5. In the same footer tag, there are Twitter and LinkedIn icons, add URL to your accounts in the href (Replace # sign with the URL).

Figure 12-17: Social media links

6. Locate <div class="social_icons"> tag and add URL to your Twitter and LinkedIn account in the href (replace # with the URL).

Figure 12-18: Social Icons

7. Save your changes and re-publish the master page. All your links should be working now.

8. Open home page in browser. Click SITE tab and click Edit Title button in the ribbon. If you have not already set Title and Description, add them now in the Title and Description boxes and click Ok.

9. Click Change Logo button and provide path to the logo. You can upload logo from the computer or select it from the SharePoint site if you already have it up there.

10. Clic Edit Properties and select Edit SEO Properties.

Figure 12-19: SEO Properties

11. Title field should already be populated. Title comes from the page’s title tag. If you want to change it, you can change it on this page. This it the title that search engines use in their search results. To change Browser Title, enter a title in the Browser Title field. This is the title that appears in the title bar of the browser. Meta Description field contains the description of your page. Search engines display this description under your link in the search results. Make sure the description is concise and meaningful and contain some of your keywords. In the Keywords field, add keywords that are relevant to your home page. Keywords are comma-separated and you can add a maximum of 1024 characters in this field. Finally, you can choose to include this page in the sitemap and expose it to the search engines. If you do not wish to include this page in the sitemap, choose Exclude from sitemap and hide from Search Engines otherwise keep the first option selected. Click Ok to save the changes. Repeast the process for all other pages.

12. Go to Site Actions > Site Settings > Welcome Page. Click Browse button and locate your default page in the Pages library and click OK. With this step, you have set your site’s homepage. Users now don’t have to type complete URL in the browser, they just enter the domain name and home page automatically loads.

13. Final step is to make the website available to the world. In the top right corner, under the Suite Bar, there is a button called MAKE WEBSITE ONLINE. Click this button, enter comments and click OK. That’s it. Your website is now live. Wait for a few seconds for the settings to take effect. Logout and close browser. Open your website again in a new browser and you will see your site up and running. Do the final checks and if something has been left, login and fix it. Start promoting your site and generate traffic. SharePoint public site is a goldmine for small businesses as you get all useful features like document management, meetings and events scheduling, email management, contacts management, tasks management and so on with your public website that acts as an informational brochure and introduces your business to the world. It is an affordable solution for small businesses that do not want to spend extravagantly on the development of such a useful website that can actually play a role in the promotion and management of their business. SharePoint Online is also available for medium and large sized businesses. If you are an enterprise, buy an enterprise package. It is still cheaper than hosting a site inhouse because the infrastructure and hardware costs are quite high and then you also need resources to handle and maintain your site(s). With a hosted solution, you can handle the day to day tasks yourself or at most you need one administrator to keep the site in good health.

Part 1
Part 2
Part 3
Part 4

Thursday, May 29, 2014

The Garage Series for Office 365: Achieving the ‘impossible’ to extend SharePoint using the new app model

Some developers may say that full trust code is required to do things in SharePoint like branding OneDrive for Business sites, building people pickers or timer jobs. This week Jeremy Chapman and Richard diZerega return to the city known for making the impossible possible – Las Vegas – to see if there are ways to build out these common developer requests in SharePoint using the new app model.

Read More!!

Wednesday, May 28, 2014

SharePoint 2013 FBA Pack: Usable Forms Based Authentication for SharePoint

While it supports some basic Forms Based Authentication operations, SharePoint lacks many of the features necessary to properly use FBA. Projects such as the SharePoint 2013 FBA Pack by Chris Coulson fill in the gaps.

Read More >>

Friday, May 23, 2014

Accor—Building business agility one employee at a time with Office 365

Today’s post was written by Marc Champsaur, vice president of Internet, Intranet, Franchise and Mobility for Accor.

Since I joined Accor in 2000, the business has grown into one of the world’s most widespread and diverse hotel management companies, with globally recognized brands such as Sofitel, Novotel, and Ibis. To remain ahead of competitors, Accor needs to be agile: to quickly acquire new properties, develop new services, and evolve our brands to meet customer expectations and attract more travelers. To continue to grow, we need to expand our franchise business and add to our unique range of hotels.

Wednesday, May 21, 2014

The US Virgin Islands: Using Office 365 to achieve efficient, citizen-centric government

Today’s post was written by Reuben D. Molloy, Director of the Bureau of Information Technology and Chief Information Technology Officer for the Government of the US Virgin Islands.

Serving the people of the US Virgin Islands (USVI) is behind everything I do as the Chief Information Officer of the Government of the US Virgin Islands. It’s a big challenge. There are significant obstacles to providing efficient government services to constituents across our four main islands (St. Croix, St. John, St. Thomas, and Water Island) and the other islands that make up our territory. When I joined the USVI, the Governor had issued a mandate to improve services throughout its 23 agencies. We needed to reduce bureaucracy and red tape.

Tuesday, May 20, 2014

SharePoint Branding Part 3

1. Save the master page and preview it in browser to test your changes. Now, we will create the first page of the site, index page.

2. Go to Site Actions > Site Contents and select Pages library.

3. From the FILES tab at the top, select New Document. Enter Title and Description, for example, for home page, enter Home in the Title box and enter Home Page in Description box. Enter default in the URL Name. Select Full page in the Page Layout section and click Create button.

4. Click on default page you just created to open it. Click EDIT link in the top right corner. In the middle of the page, you will see Page Content area. This is the place where you will copy the content stored in the contentarea.txt file (or from the clipboard if you did not store it in the text file). Click Edit Source button in the ribbon. Copy the content in the Page Content area. Preview the page. You will notice that images are missing. This is because the image paths are incorrect in the content you pasted. Click the Edit Source button in the ribbon. Notice the image path, it points to the images folder inside Pages library. This is not where you have your images. You can either move your images to the location used in the content or you can change the path in the content to where you have stored your files. Let’s use the second option. Replace /Pages/images with /_catalogs/masterpage/social/images. Save the changes and preview the page. It looks good now, isn’t it?

5. Open the master page again in Edit mode and locate <div data-name="ContentPlaceHolderMain">. Add style=”text-align: center;” in the tag to center-align the content area to match our template. Updated tag will look like this:

<div data-name="ContentPlaceHolderMain" style="text-align: center;">

</div>

6. Now, you will create the remaining pages for the site. Refer to the instructions above to create new pages. Create a new page and name it Aboutus. Edit it and paste following code in the Page Content area (Use Edit Source button in the ribbon to switch to code view):

</div>

<h1>Lorem Ipsum</h1>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

</div>

Listing 12-2: About Us page content

Save and Publish the page.

Figure 12-8: About Us

Create Services page (services.aspx) and paste following code in the Page Content area:

</div>

<h1>Lorem Ipsum</h1>

</div>

Listing 12-3: Content for Services page

Create page called Resources (resources.aspx) and paste following code in the Page Content area:

</div>

<h1>Lorem Ipsum</h1>

</div>

Listing 12-4: Content for Resources page

Create page called ContactUs (contactus.aspx) and paste following code in the Page Content area:

</div>

<h1>Lorem Ipsum</h1>

</div>

Listing 12-5: Content for ContactUs page

That is it! We have created all the pages.

Part 1
Part 2
Part 4

Part 5

A Practical Guide to SharePoint 2013

Saturday, May 31, 2014

SharePoint Branding Part 5

Adding Sign-In

Publishing the site

Final Steps

Thursday, May 29, 2014

The Garage Series for Office 365: Achieving the ‘impossible’ to extend SharePoint using the new app model

Wednesday, May 28, 2014

SharePoint 2013 FBA Pack: Usable Forms Based Authentication for SharePoint

Friday, May 23, 2014

Accor—Building business agility one employee at a time with Office 365

Wednesday, May 21, 2014

The US Virgin Islands: Using Office 365 to achieve efficient, citizen-centric government

Tuesday, May 20, 2014

SharePoint Branding Part 3