Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Tuesday, March 7, 2017

JavaScript - Simple Export to excel

To export excel in JavaScript without any server side techiques, we can use following steps

Used blob file saver for download https://github.com/eligrey/FileSaver.js

Step 1: Create Html Content with required styles as below

var tableHtml = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
        tableHtml += '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets>';
        tableHtml += '<x:ExcelWorksheet><x:Name>PlanFundLineup</x:Name>';
        tableHtml += '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
        tableHtml += '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
  tableHtml += "<div><table  border='1'>" +
        tableHtml += "<thead>" +
        tableHtml += "<tr><th>" +
        tableHtml += "Header Text" +
        tableHtml += "</th></tr>" +
 tableHtml += "</thead>" +
               "<tbody>" +
        tableHtml += "<tr><td>" +
        tableHtml += "Content Text" +
        tableHtml += "</td></tr>" +
               "</tbody>" +
              "</table></div>";
        tableHtml += '</body></html>';

Step 2: Download this html content using blob

var blob = new Blob([tableHtml], { type: "application/vnd.ms-excel;charset=utf-8" })
window.saveAs(blob, "excelname.xls");


Wednesday, November 9, 2016

AngularJS - JavaScript - Client Side error logging

Usually for ServerSide logging we can use many error logging tools (For ex: elmah, log4net etc.,) to log errors into database and email. But for client side JavaScript framework we should include some extra code or some tools available (for ex: JSNLog etc.,). Here am going to explain how custom we do that,

First create JavaScript file "errorlog.js" and copy paste below code,

var errorLoggingServerURL = "Error/Log";

function logErrorToServer(ex, stack) {
    if (ex == null) return;

    if (stack == null && ex.stack != null) stack = ex.stack;

    // format output
    var out = ex.message != null ? ex.name + ": " + ex.message : "JavaScript Exception";
    if (stack != null) out += "\n  at " + stack.toString();

   
    // send error message
    $.ajax({
        type: 'POST',
        url: errorLoggingServerURL,
        data: { message: escape(out) }
    });

}

Function.prototype.trace = function () {
    var trace = [];
    var current = this;
    while (current) {
        trace.push(current.signature());
        current = current.caller;
    }
    return trace;
}

Function.prototype.signature = function () {
    var signature = {
        name: this.getName(),
        params: [],
        toString: function () {
            var params = this.params.length > 0 ?
                "'" + this.params.join("', '") + "'" : "";
            return this.name + "(" + params + ")"
        }
    };
    if (this.arguments) {
        for (var x = 0; x < this.arguments.length; x++)
            signature.params.push(this.arguments[x]);
    }
    return signature;
}

