Skip to main content

Single Reference JavaScript Pattern for SharePoint 2013 App Development and Web Development (SRJ Pattern by Melick)

I have tried many different ways to properly organized JavaScript in my Developments. When I'm developing I have faced following issues.

  • Each and every place we need to include script files
  • IF one place change we need to change all the pages for references
  • Assume we need to update JQuery  version then we need to change all pages which refers scripts.

Thus i thought to work on my pattern with the help of JavaScript Loader to overcome this situation. I have used Head.js to dynamically load JavaScript's. There are few other JavaScript loaders such as

I have chosen Head.js because of performance and simplicity you can develop this pattern to work with any JavaScript loader. Head.js supports other css declaration and media queries as well. This pattern can be extended support css loading as well.

This is very simple pattern. In here you need to only refer one script in a page and It will take care of loading other scripts for you. So I'm sure it is saving your development time as well as script maintenance time.

How to Use the Pattern in Nutshell

image

When every thing is prepared you need to Only refer one script in your pages.

   If you want to write a code by loading common scripts then you need to say like

<script src="Scripts/ScriptBase.js"></script>
<script>
    BaseReady(function () {
        // Add you code Here
    });
</script>

   If you want to write a code after MyScript.js is loaded then you need to say like



<script src="Scripts/ScriptBase.js" ></script>
<script>
    BaseReady(function () {
        IncludeScript(js.app);
        ScriptReady(function () {
            // Write Your code here
        });
    });
</script>

   If you want to write a code after MyScript.js,Second.js is loaded  then you need to say like



<script src="Scripts/ScriptBase.js" ></script>
 
<script>
    BaseReady(function () {
        //app: '/Js/MyScript.js'
        IncludeScript(js.app); 
        // '/Js/Second.js' 
        IncludeScript(js.second);
        ScriptReady(function () {
           // Write your code here
        });
    });
</script>

With jQuery



<script src="Scripts/ScriptBase.js" ></script>
<script>
    BaseReady(function () {
        IncludeScript(js.app);
        ScriptReady(function () {
            $(document).ready(function () {
                // With jQuery
            });
        });
    });
</script>

How to Prepare the Pattern



  • You need to copy ScriptBase.js to your JavaScript folder. (My file is under Script Folder)
  • Then You Need to Download Head.Js and put it in to the same library. (You can take Head.min.js since it is minified to greater performance)
  • Open the ScriptBase.js


image



  • If you want any absolute URL you can put it in serverUrl. (But normally we wont)


image



  • BaseUrl is the Script Path related to Project Main hierarchy. For an example following scenario we can mentioned baseUrl as /Scripts. 


image


image



  • Then You can specify all the scripts you need in the project.There are three types of script references so far i found. You can extend it to any other ways if you want.

    • Scripts reside under BaseUrl
    • Scripts directly reference using absolute Url
    • Dynamically deciding script Url (Ex:- Based on Query String)


image 




var js =
{
  Head: '/head.js', // Original Path /Scripts/head.js
  jquery: '/jquery-2.0.3.js', // Original Path /Scripts/jquery-2.0.3.js
  app: '/Js/MyScript.js',    // Original Path /Scripts/Js/MyScript.js
  second: '/Js/Second.js',  // Original Path /Scripts/Js/Second.js
};



    • Scripts directly reference using absolute Url

      • You can directly put the Url


      var js =
      {
        lst: 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js'
      };

    • Dynamically deciding script Url (Ex:- Based on Query String)


      • In SharePoint development we need to refer JavaScript based on  URL parameter. For an example SPHostUrl and SPAppWebUrl. In here we can Specify the prefix of the Url with #tag (Ex- #SPHostUrl) and change the GetUrl() method to match the requirement.


image




  • After that if you want some scripts to load in every page (Ex:- JQuery) you need to add it to CommonScripts() Method. When adding scripts you can follow the below pattern. You can give a js.yourscript name.

image


Then you can use it for your project. (Refer How to Use the Pattern in Nutshell )

Labels:

Comments

Post a Comment

Popular posts from this blog

How to Link Two List and Create a combine view in the SharePoint 2010

In this way you can join multiple list together and can create a combine view. for an example assume that you are managing a list for some events. And also you are having a participants in separate list. Thus you want to join the two list and create a composite view. SharePoint 2010 allows you to create this kind of view using  Linked Data Source. in this approach you can create your own custom list in the SharePoint. How to Create a Linked Data source Go to SharePoint designer and  go to the link called data sources. And Click the Linked Data Source button in the ribbon. Then SharePoint designer will prompt following kind of a dialog. In there add two list, that you wan to linked together. I'm adding airline schedule and booking list. those are the two list that i wan to merge. then click next. And it will guide you another screen. it will ask you to select either Merge Merge use to combine list which are having same columns definition. for and example we can say th
32 comments
Read more

Motion Eye Docker compose File

Docker compose files are comes in handy when considering container orchestration. Below example shows my docker compose files and folder structure. ---- Your Folder (motioneye)   -- etc   -- lib   -- docker-compose.yaml You can run the docker compose file using docker-compose -d , and etc and lib folder will be automatically populated in the initiation. --- Below shows the content of the docker-compose.yaml file. version: '3' services:   nodered:    image: "ccrisan/motioneye:master-amd64"    container_name: motioneye    restart: always    user: root    ports:      - 8765:8765    volumes:      - "/etc/localtime:/etc/localtime:ro"      - "./etc:/etc/motioneye"      - "./lib:/var/lib/motioneye"
Post a Comment
Read more

How to get Username , UserID in CAML Query

If you are want to get the userID you can simple use following code. <Where>    <Eq>       <FieldRef Name='userfieldname' />       <Value Type='Integer'>            <UserID Type='Integer' />       </Value>    </Eq> </Where> in here you should declare the UserID variable before it uses. normally If you make a user filter in the SharePoint designer it will automatically create the parameter in parameter binding section in the web part. <ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/> But assume you want to filter using a user name and the field is not a persongroup feild and it is just a text field. then you can use following query to archive it. <Where>    <Eq>       <FieldRef Name='userfieldname' />       <Value Type=’Text’>            <UserID Type=’Text’/>       </Value>    </Eq> </Wh
9 comments
Read more