Friday, February 28, 2014

SharePoint users getting "Access denied"



Most common issue with users is Access Denied on SharePoint sites. If you have configured Request Access settings on site, users can Request Access to site by simply clicking on “Request Access” link on Access denied page/Pop Up. This simply triggers email to site owner who then can grant access to users.

But if owner of the site granted users permission on site and users still cannot login to site, you can go through following steps to resolve the issue.
Check step by step -->

Step 1 Check User Permission on Site
Check if user has access to site by visiting site permissions. In site permissions you can use “Check Permissions” page to check where user has access, to check permissions use user’s login ID or email ID. If the user doesn’t have sufficient permission you can grant it  

Step 2 Check group permission to which user belong
Check the group permission and setting to which user belongs, especially when your site is having unique permissions  

Step 3 Check if all resources are checked in and have published version i.e. they are not checked out. Check all master pages, CSS, Images other related files etc.
This is the common mistake which is done by SharePoint Site owners and Designers, check if all master pages and CSS files related to that are checked in and have major published versions. If any file don’t have major published version in SharePoint it will not be visible to readers and Viewers, but same files will be visible to Owners and contributors who have rights to read minor versions. So please double check if you have major version to all files especially in SharePoint publishing site.

Step 4 Check all images and style resources are having access to all users
If you are referring any images or flash files on SharePoint page please be sure that these are accessible to all users and at least read permission is there. The best way to use images on pages it to place the images in Layouts images folder. However this is not possible for end users and administrator access is required on server to place these files or to run deployable solution of images on server.  

Step 5 Check Document library and List level permissions
Many times Document libraries and lists have unique permissions and it is not necessary that the rights you have on SharePoint Site/Web will be same on Document library/ Lists. So please double check if user /group have appropriate rights.

Step 6 Check Item level permissions if still not able to access
Same as step 5 but for Folders and list Items.  

If all of above doesn't solve the access denied issue and user still struggling to access site there might be something went wrong with user account in SharePoint database. To solve this you can go through final step (Step 7) which is to delete user account from site collection and add again.

Step 7 something went wrong with User Account
And finally if all of above is good and still user getting access denied?
Please delete the user from site collection and add again to it. It will solve your problem about access denied if all above steps are checked
To delete the user from site collections please go to http://<SiteCollection>/_layouts/people.aspx?MembershipGroupId=0 and select the user and delete
Please add user again to desired group with proper permissions
And now if you check user should be able to login to SharePoint site without any issues
 

Thursday, October 17, 2013

Menu with Pop Out Images on Mouse Hover SharePoint using XSLT, JQuery and CSS



Using out-of-the-box features means that one reuses components that come with the platform rather than creating new components.  SharePoint is the platform, not the finished components. The power of SharePoint is its incredible flexibility in creating exactly what you want.  We create custom solutions to provide user friendliness, branding and to achieve specific business requirements.
There are many ways to customize SharePoint,
  • Visual Studio
  • SharePoint Designer
  • Content Editor Web parts
 Visual studio solutions like web parts, event handlers, Site /list definitions, Features etc requires administrator permissions to deploy and publish on server.
SharePoint designer helps users to customize site without administrator help. Designer can be used for branding, look and feel changes in SharePoint pages and web parts.
Content editor web parts can be used to injecting page level scripts, CSS styles and HTML.

SharePoint has Links list which is used for managing and displaying links, this list is displayed as bulleted items in web part. We can customize the look and feel of the web part to display images on mouse hover. Following are the highlights of the Menu item web part with pop out images on mouse hover.

This is simple Menu constructed using SharePoint List, XSLT, CSS and JQuery.
Following are the highlights of the Menu part
 
  • Easily Customizable, easy to change height width of menu item
  • No use of Visual Studio
  •  Pop out images on each menu, administrator should be able to Change Images of each Menu link, Menu text,
  • Using SharePoint Designer
  • SharePoint List to Hold List items
  • Picture Library for menu Images
  • Library for CSS file ,J Query files and script files
 Please follow below steps

  • Create Custom SharePoint List
            Fields                    Type
MenuText           Single line of text
MenuLink            Hyperlink field
MenuImage       Picture Field
Order                    Decimal

  • Open SharePoint site in SharePoint Designer.  
  • Create Web Part Page
  • Add Empty Dataview web part
  • Select data source menu and Add custom list created for Menu
  • Select required field and select Add as Multiple item view, Fields will be added to dataview
  • Customize XSLT view and remove table and row element from item template
  • Add  <div id="site_content"><ul id="sdt_menu" class="sdt_menu">
  • Change Item row view template in XSLT
