Salesforce Visualforce Demo with AngularJs and Bootstrap

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

206 comments:

Elena James9 November 2021 at 18:04
Do You Know AximTrade Is A Global Financial Firm That Offers A Wide Range Of Financial Services, Including Fx, Cfd, No Deposit Bonus And More Sign Up With Aximtrade Login Account And Trade In Forex
Peter Schiff11 November 2021 at 10:52
If You Are Looking For Forex Broker? Read This Review And Find Out How Much I've Enjoyed My Experience With Aximtrade Reviews
Steven Cohen18 November 2021 at 15:23
AVATRADE REVIEW Review - Find Out Everything About This Forex Broker. Read Our Detailed Fx Choice Review And Make Sure If This Broker Is For You. We Scrutinized The Broker And The Trading Conditions Thoroughly.
Aarya Sharma23 November 2021 at 19:04
You have posted a good article on Angular sofwatre development. I liked it, and it's really interesting and helpful. For those who are searching for AngularJS App Development, Thanks a lot for this blog.

Hire Dedicated AngularJS Developers
Digital Chandu22 December 2021 at 20:14
This is a nice article you shared with great information. Thanks for giving such wonderful information. I hope you will publish again such type of post.

digital marketing training in hyderabad
digital marketing course in hyderabad
Shabby24 December 2021 at 14:30
The article was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents.
by cloudi5 is the best Web Design Company in Coimbatore

Monday 5 October 2015

Salesforce Visualforce Demo with AngularJs and Bootstrap

206 comments:

RANDOM

About Us

CATEGORIES

Monday 5 October 2015

Salesforce Visualforce Demo with AngularJs and Bootstrap

206 comments:

RANDOM

About Us

CATEGORIES

Subscribe