cloudy abhi ☁: Bootstrap Modal Using AngularJS and Javascript in #Salesforce

Thursday 17 December 2015

Bootstrap Modal Using AngularJS and Javascript in #Salesforce

This blog is about using bootstrap modal using AngularJS and Javascript, there are two different ways of using the modal and fetching the values from the modal.

I have added few fields in the modal and accessing the fields from the modal using two different buttons, below are the buttons

Modals code is same but only the function of fetching the values is different.
Here is how the modal looks

Here is the code of the page with the modal code and accessing the values of the modal in different ways.
Check out the code and if any issue or queries just comment I would be happy to help.

1:  <apex:page sidebar="false" showHeader="false" docType="html-5.0" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false">  
2:    <html lang="en">  
3:      <title>Manage Users</title>  
4:      <head>  
5:        <meta charset="utf-8"></meta>  
6:        <meta name="viewport" content="width=device-width, initial-scale=1"></meta>  
7:        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>  
8:        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
9:        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
10:        <script>  
11:          $(document).on("click","#myReset",function() {  
12:            $('#myModal').modal('hide');  
13:          });  
14:          //click to save data filled in the modal using javascript  
15:          $(document).on("click", "#btnCreateContact", function(event){  
16:            var fn = document.getElementById("firstname").value;  
17:            var ln = document.getElementById("lastname").value;  
18:            var ph = document.getElementById("phone").value;  
19:            var em = document.getElementById("email").value;  
20:            var title = document.getElementById("title").value;  
21:            if(em == '' || ln == '' || fn == '' || title == '') {  
22:              alert('First Name, Last Name, Email and Title are required.');  
23:            } else {  
24:              //calling remote action  
25:              YOUR_APEX_CLASS.REMOTE_ACTION_METHOD(fn, ln, em, title, ph, function(response,event) {   
26:                $('#myModal').modal('hide');    
27:                if (event.status) {  
28:                  //debugger;   
29:                  if (response == null || response == '') {  
30:                    //Reload window and close modal  
31:                    //window.location.assign(window.location.href);  
32:                    window.location.reload(true);  
33:                    $('#myModal').modal('hide');  
34:                  } else {  
35:                    $('#myModal').modal('hide');  
36:                    alert(response);  
37:                    window.location.reload(true);  
38:                  }  
39:                } else {  
40:                  $('#myModal').modal('hide');  
41:                  alert(event.message);  
42:                  window.location.reload(true);  
43:                }  
44:              },{escape:false, buffer: false});  
45:            }  
46:          });  
47:          // USING ANGULAR NOW  
48:          //Initialling controller  
49:          myapp.controller('MainController',['$q','$log','$scope',function($q,$log,$scope){  
50:            $scope.firstname = '';  
51:            $scope.lastname = '';  
52:            $scope.phone = '';  
53:            $scope.email = '';  
54:            $scope.title = '';  
55:            //CALL REMOTE ACTION METHOD   
56:            MY_CLASS_NAME.REMOTE_ACTION(firstname, lastname, phone, email, title, function(response,event) {   
57:              // DO YOUR STUFF HERE  
58:            });  
59:          }]);  
60:         </script>  
61:      </head>  
62:       <!-- Modal -->  
63:       <div class="modal fade" id="myModal">  
64:        <div class="modal-dialog">  
65:         <!-- Modal content-->  
66:         <div class="modal-content">  
67:          <div class="modal-header">  
68:           <button type="button" class="close" data-dismiss="modal">&times;</button>  
69:           <h4 class="modal-title">Contact Details</h4>  
70:          </div>  
71:            <div class="col-xs-12 form-group">  
72:            </div>  
73:            <div class="col-xs-12 form-group">  
74:              <label>First Name<font color="red">*</font></label>  
75:              <input class="form-control" id="firstname" value="" ng-model="firstname"/>  
76:            </div>  
77:            <div class="col-xs-12 form-group">  
78:              <label>Last Name<font color="red">*</font></label>  
79:              <input class="form-control" id="lastname" value="" ng-model="lastname"/>  
80:            </div>  
81:            <div class="col-xs-12 form-group">  
82:              <label>Email<font color="red">*</font></label>  
83:              <input class="form-control" id="email" value="" ng-model="email"/>  
84:            </div>  
85:            <div class="col-xs-12 form-group">  
86:              <label>Title<font color="red">*</font></label>  
87:              <input class="form-control" id="title" value="" ng-model="title"/>  
88:            </div>  
89:            <div class="col-xs-12 form-group">  
90:              <label>Phone</label>  
91:              <input class="form-control phone" id="phone" onchange="formatPhone(this);" ng-model="phone"/>  
92:            </div>  
93:            <div class="btn-group" align="center">  
94:              <button id="btnCreateContact" class="btn btn-primary btn-md center-block" style="margin-left: 216px;">Save</button>  
95:              <a href="#" id="myReset" class="btn btn-primary btn-md center-block" style="margin-left: 15px;">Cancel</a>  
96:            </div>  
97:            <br></br>  
98:            <br></br>  
99:            <div class="modal-footer">  
100:            </div>  
101:           </div>  
102:         <br></br>  
103:       </div>  
104:       <br></br>  
105:      </div>  
106:      <br></br>  
107:      <div >  
108:       <div class="container">  
109:         <div class="panel panel-default">  
110:           <br></br>  
111:           <div class="btn-group" align="center" style="left: 27%;">   
112:             <button id="blocds" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-md center-block" style="margin-left: 15px;">Modal Using Javascript</button>   
113:             <button id="blocds" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-md center-block" style="margin-left: 15px;background-color:#DF4720">Modal Using AngularJS</button>   
114:           </div>  
115:           <br></br>  
116:           <br></br>     
117:         </div>  
118:       </div>  
119:      </div>   
120:    </html>   
121:  </apex:page>

Happy coding!!