0

I'm using REST API to populate contents on a page. Each item has an Edit link to allow content provider to edit the text and image. Content Providers are members of 'CPGroup' SharePoint Group with contribute permission.

I want to show/hide the Edit link based on group or anyone with contribute or higher permission.

I read this article about Security Trim Snippet and tried the solution posted on this page.

Below is the code I'm using where I want to hide the Edit link:

My js file starts with:

$(document).ready(function(){
    loadhmData();
});

function loadhmData() {    
    var iconNavStart = '<i class="fab fa-readme"></i> Read More</a> | <a href="/sites/xxx/Lists/xxx/EditForm.aspx?ID=';
var iconNavEnd = '" alt="Edit above item" Title="Edit above item"><i class="fas fa-edit"></i> Edit</a>';

The page is populated using this:

    if (stringTitle == "/sites/xxx/xxxx/pages/home.aspx") {
    var requestUri = siteAbsUrl + "/_api/web/Lists/getByTitle('Page Details')/Items?$\
        filter=Category eq 'Employees'&$\
        select=Id, Title, ImageURL, Description, PageURL";

    var ajaxhm = $.ajax({
        url: requestUri,
        async: false,  //pass value outside of ajax
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            if (data.d != undefined) {
                $.each(data.d.results, function (index, item) {
                    myId = data.d.results[itemNum].Id;
                    myTitle = data.d.results[itemNum].Title;
                    myImg = data.d.results[itemNum].ImageURL;
                    myBody = data.d.results[itemNum].Description;
                    myUrl = data.d.results[itemNum].PageURL;
                    myDisplayBlock = myDisplayBlock + '<div class="col-xs-12 col-sm-6 col-md-4">'
                        + '<a href="' + myUrl + '"><img style="width:100%; height:auto" src="' + myImg + '?renditionID=2"></a>'
                        + '<a href="' + myUrl + '"><h2 style="text-align:center">' + myTitle + '</h2></a><p>' + myBody + '</p><p><a href="' + myUrl 
                        + '" alt="more about ' + myTitle + ' information" title="' + myTitle + '">'
                        + iconNavStart + myId + iconNavEnd + '</p><br/><br/></div>';
                    itemNum++;
                });
            }
        },
        error: function (data) { alert("Failed.");  }
    });
}

Below is what it looks like currently: enter image description here

I attempted using SPServices from the 2nd link I provided above and inserted a <div id="hideEdit"> at:

var iconNavStart = '<i class="fab fa-readme"></i> Read More</a><div id="hideEdit"> | <a href="/sites/OASIS/Lists/PageDetails/EditForm.aspx?ID=';
var iconNavEnd = '" alt="Edit above item" Title="Edit above item"><i class="fas fa-edit"></i> Edit</a></div>';

Added the reference in my Master.HTML: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.js">//<![CDATA[//]]></script>

I already have /3.3.1/jquery.min.js referenced and didn't add /1.11.0/jquery.mi.js

And finally, added the block of code where I had

$(document).ready(function(){
$().SPServices({
    operation: "GetGroupCollectionFromUser",
    userLoginName: $().SPServices.SPGetCurrentUser(),
    async: false,
    completefunc: function(xData, Status) {

        if($(xData.responseXML).find("Group[Name='CPGroup']").length == 1)
        {
            document.getElementById('hideEdit').style.display = "block";    
        } 
        else { 
            document.getElementById('hideEdit').style.display = "none"; 
        }
    }
});

loadhmData();

});

I'm pretty sure I inserted the last block of code incorrectly because it only hid the first instance. Subsequent items still displayed the Edit link.

As for the Security Trim snippet -- I'm still trying various methods to incorporate it with current page layout.

1

Try making the following changes:

Change <div id="hideEdit"> to <div class="hideEdit">

Two lines for adding the links would look like this:

var iconNavStart = '<i class="fab fa-readme"></i> Read More</a><div class="hideEdit"> | <a href="/sites/OASIS/Lists/PageDetails/EditForm.aspx?ID=';
var iconNavEnd = '" alt="Edit above item" Title="Edit above item"><i class="fas fa-edit"></i> Edit</a></div>';

And than change the last part of the code to this (hiding the link based on the class instead of the id):

$(document).ready(function(){
$().SPServices({
    operation: "GetGroupCollectionFromUser",
    userLoginName: $().SPServices.SPGetCurrentUser(),
    async: false,
    completefunc: function(xData, Status) {

        if($(xData.responseXML).find("Group[Name='CPGroup']").length == 1)
        {            
            $(".hideEdit").show();
        } 
        else 
        {             
            $(".hideEdit").hide();
        }
    }
});

loadhmData();

});
  • Thanks. It worked after I moved the last part of the code at the very bottom (before the very last curly bracket). Unfortunately, during testing one of the members of an AD group that is included in CPGroup cannot see the edit link. It doesn't seem to work or break down the members of any AD group. – Tamras Merin Dec 26 '18 at 22:58

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.