Tag Archive SharePoint Intranet

AvatarByRashid Aziz

Six Steps to Boost SharePoint User Adoption

Share Point usage in an organisation is like a relationship, needs focus, time and energy to work correctly.

SharePoint site adaptation is one of the vital points of Share Point success. Just launching the platform won’t ensure adaptation within an organisation, as it only gives a “shelfware” scenario. Implementation of any new business system like Share Point needs acceptance and adjustment to boost up benefit end users.

During the phase of Share Point customisation, involve power users who advocate share point usage to collect a great deal of information as you can’t implement SharePoint without the involvement of the adaptation team.  That will create a roll-out plan to embrace communication and training prospects. Meet them regularly and solicit feedback.  Make out “owners” that strengthen leadership’s support of the new track so that users can talk to when they need help.

As we’ve already discussed the Pitfalls of SharePoint user adoption, here are the six steps to boost SharePoint user adoption.

Pilot the program

During the SharePoint customisation, recruit a group of users who are more excited about the change to serve as your beta testers. Involve them every step in the way of SharePoint customisation before releasing it to the rest of the organisation. These Share Points advocates will serve as evangelists and as a funnel to other members of the organisation.

Do the Demonstration

Always start SharePoint implementation with a demo to keep potential users updated. Don’t ever assume that users know what the Share Point is.  Prepare a demo from their perspective, suggest the benefits and show them the out of box functionality. Convey them the logic behind the change and frame and demonstrates how SharePoint features will be beneficial for their jobs.

Look forward to the problems of users who aren’t confident with new technologies to get your point across. For example, users will feel anxiety if they are expected to understand the SharePoint quickly. SharePointusage will face problems if users are left to crack the Share Point usage on their own.

Provide Training

Another point with the central impact on SharePoint adoption is training!  You should train and form a rocking SharePoint team to ensure everyone can perform his or her duties. This training can be in the form of a quick 30- minute’s workshops or online training if users are remote.  Align this training within the framework of the work scenarios rather than just telling them the functions of different buttons.

Implement SharePoint in Segments

Usually, users are resistant to change, so support them to adopt SharePoint’s capabilities by not implementing it all at once. Divide SharePoint implementation into small, manageable segments and prioritise these segments to roll them out one by one to make it easy for users to adopt new habits.  

Respond Quickly

Be quick with the needs of the users. If employees ask for more significant search capabilities and a new tool to capture documents, don’t hesitate to look to a third party to supply this tool.

Stay Connected

Stay connected with the users regarding issues and improvements even after successful SharePoint roll-out. Use different means of communications to get your point and build a feedback mechanism that will help users communicate an accurate list of what users think and need. Send project’s updates by regular mails and create a social media group to response user’s queries.

KeaPoint is a SharePoint & Office 365 consultancy based in the UK, dedicated to empowering users through smart solutions. Our experience and skill set continues to expand in many areas. We develop solutions according to the best business practices in the industry.

If your organisation needs assistance with SharePoint & Office 365 and would like to see how KeaPoint can help, please get in touch.

AvatarByRashid Aziz

5 Great Tips to Make Intranet Portal a Success

In the era of the digital workplace, Microsoft Office 365 is one of the smartest intranet platform helping organisations to make better internal communications and to boost employee engagement. Almost all companies use an intranet portal to share information and collaborate. However, Office 365 is more than just a communication and collaboration platform; it has the power to solve organisation problems like knowledge sharing, project management, documents, and email authorisation. Office 365 and SharePoint provides features that can be built up quickly to broadcast updates and engage team members.

The following five characteristics will certainly improve employee productivity and business value.

Prioritise Content

An intranet is all about sharing and communication amongst team members within the organisation. Create a platform that is understood by all team members, and that can be improved eventually when necessary. Make a clear company plan setting out the goals, build a standard, define strategies and create content. All the above said should be based on the organisational goal. Allow every employee to share and publish content. Take their feedback and appreciate their contribution.

Consistent Navigation

It provides employees with a modern, logical and easy to use navigation structure within the intranet sites. Make it convenient for the employees to have access to the contextual and personalised information rather than searching for it and wasting time. The employees would appreciate it if they have access to all their apps and tools (like Yammer, Team Sites, SharePoint, and Groups) to get the relevant information.

One Stop Shop

The homepage of Office 365 gives users quick access to all tools and bring entire intranet platform into a OneStop Shop. Let the employees have access to these tools so that they can efficiently manage company information including documents, projects, apps, news, blog, channels, tasks and more.

Anytime Anywhere Access

Provide team members with the flexibility to have external access so they can handle their intranet portal outside the workplace at any time. SharePoint Online allows users to have access to the intranet sites, information, meetings, documents and collaboration with other team members through mobile devices, at the office or from home.

Enable Social Engagement

Each company needs to keep everyone up to date about their business news, case studies, press releases, social networking and job opportunities and much more. Office 365 allows users to share access with social channels like Yammer, Skype, are the best example of social media networking within the organisation for private communication. These features enable everyone to share, comment and contribute.

KeaPoint is a SharePoint & Office365 consultancy based in the UK, dedicated to empowering users through smart solutions. Our experience and skill set continues to expand in many areas. We develop solutions according to the best business practices in the industry.

If your organisation needs assistance with SharePoint & Office 365 and would like to see how KeaPoint can help, please get in touch.

AvatarByRashid Aziz

SharePoint Hosted App to retrieve local weather information

In one of my previous post I explained how to get current user locale information like city, country, latitude, longitude, IP address using SharePoint hosted app. In this post, I have taken one further step to get the weather information of current logged in user’s location.

Follow the below steps to achieve the same results.

Create new SharePoint hosted app project inside visual studio.

Edit the “app.js” file and replace the code with below code. Remember to update the APIKey variable value in below code. You can get new APIKey from https://developer.forecast.io/register, and it is free.

jQuery.ajax({

    url: '//freegeoip.net/json/',

    type: 'POST',

    dataType: 'jsonp',

    success: function (location) {

        jQuery('#city').html(location.city);

        jQuery('#longitude').html(location.longitude);

        jQuery('#latitude').html(location.latitude);

        jQuery('#country-name').html(location.country_name);

        GetWeatherInfo(location.latitude, location.longitude);

    }

});

function GetWeatherInfo(lati, longi)

{

    var APIkey = 'API Key'  // Get a new key from https://developer.forecast.io/register and it is free

    var urlForecast = 'https://api.forecast.io/forecast/';

    var unit = 'si'; // "si" is shortcut for Celsius and "us" is shortcut for Fahrenheit

    jQuery.ajax({

        url: urlForecast + APIkey + "/" + lati + "," + longi + "?callback=?&units=" + unit ,

        type: 'GET',

        dataType: 'jsonp',

        timeout: 3500, 

        success: function (data) {

            $('#currentTemp').html(data.currently.temperature.toFixed(0));

            $('#minTemp').html(data.daily.data[0].temperatureMin.toFixed(0));

            $('#maxTemp').html(data.daily.data[0].temperatureMax.toFixed(0));

            $('#humidity').html(data.currently.humidity); 

            $('#windSpeed').html(data.daily.data[0].windSpeed.toFixed(0));

            $('#windBearing').html(data.daily.data[0].windBearing.toFixed(0));

            $('#visibility').html(data.daily.data[0].visibility.toFixed(0));

            $('#cloudCover').html(data.daily.data[0].cloudCover.toFixed(0));

            $('#pressure').html(data.daily.data[0].pressure.toFixed(0));

            $('#summary').html(data.currently.summary);

        }

    });
}

On default.aspx page replace the “PlaceHolderMain” control with the following code

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<label for="city">City: </label><label id="city"></label> <br />

    <label for="country-name">Country: </label><label id="country-name"></label>  <br />

    <label for="currentTemp">Current Temprature: </label><label id="currentTemp"></label> <br />

    <label for="minTemp">Min Temp: </label><label id="minTemp"></label> <br />

    <label for="maxTemp">Max Temp: </label><label id="maxTemp"></label> <br />

    <label for="humidity">Humidity (0-1): </label><label id="humidity"></label> <br />

    <label for="windSpeed">Wind Speed (km/h): </label><label id="windSpeed"></label> <br />

    <label for="windBearing">Wind Bearing: </label><label id="windBearing"></label> <br />

    <label for="Visibility">Visibility (km): </label><label id="visibility"></label> <br />

    <label for="cloudCover">Cloud Cover: </label><label id="cloudCover"></label> <br />

    <label for="pressure">Pressure (mb): </label><label id="pressure"></label> <br />

    <label for="summary">Summary: </label><label id="summary"></label> <br />

</asp:Content>

Press F5 and see the magic 

My Results

A user from London Office

 

You can build UI something like below using css once you have all the weather information in hand. 

    

Happy SharePoint coding Smile

AvatarByRashid Aziz

Missing user profile picture after updating mysite host URL in SharePoint 2013

Recently I had to change mysite host URL in one of our environment. After I update my site hots URL and ran full user profile sync. Everything was working fine until I noticed that user images are not appearing inside user profiles.

I have started looking into the issue and done the following steps to figure out the problem

I have checked the user profile “Picture” property to make sure that It is mapped to “PhotoThumbnail” property of active directory

Then I have checked that the Farm account have permissions on User profiles

Using the farm account I have ran the photo import command again 

Update-SPProfilePhotoStore –MySiteHostLocation http://mysiteHostUrl –CreateThumbnailsForImportedPhotos $true

With help of miisclient.exe I have confirmend that the picture property is pull the binary information from active directory. 

I then went to my profile and right click on the “PictureURL” and selected “Properties” option which open up the “Properties” popup window. Suddenly I realised that the URL of my user profile picture is still pointing to the old my site. 

 

I have copied the above picture URL in the browser, updated the “mysite” host URL to new one and hit enter. I was managed to see my profile picture as below.

 

At last I managed to find the issue. Now it’s time to fix it. So I wrote below PowerShell command to update all user profile picture properties URL.

$mySiteNewHostURL = "http://NewMySiteHostURL" 
$mySiteOldHostURL = "http://OldMySiteHostURL" 
$mySite = Get-SPSite $mySiteNewHostUrl 
$SPServiceContext = Get-SPServiceContext $mySite 

$userProfileManager = New-Object Microsoft.Office.Server.UserProfiles.UserProfileManager($SPServiceContext) 
$userProfiles = $userProfileManager.GetEnumerator() 
foreach ($userProfile in $userProfiles) 

{ 

  #check if the picture property contain image URL, then replace it with new my site host URL

  if ($userProfile["PictureURL"] -ne '') 

  { 
    $oldImageUrl = $userProfile["PictureURL"].toString() 
    $newImageUrl = $oldImageUrl -Replace $mySiteOldHostURL, $mySiteNewHostURL
    write-host "Old Image Link = " $oldImageUrl " --> New Image Link = " $newImageUrl 
    $userProfile["PictureURL"].Value = $newImageUrl 
    $userProfile.Commit() 

  }  
}

After I ran above PowerShell script, I was able to see  picture inside my user profile as below. Happy coding Smile

AvatarByRashid Aziz

Simple SharePoint hosted App “User Location Tracker”

You can follow the below steps to get user location information inside your SharePoint hosted app.

Create a “SharePoint Host App” project in visual studio 2013

Replace app.js contents with below code

jQuery.ajax({

    url: '//freegeoip.net/json/',

    type: 'POST',

    dataType: 'jsonp',

    success: function (location) {

        jQuery('#city').html(location.city);

        jQuery('#region-code').html(location.region_code);

        jQuery('#region-name').html(location.region_name);

        jQuery('#ip').html(location.ip);

        jQuery('#longitude').html(location.longitude);

        jQuery('#latitude').html(location.latitude);

        jQuery('#country-name').html(location.country_name);

        jQuery('#country-code').html(location.country_code);

    }

});

On default.aspx page replace the “PlaceHolderMain” control with the following code

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<label for="city">City: </label><label id="city"></label> <br />

<label for="country-name">Country: </label><label id="country-name"></label>  <br />

<label for="country-code">Country code: </label><label id="country-code"></label> <br />

<label for="region-name">Region: </label><label id="region-name"></label> <br />

<label for="region-code">Region code: </label><label id="region-code"></label> <br />

<label for="latitude">Latitude: </label><label id="latitude"></label> <br />

<label for="longitude">longitude: </label><label id="longitude"></label> <br />

<label for="ip">IP address: </label><label id="ip"></label> <br />

</asp:Content>

Press F5 and see the magic 

My Results

A user from London Office

 

 A user from Amsterdam office 

 

This is just the basic user location specific information I have managed to get using http://freegeoip.net free web service. Now you can use this information to drive user experience in you SharePoint environment. Good luck!

AvatarByRashid Aziz

Interactive JavaScript Maps Integration with SharePoint 2013 using Script Editor Web Part

I have a top level SharePoint site called “Our Offices” and sub site for each country office location (e.g. London, Berlin etc.). The “Our Offices” site home page needs to provide easy navigation to all offices sub sites. Also, I wanted to show where this office location reside on the world map and when someone click on the location, system should redirect the user to that location site home page. 

To do this I have used AmMap solution. The JavaScript / HTML5 mapping library (jsmap) help to create interactive, animated maps and display them in your web sites or web applications.

Navigate to http://www.amcharts.com/javascript-maps/ and click on download button.  

 On the next page, click “Interactive JavaScript Maps” download link as highlighted below.

 Once downloaded, extract the zip folder and give the root folder a proper name.  (By default it will be something like “ammap_3.13.1.free”. I have renamed the root folder to “CoolMaps”)

Copy the “CoolMaps” folder, Navigate to SharePoint 15 hive Layouts folder (C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS) and past the “CoolMaps” folder here.

Add “Script Editor” web part on “Our Offices” site home page.

 

 Copy and paste the following code into your script editor web part.

Note: Please updated the locations and SharePoint sub site URLs as per your business requirements.

<link rel="stylesheet" href="/_layouts/15/CoolMaps/ammap/ammap.css" type="text/css">
        <script src="/_layouts/15/CoolMaps/ammap/ammap.js" type="text/javascript"></script>
        <!-- map file should be included after ammap.js -->
	<script src="/_layouts/15/CoolMaps/ammap/maps/js/worldLow.js" type="text/javascript"></script>

		<script type="text/javascript">
			var map;

			// svg path for target icon
			var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";

			AmCharts.ready(function() {
			    map = new AmCharts.AmMap();
			    map.pathToImages = "/_layouts/15/CoolMaps/ammap/images/";

			    map.imagesSettings = {
			        rollOverColor: "#FFA02F",
			        rollOverScale: 3,
			        selectedScale: 3,
			        selectedColor: "#FE5815",
                                color: "#FE5815"
			    };

			    var dataProvider = {
			        mapVar: AmCharts.maps.worldLow,
			        images: [
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"London", latitude:51.5002, longitude:-0.1262, url: "../London"},
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"Paris", latitude:48.8567, longitude:2.3510, url: "../Paris"},
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"Berlin", latitude:52.5235, longitude:13.4115, url: "../Berlin"},	
{svgPath:targetSVG, zoomLevel:5, scale:0.5, title:"Amsterdam", latitude:52.3738, longitude:4.8910,  url: "../Amsterdam"},
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"Singapore", latitude:1.2894, longitude:103.8500, url: "../Singapore"},
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"Islamabad", latitude:33.6751, longitude:73.0946, url: "../Islamabad"},
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"Beijing", latitude:39.904030, longitude:116.40752599, url: "../Beijing"},	
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"Tokyo", latitude:35.6785, longitude:139.6823,  url: "../Tokyo"},				   
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"Chicago", latitude:41.87811360, longitude:-87.6297981999, url: "../Chicago"},
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"Bucharest", latitude:44.4479, longitude:26.0979, url: "../Bucharest"},
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"Moscow", latitude:55.7558, longitude:37.6176, url: "../Moscow"},
{svgPath:targetSVG, zoomLevel:5, scale:1.0, title:"San Marino", latitude:43.9424, longitude:12.4578, url: "../SanMarino"}
			        ]
			    };
			    map.dataProvider = dataProvider;

			    map.objectList = new AmCharts.ObjectList("listdiv");
			    map.showImagesInList = true;

			    map.write("mapdiv");

			});

        </script>
    <div>
        <div id="listdiv" style="width:200px; overflow:auto; height:500px; float:right; background-color:#FFFFFF;"></div>
        <div id="mapdiv" style="margin-right:200px; background-color:#FFFFFF; height: 500px;"></div>
    </div>
<br/>

 

Save the page and publish it. 

The Map should appear like this on the page

 

On mouse hover it will highlight the location on the map and when user click on a location, it will take you to pre-configured sub site for that location. 

The map I am showing here is just for demo purpose. There are many more types of maps available in this library. Go and explore the rest Smile

AvatarByRashid Aziz

Angular JS and Bootstrap to Display SharePoint 2013 List Data using Script Editor

I am big fan of using OOTB stuff, but sometime customer want to see things in different way or their organisational design guidelines are difficult to achieve using OOTB functionality.

In my previous post I have explained how to customise SharePoint list form using Angular JS and Bootstrap 

Here, I will show you how to display list items using bootstrap and AngularJS.  I have picked a scenario: I have SharePoint 2013 list called “Customer Details”. The list have following columns

Schema name

Display name

Title

Customer name

City

City

Country

Country

ContactPerson

Contact person

 

The list default OOTB view appear as below

The customer want to display this list data on a page but with complex UI design. OOTB list web part will only display the data in same way as it appears in the list view.

One way to achieve the complex design is by using AngularJS and Bootstrap.

1.  Create a new page inside SharePoint 2013 site “Pages” library.

 2.  Add a “Script Editor” web part on the page

3.  Copy and paste the following code inside script editor web part

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
<script>
    var angApp = angular.module('SharePointAngApp', []);
    angApp.controller('spCustomerController', function ($scope, $http) {
        $http({
            method: 'GET',
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Customer Details')/items?$select=Title,City,Country,ContactPerson",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (customerData, status, headers, config) {
            $scope.customers = customerData.d.results;
        }).error(function (customerData, status, headers, config) {
      
        });
    });
   
</script>
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
	 <div ng-app="SharePointAngApp">
	 <div ng-controller="spCustomerController">
	 <br/>
        <table class="table table-striped table-hover">
            <tr>
                <th>Customer name</th>
                <th>City</th>
                <th>Country</th>
				 <th>Contact person</th>
              
            </tr>
            <tr ng-repeat="customer in customers">
                <td>{{customer.Title}}</td>
                <td>{{customer.City}}</td>
                <td>{{customer.Country}}</td>
				<td>{{customer.ContactPerson}}</td>
                </tr>
        </table>
    </div>
	</div>


Now, the list data will appear as below inside script editor web part.

AvatarByRashid Aziz

SharePoint 2013 Custom List Form using Angular JS and Bootstrap

According to  Microsoft InfoPath Forms Services for SharePoint Server 2013 will be supported until April 2023. Keeping that in mind I have started looking into alternatives to build rich form which can be used with SharePoint list and replace OOTB form. I have started looking into Angular JS (AngularJS is a JavaScript framework. AngularJS extends HTML attributes with directives and binds data to HTML with expressions). From user interface point of view I spend some time with bootstrap (Bootstrap makes front-end web development faster and easier).

In the below example, I will use both AngularJS and Bootstrap to build custom SharePoint 2013 form to create new list items.

For this demo purpose, I will use SharePoint page with “Script Editor” to build this form. I highly recommend to use visual studio to build .aspx and .js files and update list schema to change lists default New/Edit forms.

1.Create “Customer Details” list which have the following column

Schema name

Display name

Title

First name

LastName

Last name

Address

Address

 

2.     Now create a new page in SharePoint 2013 “Pages” library. 

 

3.     Add “Script Editor” web part on the page.

 

4.     Copy and paste the following code inside script editor

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
<script>  
    function mainController($scope) {  
  
        $scope.customer = { firstName: "", lastName: "", location: "" };  
        $scope.createContact = function ($event) {  
            var c = $scope.customer;  
            $event.preventDefault();  
  
            var clientContext = new SP.ClientContext.get_current();  
            var web = clientContext.get_web();  
            var list = web.get_lists().getByTitle('Customer Details');  
            var customerListItemInfo = new SP.ListItemCreationInformation();  
            var listItem = list.addItem(customerListItemInfo);  
            listItem.set_item('Title', c.firstName);  
            listItem.set_item('LastName', c.lastName);
             listItem.set_item('Address', c.address); 			 
            listItem.update();  
            clientContext.executeQueryAsync(  
                Function.createDelegate(this, onQuerySucceeded),  
                Function.createDelegate(this, onQueryFailed)  
            );  
  
        };  
  
        onQuerySucceeded = function () {  
            alert('Successfully created new customer record');  
        }  
  
        onQueryFailed = function (sender, args) {  
            alert('Failed: ' + args.get_stackTrace());  
        }  
    }  
</script>  
  
<h2>Customer Information:</h2>  
<br />  
<div ng-app="">  
    <div ng-controller="mainController">  
        First name  
        <input type="text" ng-model="customer.firstName" /><br />  
        <br />  
        Last name
        <input type="text" ng-model="customer.lastName" /><br />  
        <br />  
        Address
		<input type="text" ng-model="customer.address" /><br />  
        <br />  
        <input type="submit" value="Save" ng-click="createContact($event)" />  
    </div>  
</div>

 

5.     Save the page and publish it. The form will look something like this.

You can now go ahead and start using the form to create new customer records, but I like to make the user interface a little better.

To do that, I have added bootstrap css library reference and added some classes with html elements.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
<script>  
    function mainController($scope) {  
  
        $scope.customer = { firstName: "", lastName: "", location: "" };  
        $scope.createContact = function ($event) {  
            var c = $scope.customer;  
            $event.preventDefault();  
  
            var clientContext = new SP.ClientContext.get_current();  
            var web = clientContext.get_web();  
            var list = web.get_lists().getByTitle('Customer Details');  
            var customerListItemInfo = new SP.ListItemCreationInformation();  
            var listItem = list.addItem(customerListItemInfo);  
            listItem.set_item('Title', c.firstName);  
            listItem.set_item('LastName', c.lastName);
             listItem.set_item('Address', c.address); 			 
            listItem.update();  
            clientContext.executeQueryAsync(  
                Function.createDelegate(this, onQuerySucceeded),  
                Function.createDelegate(this, onQueryFailed)  
            );  
  
        };  
  
        onQuerySucceeded = function () {  
            alert('Successfully created new customer record');  
        }  
  
        onQueryFailed = function (sender, args) {  
            alert('Failed: ' + args.get_stackTrace());  
        }  
    }  
</script>  
      <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<h2>Customer Information:</h2>  
<br />  
<div ng-app="">  
    <div ng-controller="mainController" class="col-xs-5 selectContainer form-group">  
        First name  
        <input type="text" ng-model="customer.firstName" class="form-control"/><br />  
        <br />  
        Last name
        <input type="text" ng-model="customer.lastName" class="form-control" /><br />  
        <br />  
        Address
		<input type="text" ng-model="customer.address" class="form-control" /><br />  
        <br />  
        <input type="submit" value="Save" ng-click="createContact($event)" class="btn btn-primary btn-lg active" />  
    </div>  
</div>

You can see the difference as it look more professional after adding couple of bootstrap css classes.

 

I hope the above demonstration is helpful. Smile