Speed-up SharePoint customization with SPush crome extension

Hi everybody!

In my previous post I`ve described simple chrome extension SPush.
Now I`m going to show all the power of usage of this extension for SharePoint app developer or for a power user.

When:

• CSS or JS files you want to change are stored in SharePoint libraries;
• You are a SharePoint power user and you want to make quick changes in CSS or JS;
• You are a SharePoint developer and you want to speed-up the development of an Add-in or other feature which contains CSS/JS.

First let`s think about next use case and how do you usually do it:

Power user
Case:

If you want to change looking (hide a control, change color, add new functionallity, etc.) of a page you generally do following:

• create and css/js file 
• upload it to AssetsLibrary
• go to the apge and insert link to your css/js using ContentEditor or ScriptEditor webparts.

Sounds well and not so hard. But each time you decide to change your css/js you will have to:

1. download css/js files;
2. change the files;
3. upload to SharePoint again;
4. check how it affects on SharePoint;
5. If it doesn`t work as expected - go to step 2.

What do you think about point 5? 

If you aren`t really skilled in web technologies you will probably repeat steps 2-5 again and again to get a desired result and you will definettley look like this guy:

The solution:

1. open page where your css/js is apllied;
2. open any css/js in Chrome Dev tools;
3. open Sources tab;
4. find your css/js and do any changes directly inside the editor;
5. press "Cntrl+S" to save file and press F5 to refresh the page.

Voila! All the changes are saved to the edited file and you can check changes after refreshing of the page!
Next if you want to change something and look at the changes immediately then do all the stuff rapidly from step 4.

Samples:

#1: Add js script to several pages and edit on the fly from browser

Let`s imgine you have several pages with list of members and you want to select current user name in each team:

 

<ol id="teamNameList">   <li>      <p>​Demarcus Mathias(​email1@mail.com)<br/></p>
   </li>
   <li>
      <p>Brooke Norris(​email2@mail.com)​<br/></p>
   </li>
   <li>
      <p>Leah Logan(​email3@mail.com)<br/></p>
   </li>
   <li>
      <p>Ida Rogers(​email4@mail.com)<br/></p>
   </li>
   <li>
      <p>Margarita Goodwin(​email6@mail.com)<br/></p>
   </li>
   <li>
      <p>Eugene Hoffman(​email7@mail.com)<br/></p>
   </li>
   <li>
      <p>Maryellen Walden​(​email8@mail.com)<br/></p>
   </li>
   <li>
      <p>Sergey Shiroky (sergey.shiroky@spswide.onmicrosoft.com)</p>
   </li>
</ol>

1. Go to any library (e.c. Assets) and upload there an empty js file;
2. Go to each page and add this file to the page using ContentEditor webpart (or ScriptEditor);
   
   
   
   e.c. ​​<script type="text/javascript" src="/sites/dev/SiteAssets/test.js"></script>
3. Open one of the pages and press F12 to open Chrome Dev tools;
4. Find your script and add there next script:
   
   JS code:
   
   

   document.addEventListener("DOMContentLoaded", function() {    [].forEach.call(
       document.querySelectorAll("#teamNameList li"), 
       function(a){ 
        if(a.innerHTML.indexOf(_spPageContextInfo.userLoginName) !== -1){
         a.style.color = "red";
        }
       }
     );
   
   });
   
   

   

Press Cntrl+S and refresh each page by pressing F5 to see changes!

Don`t like red color, want to mark a person with an avatar or apply completely different logic?

It`s pretty simple now, you just need to go to step 4 and change script, refresh page and see changes immediately!

#2: Hide header and quick launch, show on mouse hover

1. 
   It`s, in few clicks you have made quick modification of your site css:Go to "Change look" page and select any template you want, for example "Orange";
2. Now simple open Chrome Dev Tools and add following css rule to themes css of template you selected on previous step;
   
   
   
   CSS code: 
   

   @-webkit-keyframes fadeIn {   0% { opacity: 0; }  20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }
   
   @keyframes fadeIn {
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }
   
   
   #sideNavBox, #suiteBarTop { 
     opacity: 0.1;
   }
   
   #sideNavBox:hover, #suiteBarTop:hover {
   
     opacity: 1;
     
     -webkit-animation-name: fadeIn;
     -webkit-animation-duration: 1s;
     animation-name: fadeIn;
     animation-duration: 1s;
   }
   
   
   

3. Press Cntrl+S and refresh page by F5.

In next post I will describe how to speed-up SharePoint development with SPush including specific of work with Add-in`s, JSLink and modules.

GitHub
Spush intro

Original Post with code samples

See you later and Thank you!

by Sergey Shiroky via Everyone's Blog Posts - SharePoint Community