Tuesday, December 4, 2012

How to Add a Favicon to a SharePoint Site or any regular website

In this post we are going to Add a Favicon to a SharePoint Site or any regular website.



A favicon is an image(.ico extension) associated with a particular Web page or a complete Web site. Favicon (pronounced fav-eye-con) is short for 'Favorites Icon.'
In Internet Explorer the Favicon is displayed on the Address bar and in the Tab.

Below are the steps to achieve this.
Step1:
Create a .ico image file with the below link by uploading your Logo.
Once the .ico file is created save it as favicon.ico and make sure it is of 16*16 Pixels.

Step2:
Adding the favicon reference to our website.
Add the below reference in the <head> section of your master page so that favicon will be displayed across the website. Or if you want to show it on particular page only, then add it to respective page itself.
<link rel="shortcut icon" href="your_path_to_favicon/favicon.ico" type="image/vnd.microsoft.icon" />

In Sharepoint to achieve the same we can use either the above code snippet or we can make use of below Sharepoint control SPShortcutIcon.
<SharePoint:SPShortcutIcon ID="SPShortcutIcon1" runat="server" IconUrl="/_layouts/images/favicon.ico"/>

You can give the IconUrl reference by placing the image either in the 14 hive or in the Image Library of your site collection. Both will workout.


Hope this helps...

Implenting Qualaroo Survey to your website


In this post we are going to add a Survey to our website with minimal maintenance intervention.


      Below are the steps to implement Qualaroo Survey on your page

      1)      We need to create an account under Qualaroo.
Account Types-
a) Free User
b) Premium user
For more info please ref https://qualaroo.com/plans
      2)      Login via https://qualaroo.com/signin
      3)      Upon successful login we will now be taken to dashboard of Qualaroo.
      4)      Click on the Create a new survey button which will be present in dashboard.
      5)      We will be redirected to a page where will have some Predefined Surveys and we can choose any one of them.
      6)      To create a custom survey Click on the Create a new survey button.
      7)      We will be redirected to new survey form where we need to enter the information like Survey name, question, answers, answer type(radio button, checkbox) etc.,
      8)      We can also add multiple questions. Finally after adding all the questions Click on Save Survey button.
      9)      After successful save we will be redirected to Configure survey page, where we will have multiple options like Url of the site where it is targeted, Display survey From date- To date, User targeting etc.,
      10)   Enter the mandatory fields and click on Save Survey configuration.
      11)   Survey will now be ready and we can preview it also by clicking on Preview.
      12)   Now Go back to DashBoard and we should see our newly created Survey.
      13)   There will be a button called Install Code corresponding to our survey. Click on it to get the code which needs to be incorporated on our site.
      14) Copy the generated code just below <body> tag to the page of the site to which you want to display this survey.

      That’s it you would be able to see the Survey at the bottom right corner of your page.Below fig shows the sample survey.
      
















      Hope this helps...
   



Wednesday, September 26, 2012

How to use XSLT in sharepoint 2010


In this post we are going to see how to use XSLT in Sharepoint 2010, to display the list data in a customized way on a webpart page.
This article will be helpful for those who are just starting with XSLT in MOSS 2010.

Consider the below list EmployeeDetails







At the end of this post we will be displaying the above list data as below in the web part page.
Expected Result:











Step1:
To start with, whenever we talk about creation of XSLT we must be ready with the HTML markup how we want to display.
In order to achieve the above expected result I have created the HTML markup as below.

<table border="1">
        <tr>
            <td rowspan="3" valign="top" width="30%">
                <img src="" />
            </td>
            <td style="text-align: left" valign="top" width="70%">
                Name
           </td>
        </tr>
        <tr>
            <td style="text-align: left" valign="top" width="70%">
                Skills
            </td>
        </tr>
        <tr>
            <td style="text-align: left" valign="top" width="70%">
                Summary
            </td>
        </tr>
</table>

Step2:
Now let’s start with the creation of XSLT. The above highlighted yellow fields will be replaced by XSL values of the fields.
Lets create the below XSLT Template with the name MyCustomStyle.

<xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle">
    <table border='1'>
      <tr>
        <td rowspan="3" valign="top" width="30%">
          <img>
            <xsl:attribute name="src">
              <xsl:value-of select="substring-before(@UserImage,',')" />
            </xsl:attribute>
          </img>
        </td>
        <td style="text-align: left" valign="top" width="70%">
          <h3>
            <xsl:value-of select="@UserName" />
          </h3>
        </td>
      </tr>
      <tr>
        <td style="text-align: left" valign="top" width="70%">
          <xsl:value-of disable-output-escaping="yes" select="@UserSkillset" />
        </td>
      </tr>
      <tr>
        <td style="text-align: left" valign="top" width="70%">
          <xsl:value-of disable-output-escaping="yes" select="@UserSummary" />
        </td>
      </tr>
    </table>
</xsl:template>

Step3:
Now we are going to add this XSL Template to a existing XSLT(ItemStyle) present in XSL Style Sheets which is present under Style Library.
Download the ItemStyle xslt and add the above template at the end of the style sheet.
You can even create a new XSLT rather than adding in any existing one.

Step4:
With the above steps we are ready with our XSLT changes and ready to add this to a webpart page.
      A)     Create a webpart page.
      B)      Add a Content Query Webpart.
      C)      Open the tool pane of the above webpart(Edit Webpart).
      D)     Select the list EmployeeDetails in the source section.
      E)      Expand the Styles Section which is present under Presentation Group.
      F)      In the Item Style Drop down, you will be able to see the XSLT template name MyCustomStyle and select it.
      G)     Once after you select our custom created style, You must be able to see the green colored highlighted variables present in XSLT in the Fields to display section.
      H)     Add the respective Field internal name to the respective Variables.
       I)        Finally Click Apply and Press Ok button.

Your expected result will be available now.


Hope this helps...



Popular Posts