Thursday, 14 May 2015

create a news/Announcement Webpart for your Intranet home page in SharePoint 2013

Follow the below steps to create a news / Announcement web part :


Step 1: First we need to create picture library using Picture Library template and upload some picture into the picture library.
Fig: Picture gallery after uploading picture


Step 2: Create announcement list using Announcement template and also create three columns one is Picture, Date and URL like below image.
Fig: Announcement list settings
Fig: Picture column details
I have used Date column as a calculated type so we can change the date format.
Fig: Date column details
I have used URL column as a single line of text so user can enter the URL.
Fig: URL column details

Step 3: Add Item into the announcement list which we have created earlier.
Fig: Add new Item
Fig: Announcement list after adding item
Step 3: Now open your SharePoint site into SharePoint designer 2013.
Step 4: Go to Style Library  XSL Style Sheet 
Step 5: First we copy our existing ItemStyle.xsl file as a backup then we right click on ItemStyle.xsl and click check out then again right click on same file and click Edit File in Advanced Mode.
Step 6: Add the below code before </xsl:stylesheet> close tag.
<xsl:template name="HMGAnnouncement" match="Row[@Style='HMGAnnouncement']" mode="itemstyle">
 <div>
 <div class="datecontent"><xsl:value-of select="@Date" disable-output-escaping="yes"/></div>
 <div class="announcementcell">
     <img class="announcementimage">     
        <xsl:choose>
            <xsl:when test="contains(@Picture,',')">
               <xsl:attribute name="src"><xsl:value-of select="substring-before(@Picture,',')" disable-output-escaping="yes"></xsl:value-of></xsl:attribute>
            </xsl:when>     
            <xsl:otherwise>
               <xsl:attribute name="src"><xsl:value-of select="@Picture" disable-output-escaping="yes"></xsl:value-of></xsl:attribute>
            </xsl:otherwise>
       </xsl:choose>
     </img>
 </div> 
 <div class="announcementtitle">
       <div class="announcementdiv">
         <p class="announcementbold">
         <a>
         <xsl:attribute name="href">
/sites/dev/myh5/Lists/HMGAnnouncements/DispForm.aspx?ID=
    <xsl:value-of select="@ID">
    </xsl:value-of>
   </xsl:attribute>
         <xsl:value-of select="@Title" disable-output-escaping="yes"/>  
         </a>      
         </p>
         <p class="bodycontent"><xsl:value-of select="substring(@Body,0,123)" disable-output-escaping="yes"/>...</p>  
<div>    
     <a href="{@URL}" target="_blank"><p class="readmorelink">Read More</p></a>
</div>
       </div>
       <div class="newsline"></div>
 </div>
 </div>
