Custom page with prompt to query REST url - Whos up for a challenge?!!?!?

Hello,

I have a REST url that pulls in the employees user information. At the end of the URL is how it is filtered.

URL example: http://server/persons/search.xml?UserID=USERID

I am looking to create a page where you enter in the user id, and then click a button to filter. I am not sure how to do this using REST and data tables. I imagine that I would need to create a variable for the text field where you enter the user id, then concatenate that var with the URL?

New to using REST api, but would like to better understand how to populate tables based on the call. So my ideal page would have a text field, where you enter the user id, then a button which would set the new url, then call the api. Any suggestions would help.

Thanks

June 22nd, 2015 2:21pm

Hi,

If you want to get user information from SharePoint 2010, we can use SPService to achieve it, the following code snippet for your reference:

<script type="text/javascript">
$(document).ready(function (){
    $("#GetUserInfo").click(function(){
        if($("#UserID").val()!=""){
            $().SPServices({
                operation: "GetListItems",
                listName: "User Information List",
                CAMLQuery: "<Query><Where><Eq><FieldRef Name='ID' /><Value Type='Counter'>" + $("#UserID").val() + "</Value></Eq></Where></Query>",
                CAMLRowLimit: 1,
                completefunc: function (xData, Status) {
                     
                    var row = $(xData.responseXML).SPFilterNode("z:row").get(0);
                    var name = $(row).attr("ows_Name");                   
                    var email = $(row).attr("ows_Email");
                    var str="<table><tr><td>Name:</td><td>"+name+"</td></tr><tr><td>Email:</td><td>"+email+"</td></tr></table>";
                    $("#UserInfo").html(str);
                }
            });
        }
    });
});
</script>
<input id="UserID" type="text"><input id="GetUserInfo" type="button" value="GetUserInfo"/><br>
<div id="UserInfo"></div>

If you want to get user profile data, we can also use SPServices to achieve it.

https://code.msdn.microsoft.com/office/Javascript-function-to-cd7e8c60

Best Regards,

Dennis

Free Windows Admin Tool Kit Click here and download it now
June 23rd, 2015 9:52am

Hi, thanks for the reply, but that's not anything at all what I am looking to do. I am aware of SP services. I am not interested in pulling user information. I have a REST call that does that already as mentioned above. I am looking to use the REST api I have not SP Services.

Was hoping there would be someone who knew how to convert xml to show the data in a table. Thanks for the answer, but it does not help me :)

June 23rd, 2015 11:34am

Hi,

If you only want to know how to convert xml to a html table, the following code snippet for your reference:

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "http://server/persons/search.xml?UserID=USERID", 
        dataType: "xml",
        success: function(xml) { 
            $(xml).find('row').each(function(){ 
                var Col0 = $(this).find('Col0').text();
                var Col1 = $(this).find('Col1').text();
                var Col2 = $(this).find('Col2').text();
                $('<tr></tr>').html('<th>'+Col0+'</th><td>$'+Col1+'</td><td>$'+Col2+'</td>').appendTo('#UserData');
            });
        }
    });
});
</script>
<table id="UserData">
    <tr><td></td><th>Data header 1</th><th>Data header 2</th></tr>
</table>

I suggest you provide your basic requirement for further research,and then find a suitable solution for you.

Best Regards,

Dennis

Free Windows Admin Tool Kit Click here and download it now
June 24th, 2015 1:40am

Hi Dennis,

This is what I was hoping for. Unfortunately when I replace the Col0, 1, 2 with the columns from my xml the table returns nothing, and is blank.

I am referencing all of the js files within sharepoint

        <script type="text/javascript" src="/_layouts/microsoftajax.js"></script>
        <script type="text/javascript" src="/_layouts/1033/init.js"></script>
        <script type="text/javascript" src="/_layouts/sp.core.js"></script>
        <script type="text/javascript" src="/_layouts/ScriptResx.ashx?culture=en%2Dus&amp;name=SP%2ERes&amp"></script>
        <script type="text/javascript" src="/_layouts/sp.runtime.js"></script>
        <script type="text/javascript" src="/_layouts/sp.ui.dialog.js"></script>
        <script type="text/javascript" src="/_layouts/sp.js"></script>

Were you able to successfully create a table using an xml file you had?

I tried this...

