Ahmad Hijawi

SPLoader.js

A JavaScript plug-in for SharePoint 2013-2019 to create UI components in SharePoint pages without using any C# or JavaScript code.

How to use?

1- Upload SPLoader.js to your site and add references for JQuery and SPLoader.js in you master page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="/Style Library/JS/spLoader.js"></script>

2- Create your HTML Component.

<div sp-element="" sp-web-url="/" sp-list-title="Pages" sp-item-count="5" sp-order-field="ArticleStartDate" sp-order="desc">
  <div sp-repeat>
    <a sp-bind="FileRef,href">
      <img sp-bind="PublishingRollupImage,src;Title,title">
      <p sp-bind="Title,html"></p>
      <p sp-bind="ArticleStartDate,html"></p>
    </a>
  </div>
</div>

3- Add the html to your page.

maybe through Content Editor Webpart!

Thats is! good luck..

SPLoader.js html properties:

sp-element = no value needed, used on the root element of the component to be processed
sp-list-title = "list title"
sp-web-url = "/web"
sp-filter-field = "Boolean field internal name"
sp-item-count = "10"
sp-onload = callback to call after the component is loaded
sp-repeat = no value needed, used on the element that should be repeated for each item in the results
sp-bind = "a binding is a pair of field,attribute. you can chain bindings like this 'FieldName1,attr1;FieldName2,attr2;FieldName3,attr3'" eg: <img sp-bind="FileRef,src;Name,title" />. you can use attribute: html to map to inner html
sp-order = "desc" | "asc"
sp-order-field = "Field Internal Name"

How it works?

spLoader.js finds all elements with the attribute sp-element and extracts all the information needed to retrieve the data, then, it uses JSOM (JavaScript Object Model) to query for the data, after that, it maps all fields from the results to the corresponding elements in the repeat template (the element with attribute sp-repeat).