</xsl:template>
Note:  Replace the above URL with your list URL
**Note: When you modified itemStyle.xsl each and every time you need to publish. Without publishing the file changing will not reflect.
Fig: ItemStyle.xsl files in edit mode in SharePoint Designer 2013
Step 7: After added the above code into your ItemStyle.xsl file, Save your changes and closed your ItemStyle.xsl file. Then Right click on ItemStyle.xsl file and click Check In and then click Publish as a Major version. Make sure without Check In and publishing ItemStyle.xsl file your changes will not reflect.
Step 8: Go to your site, open your page where you want to add news/announcement section. Then Edit your page, click Add new web part and add Content Query Web Part under Content Rollup Category.
Fig: Add Content Query web part into page
Step 9: Click Edit Web Part properties for content query web part. 
Step 10: In Query Section select “Select Items from this following list” then click “Browse” button and select HMGAnnouncement list which we have created earlier.
In Presentation Section we need to enter Item limit (How many items we need to display) then in Item Style we need to select HMGAnnouncement (Which we have created earlier in ItemStyle.xsl file). Then we need to enter Field to display (Column name in announcement list) and then click ok.
All fields (Title, Body, Date, Picture and URL) are displayed into your page from HMGAnnouncement list.
All content displayed in your page but it’s not display on a proper format. So you need to write some CSS to display on a proper format.
Below are the CSS which I have written as per my display requirement. Just mention for your reference.
<style>
/*Start Announcement news Section*//*Written by Mohammad Yusuf Hussain*/
.announcementimage{
width:65px;
height:65px;
}
.announcementtitle{
width:175px;
float:right;
padding-left:10px;
padding-bottom:12px;
}
.announcementbold{
font-family:Arial;
font-weight:bold;
color:#493c36;
font-size:14px;
margin-bottom:-10px;
}
.announcementbold a{
font-family:Arial;
font-weight:bold;
color:#493c36;
font-size:14px;
margin-bottom:-10px;
text-decoration:none;
}
.announcementbold a:visited{
font-family:Arial;
font-weight:bold;
color:#493c36;
font-size:14px;
margin-bottom:-10px;
text-decoration:none;
}
.announcementbold a:hover{
font-family:Arial;
font-weight:bold;
color:#493c36;
font-size:14px;
margin-bottom:-10px;
text-decoration:none;
}
.announcementbold a:link{
font-family:Arial;
font-weight:bold;
color:#493c36;
font-size:14px;
margin-bottom:-10px;
text-decoration:none;
}
.readmorelink{
margin-top:-10px;
margin-left:100px;
color:#585858;
font-size:14px;
text-decoration:underline;
}
.newsline{
background-color: #e5e5e5;
/*background-color:red;*/
position: absolute; 
height: 2px; 
width: 260px; 
margin-left: -84px;
margin-top: 0px;
}

.announcementcell{
width:65px;
float:left;
margin-top:5px; 
padding-bottom:28px;
}
.announcementdiv{
margin-top:-10px;
}
#WebPartTitleWPQ2 .ms-webpart-titleText{
text-align:right !important;
font-size:1.5em;
font-family:Arial;
color:#493c36;
font-weight:bold;
}
#WebPartTitleWPQ2 .ms-webpart-titleText span{
text-decoration:underline;
}
.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a{
font-family:Arial !important;
}
/*End Announcement News Section*/
</style>
**Note: In CSS I have used webpart ID (WebPartTitleWPQ2) so you need to replace this ID with your webpart ID.
 Upload this CSS in your site Assets library or any library where you want and give the reference into your page where you are creating a News/Announcement using “Content Editor Web Part”.

Result:







Sunday, 12 May 2013

How to Create an HTML MasterPage for SharePoint 2013


1) Create your HTML structure
You can create the basic structure of the master page in any HTML editor of your liking, more or less forgetting about the SharePoint aspect altogether. I say more or less, not completely, because you need to understand what a MasterPage is, essentially, what its function is.

A MasterPage contains the basic structure of the pages, the wireframe of where elements are on every page. In SharePoint, it can also contain some controls like navigation and site logo and search. These controls are later added as snippets to the MasterPage. What you need to do now, is create the wireframe as an HTML page. 

Example (HTML5):

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<link type="text/css" href="DemoStyles.css" />
</head>
<body>
    <header>
        <div id="sitelogo">[site logo control here]</div>
        <div id="headerright">
            <div id="subtitle">Company A Intranet</div>
            <div id="searcharea">[search control here]</div>
        </div>
    </header>
    <nav>[top navigation control here]</nav>
    <section id="mainarea">
        <nav>[left navigation control here]</nav>
        <div id="pagebody">
            [ContentPlaceHolderMain here]
        </div>
    </section>
    <footer>
        <span>Company A Intranet</span>
    </footer>
</body>
</html>


2) Create your CSS stylesheet (and graphics etc.)
You can test your site UI by adding the references to your stylesheet (and graphics) on the HTML page while still stored in your filesystem; simply change them later if the relative paths change after uploading everything to the server.

3) Upload your files to the server
Navigate to the top level site settings in your SharePoint Site Collections and open the MasterPages library under Web Designer Galleries category. Click Upload Document in the Ribbon, and browse for your HTML file and click Upload. Select HTML MasterPage as the Content Type of the file.