Function.prototype.getName = function () {
    if (this.name)
        return this.name;
    var definition = this.toString().split("\n")[0];
    var exp = /^function ([^\s(]+).+/;
    if (exp.test(definition))
        return definition.split("\n")[0].replace(exp, "$1") || "anonymous";
    return "anonymous";
}

window.onerror = function (msg, url, line) {
    if (arguments != null && arguments.callee != null && arguments.callee.trace)
        logErrorToServer(msg, arguments.callee.trace());

}


In AngularJS, we can have custom logging as follows,

To override AngularJS default logging and to write custom logging use as below,

 app.factory('$exceptionHandler', function () {
        return function (exception, cause) {
            //Javascript Error log will catch this
            logErrorToServer(exception);
        };
    })

Or to use both angularJS default logging and custom logging use as below

//Exception log decorator
 $provide.decorator('$exceptionHandler', ['$delegate', function ($delegate) {
    return function (exception, cause) {
     $delegate(exception, cause);
     logErrorToServer(exception);
    };
 }]);



In Server Side, we can receive the Ajax call and use any logging tool to log error, For ex, here am using Elmah to log error, it uses MVC action controller and using logging as custom class named JavaScriptException

public class ErrorController : Controller
    {
public void Log(string message)
        {
            ErrorSignal
                .FromCurrentContext()
                .Raise(new JavaScriptException(HttpUtility.UrlDecode(message)));
     }

   }

Friday, May 6, 2016

AngularJS - Multiselect Drop down

In some cases, we need to create multi select dropdown. With AngularJS directive it is very easier to implement

Okay, let me first show basic multi select dropdown without any angularJS

<select data-ng-model="model" data-ng-options="value as name for item in itemlist" multiple>
    <option value="" style="color:gray;">-Select Item-</option>
</select>

Here we used simple Select element with multiple attribute. It allows you to select multiple items from dropdown. But drawback is, we should use Ctrl key to select multiple items and also style is not that much easier to customize.


To resolve these dependencies, we can choose AngularJS directive as solution.

app.directive('multiSelectDropDown', function () {
        return {
            restrict: 'AE',
            scope: {
                model: '=',
                options: '=',
                optionsName: '@',
                optionsValue: '@',

            },
            template: "<div class='btn-group dropdown' style='width:100%'>" +
             "<input type='text' value='{{model.toString()}}' data-toggle='dropdown' class='dropdown-toggle' placeholder='Click to select' disabled>" +
             "<button class='btn btn-small dropdown-toggle' data-toggle='dropdown'><span class='caret'></span></button>" +
                     "<ul class='dropdown-menu' style='width:100%'  aria-labelledby='dropdownMenu'>" +
                         "<li><a data-ng-click='selectAll()'><i class='glyphicon glyphicon-ok'></i>  Select All</a></li>" +
                         "<li><a data-ng-click='deselectAll();'><i class='glyphicon glyphicon-remove'></i>  Deselect All</a></li>" +
                         "<li class='divider'></li>" +
                         "<li data-ng-repeat='option in options'>" +
                         "<a data-ng-click='setSelectedItem()'><span class=\"{{isChecked(option) ? 'glyphicon glyphicon-ok' : ''}}\"></span>&nbsp;{{option[''+optionsName+'']}}&nbsp;</a>" +
                         "</li>" +
                     "</ul>" +
                 "</div>",
            controller: function ($scope) {

                $scope.selectAll = function () {
                    $scope.model = [];
                    $scope.options.forEach(function (option, index) {
                        $scope.model.push(option[$scope.optionsValue]);
                    });
                };

                $scope.deselectAll = function () {
                    $scope.model = [];
                };

                $scope.setSelectedItem = function () {
                    var selected = this.option;
                    if ($scope.model == undefined || $scope.model == null)
                        model = [];

                    if (_.contains($scope.model, selected[$scope.optionsValue])) {
                        $scope.model = _.without($scope.model, selected[$scope.optionsValue]);
                    } else {
                        $scope.model.push(selected[$scope.optionsValue]);
                    }

                    return $scope.model;
                };

                $scope.isChecked = function (selected) {
                    if ($scope.model == undefined || $scope.model == null)
                        $scope.model = [];

                    if (_.contains($scope.model, selected[$scope.optionsValue])) {
                        return true;
                    }
                    return false;
                };
            }
        }

    });



This directive you can include into your AngularJS application as directive

 var app = angular.module('yourAppName');


In HTML, we can call this directive simply like below

 <multi-select-drop-down model="model" options="itemlist" options-name="name" options-value="value "></multi-select-drop-down>



This requires BootStrap css file, Glyphicons to make work.


Friday, January 8, 2016

AngularJS - Custom form validation

We can have some situation to use custom validations to our input fields, we can use following code to implement it.

Here my case is, I want to validate multiple emails field and have to show field error using AngularJS Form Validation.

For multiple email JavaScript validation check here http://rbalajiprasad.blogspot.in/2015/04/javascript-validate-multiple-email.html 

For AngularJS Form validation check here http://www.w3schools.com/angular/angular_validation.asp


HTML Page:

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  
<span ng-show="myForm.email.$error.required">Email is required.</span>
  
<span ng-show="myForm.email.$error.validEmail">Invalid email address.</span>
  
</span>
</p>
<p>
  
<input type="button" ng-click="submit()"
  ng-disabled=
"myForm.email.$dirty && myForm.email.$invalid">
</p>


AngularJS Controller

$scope.Submit = function () {
     //your validation
            var isValidEmail = isValidEmailAddress($scope.email.ToAddress);
            $scope.myForm.email.$setValidity("validEmail", isValidEmail);

            var isValid = $scope.myForm.$valid;
            if (!isValid) { return; }

//your logic goes here

        };

Thursday, December 24, 2015

JavaScript - Simple Email without any server code

I have thought of using simple JavaScript Email feature using "mailTo:". But this is not used for bigger body contents or if you planned for much styles.

Use below JavaScript Method to send emails.

You can use more URL encode to format body.

Ref for URL Encode:  http://www.w3schools.com/tags/ref_urlencode.asp
For MailTo Documentation:  http://www.ietf.org/rfc/rfc2368.txt

JavaScript:

function SendEmail() {

   var subject = 'Mail subject goes here..';
   var body = 'Hi,%0D%0A %0D%0A' +
            'Some of your content %0D%0A%0D%0A' +
            'Next line of body goes here.%0D%0A' +
            '%E2%80%A2 Text within Bullet Text here %E2%80%A2 %0D%0A' +
           
            '%0D%0A Thanks &amp; Regards,%0D%0A' +
            'Your signature goes here..';


    window.location = 'mailto:?subject=' + subject + '&body=' + body;

    return false;

};

HTML:

<input type="button" value="Email" onclick="SendEmail();"/>