SyntaxHighlighter

Thursday, December 17, 2015

Merging DLL project Settings with WebApp web.config

Recently I was working on MVC Web API project and needed to store key / value pairs. I decided to use <applicationsettings> because it is strongly typed and compiler auto-generates Settings class with each key as property. But I wanted to create Settings in referenced DLL project with external XML file to hold configuration items. As DLL can’t have their own .config file, I have to merge settings to Web application web.config file. This post describes steps to merge settings DLL project settings with Web application web.config file.

Creating new Settings was easy. Open DLL project Properties, click on “Settings” tab, click Create new settings link. New file will be created under Properties folder named: Settings.settings and App.config will be updated as follows:

<configuration>
  <configSections>
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <sectionGroup name="applicationSettings" type="System.Configuration.ApplicationSettingsGroup, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" >
      <section name="{Project Namespace}.Properties.Settings" type="System.Configuration.ClientSettingsSection, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
    </sectionGroup>
  </configSections>
  <applicationSettings>
    <{Project Namespace}.Properties.Settings>
      <setting name="MyFirstSetting" serializeAs="String">
        <value>1234</value>
      </setting>
    </{Project Namespace}.Properties.Settings>
  </applicationSettings>
</configuration>

Step 1 – Externalize setting file in DLL project


This can done by updating App.config file as below.
...
<applicationSettings>
    <{Project Namespace}.Properties.Settings configSource="serviceSettings.config" />
</applicationSettings>
Create new xml file “serviceSettings.config” (same folder as App.config) and move all settings to this new file.
<{Project Namespace}.Properties.Settings>
  <setting name="MyFirstSetting" serializeAs="String">
    <value>1234</value>
  </setting>
</{Project Namespace}.Properties.Settings>
At this point you have created external settings file.

Step 2 – Merge with web.config


Open web.config and copy following fragment from App.config to web.config under <configuration> >> <configSections> node.
<sectionGroup name="applicationSettings" type="System.Configuration.ApplicationSettingsGroup, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" >
      <section name="{Project Namespace}.Properties.Settings" type="System.Configuration.ClientSettingsSection, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
</sectionGroup>
And add these line under <configuration> node.
<applicationSettings>
  <{Project Namespace}.Properties.Settings configSource="serviceSettings.config" />
</applicationSettings>
And copy “serviceSettings.config” file from DLL project to Web application (same folder as web.config)

Finally you are done. You can now access strongly typed Settings in your DLL project.
{Project Namespace}.Properties.Settings.Default.MyFirstSetting
To automate copy operation, you can write post build command to move serviceSettings.config file from DLL project to Web application project folder.
  
Hope this helps someone.

Thanks,
-Javed

Wednesday, December 2, 2015

SharePoint + TypeScript + Angular + Gulp + Visual Studio 2015 + more

I have been playing with Angular, Node and Gulp frameworks for a while mostly with WebStorm IDE and recently started using TypeScript and I love it. To learn and understand how these framework will integrate with SharePoint solution, I created simple Web Part farm project which does nothing at the moment, except few text boxes binding with Angular. WebStorm does not support SharePoint Solution, but luckily the recent release of Visual Studio 2015 has built-in support for Node, Task Runner and Bower. You can also add Task Runner support in Visual Studio 2013 by installing this plugin.

This post is about my learning experience integrating all these technologies together with SharePoint, Visual Studio and Gulp workflows. Here is the list of tools/frameworks I used:

Node – JavaScript runtime engine
Angular – JavaScript framework
jQuery – JavaScript framework
Gulp – Automation and build workflow (install global only)
Typescript – Built-in support in VS.NET 2015. Other version requires WebEssentials
TSD – DefinitelyType definition for Typescript repository.
Bower – Front-end optimized framework/libraries package manager. VS.NET 2015 has built-in support for Bower.
NPM – Node package manager (comes with Node)
Git – required by NPM and Bower

You can open link for instructions to install on your environment.


Step 1 – Create SharePoint Project


Create empty SharePoint 2013 project and added SharePoint Project Item: EmpDir_Module. This is the folder where we will be generating compiled/bundled/minified typescript file and other JavaScript files which we will be deploying to SharePoint. You can create dummy placeholder files and include it in Elements.xml or once files are copied (by Step 6) you can use "Include in Project" and update Elements.xml.