You can also add your CSS Stylesheet reference in the information form.

Upload your stylesheet and graphics as Design Files. You can create a separate folder for them too.


4) Convert your HTML file into a MasterPage
Navigate to the Design Manager in Site Settings, under Look and Feel and select Edit Master Pages. Note your HTML MasterPage in the list.



It still needs to be converted into a .master MasterPage, so click on Convert an HTML file to a SharePoint master page and select your MasterPage from the gallery.


Click Insert and SharePoint will convert your HTML page into a MasterPage, showing the MasterPage status as "Conversion successful".

Click on your MasterPage to open it in Preview.

5) Open your HTML MasterPage file for editing
You can either download a copy of the converted .html file from the MasterPages gallery or open the Top Level Site for editing in SharePoint Designer 2013 where you can edit the file on the fly and see the changes in the preview right away.


In SharePoint Designer: click to open the file, then click the Edit file -link.

You can see that with the conversion, SharePoint added a whole lot of code in the HTML version of the file in addition to creating the .master file. Do not delete the code added by SharePoint!

6) Add snippets to your .html MasterPage
In the browser, open the file in Preview, if you did not do this yet. Then, click on Snippets in the upper right hand corner of the Preview page.


This opens a new tab in the browser for selecting and customizing the snippets, i.e. the SharePoint controls.



Pick the snippet on the Ribbon, customize it as needed, then click on Copy to Clipboard and paste the code in the appropriate place in the HTML file.


If you are working in SharePoint Designer, save changes and refresh Preview to view the changes made by insterting the snippets.

When you are ready, save and close the HTML file and return to Design Manager in the browser.

7) Publish your design files
Navigate to the MasterPages gallery and publish your files. Your MasterPage is ready to be used.

Sharepoint 2013 Create a Master Page based on Seattle.master with VS 2012


Create a new project:
Branding
Configure as a Sandbox Solution:
Branding1
Add a new Module to your project:
Branding2
Download a copy of Seattle.master:
Branding3
Add the copy to your module, rename to CustomMaster.master, and Change your elements.xml file to point to _catalogs\masterpage folder:
Branding4
Change your masterpage, to include a welcome message:
Branding7
Deploy your solution and change your Site master page:
Branding5
Verify that it shows your welcome message:
Branding6

Sharepoint 2013 LP PT available


SharePoint 2013 PT Language Pack avilable in:

Tuesday, 23 April 2013

Microsoft Sharepoint Designer 2013 Dowload

SharePoint Designer 2013 is now available for download here:

http://www.microsoft.com/en-us/download/details.aspx?id=35491

You’ve been seeing a lot of the new features we’ve announced so far in this blog and others. Well now is the chance to download the new SPD and try it out yourself!

Thanks,

Sharepoint 2013 new features

According to recently released documentation, specifically the open specification documentation, Microsoft adds several interesting new features to SharePoint Server 15, AKA SharePoint Server 2013.


Oh, and in case it isn’t bleedingly obvious; don’t make important decisions based on preliinary information. You’ll stand a fair chance of getting burned, but hey, if you’re willing to risk it, that’s entirely up to you.
If you are looking for more bleeding edge information on SharePoint 2013, though, I try to keep up to date and post interesting findings on my twitter account too. You can follow me here
SharePoint Server 2013 keeps many of the existing SharePoint 2010 features, such as:
  • Excel Services
  • Access Services
  • InfoPath Forms Services
  • User Profile Service
  • Search Services
  • Business Connectivity Services
  • PerformancePoint Services
These features do get upgrades in both functionality and organization. For example, there’s a new analytics service that seems to allow custom usage reporting, possibly enabling features such as mobile and tablet usage for custom applications. Of course, I’m only speculating at this point.
In addition, however, there are new, or at least radically expanded services, such as:
  • Content Management Service
  • Translation Services
  • Workflow Services
  • SharePoint Quiz Client-Side Object Model Protocol
  • Education Services
  • Work Management Service
To me, being active in the education industry, SharePoint Education looks like a really interesting new component. In short, SharePoint Education is a major addition to SharePoint Server 2013 (or SharePoint Server 15 as it is currently known). The goal, I would assume, is to compete with online and internal training platforms such as Moodle and Blackboard.

Other Functionality

Although probably not for the layperson, the protocol documentation also reveals a rich framework for managing Apps, rights, and licenses. This means that not only will there be a SharePoint App marketplace from Microsoft, but it will also be possible for third-party vendors to build their own marketplaces.
Already there are several vendors who do this, with varying success. Although the new marketplace model may seem to compete, I am certain that most of these vendors will welcome better tools for building their solutions, deploying their products and services, and even competing with Microsoft in providing the best applications for users.
One clear sign of this is that the SPWeb class, which in the object model represents a site in a site collection, contains a new method in the SDK called LoadAndInstallApp. This method allows developers to send an App package into the web and install it.
Note: There is a class called SPSolutionExporter which may trick someone to believe there is a way to export an app, but this class exists in SharePoint 2010 and is only use to export a site as a template to the solution gallery.
I have found no evidence, and it would be strange if there were, of a method to export Apps using built-in functionality. I’m sure someone will make it, though.
Beyond these functionality extensions, the SPApp model also supports easy database provisioning. Many custom applications require data storage, and with SharePoint 2010, the methods for doing so is limited to what are known as Service Applications.
The problem, though, is that Service Applications can be difficult to build and maintain. When developers want custom data storage, they often either store data in SharePoint itself, or just build a custom database outside the realm of SharePoint, adding burden to administrators and dependencies on external resources.
Hopefully, the new functionality in Apps allow for easier provisioning of custom databases so that this hassle is removed from the development cycle. The methods suggest so, even including the aforementioned support for SQL Azure databases, but of course, nothing is known at this point.
I’d like to mention that Apps are deployed on sites (SPWeb) or possibly even as sites. That means you can deploy an App highly targeted to ensure you get the functionality you need only where you need it.
Note: I mentioned security as a main focus of the SDK App documentation. There is a rich model for ensuring applications can’t behave in a way you don’t want and for ensuring only the right people get access. However, I’m not going to detail these features in this issue because of space constraints.
The huge question, however, is whether SharePoint Apps will be full farm solutions or just sandbox solutions. I have some thoughts on that too, but I need to do a bit more research first.
Also, I’m thinking that these features are what’s going to be most important to most readers, but please feel free to correct me if I’m wrong.

Licensing

Microsoft will also add support for licensing of the application packages that developers deploy. What this means is that vendors or even regular folks can put a price on their application and sell it through the marketplace.
The first clue to this is a method attached to the SPWebApplication class called IsUserLicensedForEntity.
Note: Apparently, licensing can also be turned off, which could mean that either no applications requiring licenses will be installed or that the application developer has not set a license at all (in other words freeware).
However, there’s much more information in the protocol documentation, specifically in the MS-APPMD document (or SharePoint App Management Database Protocol Specification if you insist on the full name).
That document says that there are four license types that you can add to your package:
  • PerpetualMultiUser marketplace license type.
  • PerpetualAllUsers marketplace license type.
  • TrialMultiUser marketplace license type.
  • TrialAllUsers marketplace license type.
In addition to these license types, there’s also something called an OMEXLicenseType, but the description doesn’t clarify what the purpose of this license type is:
“The commercial type of the marketplace license, used for commercial purposes and stored in the protocol server.”
From the documentation, it does not seem like this is an alternative license type to the perpetual or trial licenses, but something that is added on to every license, regardless of license type.
The ‘protocol server’, by the way, is the SharePoint server. Wonder why they can’t just call it that.
The model also defines a license director who is a person (or maybe group) who are allowed to assign licenses to users. For example, a company may buy 10 user licenses for a product, but have 50 active users. The license director will be able to select which of those users get access to the product.
Licenses can also be timed so that they expire after a certain time. The expiration applies only to trial licenses, so perpetual licenses aren’t affected.

