In previous article I wrote about custom master page and how to make SharePoint branding. Also when we work with SharePoint Online (Office365). But there's something more... Microsoft give us more possibilities, which can be used to extend functionality of our page. Let's move to design manager. On "Edit Master Page" page press link „Conversion successful” for our master page. We will be transferred to preview page. We can see there how our main page will be looking when we use our custom master page.
- Edit Master Page
It's time to the next step. When we press "Snippets" in the upper menu we will open new page where we can make some additional improvements to our master page. From the left we can see:
- Navigation – we can add additional navigation to our page
- Administration – some additional administration features
- Containers – containers for our features
- Web Parts – it's just webparts
- Custom ASP.NET markup – if you need something fancy you can use it to create something non standard
- Snippet Gallery
Ok, It's time to show you how can use snippets to build something more than just simple master page. I will show you how we can make conditional display of the interface base on user permissions. From upper menu we select Security Trim -> Show to Authenticated Users.
- Security Trim
SharePoint will display detailed options of this feature, and preview window will display us how our snippet works. HTML snippet contains source code which should be used to get expected results. Right now we are interested in Customization - Security Trim. When we change setting of the snippet we can modify his behaviour. We will select from the menu AuthenticationRestrictions option AuthenticatedUsersOnly. It means that only users who were authenticated will be taken into account. Then from Permissions drop down we should select ApproveItem. This second option allow to see content only by users with Approve Item permissions.
- ApproveItems Permissions
In additions we can also modify how snippets will be displayed on the screen: border, background colour, etc. When we done our configuration work we press Update button to update code in html snippet windows. Then we can copy our code to clipboard with Copy to Clipboard button.
- Security Trim Details
It's time to use SharePoint designer. Let's open our master page. Please remember that we still work with html file, not .master. Let's find following code:
<div id="ms-designer-ribbon">
<!--SID:02 {Ribbon}-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify) -->
<div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">
The SharePoint ribbon will be here when your file is either previewed on or applied to your site.
</div>
<!--PE: End of READ-ONLY PREVIEW -->
</div>
This code is responsible for generating upper ribbon on the page. We are going to paste snippet code above ribbon code, and then we move ribbon code into snippet div's. When we finish our code should looks like this:
<div data-name="SecurityTrimmedAuthenticated">
<!--CS: Start Security Trim Snippet-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" AuthenticationRestrictions="AuthenticatedUsersOnly" Permissions="ApproveItems">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><span><!--PE: End of READ-ONLY PREVIEW-->
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
<div id="ms-designer-ribbon">
<!--SID:02 {Ribbon}-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify) -->
<div class="DefaultContentBlock" style="background:rgb(0, 114, 198); color:white; width:100%; padding:8px; height:64px; overflow:hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div>
<!--PE: End of READ-ONLY PREVIEW -->
</div>
</div>
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--></span><!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->
<!--CE: End Security Trim Snippet-->
</div>
It's time to save our work. And that's all. Now when user will display page he will be able to see ribbon only if he has valid permissions. It's only simple example how snippets works, but the idea how to use other is very similar. There's much more than this - you should make your own tests.
This article was originally posted at my personal blog.
by Tomasz Szulczewski via Everyone's Blog Posts - SharePoint Community
No comments:
Post a Comment