Contents tagged with javascript

  • Resize SharePoint 2013 App Part

    Tags: SharePoint 2013, javascript, Apps

    The new App Model of SharePoint 2013 comes with several options for development, one of these being an app part, which from the users perspective works very much like the web parts of old!

    However, from a developers point of view these work differently.  They are basically iframes pointing to your App Part page, which through the elements.xml file you can configure to point to any page.  By default Visual Studio will prompt you to create a separate aspx page as you create your Client WebPart aka App Part.

    As you’ll know iframes need a fixed width and height, this is less than ideal and that’s an understatement of epic proportions!!

    But wait, there is a solution!  From what I can see though it is dependant on you setting the app part page to the Default.aspx page of your App.  What you need is the senderId parameter from the query string and from what I can see you only get this with the Default.aspx page.

    Using the below carefully created xml and post message to the parent with the sender id you can resize the iframe based on the content.

    This needs to of course be called after the UI of your app part has been loaded, this could be in the well know jQuery function.

    $(document).ready(function () {
        resize();
    });

    or in the callback of your async data loading method.

    I use a little function to help me get query string params…

    getQueryStringParameter: function (name) {
         var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
         return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
    }

    And here is the little beauty to resize your iframe.

    var w = "100%"; // or some other dynamic way to get the width
    var h = $(document).height(); // or the height of your wrapper in the app part
    window.parent.postMessage("<message senderId=" + utils.getQueryStringParameter("SenderId") + ">resize(" + w + "," + h + ")</message>", "*");
     

    I don’t think for one second this is ideal, but it does work and from what I can see is the recommend way.

    In my opinion this is a step backwards in the development process and I’m very keen to see how I can do this with my own Client App Part page.

    Hope this helps.

    more...

  • Build JS file for .net Constants class

    Tags: PowerShell, javascript, SharePoint, SharePoint 2013

    It’s pretty common practice for me to have a Constants class in all my projects, especially so in SharePoint projects where you are likely to have Field name, Content Type ID’s and probably some GUID’s that you need.

    As I find myself more and more developing javascript solutions, I want access to those constants on the client side.  So taking inspiration from SharePoint (which generates a Strings object in javascript – see /_layouts/15/<lcid>/string.js, this file is auto generated by stsadm.exe.  I decided to cobble together a little script to build my js file.

    Say you have a .net constants class similar to this (I also use nested classes in my constants class).

    // Note: This file is autogenerated in JS for use on the client side.
    //       Do NOT put any sensitive string values in it.
    public static class MyStrings
    {
        public static class NestedOne
        {
            public static class NestedTwo
            {
                public const string Foo = "FooString";
                public const string Bar = "BarString";
    
                public static class NestedThree
                {
                    public const string Address1 = "AddressLine1";
                }
            }
    
            public static class NestedTwoTwo
            {
                public const string Location = "Location";
            }
    
            public const string AnotherOne = "SomeValue123";
        }
    }

     

    And use this PowerShell scripts (it’s a litle muddly I know, but it does work nicely!)
    Note: You could remove the string builder, its just there to help with debugging.

    The script is going to recursively loop through all your nested classes and build the required javascript file.

    clear
    $dllPath = 'C:\Constants.dll' #Path to dll containing Constants class
    $constantsClassName = "MyStrings" #Name of the .net constants class
    $jsClassName = "MyJsStrings"; #Name of the object in Javascript
    $outputJsFilePath = "C:\dump\MyJsStrings.js" #Place to save output js file
    
    # StringBuilder is just for debugging, you can change to simply write to stream
    $sb = New-Object -TypeName "System.Text.StringBuilder"
    $stream = [System.IO.StreamWriter] $outputJsFilePath
    
    function Append([string] $val) {
    	[Void]$sb.AppendLine($val)
    }
    
    Append "/* Copyright message ... "
    Append " * This file has been auto generated, do NOT edit"
    Append " */"
    
    function WriteFields ([System.Reflection.MemberInfo]$member, $parent) {
    	foreach($f in $member.GetFields() | where { $_.FieldType.Name -eq "String"}) {
    		$t = $jsClassName+"."
    		
    		if(-not [System.String]::IsNullOrWhiteSpace($parent)) {
    			$t += $parent+"."
    		} 
    		$t += $member.Name+"."+$f.Name+"='"+$f[0].GetValue($null)+"';"
    		Append $t
    	}
    	Append ""
    }
    
    function Recurse ([System.Reflection.MemberInfo]$member, $parent) {
    	WriteFields $member $parent
    	
    	foreach($mem in $member.GetMembers() | where { $_.IsClass -eq $true }) {
    		if(-not [System.String]::IsNullOrWhiteSpace($parent)) {
    			Append ($jsClassName+"."+$parent+"."+$member.Name+"."+$mem.Name+"=function(){};")
    			Recurse $mem ($parent+"."+$member.Name)
    		} else {		
    			Append ($jsClassName+"."+$member.Name+"."+$mem.Name+"=function(){};")
    			Recurse $mem $member.Name
    		}
    	}
    }
    
    # Load the dll
    # Doing it this way doesn't lock the file, could also be done with a new AppDomain
    
    $fileBytes = [IO.File]::ReadAllBytes($dllPath)
    
    $assembly = [Reflection.Assembly]::Load($fileBytes)
    
    # Get Constants class, could easily be modified if you have more that one class
    $classes = $assembly.GetTypes() | where { $_.Name -eq $constantsClassName }
    
    Append ("var "+$jsClassName+"=new Object();")
    
    foreach($c in $classes) {
    	foreach($m in $c.GetMembers() | where { $_.IsClass -eq $true }) {
    		$t = $jsClassName+"."+$m.Name+"=function(){};"
    		Append $t $m.Name
    		Recurse $m
    	}
    }
    
    Write $sb.ToString()
    $stream.Write($sb.ToString())
    $stream.Close();
    $stream.Dispose();

     

    The output is something like this…

    /* Copyright message ... 
     * This file has been auto generated, do NOT edit
     */
    var MyJsStrings=new Object();
    MyJsStrings.NestedOne=function(){};
    MyJsStrings.NestedOne.AnotherOne='SomeValue123';
    
    MyJsStrings.NestedOne.NestedTwo=function(){};
    MyJsStrings.NestedOne.NestedTwo.Foo='FooString';
    MyJsStrings.NestedOne.NestedTwo.Bar='BarString';
    
    MyJsStrings.NestedOne.NestedTwo.NestedThree=function(){};
    MyJsStrings.NestedOne.NestedTwo.NestedThree.Address1='AddressLine1';
    
    MyJsStrings.NestedOne.NestedTwoTwo=function(){};
    MyJsStrings.NestedOne.NestedTwoTwo.Location='Location';
    

     

    Add a link to that file in VS or add it to your _reference.js file and you’ll get nice intellisense!!

    Hope you find this as useful as I did!

    more...

  • 1