how to create a custom binding handler for format phone number input with specific pattern in KnockoutJs web app?

If we want to format the phone number on user input, we can handle it with keypress event using Jquery.

here is sample code to force the user can input 10 number and automatically format them to be
XXX-XXX-XXXX

$("#phoneNumberInput").keypress(function (e) {
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                return false;
            }
            var currentChar = this.value.length;
            var currentValue = $(this).val();
            if (currentChar == 3) {
                $(this).val(currentValue + "-");
            } else if (currentChar == 7) {
                $(this).val(currentValue + "-");
            }
            $(this).attr('maxlength', '12');
        });

in KnockoutJs, we can implement a custom binding handler, then we can apply it to all phone number input fields,

with the keydown event to prevent any non numeric value.

update function in the handler will format the text change to the specific format after user enter 10 nueric values.

ko.bindingHandlers.formatPhoneNumber = {
    init: function (element, valueAccessor) {
        $(element).on("keydown", function (event) {
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                (event.keyCode == 65 && event.ctrlKey === true) ||
                (event.keyCode == 188 || event.keyCode == 190 || event.keyCode == 110) ||
                (event.keyCode >= 35 && event.keyCode <= 39)) {
                return;
            }
            else {
                if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        });
    },
    update: function (element, valueAccessor) {
        $(element).val(ko.unwrap(valueAccessor()));
        formatPhone(element);
    }
};

 formatPhone = function (element) {   
        var phone= $(element).val().replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
        $(element).val(phone);  
    }

it is very easy to use in the html page. here we will use textInput Binding from KnockoutJs framework to trigger the formatPhoneNumber update method immediately after the user key in 10 numbmers.

 <input id="phone" class="form-control" type="text" placeholder="Home Phone" data-bind="textInput: homePhone, formatPhoneNumber:homePhone, validationElement:homePhone " maxlength="10" />

How to use ng-pattern to validate the phone format in AngularJS Web application.

we can directly apply the regular expression pattern to the ng-pattern directive to validate the phone number format. however this approach will limit to mandatory field only. you will see the annoying message if you use this implementation.

<input type="text" ng-model="phoneNumber" id="input" name="phoneNumber" 

 ng-pattern="/^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/" /><br>

we can use different approach to handle this validation, we will use ng-required to validate the required validation, then we will implment a function to take care of phone format validation.



<input type="text" name="phoneNumber" ng-model="phoneNumber" ng-required="requiredCondition" ng-pattern="phoneNumberPattern" />

in the controller javascript file we will implement a validatePhoneNumber function, which will only trigger when the phone field is not blank.

$scope.validatePhoneNumber = (function () {
        var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
        return {
            test: function (value) {
                if (value.length == 0) {
                    return true;
                }
                return regexp.test(value);
            }
        };
    })();

How to use Handy Tool Object Exporter to extract Data from C# object List?

it is quite handy, if we can extract data from our C# object list and send them to your teammate for debugging purpose.

Here is the tool that provide the great need

https://marketplace.visualstudio.com/items?itemName=OmarElabd.ObjectExporter

it is compatible for Visual Studio 2013,2015,2017

You just have to highlight the data list object that you plan to export the data.

First, you go to Tools--> Object Explorer




 Second Pick the object from the List




third pick either Json,XML data format to export the data.

how to control the page access in the controller level in MVC web application?

we can control the page access in various area in the MVC web applicaton.

first we can control in the razor page file.

@if (!this.User.HasPermission(ADGroup))
{
    Response.Redirect("~/ErrorMessage.aspx?ErrorCode=AccessDenied");
}

second we can control access in the Action method.
 public async Task<ActionResult> MyPage()
        {
         if (!IsAllowAccess)
       {
           return Redirect("~/ErrorMessage.aspx?ErrorCode=AccessDenied");
       }
    }

third we can set the access permission in the Class level by implmented an ActionFilterAttribute.


 public class MyPageAccessActionFilterAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            if (!IsAllowAccessPage)
            {
                filterContext.Result = new RedirectResult("~/ErrorMessage.aspx?ErrorCode=AccessDenied");
            }
            base.OnActionExecuting(filterContext);
        }
    }


Then in Page Controller, I can just set the  MyPageAccessActionFilter Attribute in controller class
   [MyPageAccessActionFilter]
    public class MyController : Controller
    {

}

the third approach will reduce lots of code and affect on the maintenance. since we can easily modify one file to apply permission on the action methods within the controller.

How to download a document Web Application accessed from UAG

we can easy to use javascript Window.Open to download a document in IE or popup it up in Chrome and Firefox.

However, the user access the web application from UAG, then error indicates that the document is not found with the url absolute path. since the UAG had block the actual host server of the web application and shown the user with the UAG host server.


it is quick simply to work around it. we should return the relative path to front end for the Window.Open method.

Before:

Window.Open("Http://myserver/myapp/filefolder/myDoc")


After

Window.Open("myapp/filefolder/myDoc")



In the Server, we can use the following snippet code to demonstrate this approach.


   if (baseUrl.Contains("localhost"))
{
    response.fileName = baseUrl + "/Downloads/" + response.fileName ;
}
else
{
    string currentAppFolder = System.AppDomain.CurrentDomain.BaseDirectory;
    if (!string.IsNullOrEmpty(currentAppFolder))
    {
        string parentFolder = string.Empty;
        currentAppFolder = currentAppFolder.Trim('\\');
        int index = currentAppFolder.LastIndexOf("\\");
        if (index > -1) {
            parentFolder = currentAppFolder.Substring(index);
        }
        response.nvisFileName = parentFolder + "/Downloads/" + response.fileName ;
    }
}

how to debug a SharePoint Provider Hosted Add-in in Visual Studio 2017

I did not have to make any configuration when i developed my SharePoint Add-In with Visual Studio 2013.

However i was unable to debug my SharePoint Provider Hosted Add-In in Visual Studio 2017.

I had to make quick change in the project property from Visual Studio

1. Select the SharePoint Add-In Project, then press F4 to launch the Property Window






2. change  from Google Chrome to Internet Explorer from Start Action drop down




3.  Press F5 to launch the project in debugging mode.

4.  Select Attached to Process from the Debug Menu to enable Visual Studio to debug the IIS process




5. click on the show process for all users if your app is running with Service Account App Pool



6. Selected w3wp.exe process and click Attach button



now you can debug you web app within SharePoint Provider Hosted Add-In solution.