1

I am in the process of redesigning my site set up to make it completely automated. Currently, we have a little script editor that shows some links like such: enter image description here

The code for the script editor looks like this:

<table border="0">
<tr>
  <td>
    <a href="https://contoso.sharepoint.com/sites/subsite/SitePages/Project%20Dashboard.aspx?ProjectName=CS1">
    <img src="https://contoso.sharepoint.com/sites/subsite/Project%20Pictures/cs1.png" height="78" /></a>
  </td>      
</tr>
</table>

Basically I want to replace this script editor with some custom code. I think a content editor running a script would work well, but I am not sure how exactly to query the objects.

Basic gist of how it should work: Query the list of projects, looking in the "active" (yes/no) column. If the project is active, go to the ProjectPicture column and copy the URL of the picture, as well as the parameter for said project. The parameter for the site is ProjectCode.

For example, let's say Project1 is active. Then we should pull the picture url (URL points to a picture library) for project1. Also, save the parameter "PROJ1". Then, create a picture that when clicked on goes to ProjectDashboard.aspx?ProjectCode=PROJ1.

This process should put up a picture for each of the projects that are active in the project profile.

I assume we can use javascript/jquery to accomplish this, however I am just getting start with the JSOM.

Edit: I have been playing with using the JSOM to query the project profile: enter image description here

I am trying to pull in the records where the Active field = yes, and then just alert the number of elements found as well as the data I want in them. However, the alert box isn't popping up, telling me the onQuerySucceeded isn't doing what it is supposed to. Below is the code I am trying to use, and I have been testing it in a script editor. As far as the CAML query goes, I have tried using Bool, Boolean, Text, and Integer to try and get it to work with no avail.

    <html>
<head>
    <script type="text/javascript">
        ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

        function retrieveListItems() {
            var numElements = 0; //number of elements found in CAML query

            var clientContext = new SP.ClientContext(); //create client context at this site collection.
            var oList = clientContext.get_web().get_lists().getByTitle('ProjectProfile'); //create list object by the title of the, projectParameters is the list to look through
            var camlQuery = new SP.CamlQuery(); //create CAMLquery to pull in list items.
            camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name="Active"/>' + 
            '<Value Type="Boolean">' + 1 + '</Value></Eq></Where></Query></View>'); //define the query, here we pull in the records where the project is active 
            this.collListitem = oList.getItems(camlQuery);//get the items from the list object based on the query defined above.

            clientContext.load(collListitem);//telling the object model to prepare to execute the following object by loading it into the client context.

            clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));  


        }
        function onQuerySucceeded(sender, args) {
            var listItemInfo1 = '';
            var listItemInfo2 = '';
            var listItemEnumerator = collListitem.getEnumerator();

            while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                listItemInfo1 += oListItem.get_item('ProjectName'); 
                listItemInfo2 += oListItem.get_item('ProjectPicture');
                numElements++;
            };
            alert(numElements);
            alert(listItemInfo1);
            alert(listItemInfo2);
        }

        function onQueryFailed(sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
        }


    </script>
</head>
<body>

</body>

1

This worked for me:



$(document).ready(function() {
    getProjects();

});

function getProjects() {      
    alert("get items");      
    var clientContext = SP.ClientContext.get_current(); 
    var oList = clientContext.get_web().get_lists().getByTitle('ProjectProfile');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('1');    
    this.collListItem = oList.getItems(camlQuery);   
    clientContext.load(collListItem, 'Include(ID, Project, ProjectName, Active, Created)');
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {   
    alert("SUCCESS");
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();

        var iden = oListItem.get_item("ID");
        alert("id: " + iden);           
        var proyecto = oListItem.get_item("Project");
        alert("proyecto: " + proyecto);

        var nombre = oListItem.get_item("ProjectName");
        alert("name: " + nombre);

        var activo = oListItem.get_item("Active");
        alert("active: " + activo);

    }       
    alert("FIN");
}

function onQueryFailed(sender, args) {
    alert("FAIL");
    alert('Cannot: ' + args.get_message() + '\n' + args.get_stackTrace());
}


Remember to add the script tags for the following libraries:

  • /_layouts/15/MicrosoftAjax.js

  • /_layouts/15/sp.runtime.js

  • /_layouts/15/sp.js

  • instead of $(document).ready(function() can i use: ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js"); Also, how do I use the mentioned script tags? – Sabien Ambrose Aug 15 '16 at 19:00
  • Yes, but it's more safe to manipulate your page, once the entire page (images or iframes), not just the DOM, is ready. – Marcelo Espinosa Aug 16 '16 at 15:11
  • you can load the scripts like: <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script> – Marcelo Espinosa Aug 16 '16 at 15:12
  • which scripts sources should be added? When are they necessary? – Sabien Ambrose Aug 16 '16 at 18:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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