SharePoint 2010 - pull value from SharePoint list and pass through HTML link

Question

I have a list with a column that contains a url. For exmaple:

--LIST--

ID          Name        URL
1           MSN         http://www.msn.com

--

Now, what I need to do is pull the value in the URL column and pass it to a link in a content editor webpart. For example:

--Content Editor Webpart HTML--

<a href="{value in column 3}">MSN</a>

--

Is this possible? I would imagine it might be using Javascript. Thanks in advance for any information!!

Answer 1

Hi you can also use webservice for getting listitem.

try this in your content editor webpart

<div class="testing"></div>

create one div for append links

insert script after that

<script type="text/javascript">    
function processResult(xData, status) {
       $('.testing').empty();
       $(xData.responseXML).find("z\\:row").each(function() {

             var title = $(this).attr("ows_Title");
             var url = $(this).attr("ows_Url");
             $('.testing').append("<a href="+url+">"+title+"</a>");

       });
   }



   $(document).ready(function() {
       var soapEnv =
           "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
               <soapenv:Body> \
                    <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                       <listName>YourListname</listName> \
                       <viewFields> \
                           <ViewFields> \
                              <FieldRef Name='Title' /> \
                              <FieldRef Name='Url' /> \
                          </ViewFields> \
                       </viewFields> \
                   </GetListItems> \
               </soapenv:Body> \
           </soapenv:Envelope>";
       $.ajax({
           url: "/_vti_bin/lists.asmx",
           type: "POST",
           dataType: "xml",
           data: soapEnv,
           complete: processResult,
           contentType: "text/xml; charset=\"utf-8\""
       });
   });

</script>

Answer 2

Here is a blog post that talks about how to add JavaScript to the CEWP.

But I like to use the HTML Form Web Part for this myself.

Now it comes down to how to get the link. Without knowing the criteria you wish to use to pick the row from the list it is hard to give you a very good example. But here is something to get you started.

Notice I like to use JQuery in my SharePoint pages... You might need to Google how to add JQuery to your pages.

$(document).ready(function(){ExecuteOrDelayUntilScriptLoaded(function(){
    
    var context = new SP.ClientContext.get_current();
    var list = "Name of List";
    var view = "Name of View;
        list = context.get_web().get_lists().getByTitle(listTitle); 
        view = list.get_views().getByTitle(viewTitle); 
        context.load(view); 
    
    context.executeQueryAsync( 
        function(sender, args) {getLinkListItem("<View><Query>" + view.get_viewQuery() + "</Query></View>")}, 
        function(sender, args) {alert("error: " + args.get_message());} 
    );

    }
    }, 'sp.js')});
   
 function getLinkListItem(camlQuery){
      var context = SP.ClientContext.get_current();
      var approvalList = context.get_web().get_lists().getByTitle(listTitle);
      
      var query = new SP.CamlQuery(); 
      query.set_viewXml(camlQuery); 
      
      listItems = approvalList.getItems(query);
      context.load(listItems);

      context.executeQueryAsync(ReadListItemSucceeded, ReadListItemFailed);
}
   
function ReadListItemSucceeded(sender, args) {
  var itemsString = '';
  var enumerator = listItems.getEnumerator();
  
  //Use this while to populate your link tags with the proper URLs.
  while (enumerator.moveNext()) {
    var listItem = enumerator.get_current();
    var link = listItem.get_item('URL').toString();
    //Logic here.
  }
}

function ReadListItemFailed(sender, args) {
  alert('Request failed.');
}

Here are some links on the JavaScript Client Object Model you will find useful in modifying your script.

1. Chapter 13: SharePoint Client Object Model and jQuery (Professional SharePoint Branding and User Interface Design).

2. Using the SharePoint Foundation 2010 Managed Client Object Model