SharePoint Code Blocks (SPCB) - Introduction

What is SPCB?

SharePoint Code Blocks(SPCB) hosts various code blocks a.k.a functions that I have been using over the years which I think can help any SharePoint developer to accomplish most of the common requirements with ease.

Which SharePoint versions these blocks work on?

These blocks are supported in SharePoint 2013 and above environments including SharePoint Online(Classic view only). 

What you can do with SPCB?

• Convert SharePoint forms to Bootstrap forms
• Convert SharePoint date/timestamp to JavaScript format
• Easily get User info like logged in username, email, groups, etc. using SharePoint rest api
• Display SharePoint list data in Datatables and apply styling
• Add a search box with suggestion chips and filter the list

What you will learn in this post?

In this post I will walk you through the basic setup of SPCB. 

1. First thing first create a document library named "Customization"(up to you on the name part) where we are going to host all the files related to changes on the site.
2. Download the files needed for your project from SPCB GitHub repository and copy them to your newly created library. Usually I would arrange the folders in the order below.
3. Now lets create a file named OOO.html in the html folder. Lets leave it empty for now.
4. Create a  list named "Out of office requests" with columns below:
   
   
   
5. If you notice from the columns we have Decision, Decision comments in the list. So when you open the list form it includes those two fields both for new and edit forms. This is where we can use SPCB to ease the process of hiding based on condition.
6. Go to list settings -> Advanced Settings -> At the bottom of this page select Classic experience
   

   
   
   
   
   
7. Though it is a good option to include SPCB in the masterpage, most of the developers doesn't have access to the master pages. So lets add the SPCB.js to our page where we need it. In this case lets add this to our New and Edit form pages. 
8. Go to your list and click on "new item" it will open up the form in new page. 
9. Click on the gear button on the right corner and click "Edit page"
   
10. Once the page is in edit mode click on "Add a Webpart" and add a content editor webpart as shown below.

    

    
    
11.  Edit the webpart and paste the link to the "OOO.html" file (from step 3) into the "Content Link" box. Make sure to check the "Hidden" checkbox as below. That's it click on the ok button and stop editing the page. Going forward all the changes we need we make it to OOO.html.

    

    
    
12. Similarly we add our OOO.html to the edit page. To to this create a new item to the list and edit it. This will open up a page with edit form. Repeat steps 9,10 and 11. 
13. Lets go back to the file OOO.html that we created in step 3 and update it to reflect as below. For this introduction tutorial we are going to update the the code so that. 

• If New form:
• All fields are enabled by default
• Phone field follows the format 999-999-9999
• Hide fields Decision, Decision Comments
• If Edit form  
• Show fields Decision, Decision Comments
• All the fields except Decision and Decision Comments are disabled                                

New Form prior to adding the code:

New Form after adding the code:

• Phone number is restricted to have only numbers with a maximum of 10 numbers. Dashes are auto populated.
• Decision and Decision Comments are hidden from the form

Edit Form prior to adding the code:

• As an approving person I shouldn't be able to edit all the fields but in the form below I can.

Edit Form after adding the code:

• All the fields except Decision and Decision Comments are disabled. 

Code: