Monday, 5 October 2015

Salesforce Visualforce Demo with AngularJs and Bootstrap

by :

Hi All
This is a sample demo which will guide you to Fetch, Create, Update, Delete Records by AngularJS on visualforce page. I have used the Bootstrap for the UI to make it device compatibility.

Watch here demo Click here

In this Tutorial we are going to learn following things :
1. How to Fetch Records
2. How to Create Record and Add to List
3. How to Update Record
4. How to Delete a Record

You first need to download or use the Angularjs file as below:
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js

For using Angularjs we need to create "Application" and "Controller" on visualforce page as below :


<script type="text/javascript">
    <!-- Name your application -->
    var myapp = angular.module('hello', []);
    var contrl=myapp.controller('ctrlRead', function ($scope, $filter) {
    
    })
</scrip>

All work will be under "Controller" visualforce page like below:


<body>     
    <!-- =========== Binding Controller to Body of Page ============= -->
    <div ng-controller="ctrlRead">
        <!-- Here you can write you code -->
    </div>
</body>

Now let's start "Fetch, Create, Update, Delete" Records by Angularjs in Apex Controller by using different methods. As below:


global class AngularJSDemoController{ 
    
    public String AccountList { get; set; }
    
    //Subclass : Wrapper Class 
    public class Accountwrap {
        //Static Variables 
        public string id;
        public string name;
        public string Phone;
        public string Fax;
        public string Website;
        
        //Wrapper  Class Controller
        Accountwrap() {
            Phone = '';
            Fax = '';
            Website = '';
        }
        
    }
       
    //Method to bring the list of Account and Serialize Wrapper Object as JSON
    public  static String getlstAccount() {
        List < Accountwrap > lstwrap = new List < Accountwrap > ();
        List < account > lstacc = [SELECT Id, Name, Phone,Fax,Website
                                   FROM Account order by name limit 10
                                  ];
        for (Account a: lstacc) {
            Accountwrap awrap = new Accountwrap();
            awrap.id = a.id;
            awrap.name = a.name;
            if (a.Phone != null) {
                awrap.Phone = a.Phone;
            }
            if (a.Fax != null) {
                awrap.Fax = a.Fax;
            }
            if (a.Website != null) {
                awrap.Website = a.Website;
            }
            lstwrap.add(awrap);
        }
        return JSON.serialize(lstwrap);
     }
    @RemoteAction
    global static string createAccount(string name,string phone,string fax,string website){
        String fax1 = fax == 'null' ? NULL : fax;
        String website1 = website == 'null' ? NULL : website;
        Account acc = new Account(name=name,phone=phone,fax=fax1,website=website1);
        insert acc;
        return acc.id;
    }
    @RemoteAction
    global static void updateAccount(string id,string name,string phone,string fax,string website){
        String fax1 = fax == 'null' ? NULL : fax;
        String website1 = website == 'null' ? NULL : website;
        Account acc = new Account(name=name,phone=phone,id=id,fax=fax1,website=website1);
        update acc;
    }
    @RemoteAction
    global static void deleteAccount(string id){
        Account acc = [select id from account where id =: id];
        delete acc;
    }
}

Now we will use these methods on page with angularjs like this :


<script>
        var myapp = angular.module('myapp', []);
        myapp.controller('MyController',function($scope,$filter){
           $scope.items = {!lstAccount};
           $scope.account = {};
           $scope.account.Name ='';
           $scope.account.Phone ='';
           $scope.account.Website ='';
           $scope.account.Fax ='';
           $scope.account.Id ='';
           $scope.index='';
           
           // Create Account
           $scope.create= function(){
             if($scope.Name !== undefined &&  $scope.Phone !== undefined){
                var Fax = $scope.Fax !== undefined ? $scope.Fax : 'null';
                var Website = $scope.Website !== undefined ? $scope.Website : 'null';
                Visualforce.remoting.Manager.invokeAction(
                    'AngularJSDemoController.createAccount', 
                     $scope.Name,
                     $scope.Phone,
                     Fax,
                     Website,
                     function(result, event) {
                        if (event.status) {
                           var newAccount = {};
                           
                            // Add to list
                            newAccount.name = $scope.Name;
                            newAccount.Phone = $scope.Phone;
                            newAccount.Fax = $scope.Fax;
                            newAccount.Website = $scope.Website;
                            newAccount.id = result;
                            $scope.items.unshift(newAccount); 
                            
                            // Reset Insert form Value
                            $scope.Name = $scope.Phone = $scope.Fax = $scope.Website ='';
                            
                            $scope.$apply();
                            $('tr').eq(1).find('td').toggleClass( "bg-color");
                            setTimeout(function(){
                              $('tr').eq(1).find('td').toggleClass( "bg-color");
                            },3000)
                            // Back to first tab
                           $('#insertModal').modal('hide');
                            
                        } else if (event.type === 'exception') {
                            alert(event.message);
                        } else {
                            alert(event.message);
                        }
                    }     
                 ); 
              }else{
                  // Show Error
                  var msg ='';
                  if( $scope.Name === undefined){
                      msg +='Name is Required! \n';
                  }
                  if( $scope.Phone === undefined){
                      msg +='Phone is Required! \n';
                  }
                  alert(msg);
              }
           }
           
           // Delete Account
           $scope.delete = function(index,id,obj){
               ///$('.loadingDiv').hide();
                  $(obj).closest('tr').find('td').fadeOut(700);
                  setTimeout(function(){
                   $scope.items.splice($scope.items.indexOf(index),1);
                   $scope.$apply();
                   },900);
               Visualforce.remoting.Manager.invokeAction(
                     'AngularJSDemoController.deleteAccount', 
                     id,
                     function(result, event) {
                        if (event.status) {
                          
                          
                        } else if (event.type === 'exception') {
                            alert(event.message);
                        } else {
                            alert(event.message);
                        }
                    }     
                 ); 
                    
           }
           
           // Fill Value to Edit Form
           $scope.edit = function(index){
               $scope.index = index;
               var detail = $scope.items[$scope.items.indexOf($scope.index)];
               ///alert(JSON.stringify(detail));
               $scope.account.Name =detail.name;
               $scope.account.Phone = detail.Phone;
               $scope.account.Fax =detail.Fax;
               $scope.account.Website = detail.Website;
               $scope.account.Id = detail.id;
               $('#updateModal').modal('show');
           }
           // Update Account
            $scope.update = function(){
                if($scope.account.Name !== undefined &&  $scope.account.Phone !== undefined){
                    var Fax = $scope.account.Fax !== undefined ? $scope.account.Fax : 'null';
                    var Website = $scope.account.Website !== undefined ? $scope.account.Website : 'null';
                    Visualforce.remoting.Manager.invokeAction(
                         'AngularJSDemoController.updateAccount',
                         $scope.account.Id, 
                         $scope.account.Name,
                         $scope.account.Phone,
                         Fax,
                         Website,
                         function(result, event) {
                            if (event.status) {
                                $scope.items[$scope.items.indexOf($scope.index)].name = $scope.account.Name;
                                $scope.items[$scope.items.indexOf($scope.index)].Phone= $scope.account.Phone;
                                $scope.items[$scope.items.indexOf($scope.index)].Fax = $scope.account.Fax;
                                $scope.items[$scope.items.indexOf($scope.index)].Website = $scope.account.Website;
                                $scope.$apply();
                                $('#updateModal').modal('hide');
                            } else if (event.type === 'exception') {
                                alert(event.message);
                            } else {
                                alert(event.message);
                            }
                        }     
                     );
                 }else{
                      // Show Error
                      var msg ='';
                      if($scope.account.Name === undefined){
                          msg +='Name is Required! \n';
                      }
                      if($scope.account.Phone === undefined){
                          msg +='Phone is Required! \n';
                      }
                      alert(msg);
                  }
             }
        })
    </script>

Here is the full visualforce page code:


<apex:page showHeader="false" sidebar="false" standardStylesheets="false" controller="AngularJSDemoController">
    <apex:remoteObjects >
        <apex:remoteObjectModel name="Account" jsShorthand="acc" fields="Name,Id,Phone"></apex:remoteObjectModel>
    </apex:remoteObjects>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Angularjs with Bootstrap</title>

    <!-- Bootstrap -->
    <link href="{!URLFOR($Resource.bootstrap,'css/bootstrap.min.css')}" rel="stylesheet" />
    <link href="{!URLFOR($Resource.bootstrap,'css/bootstrap-theme.css')}" rel="stylesheet" />
    <link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
            <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      #account-box{
          display:none
      }
      #account-list{
          display:block
      }
      @media (max-width:400px){
          h1{font-size:20px}
          #account-box{display:block}
          #account-list{
              display:none
          }
      }
      .bg-color{background-color:#19BFE5;transition: opacity 500 ease-in-out;}
    </style>
    <script>
        
        var myapp = angular.module('myapp', []);
        myapp.controller('MyController',function($scope,$filter){
           $scope.items = {!lstAccount};
           $scope.account = {};
           $scope.account.Name ='';
           $scope.account.Phone ='';
           $scope.account.Website ='';
           $scope.account.Fax ='';
           $scope.account.Id ='';
           $scope.index='';
           
           // Create Account
           $scope.create= function(){
             if($scope.Name !== undefined &&  $scope.Phone !== undefined){
                var Fax = $scope.Fax !== undefined ? $scope.Fax : 'null';
                var Website = $scope.Website !== undefined ? $scope.Website : 'null';
                Visualforce.remoting.Manager.invokeAction(
                    'AngularJSDemoController.createAccount', 
                     $scope.Name,
                     $scope.Phone,
                     Fax,
                     Website,
                     function(result, event) {
                        if (event.status) {
                           var newAccount = {};
                           
                            // Add to list
                            newAccount.name = $scope.Name;
                            newAccount.Phone = $scope.Phone;
                            newAccount.Fax = $scope.Fax;
                            newAccount.Website = $scope.Website;
                            newAccount.id = result;
                            $scope.items.unshift(newAccount); 
                            
                            // Reset Insert form Value
                            $scope.Name = $scope.Phone = $scope.Fax = $scope.Website ='';
                            
                            $scope.$apply();
                            $('tr').eq(1).find('td').toggleClass( "bg-color");
                            setTimeout(function(){
                              $('tr').eq(1).find('td').toggleClass( "bg-color");
                            },3000)
                            // Back to first tab
                           $('#insertModal').modal('hide');
                            
                        } else if (event.type === 'exception') {
                            alert(event.message);
                        } else {
                            alert(event.message);
                        }
                    }     
                 ); 
              }else{
                  // Show Error
                  var msg ='';
                  if( $scope.Name === undefined){
                      msg +='Name is Required! \n';
                  }
                  if( $scope.Phone === undefined){
                      msg +='Phone is Required! \n';
                  }
                  alert(msg);
              }
           }
           
           // Delete Account
           $scope.delete = function(index,id,obj){
               ///$('.loadingDiv').hide();
                  $(obj).closest('tr').find('td').fadeOut(700);
                  setTimeout(function(){
                   $scope.items.splice($scope.items.indexOf(index),1);
                   $scope.$apply();
                   },900);
               Visualforce.remoting.Manager.invokeAction(
                     'AngularJSDemoController.deleteAccount', 
                     id,
                     function(result, event) {
                        if (event.status) {
                          
                          
                        } else if (event.type === 'exception') {
                            alert(event.message);
                        } else {
                            alert(event.message);
                        }
                    }     
                 ); 
                    
           }
           
           // Fill Value to Edit Form
           $scope.edit = function(index){
               $scope.index = index;
               var detail = $scope.items[$scope.items.indexOf($scope.index)];
               ///alert(JSON.stringify(detail));
               $scope.account.Name =detail.name;
               $scope.account.Phone = detail.Phone;
               $scope.account.Fax =detail.Fax;
               $scope.account.Website = detail.Website;
               $scope.account.Id = detail.id;
               $('#updateModal').modal('show');
           }
           // Update Account
            $scope.update = function(){
                if($scope.account.Name !== undefined &&  $scope.account.Phone !== undefined){
                    var Fax = $scope.account.Fax !== undefined ? $scope.account.Fax : 'null';
                    var Website = $scope.account.Website !== undefined ? $scope.account.Website : 'null';
                    Visualforce.remoting.Manager.invokeAction(
                         'AngularJSDemoController.updateAccount',
                         $scope.account.Id, 
                         $scope.account.Name,
                         $scope.account.Phone,
                         Fax,
                         Website,
                         function(result, event) {
                            if (event.status) {
                                $scope.items[$scope.items.indexOf($scope.index)].name = $scope.account.Name;
                                $scope.items[$scope.items.indexOf($scope.index)].Phone= $scope.account.Phone;
                                $scope.items[$scope.items.indexOf($scope.index)].Fax = $scope.account.Fax;
                                $scope.items[$scope.items.indexOf($scope.index)].Website = $scope.account.Website;
                                $scope.$apply();
                                $('#updateModal').modal('hide');
                            } else if (event.type === 'exception') {
                                alert(event.message);
                            } else {
                                alert(event.message);
                            }
                        }     
                     );
                 }else{
                      // Show Error
                      var msg ='';
                      if($scope.account.Name === undefined){
                          msg +='Name is Required! \n';
                      }
                      if($scope.account.Phone === undefined){
                          msg +='Phone is Required! \n';
                      }
                      alert(msg);
                  }
             }
        })
    </script>
  </head>
  <body ng-app="myapp">
  <div class="container" ng-controller="MyController">
      <!-- Loading Window -->
       <div class="loadingDiv" style="display:none">
          <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 100000;">
             <div style="position:fixed;top:250px;height:100%;width:100%;">
               <center>                
                 <img src="http://www.spotlightbusinessbranding.com/wp-content/plugins/use-your-drive/css/clouds/cloud_loading_256.gif" width="120px"/>    
               </center>                      
            </div>                   
         </div>
     </div>
      <!-- Insert Modal -->
      <div class="modal fade" id="insertModal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">New Account</h4>
              </div>
              <div class="modal-body">
                  <div class="col-md-12">
                      <form class="form-horizontal">
                            <div class="form-group">
                                <label>Name</label>
                                <div class="input-group">
                                  <span class="input-group-addon">
                                      <i class="glyphicon glyphicon-user"></i>
                                  </span>
                                  <input type="text" class="form-control" placeholder="Name" ng-model="Name" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Phone</label>
                                <div class="input-group">
                                  <span class="input-group-addon">
                                      <i class="glyphicon glyphicon-earphone"></i>
                                  </span>
                                  <input type="text" class="form-control" placeholder="Phone" ng-model="Phone" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Fax</label>
                                <div class="input-group">
                                  <span class="input-group-addon">
                                      <i class="glyphicon glyphicon-print"></i>
                                  </span>
                                  <input type="text" class="form-control" placeholder="Fax" ng-model="Fax" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Website</label>
                                <div class="input-group">
                                  <span class="input-group-addon">
                                      <i class="glyphicon glyphicon-link"></i>
                                  </span>
                                  <input type="text" class="form-control" placeholder="Website" ng-model="Website" />
                                </div>
                            </div>
                        </form>
                  </div>
                  <div class="clearfix"></div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="button" class="btn btn-success" ng-click="create()" value="Save" />
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        
      <!-- Edit Modal -->
      <div class="modal fade" id="updateModal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Update</h4>
              </div>
              <div class="modal-body">
                  <div class="col-md-12">
                      <form class="form-horizontal">
                            <input type="hidden" ng-model="account.Id" />
                            <div class="form-group">
                                <label>Name</label>
                                <div class="input-group">
                                  <span class="input-group-addon">
                                      <i class="glyphicon glyphicon-user"></i>
                                  </span>
                                  <input type="text" class="form-control" placeholder="Name" ng-model="account.Name" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Phone</label>
                                <div class="input-group">
                                  <span class="input-group-addon">
                                      <i class="glyphicon glyphicon-earphone"></i>
                                  </span>
                                  <input type="text" class="form-control" placeholder="Phone" ng-model="account.Phone" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Fax</label>
                                <div class="input-group">
                                  <span class="input-group-addon">
                                      <i class="glyphicon glyphicon-print"></i>
                                  </span>
                                  <input type="text" class="form-control" placeholder="Fax" ng-model="account.Fax" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Website</label>
                                <div class="input-group">
                                  <span class="input-group-addon">
                                      <i class="glyphicon glyphicon-link"></i>
                                  </span>
                                  <input type="text" class="form-control" placeholder="Website" ng-model="account.Website" />
                                </div>
                            </div>
                        </form>
                  </div>
                  <div class="clearfix"></div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="button" class="btn btn-success" ng-click="update()" value="Save" />
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
      <div class="row">
          <div class="col-md-12">
              <h1>Angularjs with Bootstrap
                  <div class="pull-right">
                      <button type="button" class="btn btn-sm btn-success" onclick="$('#insertModal').modal('show')">
                          <i class="glyphicon glyphicon-plus"></i> New
                      </button>
                  </div>
                  <div class="clearfix"></div>
              </h1><hr/>
              <form class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-md-2 col-md-offset-2">Search</label>
                    <div class="col-md-4">
                        <input type="text" ng-model="search" class="form-control" />
                    </div>
                    
                </div>
                <hr/>
                <div class="form-group">
                    <div class="col-sm-12">
                        <div id="account-box"><!-- Account Box List Start-->
                            <div class="row"  ng-repeat="account in items | filter:search">
                              <div class="col-xs-12">
                                <div class="thumbnail">
                                  <div class="caption">
                                    <dl>
                                      <dt>Name</dt>
                                      <dd>{{account.name}}</dd>
                                      <dt>Phone</dt>
                                      <dd>{{account.Phone}}</dd>
                                      <dt>Fax</dt>
                                      <dd>{{account.Fax}}</dd>
                                      <dt>Website</dt>
                                      <dd>{{account.Website}}</dd>
                                    </dl>
                                    <p>
                                        <button type="button" class="btn btn-sm btn-primary" title="Update" ng-click="edit(account)">
                                            <i class="glyphicon glyphicon-pencil"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-danger" title="Delete" ng-click="delete(account,account.id,$event.target)">
                                            <i class="glyphicon glyphicon-trash"></i>
                                        </button>
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                        </div><!-- Account Box List End-->
                        <div class="panel panel-primary" id="account-list"><!-- Account List Start-->
                            <div class="panel-heading">Accounts</div>
                            <div class="panel-body" style="padding:0px">
                                <table class="table table-striped table-bordered" style="margin:0">
                                    <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Phone</th>
                                        <th>Fax</th>
                                        <th>Website</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="account in items | filter:search">
                                        <td>{{account.name}}</td>
                                        <td>{{account.Phone}}</td>
                                        <td>{{account.Fax}}</td>
                                        <td>{{account.Website}}</td>
                                        <td width="100">
                                            <button type="button" class="btn btn-sm btn-primary" title="Update" ng-click="edit(account)">
                                                <i class="glyphicon glyphicon-pencil"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-danger" title="Delete" ng-click="delete(account,account.id,$event.target)">
                                                <i class="glyphicon glyphicon-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div><!-- Account List End -->
                    </div>
                </div>
              </form>
          </div>
        </div><!-- Main Row End -->
      </div><!-- Container End -->
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{!URLFOR($Resource.bootstrap,'js/bootstrap.min.js')}"></script>
  </body>
</html>
</apex:page>

For public demo click
http://mufiz12ka4-developer-edition.ap1.force.com/AngularjsWithBootstrap

Feel free to use the code and try it out. Provide me your valuable feedback:

Thanks
Shaikh Mufiz