Step 2 – Setup


I assume all tools are installed and ready to go. First we need to initialize *.json files which contains references to files dependencies with versions installed, which can be used by other developers to bring in all dependencies.

Open Command Prompt, navigate to root Project directory and run following commands. I tried running this command from Visual Studio Package Manager Console but it hanged. These commands will ask series of questions to initialize *.json file.

$ npm init
- this command creates package.json file
$ bower init
- this command creates bower.json file
$ tsd init
- this command creates tsd.json and folder “typings”


Step 3 – Install Dependencies


Once we have all the *.json files, we can begin installing dependencies for our project. We can run these command either from external command prompt of Visual Studio Package Manager Console window.

$ npm install --save-dev gulp
- install gulp for the project and save as DEV dependency in package.json
$ npm install --save-dev gulp-concat gulp-print gulp-rename gulp-sequence gulp-typescript -uglify run-sequence
- install gulp plugins and save as DEV dependency in package.json

* Note : npm installs all components under “node_modules” folder in root.

$ bower install jquery angular --save
- install jquery and angular framework and save dependency in bower.json

* Note : bower installs all components under “bower_components” folder in root.

$ tsd install jquery angular --save
- install jquery and angular DefinitelyTyped definitions and save dependency in tsd.json

* Note : tsd installs all components under “typings” folder in root.

* Note : --save switch will record dependency as minimum required and if latest version available, will download the latest build. If you want to stick to any version, you can use --save-exact switch.


Step 4 – Write code


Before you start writing Typescript files, it’s better to decide the project folder structure. There is awesome Angular style guide compiled by John Papa here. As we are not going to deploy *.ts (typescript files) to SharePoint, I prefer to keep those files away in a separate folder. Here is how my project folder structure looks like:


I have created folder: “App” which contains typescripts source and compiled JavaScript files under “TScripts” and “compiled” folders. I have not included “bower_components”, “node_modules” and its contents to the project, as we are not deploying these files. We do need files from “bower_components” and will see how to deploy those as Module. I added “typings” folder, as I sometimes open *.d.ts files to see method signature or interface description. In Visual Studio you can select any method on typescript file and hit F12 will take you to method definition in *.d.ts file. Pretty handy.

I will not discuss about writing angular in Typescript, as that is a huge topic in itself. Pluralsight has several trainings on this subject.

Typescript file naming convention is for a reason we will see when we go to Gulp section. The naming convention will come handy during bundling and order of files.


Step 5 – Write Gulp Workflow


This is where all magic happens. Create a new JavaScript file: “gulpfile.js” in the root and copy/paste content below:
/// <binding BeforeBuild='default' />
/**
 * Created by Javed on 8/15/2015.
 */
'use strict';

var gulp = require('gulp'),
    gprint = require('gulp-print'),
    runSequence = require('run-sequence'),
    ts = require('gulp-typescript'),
    bundle = require('gulp-concat'),
    minify = require('gulp-uglify'),
    rename = require('gulp-rename');

var paths = {
    "TSSrc": 'App/TScripts/',
    "JSCompiled": 'App/compiled/',
    "JSDest": 'EmpDir_Module',
    "BowerSrc": "bower_components/"
}

var config = {
    "TypeScriptFiles": [
        paths.TSSrc + '**.ts'
    ],
    "BowerFiles": [
        paths.BowerSrc + 'jquery/dist/jquery.min.js',
        paths.BowerSrc + 'angular/angular.min.js'
    ],
    "BundleSrc": [
        paths.JSCompiled + '*.module.js',
        paths.JSCompiled + '*.config.js',
        paths.JSCompiled + '*.run.js',
        paths.JSCompiled + '*.constant.js',
        paths.JSCompiled + '*.directive.js',
        paths.JSCompiled + '*.service.js',
        paths.JSCompiled + '*.controller.js'
    ],
    "BundleFileName": "ed.bundle.js",
    "MinifyFileName": "ed.bundle.min.js"
}

gulp.task('compile', function () {
    var tsc = gulp
        .src(config.TypeScriptFiles)
        .pipe(gprint())
        .pipe(ts({ "noImplicitAny": true, "removeComments": true }));

    return tsc.js.pipe(gulp.dest(paths.JSCompiled));
});