<script type="text/javascript">
$(document).ready(function(){
alert("well its working");
    $.ajax({
        type: "GET",
        url: "http://www.w3schools.com/xml/note.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('row').each(function(){
                var Col0 = $(this).find('to').text();
                var Col1 = $(this).find('from').text();
                var Col2 = $(this).find('heading').text();
               
                $('<tr></tr>').html('<th>'+Col0+'</th><td>$'+Col1+'</td><td>$'+Col2+'</td>').appendTo('#UserData');


     });
      
        }
     
   
    });
    
   
});
 
   
         
</script>

</head>

<body>

<table id="UserData" style="width: 1119px">
    <tr><td></td><th>Data header 1</th><th>Data header 2</th></tr>
</table>

</body>


June 24th, 2015 8:33am

Hi Dennis,

This is what I was hoping for. Unfortunately when I replace the Col0, 1, 2 with the columns from my xml the table returns nothing, and is blank.

I am referencing all of the js files within sharepoint

        <script type="text/javascript" src="/_layouts/microsoftajax.js"></script>
        <script type="text/javascript" src="/_layouts/1033/init.js"></script>
        <script type="text/javascript" src="/_layouts/sp.core.js"></script>
        <script type="text/javascript" src="/_layouts/ScriptResx.ashx?culture=en%2Dus&amp;name=SP%2ERes&amp"></script>
        <script type="text/javascript" src="/_layouts/sp.runtime.js"></script>
        <script type="text/javascript" src="/_layouts/sp.ui.dialog.js"></script>
        <script type="text/javascript" src="/_layouts/sp.js"></script>

Were you able to successfully create a table using an xml file you had?

I tried this...

<script type="text/javascript">
$(document).ready(function(){
alert("well its working");
    $.ajax({
        type: "GET",
        url: "http://www.w3schools.com/xml/note.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('row').each(function(){
                var Col0 = $(this).find('to').text();
                var Col1 = $(this).find('from').text();
                var Col2 = $(this).find('heading').text();
               
                $('<tr></tr>').html('<th>'+Col0+'</th><td>$'+Col1+'</td><td>$'+Col2+'</td>').appendTo('#UserData');


     });
      
        }
     
   
    });
    
   
});
 
   
         
</script>

</head>

<body>

<table id="UserData" style="width: 1119px">
    <tr><td></td><th>Data header 1</th><th>Data header 2</th></tr>
</table>

</body>


  • Edited by Palumbob413 Wednesday, June 24, 2015 1:20 PM bew
Free Windows Admin Tool Kit Click here and download it now
June 24th, 2015 12:31pm

Hi,

Please check your jQuery version, the following code for your reference:

<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "http://www.w3schools.com/xml/note.xml", 
        dataType: "xml",		
        success: function(xml) {             
            var table = "<table border='1px'>";
            $(xml).find('note').each(function(){ 
                var Col0 = $(this).find('to').text();
                var Col1 = $(this).find('from').text();
                var Col2 = $(this).find('heading').text();                                     
                      
                table += "<tr><td>To:</td><td>" + Col0 + "</td></tr>";
                table += "<tr><td>From:</td><td>" + Col1 + "</td></tr>";
                table += "<tr><td>Heading:</td><td>" + Col2 + "</td></tr>";
            });
            table += "</table>";
            $("#UserData").html(table);
        },
		error:function(xml){
			//alert(xml);
		}          
    });            
});
</script>
</head>
<body>
<div id="UserData">
</div>
</body>
</html>

Best Regards,

Dennis

June 25th, 2015 12:15am

Hi Dennis,

I really appreciate all your help here. SO I copied your code, and tried it. Removed the commented alert, and the alert displayed "[object] [object] " and still I have a blank page.

I believe its due to cross domain. I created an internal xml and it worked fine. Are there different steps to take when trying to access cross domain xml?

Free Windows Admin Tool Kit Click here and download it now
June 25th, 2015 7:17am

Hi,

Please check the blogs below:

http://www.isgoodstuff.com/2012/07/22/cross-domain-xml-using-jquery/

http://cypressnorth.com/programming/cross-domain-ajax-request-with-xml-response-for-iefirefoxchrome-safari-jquery/

If this is a new question, I would suggest you post it in a new thread, it would make others easier to focus on one question in one single thread and it will benefit other community members who stuck with the same question.

Best Regards,

Dennis

June 25th, 2015 9:22pm

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics