I am struggling to come up with a method to allow my end user to set up a "project page" as we call them. Basically, this is a parameter based page that filters using ProjectName for both the CQWPs and the list web parts (using query string filter). All of the information in the site should be derived from our "project profile", which looks like the following: enter image description here

What I struggle with, is an ability for the end user to select a picture to be associated with the project. Should the ProjectPicture column simply be a URL so that I may pull the URL using the ProjectName parameter? The only other way I can imagine this working is a lookup field to a picture library, but I don't believe that I can select a "picture". My end goal is to take all of the pictures in the ProjectPicture column, and when that record's "active" field is equal to yes, display the picture on the home page, with the picture being a link.

I started working on this using javascript, and my code checks for the Active field, and shows the links. However, I am stumped on what to pull from the ProjectPicture column to make this work. The "name" column of the picture library can't be used for lookup or calculated columns. The only thing I can think of is a workflow to copy the text from the "name" field to a single line of text, and then lookup that column. I did this and the lookup creates a link to edit the item. I could honestly keep the link, if I could just access the text of the object. End goal is to get something that looks like a script editor I made: enter image description here

My code for reference:

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

        function retrieveListItems() {

            var clientContext = new SP.ClientContext.get_current(); //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><RowLimit>100</RowLimit></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, 'Include(Id, Active, LinkTitle, ProjectName, PictureName_x003a_PictureName)');//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 active = '';
            var Project = ''; //LinkTitle is the internal name for Project
            var ProjectName = '';
            var ProjectPicture = '';
            var listItemEnumerator = collListitem.getEnumerator();

            while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                active += oListItem.get_item("Active") + ' ';
                Project += oListItem.get_item("LinkTitle") + ' ';
                ProjectName += oListItem.get_item("ProjectName") + ' ';
                ProjectPicture += oListItem.get_item("PictureName_x003a_PictureName") + ' ';

            var ActiveArray = active.split(' ');
            var ProjectArray = Project.split(' ');
            var ProjectNameArray = ProjectName.split(' ');
            var ProjectPictureArray = ProjectPicture.split(' ');
            var parentElement = document.getElementById("pictureDisplay");      

            for(var i = 0; i<ActiveArray.length; i++){
                    var linkURL = "https://projectadvocatesllc.sharepoint.com/sites/internal/SharePoint/SitePages/ProjectDashboard.aspx?ProjectName=" + ProjectNameArray[i];
                    var imageURL= "https://projectadvocatesllc.sharepoint.com/sites/internal/SharePoint/Project%20Pictures/" + ProjectPictureArray[i] + ".png";

                    var newLink = document.createElement("A"); //create new link
                    var newLinkText = document.createTextNode(ProjectArray[i]); //new link text

                    var imageElement = document.createElement("IMG"); //create image for new link
                    imageElement.setAttribute("src", imageURL); //set the source for the new image

                    newLink.setAttribute("href", linkURL); //set the correct url for the link
                    newLink.appendChild(newLinkText); //add text to link
                    newLink.appendChild(imageElement); //add image to link


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

    <div id="pictureDisplay">

Update: Replaced old code with current code, reformatted question based on what I have learned about the solution.

Your Answer

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

Browse other questions tagged or ask your own question.