gulp.task('bower', function () {
    return gulp
        .src(config.BowerFiles)
        .pipe(gprint())
        .pipe(gulp.dest(paths.JSDest));
});

gulp.task('prod_build', function() {
    return gulp
        .src(config.BundleSrc)
        .pipe(bundle(config.BundleFileName))
        .pipe(gprint())
        //.pipe(rename(config.MinifyFileName))
        //.pipe(minify())
        .pipe(gulp.dest(paths.JSDest));
});

gulp.task('default', function () {
    runSequence('compile', 'bower', 'prod_build');
});

You can read more on Gulp here. I will explain in brief about gulpfile.js and each task.

As gulpfile.js is plain JavaScript file, you can define your own variable and functions. I have defined 2 variables “paths” and “config” objects with property for source, destination or file name which we will be using in gulp tasks. I found this approach to be better than hard coding paths in tasks definition itself.

Compile task:
  1. Grab all *.ts files under “App/TScripts” folder
  2. Compile to JavaScript
  3. Copy output to “App/compiled” folder
Bower task:
  1. Grab bower_component files like jquery, angular
  2. Copy to SharePoint module folder “EmpDir_Module”
Prod_Build task:
  1. Grab all compiled JavaScript from “App/compiled” folder in same order as defined in config.BundleSrc array
  2. Conact all files and save “ed.bundle.js”
  3. Rename file to “ed.bundle.min.js”
  4. Minify/uglify this file
  5. Copy to SharePoint module folder “EmpDir_Module”   
Default task:
  1. Run all tasks in sequence.
* Note : When default task in defined executing “gulp” command with no parameter runs default task. You can run individual task by executing “gulp bower” from command line or VS Package Manager Console.


Step 6 – Attaching Gulp task with Visual Studio build event


The last step. Open Task Runner from View > Other Windows > Task Runner Explorer. You should see Gulpfile.js node with all task names. Right click on any task and select Bindings to attach to any build event. See the screenshot below, where default task is attached to Before Build event.


* Note : While in development mode, you can write new task "dev_build" and instead of copying to Module folder, you can map Style Library or any other library (where you are deploying your .js files) and copy to this mapped location. No need to deploy WSP package :)

This concludes the long post. Hope this help someone.

Thanks,
-Javed

Tuesday, June 17, 2014

JSLink: Display Form and jQuery animation

This is short 3rd post of JSLink series where I added customization to display form with jQuery animation. If you are not adding jQuery through master page or custom action or delegate control, you can add jQuery before override script, as JSLink allows us to include multiple JavaScript files separated by pipe symbol '|'.

Here is the override script:

// JavaScript source code
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};

    overrideCtx.Templates.Fields = {
        'PercentComplete': {
            'NewForm': customField,
            'EditForm': customField,
            'DisplayForm': customDisplayField //override display form
        }
    }

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function customDisplayField(ctx) {
    //get percent complete and return div element with id to be used in animation
    var completed = ctx.CurrentItem["PercentComplete"].replace(/\s+/g, '');
    return "<div id='pctComplete' style='background-color:red;width:0%'>" + completed + "</div>";
}

function customField(ctx) {
    .... (removed for clarity)
}

//load animation
$(document).ready(function () {
    //get percent complete eg: 50% for using as animate width
    var pct = $('#pctComplete').text();

    //animate width property
    var config = {}
    config.width = pct;

    //start animation
    $('#pctComplete').animate(config, 1500);
});

Deploy override script and jQuery to master page library and update JSLink property as below on DisplayForm.aspx of list.

~site/_catalogs/masterpage/CSR-jquery-2.1.1.min.js|~site/_catalogs/masterpage/CSRTasksForm.js

If everything went as planned, display page will show animation for 'Percent Complete' field as below:


Hope this helps.

-Javed

Friday, May 30, 2014

JSLink: Edit and New Form

This is my second post on JSLink and I will show how to customize "New" and "Edit" forms using JavaScript and JSLink. I will not spend time on setup and deployment, which I briefly touched on my last post here.