<xsl:template name="dvt_1.rowview">
    <xsl:if test="string-length(@MenuLink) &gt; 0">
                     <li>
                    <a title="{@MenuLink.desc}" target="_blank"  href="{@MenuLink}">
                        <img src="{@MenuImage}" alt="{@MEnuImage.desc}" />
                        <span class="sdt_active"></span>
                        <span class="sdt_wrap">
                            <span class="sdt_link">
<xsl:value-of select="@MenuText" />
</span>
                        </span>
                    </a>
                     </li>
    </xsl:if>
  </xsl:template>

  • Save XSLT and close.
  • Create Style Sheet file


ul.sdt_menu{
       margin:0;
       padding:0;
       list-style: none;
       font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
       font-size:11px;
       width:auto;margin-top:80px;
}
ul.sdt_menu a{
       text-decoration:none;
       outline:none;
}
ul.sdt_menu li{
       float:left;
       width:115px;
       height:60px;
    margin:1px;
       position:relative;
       cursor:pointer; border:1px dotted #000; margin-right:1px; list-style:none; background:#999;
}
ul.sdt_menu li > a{
       position:absolute;
       top:0px;
       left:0px;
       width:110px;
       height:65px;
       z-index:12;
       background:transparent url(../images/overlay.png) no-repeat bottom right;
      
}
ul.sdt_menu li a img{
       border:none;
       position:absolute;
       width:0px;
       height:0px;
       bottom:0px;
       left:75px;
       z-index:100;
      
}
ul.sdt_menu li span.sdt_wrap{
       position:absolute;
       top:25px;
       left:0px;
       width:115px;
       height:40px;
       z-index:15;
    }
ul.sdt_menu li span.sdt_active{
       position:absolute;
       background:#111;
       top:65px;
       width:120px;
       height:0px;
       left:0px;
       z-index:14;
      
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
       margin-left:15px;
       text-transform:uppercase;
}
ul.sdt_menu li span span.sdt_link{
       color:#fff;
       font-size:14px;
       float:left;
       clear:both;
}
ul.sdt_menu li span span.sdt_descr{
       color:#0B75AF;
       float:left;
       clear:both;
       width:155px;
       font-size:10px;
       letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
       display:block;
       position:absolute;
       width:188px;
       overflow:hidden;
       height:170px;
       top:85px;
       left:0px;
       display:none;
       background:#000;
       margin-left:10px;
}
ul.sdt_menu li div.sdt_box a{
       float:left;
       clear:both;
       line-height:30px;
       color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
       margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
       color:#fff;
}
  • Add Script File
<script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#sdt_menu > li').bind('mouseenter', function () {
                var $elem = $(this);
                $elem.css('background-color', '#fDA000');
                $elem.find('img')
                     .stop(true)
                     .animate({
                         'bottom': '60px',
                         'width': '125px',
                         'height': '65px',
                         'left': '0px'
                     }, 400, 'easeOutBack')
                     .andSelf()
                     .find('.sdt_wrap')
                     .stop(true)
                }).bind('mouseleave', function () {
                var $elem = $(this);
                $elem.css('background-color', '#999');
                var $sub_menu = $elem.find('.sdt_box');
                if ($sub_menu.length)
                    $sub_menu.hide().css('left', '0px');

                $elem.find('.sdt_active')
                     .stop(true)
                     .animate({ 'height': '0px' }, 300)
                     .andSelf().find('img')
                     .stop(true)
                     .animate({
                         'width': '0px',
                         'height': '0px',
                         'left': '85px'
                     }, 400)
                     .andSelf()
                     .find('.sdt_wrap')
                     .stop(true)
                     .animate({ 'top': '25px' }, 500);
            });
        });
    </script>

  • Please change the JQuery files path according to your environment
  • Add Content editor web part on same page and Add CSS and Java Script files on page.
  • Menu is ready to use
  • Please remember to Change dataview web part properties to show all items in list or if required to filter menus, and to order menu items
  • You can Export the dataview web part to reuse it.

Menu SharePoint XSLT

Menu with Pop Out Images on Mouse Hover SharePoint
Menu with Pop Out Images on Mouse Hover SharePoint