Upgrading to SharePoint Version 15: The Planning Starts Now

SharePoint 2010 is version 4 of the product, but is labeled “version 14” to align with Microsoft Office versions. While the rest of us are battling to align SharePoint 2010 with our current business requirements, Microsoft is busy planning SharePoint version 15. While there is nothing near to a release date yet, let’s step out on a limb and call it SharePoint 2013 (software branding isn’t that creative, is it?). In fact I’ve heard a Microsoft employee refer to “vNext” meaning version 16… The product group lives in a different plane of space and time.

At the SharePoint Event at Microsoft in last month, an attendee stood up at the end of the keynote and asked, “Upgrading to SharePoint 2010 has been so painful… What can I do to reduce the pain of upgrading to the next version of SharePoint?”

His statement—that upgrading has been painful—is something I hear all the time. It’s true, upgrading can be painful, though it does not have to be painful. His question really nailed it, though: It’s not the upgrade to a new version of SharePoint that makes our lives painful, it’s everything we do between upgrades that makes an upgrade painful. So now that you’ve upgraded to SharePoint 2010—or are planning an upgrade to SharePoint 2010, what can you do to make the next upgrade easier? The answer, in my opinion, lies in careful planning and design of your farms, web applications, and site collections.

Consider a vanilla SharePoint 2007 farm, with web applications and site collections that use only out-of-box features of SharePoint. How difficult is it to upgrade that farm? Not at all… you run the Preupgrade Check, then do an “in place upgrade” and voilĂ  you have a SharePoint 2010 farm.

But that’s a fantasy, isn’t it?

Who among us has a vanilla SharePoint 2007 farm with only out-of-box features? Most of us have added custom solutions, custom code, and tools that sit on top of SharePoint 2007. Those are the bits that make upgrade challenging. We have to validate each component for compatibility with SharePoint 2010. We discover some components—like some of the “Fabulous 40 Templates” that Microsoft itself produced in SharePoint 2007 days—cannot be upgraded. We learn that some of our third-party vendors don’t yet have a SharePoint 2010 compatible release, or that the cost of upgrading those tools is too high. We find that some of our custom code was written by developers or consultants who are no longer available to help us remediate compatibility problems.

These are the painful parts of upgrade. Evaluating and validating all the “extras” and customizations is a time consuming and sometimes futile task. Meanwhile our customers are clamoring for the incredible new features of SharePoint 2010—whether that’s Office Web Apps, FAST Search and PerformancePoint, managed metadata, in-place records management, or any number of myriad improvements. And our administrators want to take advantage of improvements in SharePoint 2010’s infrastructure and management story. We can’t get there fast enough, but we’re stuck in a quagmire of compatibility.

Folks, this is going to be the story, moving forward. Thought the upgrade from XP to Vista/Win7 was tough? Now, instead of one user’s computer being a problem because of an incompatible application that is mission critical to that user—which prevented us from upgrading that user’s system while we moved on to other users’ systems—we now have components that are mission critical integrated into a server-based platform that blocks upgrade of an entire farm.

What’s the solution?

Honestly, I don’t have a “silver bullet” answer, but rather I have a proposal that I hope will generate discussion and experience-sharing. The proposal is to stop throwing every component that a team requires into a single site collection, web application, or even farm. Instead, consider aiming for a logical architecture—a “containment hierarchy” of farms, web applications, and site collections—that give you a clear delineation between “vanilla” and “customized” SharePoint. Consider giving each team a site collection to support their collaboration—using the 80/20 rule—using only out-of-box functionality. If they need functionality that requires a custom component, put that functionality into a separate site collection. Add a navigation link from the vanilla team site to the customized site collection so that users perceive it as a single “solution”, but behind the scenes you’ve actually got a containment hierarchy that keeps vanilla and customized elements separate.

Consider, then, the upgrade story to SharePoint 2013. You can upgrade the vanilla site collection quickly, giving immediate access to the improvements Microsoft will make to the platform, but the specific functionality that required a custom solution can remain on a SharePoint 2010 farm, with a link from the upgraded site collection back to the customized site collection. Think about it—if the functionality was that “custom”, it probably won’t need upgrading—it does its job and meets requirements already. Or, Microsoft will introduce a new feature in SharePoint 2013 that replaces the need for the customized “container”, and you can just retire the custom solution and use the new out-of-box functionality.

Take this to the level of web applications and farms. Let’s jump up to the farm level. If you’re going to install a farm solution, do you want that in your “primary” farm as a potential block to upgrade? Or are you better off hosting that custom solution in a separate farm?
Those of you who have seen me present “live”, or who will join us at or in one of the cities we’re visiting on the SharePoint Coast-to-Coast tour will know I go into great detail about how to structure a SharePoint service—the farms, web applications, site collections, and sites—to align with your business requirements. The better you do that, the better your upgrade experience will be. If you have everything in a single farm, in a handful of Web applications, and in a limited number of site collections, you’re going to find that there are incompatibilities that must be remediated and dependencies between compatible and incompatible components that make life miserable. If your containment hierarchy is modeled in alignment with your business requirements, you’ll find that you can upgrade the parts of your service that will benefit from new features—easily—and continue to get the functionality that you built to meet specific requirements from your “old” farm.

It’s a tough concept to boil down into a column, but hopefully you can consider that fantasy of a completely vanilla farm and how easy it is to upgrade, and then look carefully at where you are intentionally and for good reason deviating from a vanilla implementation, with full awareness that the decisions you make about how to meet your business requirements with customizations now will absolutely impact your upgrade to SharePoint 2013. Because I’m sure that, as with SharePoint 2010, Microsoft will make the upgrade to SharePoint 2013 from its own SharePoint 2010 “bits” pretty easy and straightforward… It’s only our choices about how to make SharePoint 2010 align with our business requirements that can make it more painful.

SharePoint 2013: How-To use and configure Device Channels

A device channel is part of the SharePoint 2013 publishing infrastructure that enables you to render certain site content, style your content, and even change images—while maintaining the same URL across a pool of different devices. Compared to the desktop version of the SharePoint site, a mobile rendering can be formatted with a smaller width, have better navigation with wider touch targets, and show a reduced amount of information for better usability. You can create a single site, and author and edit the content a single time for all your different mobile devices. When a user browses a SharePoint site from a mobile device such as a smartphone or tablet, the mobile browser submits to the site an HTTP GET request that includes a user agent string. This string contains information about the type of device that is trying to access the site. Based on that device substring, the device browser can be redirected to a specific master page view. For example, if you have a collection of Windows Phone and iPad devices, you can provide each pool with a unique rendering of the SharePoint publishing site by using device channels. These device channels can each be given a different master page and thus CSS file to give users a more optimal viewing experience. Figure 1 shows the use of two device channels to provide two unique site renderings for a phone and tablet device.

Using device channels across device platforms

Configuring Device Channels

Before configuring anything on our SharePoint site, we have to be sure that the publishing feature is activated on our Site Collection Level. We are going to do a test now for 2 different browsers and see if tDevice Manager can make the difference and apply different masterPages.
Go to your Site Settings and select Design Manager.
We have to create a new Device Channel, so click on Manage Device Channels.
And now on Create a Channel

You can go now on http://whatsmyuseragent.com/ and take a look to your browsers information. Please copy the same on SharePoint Device Channels. You should create one for IE and one for Chrome.
When finished with creating with your Channels, go to Look and Feeland select Master Page.
For each Channel that we created, provide a (custom) MasterPage.
Thats it, you can now browse to your site with IE or Chrome and you should see for each version another MasterPage.
Happy configuring,