Microsoft has clearly mentioned in their key notes, they are building the framework and it is related samples using KnockoutJs and ReactJs with Typescript. Since it is an open-source based development model, choosing the framework/technologies are completely our choices, based on our knowledge and requirements. Here I have listed out a few front-end technologies.
Add Content Editor Web part (CEWP) to the SharePoint page.
Save the below script as a text file and upload it to Site Assets page.
Refer the script file from the CEWP.
Script:
<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() { SP.SOD.executeFunc('sp.js', 'SP.ClientContext', setJSLink); }); var oView; function setJSLink() { //Get the client context,web and list object var clientContext = new SP.ClientContext(); var oWebsite = clientContext.get_web(); var oList = oWebsite.get_lists().getByTitle('Products'); //Get the view object and set the jsLink property oView = oList.get_views().getByTitle('CustomProductView'); oView.set_jsLink("~site/siteassets/ListViewModification.js"); oView.update(); //Load the client context and execute the batch clientContext.load(oView); clientContext.executeQueryAsync(QuerySuccess, QueryFailure); } function QuerySuccess() { console.log("JSLink has been set to the view."); } function QueryFailure(sender,args) { console.log('Request failed'+ args.get_message()); } </script>
Add Content Editor Web part (CEWP) to the SharePoint page.
Save the below script as a text file and upload it to Site Assets page.
Refer the script file from the CEWP.
Script:
<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() { SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getAllFolders); }); var oListItem,collListItem,clientContext; function getAllFolders() { //Get client context,web and list object clientContext = new SP.ClientContext(); var oWeb= clientContext.get_web(); var oList = oWeb.get_lists().getByTitle('Demo Library'); //use caml query to get the folder collection var camlQuery = new SP.CamlQuery(); camlQuery.set_viewXml("<View Scope='RecursiveAll'><Query><Where><Eq><FieldRef Name='FSObjType'/><Value Type='Text'>1</Value></Eq></Where></Query></View>"); camlQuery.set_folderServerRelativeUrl('/Sites/Playground/Demo Library/NewFolder'); collListItem = oList.getItems(camlQuery) //Load the client context and execute the batch clientContext.load(collListItem); clientContext.executeQueryAsync(Success, Failure); } function Success() { //get the folder collection and loop through it var listItemEnumerator = collListItem.getEnumerator(); var oListItem; while (listItemEnumerator.moveNext()) { oListItem = listItemEnumerator.get_current(); console.log(oListItem.get_item('FileLeafRef')); } } function Failure(sender,args) { console.log('Request failed with error message - '+ args.get_message()+' . Stack Trace - '+ args.get_stackTrace()); } </script>
Add Content Editor Web part (CEWP) to the SharePoint page.
Save the below script as a text file and upload it to Site Assets page.
Refer the script file from the CEWP.
Script:
<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() { SP.SOD.executeFunc('sp.js', 'SP.ClientContext', setAsOwner); }); var oGroupUsers; function setAsOwner() { //Get client context and web object var clientContext = new SP.ClientContext(); var oWeb = clientContext.get_web(); //Get group collection and specific group var groupCollection = oWeb.get_siteGroups(); oGroup = groupCollection.getByName("HR Group"); //Set as owner var oUser = clientContext.get_web().ensureUser('i:0#.f|membership|User@abc.on microsoft.com'); oGroup.set_owner(oUser); oGroup.update(); //Load the client context and execute the batch clientContext.load(oGroup); clientContext.executeQueryAsync(QuerySuccess, QueryFailure); } function QuerySuccess() { console.log("Group Owner set."); } function QueryFailure(sender,args) { console.log('Request failed'+ args.get_message()); }