asked on

SharePoint List Custom HTML Rest and Javascript

I have a list with 3 columns. Title, Header, Url . I would like to pull those values using the REST API and create 3 columns. The Titles are URLs from the URL column. I would be like this:

List:
Header Title Url
Company 1 Title Url
Company 1 Title Url
Company 1 Title Url
Company 1 Title Url
Company 2 Title Url
Company 2 Title Url
Company 2 Title Url
Company 3 Title Url

HTML via Javascript

Company 1 Company 2 Company 3
Title Title Title
Title Title
Title Title
Title

leakim971

would be great to have html of this "List", do a right click on it, choose inspect, right click on the root element of this list on the right and choose "copy outer html" and paste it here

Software Squirrel

ASKER

It is a SharePoint list that I am getting the data from using REST. I need to reformat it into columns using custom HTML and Javascript.

leakim971

so post the data

Software Squirrel

ASKER

It's very simple. This is just a POC. If you want what the code would be something like, it would be like this.

<html>
<table>
<tr><td><b>First Column</b></td><td><b>Second Column</b></td><td><u>Third Column</b></td></tr>
<tr><td><u>Somthing</u></td><td><u>Nothing</u></td><td><u>Juice</u></td></tr>
<tr><td><u>Milk</u></td><td><u>Water</u></td><td><u></u></td></tr>
</table>
</html>

Open in new window

leakim971

test page : https://jsfiddle.net/v2o9u3kj/

<script>
jQuery(function($) {
	var data = {};
  var maxiRow = 0;
	$("tr:gt(0)" ,"table").each(function(i, v) {
  	var company = $("td:first",this).text();
    var title = $("td:last", this).text(); //  The Titles are URLs from the URL column
  	if(!data[company]) {
    	data[company] = [];
    }
    data[company].push(title);
    if(data[company].length>maxiRow) {
    	maxiRow = data[company].length;
    }
  });
  $("<table id='table1'></table>").insertAfter("table");
  for(var company in data) {
    if(!$("#table1 tr:eq(" + i + ")").length) {
    	$("#table1").append("<tr/>")
    }
  	$("#table1 tr:eq(0)").append("<td>" + company + "</td>")
  	for(var i=0;i<maxiRow;i++) {
    	if(!$("#table1 tr:eq(" + (i+1) + ")").length) {
      	$("#table1").append("<tr/>")
    	}
    	$("#table1 tr:eq(" + (i+1) + ")").append("<td>" + (data[company][i]||'-') + "</td>");
    }
  }
});
</script>

Open in new window

Software Squirrel

ASKER

Let me give another explanation.
List:

Code wanted (sorry, I know it's wonky but I hope it gives a clear understanding)

select columns - I know this part - -I'm pulling from a SharePoint List with REST using Ajax

var header = []
var doc = []

if isTitle = Yes + header + (<b>RunbookHeader.value</b>, column = column.value , order = order.value)
if isTitle = No + doc + (a href="RunbookURL">RunbookHeader</a> , column.value = , order = order.value )

Results in HTML (ignore the style, I only put it ther so you can see how I separated it. Bold is in the code above)

<b>Fruit</> <----- bold Title from RunbookHeader, order will be on top, column tells if it is column 1,2,3 (<--header)
Apples <----- Link from RunbookURL and Title from RunbookHeader, column tells if it is under column 1,2,3, order tells whick order under header (<--doc>
Bannanas

<b>Drink</> <----- bold Title from RunbookHeader, order will be on top, column tells if it is column 1,2,3 (<--header)
Water <----- Link from RunbookURL and Title from RunbookHeader, column tells if it is under column 1,2,3, order tells whick order under header (<--doc>

<b>Office</> <----- bold Title from RunbookHeader, order will be on top, column tells if it is column 1,2,3 (<--header)
Pencil <----- Link from RunbookURL and Title from RunbookHeader, column tells if it is under column 1,2,3, order tells whick order under header (<--doc>
Paper

Fruit Drink Office <--header
Apples Water Pencil <--doc
Bananas Paper <--doc

Software Squirrel

ASKER

I coded the whole thing by hand in HTML and CSS, includes Data hard coded. I it is exactly how I need it, but I need it to be dynamic from a SharePoint list using REST. I will post the code soon.

leakim971

waiting

Software Squirrel

ASKER

@leakim971. - Here is the code. As you can see, it’s all the same repeated. I just need to pull in the fields for Heading, Title and URL

[code]<style>
#text a {
text-decoration: non !important;
}

.static {
line-height: normal
}

.p.solid {
borderstyle: solid;
}

body {
font-family: "Segoe UI Bold", "Segoe UI";
font-style: normal;
line-height: 10px;
font-size: 14px;
}

#text a {
line-height: 1.4em;
}

.clearfix {
clear: both;
}

.methodTitle {
font-family: "Segoe UI Light";
font-weight: 700;
font-style: normal;
color: #337fc0;
font-size: 13px;
text-decoration: none;
}

.methodTitle a {
text-decoration: none;
color: #337fc0;
font-weight: 700;
line-height: 10px;
}

.methodsCol {
float: left;
width: 33%;
}

.methodLetter2 {
            font-weight: 700;
            color: #666;
font-size: 13px
      }

.methodHeading2 {
font-family: "Segoe UI Light", "Segoe UI";
font-weight: 300;
font-style: normal;
font-size: 24px;
color: #808080;
line-height: normal;
}
</style>
[/code]
<body>
<div>
<p class="methodHeading2"></p>
</div>
<div style="margin-top:20px">
<div class="methodsCol">
<div style="margin-bottom:15px;"><span class="methodLetter2">AMC<br /></span>
</div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com"><b />AMC
</a><br /></span></div>
<div style="margin-bottom:15px;"><span class="methodLetter2">C I T<br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - </a><br /></span>
</div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - Australia -
V1</a><br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - Austrailia -
V2</a><br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - China</a> <br /></span>
</div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - Belgium</a><br /></span>
</div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - Mexico</a><br /></span>
</div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T -
Netherlands</a><br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - Germany</a><br /></span>
</div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - </a><br /></span>
</div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - France</a><br /></span>
</div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - United
States</a><br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - United Kingdom - V1</a>
<br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">C I T - United Kingdom - V2</a>
<br /></span></div>
<div style="margin-bottom:15px;"><span class="methodLetter2">GIT
P<br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">GIT P -
V1</a><br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">GIT P -
V2</a><br /></span></div>
</div>
<div class="methodsCol">
<div style="margin-bottom:15px;"><span class="methodLetter2">MS<br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">MS - V1</a><br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">MS - V2</a><br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">TT</a><br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">SME</a><br /></span>
</div>
</div>
<div class="methodsCol">
<div style="margin-bottom:15px;"><span class="methodLetter2">P<br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">P - Poland</a><br /></span></div>
</div>
</div>
<div class="methodsCol">
<div style="margin-bottom:15px;"><span class="methodLetter2">SR<br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">SR - - V1</a><br /></span>
</div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">SR - - V2</a><br /></span>
</div>
</div>
<div class="methodsCol">
<div style="margin-bottom:15px;"><span class="methodLetter2">TP<br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a
href="https://xyz.com">TW</a><br /></span></div>
</div>
<div class="methodsCol">
<div style="margin-bottom:15px;"><span class="methodLetter2">US<br /></span></div>
<div style="margin-bottom:15px;"><span class="methodTitle"><a href="https://xyz.com">US
</a><br /></span></div>
</div>
</div>
</body>

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.