As a ShaePoint developer, most of us have worked on customizing New or Edit form using JavaScript which works but it's a workaround, not an elegant solution. But with JSLink, we don't have to add Content Editor web part to OOTB NewForm.aspx or EditForm.aspx, instead we just have edit the page and set JSLink property.

In this post I am using the same Tasks list as in previous post and will enhance the new and edit forms, by replacing "% Complete" input control with dropdown list with predefined values. Here is the final result:



To achieve this result, create JavaScript file and copy/paste following code snippets. See comments for explanation:

// JavaScript source code
(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};

    //override 'PercentComplete' field and provide custom rendering functions
    //for NewForm.aspx and EditForm.aspx pages.
    overrideCtx.Templates.Fields = {
        'PercentComplete': { 'NewForm': customField, 'EditForm': customField }
    }

    //register our override
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function customField(ctx) {
    //get form context for our field
    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);

    //local vars:
    var fldName = "cbo_" + formCtx.fieldName;    //used to set id of dropdown
    var fldValue = parseInt(formCtx.fieldValue); //get current value for edit form

    //register value callback. this function is called before submitting form
    //returned value will be saved in PercentComplete field. make sure the 
    //return type is compatible with field data type.
    formCtx.registerGetValueCallback(formCtx.fieldName, function () {
        var cbo = document.getElementById(fldName);
        return cbo.options[cbo.selectedIndex].value;
    });

    //return <select> html to replace input control
    var html = [];
    html.push("<select id='" + fldName + "'>");</select>
    html.push(getSelectItem(0, fldValue));
    html.push(getSelectItem(25, fldValue));
    html.push(getSelectItem(50, fldValue));
    html.push(getSelectItem(75, fldValue));
    html.push(getSelectItem(100, fldValue));
    
    return html.join('');
}

//build <option> tag 
function getSelectItem(value, selValue) {
    if (value === selValue) 
        return "<option selected='selected' value='" + value + "'>" + value + "'</option>";
    return "<option value='" + value + "'>" + value + "</option>";
}

Upload JS file to Master Page library and set metadata as below:

Content TypeJavaScript Display Template
Target Control TypeForm
StandaloneOverride
Target ScopeServer relative URL of site
Target List Template IdList template Id (optional)

At this point only task remaining is to edit "NewForm.aspx" / "EditForm.aspx" pages and set JSLink proerty of "ListFormWebPart". You can do this through UI (edit page), Feature receiver or PowerShell script.

Go back to Tasks list and add or edit item to see customization. In next post, will see how we can add custom field validation.

Hope this help.

-Javed

Saturday, May 10, 2014

Working with JSLink

Recently I have been looking at CSR (client side rendering) feature which was introduced with SharePoint 2013. I did some display customizations with 2007 and 2010 version by modifying XSLT but when I try to replicate the same customizations with CSR feature, I immediately realized the power and usefulness of this new addition.

JSLink is the new property, available on many web parts, which allows you to override some parts or all of webpart UI on client side. SharePoint 2013 now uses JavaScript display templates to render contents on clients and falls back to XSLT, if for example: JavaScript is disabled on browser. This JavaScript framework provides many advantages compare to previous XSLT based rendering:
  1. Not many developers are familiar with XSLT and it is difficult to develop XSLT and debug.
  2. Most web developers are already familiar with JavaScript development.
  3. CSR – JSLink are easy to deploy and rolling back customization are straight forward too.
  4. With CSR – JSLink, the processing moves from server to client browser, thus freeing up server resources.
In this article, I will focus on overriding display of “% Complete” field of custom Tasks list. The goal is to display some kind of progress bar based on percent complete data. In order to implement this feature we have to follow below tasks:
  1. Created JavaScript file with override code
  2. Upload JavaScript file to SharePoint master page gallery using “JavaScript Display Template” content type
  3. Set JSLink property of webpart.
Here are the details of each task and for this article I am using SharePoint UI to complete these task, but it can be deployed as WSP Solution.

Created JavaScript file with override code

Open notepad (or your favorite text editor) and copy/paste the following code:

(function () {
    //create override object
    var overrideCtx = {};
    overrideCtx.Templates = {};

    //we are interested in 'PercentComplete' field. 

    //Note: field name is Internal Field Name which may be 
    //different than display name
    //you can use SharePoint Manager 2013 to find internal field name

    overrideCtx.Templates.Fields = {
        'PercentComplete': { 'View': customField }
    }

    //these are optional, but in case of multiple webparts on 

    //page and these are not set will affect all list view.
    overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 100;

    //register the override
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

//this function gets called for each row while rendering 'PercentComplete' field
function customField(ctx) {
    //check if 'PercentComplete' field is populated
    if (ctx.CurrentItem["PercentComplete"]) {
        //remove whitespace
        var completed = ctx.CurrentItem["PercentComplete"].replace(/\s+/g, '');
        //build and return the html to be rendered
        //NOTE: make sure you rename the red.png with your file on 15/images folder. 

        //Mine is 5x5 pixel with solid red
        var result = "<div style='background-image:url(/_layouts/15/images/red.png);width:" + completed + "'><b>" + completed + "</b></div>";
        return result;
    }
}


Upload JavaScript file to SharePoint master page gallery using “JavaScript Display Template” content type


  • Navigate to Site Settings > Master pages and page layouts screen.
  • From ribbon click “Upload Document” > Browse and select above JavaScript file > click OK
  • On next screen; enter as follows:
Content TypeJavaScript Display Template
Target Control TypeField
StandaloneOverride
Target ScopeServer relative URL of site
Target List Template IdList template Id (optional)
  • Click “Save”

Set JSLink property of webpart

  • Expand “Settings” menu and click on “Edit Page”
  • Open webpart menu and click “Edit Web Part”
  • Expand “Miscellaneous” tab and add JavaScript URL with site token eg: ~site/_catalogs/masterpage/CSRTasks.js
  • Click “OK” to save.
  • Save and close the edit page screen.

At this point you are ready for testing, hit F5 to refresh the list web part page and if all went fine the UI would look like this:

clip_image002

Next article will talk about overriding Edit and View forms.

Hope this helps.

-Javed

Tuesday, April 29, 2014

How to disable event firing in custom code


Recently I worked on application page which updates list item, which in turn causes item update event to fire. The goal was to avoid any event execution. I have done this many times before, but had a hard time recalling. This post is a note to myself, so I know where to look for code sample, if I forgot again. :)

If I am writing event receiver, I can use EventFiringEnabled property to disable events temporarily. But in application page I don’t’ have access to SPEventReceiverBase
which exposes this property. So here is the coed I used to temporarily disable event firing.

public class DisableItemEventFiring : SPItemEventReceiver, IDisposable 
{
public ItemEventFiring()
{
this.EventFiringEnabled = false;
}

public void  Dispose()
{
this.EventFiringEnabled = true;
}
}


Now we have defined class for disabling list item event, I can use this class in application page,

using (DisableItemEventFiring disableEvt = new DisableItemEventFiring ())
{
//no event will be fired
item.SystemUpdate();
}

//event firing enabled again
item.SystemUpdate();


Hope this helps.

-Javed

Wednesday, April 2, 2014

JavaScript Frameworks


With arrival of SharePoint 2013 last year and Microsoft push to move your code away from SharePoint server to the client browsers, JavaScript is now considered an important skill. The new SharePoint App model allows developers to use JavaScript to write entire application and in case of SharePoint-hosted app, is the only option. Now it is a good idea to spend some time understanding and learning JavaScript and many freely available Frameworks. If you are writing Single Page Application or just DOM manipulation or implementing user notifications, there are at least couple of open source JavaScript frameworks available. I have been using some of these and below is the list of some of those frameworks.

jQuery I think the most popular and useful library.
AngularJS Recently completed Single Page App on SharePoint using Angular and I love this framework for its powerful bi-directional data binding, routing, REST support and much more.
Knockout.js Great bi-directional data binding framework, but the only thing bothers me is to convert JSON (from server) to observable collection.
Underscore.js Makes life lot easier handling arrays and collection
moment.js Date and time utility functions. Data validation, formatting, international formatting.
noty.js A jQuery plugin to display success/error notification. Highly configurable.
toastr.js Similar to noty.js
Open XML SDK for JavaScript Now you can create Office documents right in the browser with this library. Check out these links for more info:
Introducing the Open XML SDK for JavaScript
Open XML SDK for JavaScript

I will continue adding more libraries and frameworks as and when I get a chance to play with.

Hope this helps.

-Javed