Salesforce Pagination Lightning Component

05:42 29 Comments A+ a-

Hi All,
I have created a Pagination component which can be used as Lightning Component. This is very easy to setup and configure. You simply need to drag it in app builder and configure by giving objectname, fieldnames and the title of the pagination. By default it will fetch contact object and its by default giving fields.


For more information, watch it here -:

www.screencast.com

Unable to display content. Adobe Flash is required.

Here is the code:- 

Apex Controller:- 
public class PaginationController{ @AuraEnabled public static String getContacts(String objectName,String fieldName){ List<sObject> mylist = new List<sObject>(); String query = 'Select '; string fieldNames = queryableField(objectName, fieldName); if(string.isNotBlank(objectName) && string.isNotBlank(fieldNames)){ if(!new set<string>(new List<String>(fieldNames.split(','))).contains('Id')) query +='Id, '; query += fieldNames +' from '+objectName; }else if(string.isNotBlank(fieldNames)){ if(!new set<string>(new List<String>(fieldNames.split(','))).contains('Id')) query +='Id, '; query += fieldNames +' from contact'; } if(query != null) mylist = Database.query(query); if(mylist != null && mylist.size() > 0){ Map<String, Schema.SObjectField> FieldMap = Schema.getGlobalDescribe().get(string.valueOf(mylist.get(0).getSObjectType())).getDescribe().fields.getMap(); String jSon='['; String coma=''; List<string> field = fieldNames.split(','); for(sObject con : mylist) { jSon += '['; Integer i=0; for(string f : field){ if(i==0){ jSon += coma + '"<a target=\'_blank\' class=\'showDetail\' id=\''+con.get('Id')+'\' >' +con.get(f)+ '</a>",'; } else { jSon += coma + '"'+con.get(f)+'",'; } i++; } jSon += '],'; } jSon+=']'; return jSon; } else { return null; } } //function for return valid fields on basis of object and fields string. @AuraEnabled public static string queryableField(string objectString, string fieldString){ if((string.isBlank(objectString) && string.isBlank(fieldString)) || (string.isNotBlank(objectString) && string.isBlank(fieldString)) || string.isBlank(fieldString) ) return null; set<string> objectName = new set<string>(); for(string obj : Schema.getGlobalDescribe().keyset()) objectName.add(obj.toLowercase()); if(!objectName.contains(objectString.toLowercase())) return null; set<string> allFields = new set<string>(); set<string> validField = new set<string>(); Map<String, Schema.SObjectField> FieldMap; if(string.isNotBlank(objectString)) FieldMap = Schema.getGlobalDescribe().get(objectString).getDescribe().fields.getMap(); else FieldMap = Schema.getGlobalDescribe().get('contact').getDescribe().fields.getMap(); for(string field : FieldMap.keySet()){ allFields.add(FieldMap.get(field).getDescribe().getName().toLowercase()); } for(string f : fieldString.split(',')){ if(string.isNotBlank(f)){ if(allFields.contains(f.toLowercase())) validField.add(f.capitalize()); } } return string.join(new List<string>(validField),','); } }
 
Aura Controller:-  
({ doInit : function(component, event, helper) { var dataSet; var columns; var action = component.get("c.getContacts"); var action2 = component.get("c.queryableField"); var objectName = component.get("v.objectName"); var fieldName = component.get("v.fieldName"); var title = component.get("v.title"); component.set("v.title",title); var fields; var splitfileds; action.setParams({ "objectName":objectName, "fieldName":fieldName }) ; action2.setParams({ "objectString":objectName, "fieldString":fieldName }) ; var self = this; action2.setCallback(this,function(response){ var state = response.getState(); if(component.isValid() && state === "SUCCESS"){ fields = response.getReturnValue().split(","); var jSon='['; var coma=''; for(var i=0;i<fields.length;i++) { jSon+=coma+'{title:"'+fields[i]+'"}'; coma=','; } jSon+=']'; splitfileds = eval(jSon); } }); $A.enqueueAction(action2); action.setCallback(this,function(response){ var state = response.getState(); if(component.isValid() && state === "SUCCESS") { dataSet = eval(response.getReturnValue()); $(function(){ /* initiate the plugin */ $(window).resize(function(){ if ($(window).width() <= 700) { $('.container ').css({"overflow-x":"scroll","width":"100%"}); } else{ $('.container ').css({"overflow-x":"none","width":"100%"}); } }); var table = $('#example').DataTable({ data: dataSet, columns:splitfileds, "fnDrawCallback": function( oSettings ) { $('.showDetail').css({"cursor":"pointer","text-decoration":"none"}); $('.showDetail').click(function(){ var recordId = $(this).attr('id'); helper.navigateToDetailsView(recordId); }); } }); }); } }); $A.enqueueAction(action); } })

Aura Component:-
<aura:component controller="PaginationController" implements="flexipage:availableForAllPageTypes"> <ltng:require styles="/resource/bootstrap/css/datatable.css, /resource/bootstrap/css/mycss.css" scripts="/resource/bootstrap/js/jquery.js, /resource/bootstrap/js/datatable.min.js" afterScriptsLoaded="{!c.doInit}"/> <aura:attribute name="objectName" type="String" default="contact"/> <aura:attribute name="fieldName" type="String" default="name,id,email"/> <aura:attribute name="title" type="String" default="Pagination Table"/> <div class="container"> <h2>{!v.title}</h2> <br/> <table class="table table-bordered display" id="example"> </table> </div> </aura:component>

Aura Helper:-
({ navigateToDetailsView : function(accountId) { var event = $A.get("e.force:navigateToSObject"); event.setParams({ "recordId": accountId }); event.fire(); } })

Aura Application:-
<aura:application > <div class="container"> <c:dynamicPaginationForm /> </div> </aura:application>

Aura Design:- 
<design:component> <design:attribute name="objectName" label="Object Name"/> <design:attribute name="fieldName" label="Field Name"/> <design:attribute name="title" label="Title"/> </design:component>
Download static resource from here...
 
Copy the code and implement in your organization and if you face any issue, email me.
Provide your valuable feedback.


Thanks 
Sakib Beig 

Salesforce Lightning Image Slider

02:00 11 Comments A+ a-

Hi All,
I have created a simple Image Slider which is used as Lightning Component. It is very easy to drag and drop on App Builder. You can configure two things "Slider Image Folder" where you can specify the document folder name where your images are stored. And second configuration is the Interval of speed of the sliding.
 
 
 
More Information With Demo Visit :- Click here
Unable to display content. Adobe Flash is required.
 
Here is the sample code of the component.
Controller
public class SliderController{ @AuraEnabled public static List<String> getImages(String folderName){ List<String> lstOfImagesUrl =new List<String>(); List<Folder> folderLst= [select id from Folder where name=:folderName]; List<Document> docList=[select id from Document where FolderId=:folderLst[0].id]; for(Document doc:docList){ lstOfImagesUrl.add(System.URL.getSalesforceBaseUrl().toExternalForm().replace('https','http')+'/servlet/servlet.ImageServer?id='+doc.id+'&oid='+UserInfo.getOrganizationId()); } return lstOfImagesUrl ; } }
Aura Controller

({ doInt: function(component, event, helper) { var speed=component.get("v.interval"); var document=component.get("c.getImages"); document.setParams({ folderName :component.get("v.Folder") }); document.setCallback(this, function(response){ if(component.isValid() && response.getState() === "SUCCESS"){ component.set("v.imagesUrl", response.getReturnValue()); } }); $A.enqueueAction(document); if(speed<500){ alert("Min Interval 500 Millisecond"); }else{ $('.carousel').carousel({ interval: speed }); $('.carousel').carousel({ interval: true }); } }, Previous : function(component, event, helper) { $('#carousel-example-generic').carousel('prev'); }, Next : function(component, event, helper) { $('#carousel-example-generic').carousel('next'); $('#carousel-example-generic').carousel(200); }, })
Aura component

<aura:component controller="SliderController" implements="flexipage:availableForAllPageTypes"> <ltng:require styles="/resource/BootstrapFiles/BootstrapFiles/css/bootstrap.min.css"/> <ltng:require scripts="/resource/BootstrapFiles/BootstrapFiles/js/jquery.min.js, /resource/BootstrapFiles/BootstrapFiles/js/bootstrap.min.js" afterScriptsLoaded="{!c.doInt}"/> <aura:attribute name="imagesUrl" type="String[]" /> <aura:attribute name="Folder" type="String" default="SliderImages"/> <aura:attribute name="interval" type="Integer" default="2000"/> <div id="carousel-example-generic" class="carousel slide imageInterval" data-ride="carousel" > <!-- Indicators --> <ol class="carousel-indicators"> <aura:iteration items="{!v.imagesUrl}" var="imgUrl" indexVar="index"> <aura:if isTrue="{!index == 0}"> <li data-target="#carousel-example-generic" data-slide-to="{!index}" class="active"></li> <aura:set attribute="else"> <li data-target="#carousel-example-generic" data-slide-to="{!index}" ></li> </aura:set> </aura:if> </aura:iteration> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <aura:iteration items="{!v.imagesUrl}" var="imgUrl" indexVar="index"> <aura:if isTrue="{!index == 0}"> <div class="item active" > <img src="{!imgUrl}" alt="..." class="img-responsive" style="width:100% !important"/> <div class="carousel-caption"> </div> </div> <aura:set attribute="else" > <div class="item " > <img src="{!imgUrl}" alt="..." class="img-responsive" style="width:100% !important"/> <div class="carousel-caption"> </div> </div> </aura:set> </aura:if> </aura:iteration> </div> <!-- Controls --> <a class="left carousel-control" href="" role="button" data-slide="prev" onclick="{!c.Previous}"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="" role="button" data-slide="next" onclick="{!c.Next}"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </aura:component>
Aura:application

<aura:application > <div class="container-fluid" style="background-color:white !important" > <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <c:Slider /> </div> <div class="col-sm-3"></div> </div> </div> </aura:application>
Slider Design 

<design:component> <design:attribute name="Folder" label="Slider Images Folder" /> <design:attribute name="interval" label="Interval" /> </design:component>

Give this code a try and let me know if you face issues in set it up. Provide your valuable feedback


Thanks
Himanshu Tak






Salesforce Visualforce Signature Tool

05:05 31 Comments A+ a-

Hi All,
This is a simple demo which will guide you to create a form with "Signature Canvas" to take initials from user and stores that in document and also displays it in a PDF file. It can be used for initials in an Agreement, Terms and Condition, Authorized Person and various other places.
For this task I would be using a jQuery plug-in 'Sketch.js' which is available on, http://intridea.github.io/sketch.js/lib/sketch.js

Here is a demo page with Terms and conditions having two canvas for big and initial signatures.
Demo URL : http://nchandwani-developer-edition.ap2.force.com/SignatureDemo



A Pdf file created after submitting the form with the initials presented at the desired place.


For this example, I have created two Vf Pages, "SignatureDemo" and "SignatureDemoPdf". Controller used is "SignatureDemoController".

SignatureDemoController
public class SignatureDemoController{ public String initial1{get;set;} public String initial2{get;set;} public SignatureDemoController(){ String temp = ApexPages.currentPage().getParameters().get('dId'); if( temp != null){ list<String> docIds = temp.split(','); initial1 = docIds[0]; initial2 = docIds[1]; } } public PageReference submit(){ Folder f1 = [SELECT Id FROM Folder WHERE Name='Signatures' LIMIT 1]; List<string> signList = new List<string>(); signList=initial1.split(','); Document d1 = new Document(Name = 'Initial1', FolderId = f1.Id); if(signList.size()>1){ d1.body=EncodingUtil.base64Decode(signList[1]); } else if(signList.size() >0){ d1.body=EncodingUtil.base64Decode(signList[0]); } Upsert d1; signList=initial2.split(','); Document d2 = new Document(Name = 'Initial2', FolderId = f1.Id , contentType = 'image/jpeg'); if(signList.size()>1){ d2.body=EncodingUtil.base64Decode(signList[1]); } else if(signList.size() >0){ d2.body=EncodingUtil.base64Decode(signList[0]); } Upsert d2; return (new PageReference('/SignatureDemoPdf?dId=' + d1.Id + ',' + d2.Id )).setRedirect(true); } }

SignatureDemo
<apex:page tabStyle="Contact" controller="SignatureDemoController" showHeader="false" sidebar="false"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="{!$Resource.sketch}" /> <apex:pageBlock title="Sample Aggrement" > <apex:form id="frm"> <apex:actionFunction name="callingSubmit" action="{!submit}" reRender="frm"> </apex:actionFunction> <apex:pageBlockSection columns="1" title="Terms & Conditions" collapsible="false"> <apex:outputText > Welcome to our website. If you continue to browse and use this website, you are agreeing to comply with and be bound by the following terms and conditions of use, which together with our privacy policy govern [business name]'s relationship with you in relation to this website. If you disagree with any part of these terms and conditions, please do not use our website. <br /> The term '[business name]' or 'us' or 'we' refers to the owner of the website whose registered office is [address]. Our company registration number is [company registration number and place of registration]. The term 'you' refers to the user or viewer of our website. <br /> <span id="smallInitials">%SmallInitails%</span> <br/> The use of this website is subject to the following terms of use: <br /> The content of the pages of this website is for your general information and use only. It is subject to change without notice. This website uses cookies to monitor browsing preferences. If you do allow cookies to be used, the following personal information may be stored by us for use by third parties: [insert list of information]. Neither we nor any third parties provide any warranty or guarantee as to the accuracy, timeliness, performance, completeness or suitability of the information and materials found or offered on this website for any particular purpose. You acknowledge that such information and materials may contain inaccuracies or errors and we expressly exclude liability for any such inaccuracies or errors to the fullest extent permitted by law. Your use of any information or materials on this website is entirely at your own risk, for which we shall not be liable. It shall be your own responsibility to ensure that any products, services or information available through this website meet your specific requirements. This website contains material which is owned by or licensed to us. This material includes, but is not limited to, the design, layout, look, appearance and graphics. Reproduction is prohibited other than in accordance with the copyright notice, which forms part of these terms and conditions. All trade marks reproduced in this website which are not the property of, or licensed to, the operator are acknowledged on the website. Unauthorised use of this website may give rise to a claim for damages and/or be a criminal offence.<br/> From time to time this website may also include links to other websites. These links are provided for your convenience to provide further information. They do not signify that we endorse the website(s). We have no responsibility for the content of the linked website(s). Your use of this website and any dispute arising out of such use of the website is subject to the laws of England, Northern Ireland, Scotland and Wales. <br/><br/> <span style="float:right"> <span id="initialBig">%biginitials%</span> <br /> <span id="conName">Customer Initials</span> </span> </apex:outputText> </apex:pageBlockSection> <apex:pageBlockSection columns="2" title="Initials" collapsible="false"> <apex:outputPanel > <div> <Span><b>Big Initials </b></span> <button style="margin-left:28px;height:30px;width:100px" onclick="applyImage( 'intial1', 'initialBig', 80 );return false;">Apply</button> <button style="margin-left:10px;height:30px;width:100px" onclick="clearSketch( 'intial1' );return false;">Clear</button> <br/> <canvas id="intial1" style="border:2px solid; border-radius:0px 0px 10px 10px;background:white; border-color:lightgray"></canvas> </div> </apex:outputPanel> <apex:outputPanel > <div> <Span><b>Small Initials </b></span> <button style="margin-left:15px;height:30px;width:100px" onclick="applyImage( 'intial2', 'smallInitials', 40 );return false;">Apply</button> <button style="margin-left:10px;height:30px;width:100px" onclick="clearSketch('intial2');return false;">Clear</button> <br/> <canvas id="intial2" style="border:2px solid; border-radius:0px 0px 10px 10px;background:white; border-color:lightgray"></canvas> </div> </apex:outputPanel> </apex:pageBlockSection> <input type="button" value="Submit" style="float:right;margin-right:10%" onclick="submitAggrement()"/> <br/><br/> <apex:inputHidden id="sign" value="{!initial1}"/> <apex:inputHidden id="sign2" value="{!initial2}"/> </apex:form> </apex:pageBlock> <script type="text/javascript"> $(document).ready(function(){ $('#intial1').sketch(); $('#intial2').sketch(); }); function clearSketch( cvId ){ $('#' + cvId).replaceWith('<canvas id="' + cvId + '" style="border:2px solid; border-radius:10px;background:white; border-color:lightgray"></canvas>'); $('#' + cvId).sketch(); } function applyImage( cvId, compId, sz ){ var image = new Image(); image.id = "pic" image.src = document.getElementById(cvId).toDataURL(); console.log( document.getElementById(cvId).toDataURL() ); image.height = sz; $('#' + compId ).html(image); } function submitAggrement(){ $('[id$="sign"]').val(document.getElementById('intial1').toDataURL()); $('[id$="sign2"]').val(document.getElementById('intial2').toDataURL()); callingSubmit(); return false; } </script> </apex:page>

SignatureDemoPdf
<apex:page renderAs="Pdf" controller="SignatureDemoController" showHeader="false" sidebar="false"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <apex:pageBlock title="Sample Aggrement" > <apex:form > <apex:pageBlockSection columns="1" title="Terms & Conditions" collapsible="false"> <apex:outputText > Welcome to our website. If you continue to browse and use this website, you are agreeing to comply with and be bound by the following terms and conditions of use, which together with our privacy policy govern [business name]'s relationship with you in relation to this website. If you disagree with any part of these terms and conditions, please do not use our website. <br /> The term '[business name]' or 'us' or 'we' refers to the owner of the website whose registered office is [address]. Our company registration number is [company registration number and place of registration]. The term 'you' refers to the user or viewer of our website. <br /> <span id="smallInitials"><img src="/servlet/servlet.FileDownload?file={!initial2}" height="40px"/></span> <br/> The use of this website is subject to the following terms of use: <br /> The content of the pages of this website is for your general information and use only. It is subject to change without notice. This website uses cookies to monitor browsing preferences. If you do allow cookies to be used, the following personal information may be stored by us for use by third parties: [insert list of information]. Neither we nor any third parties provide any warranty or guarantee as to the accuracy, timeliness, performance, completeness or suitability of the information and materials found or offered on this website for any particular purpose. You acknowledge that such information and materials may contain inaccuracies or errors and we expressly exclude liability for any such inaccuracies or errors to the fullest extent permitted by law. Your use of any information or materials on this website is entirely at your own risk, for which we shall not be liable. It shall be your own responsibility to ensure that any products, services or information available through this website meet your specific requirements. This website contains material which is owned by or licensed to us. This material includes, but is not limited to, the design, layout, look, appearance and graphics. Reproduction is prohibited other than in accordance with the copyright notice, which forms part of these terms and conditions. All trade marks reproduced in this website which are not the property of, or licensed to, the operator are acknowledged on the website. Unauthorised use of this website may give rise to a claim for damages and/or be a criminal offence.<br/> From time to time this website may also include links to other websites. These links are provided for your convenience to provide further information. They do not signify that we endorse the website(s). We have no responsibility for the content of the linked website(s). Your use of this website and any dispute arising out of such use of the website is subject to the laws of England, Northern Ireland, Scotland and Wales. <br/><br/> <span style="float:right"> <span id="initialBig"><span id="smallInitials"><img src="/servlet/servlet.FileDownload?file={!initial1}" /></span> </span> <br /> <span id="conName">Customer Initials</span> </span> </apex:outputText> </apex:pageBlockSection> </apex:form> </apex:pageBlock> </apex:page>
Give this code a try and let me know if you face issues in set it up.
Provide your valuable feedback.

Thanks
Nitin Chandwani