Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Load SharePoint data to Tabulator table via REST, then save selected items to LocalStorage
<!-- Tabulator.js styles-->
<link href="/site/wz-eva/makecard/js/tabulator.min.css" rel="stylesheet">
<!-- Custom styles-->
<style>
.tabulator-selected .workzonecheckbox::after {
content: 'x';
}
#personnelTable {
min-height: 100px;
background-image: url('/_layouts/15/images/gears_an.gif');
background-repeat: no-repeat;
background-position: center center;
}
.tabulator-paginator button {
width: auto;
min-width: auto;
}
#makeCardsWrapper {
position: fixed;
bottom: 0;
background: #fff;
padding: 0% 3%;
right: 0;
z-index: 100;
width: 94%;
border-top: 2px solid #999;
box-shadow: -0px 3px 14px #999;
}
</style>
<!-- tabulator generated table is injected here -->
<div id="personnelTable">
Loading Records...
</div>
<!-- Button to grab selected IDs and save to local storage -->
<div id="makeCardsWrapper">
<button class="button important" disabled id="getSelectedItems">Make <span id="getSelectedItemsNumber"></span>
Cards</button>
</div>
<!-- Axios to load SharePoint Data, Moment.js to format dates, and Tabulator to build the table -->
<script src="/Style%20Library/js/axios.min.js"></script>
<script src="/site/wz-eva/makecard/js/moment.min.js"></script>
<script src="/site/wz-eva/makecard/js/tabulator.min.js"></script>
<script>
// This section handles buildling the table, injecting loaded data, and hanlding interactivity.
// Get selected IDs from list, passes them to make-multi-card.aspx
var getSelectedItems = document.getElementById('getSelectedItems');
var getSelectedItemsNumber = document.getElementById('getSelectedItemsNumber');
// Event listener for button to make cards
getSelectedItems.addEventListener("click", function (e) {
e.preventDefault();
var _cardsToPrint = localStorage.getItem("cardsToPrint")
window.open("/site/wz-eva/makecard/default.aspx?cardID=multi", "_blank");
})
// Make the table in the DOM first, then populate with data.
var selectedNumber;
function makeTable() {
var personneBuildlTable = new Tabulator("#personnelTable", {
selectable: true,
selectableRangeMode: "click",
layout: "fitDataFill",
reactiveData: true,
data: loadedData,
// autoColumns:true,
pagination: "local", //enable local pagination.
paginationSize: 100,
paginationSizeSelector: [100, 250, 500, 1000],
rowSelectionChanged: function (data, rows) {
// Fire after a row selection occurs. Creates an array of SharePoint IDs!
var _selectedRows = []
rows.forEach(function (_rowdetails) {
_selectedRows.push(_rowdetails._row.cells[1].value)
})
// ... and stores it in LocalStorage
localStorage.setItem("cardsToPrint", JSON.stringify(_selectedRows))
selectedNumber = rows.length;
if (selectedNumber > 0) {
getSelectedItems.removeAttribute("disabled");
} else {
getSelectedItems.setAttribute("disabled", "disabled");
}
rows.forEach(function (row) {
// console.log(getSelectedItems)
getSelectedItemsNumber.innerHTML = selectedNumber
//console.log(row._row.data.ID)
})
},
columns: [
{ title: "", align: "center", headerSort: false, cssClass: "workzonecheckbox" },
{ title: "ID", field: "Id", visible: false },
{ title: "Last Name", field: "LastName", formatter: "plaintext", headerFilter: "input" },
{ title: "First Name", field: "FirstName", formatter: "plaintext", headerFilter: "input" },
{ title: "MI", field: "MI", formatter: "plaintext" },
{ title: "Unique #", field: "UniqueNum", headerFilter: "input" },
{ title: "Training Firm", field: "TrainingFirm", formatter: "plaintext", headerFilter: "input" },
{ title: "Cert. Type", field: "CertificationType", formatter: "plaintext", headerFilter: "input" },
{ title: "Training Program", field: "TrainingProgram", formatter: "plaintext", headerFilter: "input" },
{ title: "Trained By", field: "TrainedBy", formatter: "plaintext", headerFilter: "input" },
{
title: "Expires", field: "ExpirationDate",
formatter: "datetime",
sorter: "date",
formatterParams: {
inputFormat: "YYYY-MM-DD",
outputFormat: "MM/DD/YY",
invalidPlaceholder: "(invalid date)",
}, sorterParams: { format: "YYYY-MM-DD" }
},
{
title: "Class Date",
field: "ClassDate",
formatter: "datetime",
sorter: "date",
formatterParams: {
inputFormat: "YYYY-MM-DD",
outputFormat: "MM/DD/YY",
invalidPlaceholder: "(invalid date)",
}, sorterParams: { format: "YYYY-MM-DD" }
}
]
});
}
</script>
<script>
// This section loads the data, and instructs the interface to create a tabulator table.
// SharePoint List data source and REST query
var personnelList = 'Personnel'
var fullQueryTop = "/site/wz-eva/_api/web/lists/GetByTitle('" + personnelList + "')/Items?$top=1000&$skiptoken=Paged=TRUE&$select=ID,UniqueNum,Title,MI,LastName,FirstName,ExpirationDate,TrainedBy,ClassDate,TrainingFirm,CertificationType,TrainingProgram,AuthorId&?OrderBy=Created";
// Holds REST loaded results:
var loadedData = [];
// This function is recursive and is called repeatedly until all paginated results are loaded into the table.
// Recursive!
function loadPersonnel(nextLink) {
axios.get(nextLink)
.then((response) => {
response.data.value.forEach(function (items) {
loadedData.push(items)
});
// If there's another batch of results, run this function again
if (response.data["odata.nextLink"]) {
console.log('Some records loaded. Going back for more records now.')
return loadPersonnel(response.data["odata.nextLink"])
} else {
// If there's only one batch, or this is the last one, build the table.
makeTable();
return console.log("All data loaded. Make table")
}
})
.then((response) => {
console.log('Recording Loading Function Complete');
}).catch(function (err) {
alert("There was an error loading this data: " + err);
console.error(err);
});
};
// Kicks off the above function
loadPersonnel(fullQueryTop);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.