Expanding the features of Lightning Component Using Visualforce page #Salesforce - Part 2

Previously we have used the Lightning component inside visualforce page, now this we are going to use the visualforce inside lightning page, and set some attributes default value on load of the lightning component using visualforce page, here what we are going to achieve is that we will load the visualforce page, and then remaining process of Lightning component order or execution will be same.



So here we are going to have a visualforce page, that will save/update the data in the custom setting, and the out lightning component will use the same data in custom setting.

So here is the visualforce page, that we are going to use in lightning component, and this page is updating the your custom setting.

Page Name : UpdateCustomSetting

<!-- defining custom setting here -->
<apex:remoteObjects jsNamespace="RemoteObjectModel">  
    <apex:remoteObjectModel name="MyCustomSetting__c" fields="Id,Field1__c,Field2__c">  
    </apex:remoteObjectModel>  
</apex:remoteObjects> 

<script>
//to save data in custom setting 
function updateCustomSetting() { 
    
    (new RemoteObjectModel.MyCustomSetting__c()).retrieve( 
        function(error, records, event) {
            if(records[0]) {
                (new RemoteObjectModel.MyCustomSetting__c({
                    Field1__c: '{!$Api.Partner_Server_URL_XXX}', 
                    Field2__c: '{!$Api.Session_Id}',
                    Id: records[0].get("Id")
                })).update();
            } else {
                (new RemoteObjectModel.MyCustomSetting__c({
                    Field1__c: '{!$Api.Partner_Server_URL_XXX}', 
                    Field2__c: '{!$Api.Session_Id}'
                })).create();
            }
        });
}

updateCustomSetting();
}
</script>

The way of using the visualforce page in the lightning component, is by calling the visualforce page using iframe.

<aura:component implements="force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
     
    <div style="display:none;">
        <iframe aura:id="vfFrame" src="{!'https:// + YOUR_ORG_URL + dev-ed.my.salesforce.com/apex/UpdateCustomSetting'}"/>
    </div>

    //YOUR COMPONENT CODE HERE


    //assign the value to these in the helper by calling apex 
    <aura:attribute name="FIELD1" type="String" access="public"/>
    <aura:attribute name="FIELD2" type="String" access="public"/>

    Custom Setting value :: "{!v.FIELD1}"
    

</aura:component>
    

Using above code you will be able to use the custom setting field values in your Lightning component.

Hope it helps !

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!!

Lazy loading tree with Force.com

I was trying to find something new to work, but nothing was making me eager to do that thing, and then I found out Jeff Douglas post of Original Post
Its an awesome post like he post every time, then I tried that thing in my personal salesforce org, and within few minutes I can see that tree in my org.

He's is using Jstree, its a jquery plugin, that provides interactive trees.
To know more about JsTree www.jstree.com

So that was so simple, and too much awesome, I would love to thank Jeff for doing such great things.
What he's exactly doing is to load an Objects tree, using Jquery, jsTree and Rest Javascript and using Lazy Loading.
There is a component that he created and called that component on the page.

Here how the tree looks

Here is the Steps need to perform

1. Create an Object named Parent Object.
2. Add a parallel look-up to the Parent Object of its own. Name the field "Parent Object".
3. Create a component named as "lazyLoadingTree". paste this code LazyLoadingTree
4. Create a Visualforce Page, name it ParentObject, paste this code ParentObject

5. Here is the Static Resource that you need to create, this is called from the Component that we created earlier, you cannot save your component without this restJavascript

Cheers..!!!
Happy Coding :)

reCaptcha Using HTML and Javascript ONLY...

Googles reCaptcha , its so easy to use it using PHP and .NET plugins, but I was trying to make it work only by HTML codes,

You can read this post of for reCaptcha without plugin CLICK ME
Unfortunately I tried to search, but everybody is using PHP, and upload that PHP file on server, to use it and make reCaptcha working, but I want a single code to make reCaptha working.

Here how it looks

As my code is not perfect, I have not done anything for the errors, but yes the reCaptcha's verification is working just perfect, it fetches response and shows it to you.
Here is the code(just paste it buddy)
reCaptch HTML

Hope I've helped..!!!

CHEERS :)

Javascript Data Table in Salesforce

Salesforce provides its own datatables attributes to show your data on visualforce pages, but its kind of slow and requires heavy coding to add Sorting and Paging things on it.
So if we try for javascript for this purpose, its so easy and fast on the UI.

Here I have created a Generic Component where, developer just need to pass the name of the list(having records of an Object), with Name of the headers of the list. and that component will do everything to show a multifunctional table on the page.

And then table will look something like below, having records of Account object.

You can check the functionality of the above table on this link Javascript Datatable

Here is the Visualforce page using a Component.

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
<apex:page Controller="JQDatable">

  <!-- Calling component having list and Header of the table -->
  <c:DataTableComponent listOfRecords="{!accounts}" fieldHeader="Name,Phone,AccountNumber,Type,Owner.Name" />
</apex:page>
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Developer just need to pass the name of the List with correspinding name of the fields here is the Controller class of the above pages

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
public with sharing class JQDatable {

  //List of Account
  public List<Account> getAccounts() {
     return [SELECT Id, Name, Phone, AccountNumber, Type, Owner.Name FROM Account];
   }
}
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

All this simple code showing such functionality becuase of the component, refer these below links to have the Component as well as Jquery and CSS files that have been used.

Here is Component and its Controller
Datable Component Controller
Datatable Component

Jquery and Css files used in Static resource()
jquery.js
jquery.dataTables.js
Demo_table.css

After saving all above, you can have a Generic Component to show a multi-functional Data table in salesforce.

Happy Coding...CHEERSSS..!!!!