Apex Code Development You need to sign in to do that
Don't have an account?
123_P 1) Query all contact records (limit 1000), and show using jquery table as below example:2) Make first name as clickable, and on click show the record information in editable format in a jquery popup dialog box like below example:
3) Contact must be saved using this dialog along with Photo Upload option. That photo must be saved in attachment for that contact and must be visible when the dialog box open for that record.
I have done all just i want to add photo in below code according to requirement
VF page:===========
<apex:page Controller="JqueryTableThroughVf" >
<head>
<apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
<apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
<apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<script>
<!--j$ = jQuery.noConflict();-->
$(document).ready( function () {
var contactTable = $('[id$="contacttable"]').DataTable({
});
$("#formid").hide();
$('#a1').click(function(){
$("#formid").show();
});
$('#closeButton').click(function(){
$('#formid').hide();
});
});
function myFunc(id){
console.log(id);
hold(id);
$("#formid").show();
}
</script>
</head>
<style type="text/css">
.custPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
width: 600px;
margin-left: -350px;
top:120px;
}
.popupBackground{
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 20);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}
</style>
<apex:form id="fd">
<apex:actionFunction action="{!call}" name="hold" rerender="dd">
<apex:param id="aname" name="Idr" value="" />
</apex:actionFunction>
</apex:form>
<body>
<apex:form id="aa">
<table id="contacttable" class="display">
<thead>
<tr>
<th>Account</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!contactList}" var="contact">
<tr>
<td>{!contact.Account.Name}</td>
<td onclick="myFunc('{!contact.Id}'); return false;">{!contact.FirstName}</td>
<td>{!contact.LastName}</td>
<td>{!contact.Phone}</td>
</tr>
</apex:repeat>
</tbody>
</table>
</apex:form>
<div id="formid">
<apex:outputPanel id="tstpopup" >
<apex:outputPanel styleClass="popupBackground" layout="block" />
<apex:outputPanel styleClass="custPopup" layout="block" >
<apex:form id="dd">
<apex:pageBlock title="My Content" mode="edit">
<apex:pageBlockSection title="My Content Section" columns="2">
<apex:inputField value="{!con.account.name}"/>
<apex:inputField value="{!con.firstname}"/>
<apex:inputField value="{!con.lastname}"/>
<apex:inputField value="{!con.phone}"/>
Upload Photo<apex:commandButton value="Upload" action="{!upload}"/>
<apex:inputFile value="{!attach.body}" filename="{!attach.name}"></apex:inputFile>
</apex:pageBlockSection>
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!updateContact}" reRender="dd" >
<apex:param name="con" assignTo="{!newcon}" value="con" />
</apex:commandButton>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
<button type="button" id='closeButton'>Close</button>
</apex:outputPanel>
</apex:outputPanel>
</div>
</body>
</apex:page>
Controller==============
public class JqueryTableThroughVf {
public boolean displayPopup {get; set;}
public Contact con {get;set;}
public String newcon{get;set;}
public List<Contact> contactList {
get {
if (contactList == null) {
contactList = [SELECT Account.Name, FirstName, LastName, Phone FROM Contact limit 1000];
}
return contactList;
}
set;
}
public void call(){
contact conn= new contact();
string passedParam1 = Apexpages.currentPage().getParameters().get('Idr');
con = [select Account.Name, firstname,lastname, phone from contact where id =: passedParam1];
//con = conn.firstname;
System.debug('@@ ');
}
public void updateContact(){
System.debug('inupdate');
//Contact con = Apexpages.currentPage().getParameters().get('con');
system.debug('ddd ' +newcon);
system.debug('obj '+con);
update con;
}
}
I have done all just i want to add photo in below code according to requirement
VF page:===========
<apex:page Controller="JqueryTableThroughVf" >
<head>
<apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" / >
<apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" />
<apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<script>
<!--j$ = jQuery.noConflict();-->
$(document).ready( function () {
var contactTable = $('[id$="contacttable"]').DataTable({
});
$("#formid").hide();
$('#a1').click(function(){
$("#formid").show();
});
$('#closeButton').click(function(){
$('#formid').hide();
});
});
function myFunc(id){
console.log(id);
hold(id);
$("#formid").show();
}
</script>
</head>
<style type="text/css">
.custPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
width: 600px;
margin-left: -350px;
top:120px;
}
.popupBackground{
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 20);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}
</style>
<apex:form id="fd">
<apex:actionFunction action="{!call}" name="hold" rerender="dd">
<apex:param id="aname" name="Idr" value="" />
</apex:actionFunction>
</apex:form>
<body>
<apex:form id="aa">
<table id="contacttable" class="display">
<thead>
<tr>
<th>Account</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!contactList}" var="contact">
<tr>
<td>{!contact.Account.Name}</td>
<td onclick="myFunc('{!contact.Id}'); return false;">{!contact.FirstName}</td>
<td>{!contact.LastName}</td>
<td>{!contact.Phone}</td>
</tr>
</apex:repeat>
</tbody>
</table>
</apex:form>
<div id="formid">
<apex:outputPanel id="tstpopup" >
<apex:outputPanel styleClass="popupBackground" layout="block" />
<apex:outputPanel styleClass="custPopup" layout="block" >
<apex:form id="dd">
<apex:pageBlock title="My Content" mode="edit">
<apex:pageBlockSection title="My Content Section" columns="2">
<apex:inputField value="{!con.account.name}"/>
<apex:inputField value="{!con.firstname}"/>
<apex:inputField value="{!con.lastname}"/>
<apex:inputField value="{!con.phone}"/>
Upload Photo<apex:commandButton value="Upload" action="{!upload}"/>
<apex:inputFile value="{!attach.body}" filename="{!attach.name}"></apex:inputFile>
</apex:pageBlockSection>
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!updateContact}" reRender="dd" >
<apex:param name="con" assignTo="{!newcon}" value="con" />
</apex:commandButton>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
<button type="button" id='closeButton'>Close</button>
</apex:outputPanel>
</apex:outputPanel>
</div>
</body>
</apex:page>
Controller==============
public class JqueryTableThroughVf {
public boolean displayPopup {get; set;}
public Contact con {get;set;}
public String newcon{get;set;}
public List<Contact> contactList {
get {
if (contactList == null) {
contactList = [SELECT Account.Name, FirstName, LastName, Phone FROM Contact limit 1000];
}
return contactList;
}
set;
}
public void call(){
contact conn= new contact();
string passedParam1 = Apexpages.currentPage().getParameters().get('Idr');
con = [select Account.Name, firstname,lastname, phone from contact where id =: passedParam1];
//con = conn.firstname;
System.debug('@@ ');
}
public void updateContact(){
System.debug('inupdate');
//Contact con = Apexpages.currentPage().getParameters().get('con');
system.debug('ddd ' +newcon);
system.debug('obj '+con);
update con;
}
}
I trust you are doing very well.
Please try the below code, it is working fine.
Visualforce:
<apex:page controller="JqueryTableThroughVf" > <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" /> <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" /> <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" /> <script> <!--j$ = jQuery.noConflict();--> $(document).ready( function () { var contactTable = $('[id$="contacttable"]').DataTable({ }); $("#formid").hide(); $('#a1').click(function(){ $("#formid").show(); }); $('#closeButton').click(function(){ $('#formid').hide(); }); }); function myFunc(id){ console.log(id); hold(id); $("#formid").show(); } </script> <style type="text/css"> .custPopup{ background-color: white; border-width: 2px; border-style: solid; z-index: 9999; left: 50%; padding:10px; position: absolute; width: 600px; margin-left: -350px; top:120px; } .popupBackground{ background-color:black; opacity: 0.20; filter: alpha(opacity = 20); position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9998; } </style> <apex:form id="fd"> <apex:actionFunction action="{!call}" name="hold" rerender="dd"> <apex:param id="aname" name="Idr" value="" /> </apex:actionFunction> </apex:form> <body> <apex:form id="aa"> <table id="contacttable" class="display"> <thead> <tr> <th>Account</th> <th>First Name</th> <th>Last Name</th> <th>Phone</th> </tr> </thead> <tbody> <apex:repeat value="{!contactList}" var="contact"> <tr> <td>{!contact.Account.Name}</td> <td onclick="myFunc('{!contact.Id}'); return false;">{!contact.FirstName}</td> <td>{!contact.LastName}</td> <td>{!contact.Phone}</td> </tr> </apex:repeat> </tbody> </table> </apex:form> <div id="formid"> <apex:outputPanel id="tstpopup" > <apex:outputPanel styleClass="popupBackground" layout="block" /> <apex:outputPanel styleClass="custPopup" layout="block" > <apex:form id="dd"> <apex:pageBlock title="My Content" mode="edit"> <apex:pageBlockSection title="My Content Section" columns="2"> <apex:inputField value="{!con.account.name}"/> <apex:inputField value="{!con.firstname}"/> <apex:inputField value="{!con.lastname}"/> <apex:inputField value="{!con.phone}"/> <apex:image url="/servlet/servlet.FileDownload?file={!FileId}" rendered="{!if((FileId!=null),true,false)}" /> <!--Upload Photo<apex:commandButton value="Upload" action="{!upload}"/>--> <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}"></apex:inputFile> </apex:pageBlockSection> <apex:pageBlockButtons > <apex:commandButton value="Save" action="{!updateContact}" > <apex:param name="con" assignTo="{!newcon}" value="con" /> </apex:commandButton> </apex:pageBlockButtons> </apex:pageBlock> </apex:form> <button type="button" id='closeButton'>Close</button> </apex:outputPanel> </apex:outputPanel> </div> </body> </apex:page>Controller:
public class JqueryTableThroughVf { public boolean displayPopup {get; set;} public Contact con {get;set;} public String newcon{get;set;} public Attachment attachment {get; set;} public Id recId {get; set;} List<Attachment> attachedFiles; public JqueryTableThroughVf(){ attachment = new Attachment(); attachedFiles = new List<Attachment>(); } public List<Contact> contactList { get { if (contactList == null) { contactList = [SELECT Account.Name, FirstName, LastName, Phone FROM Contact limit 1000]; } return contactList; } set; } public void call(){ contact conn= new contact(); string passedParam1 = Apexpages.currentPage().getParameters().get('Idr'); con = [select Id, Account.Name, firstname,lastname, phone from contact where id =: passedParam1]; //con = conn.firstname; System.debug('@@ '); } public PageReference updateContact(){ System.debug('inupdate'); //Contact con = Apexpages.currentPage().getParameters().get('con'); system.debug('ddd ' +newcon); system.debug('obj '+con); update con; if(attachment.Body != null && attachment.Name != null) { recId = ApexPages.CurrentPage().getParameters().get('id'); attachment.OwnerId = UserInfo.getUserId(); attachment.ParentId = con.Id; // the record the file is attached to attachment.IsPrivate = true; try { insert attachment; } catch (DMLException e) { ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading attachment')); return null; } } return null; } public String getFileId() { String fId = ''; string passedParam1 = Apexpages.currentPage().getParameters().get('Idr'); attachedFiles = [select Id from Attachment where parentId =:passedParam1 order By LastModifiedDate DESC limit 1]; if( attachedFiles != null && attachedFiles.size() > 0 ) { fId = attachedFiles[0].Id; } System.debug('fId-> ' + fId); return fId; } }I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.
Thanks and Regards,
Khan Anas
All Answers
I trust you are doing very well.
Please try the below code, it is working fine.
Visualforce:
<apex:page controller="JqueryTableThroughVf" > <apex:includescript value="//code.jquery.com/jquery-1.11.1.min.js" /> <apex:includescript value="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js" /> <apex:stylesheet value="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css" /> <script> <!--j$ = jQuery.noConflict();--> $(document).ready( function () { var contactTable = $('[id$="contacttable"]').DataTable({ }); $("#formid").hide(); $('#a1').click(function(){ $("#formid").show(); }); $('#closeButton').click(function(){ $('#formid').hide(); }); }); function myFunc(id){ console.log(id); hold(id); $("#formid").show(); } </script> <style type="text/css"> .custPopup{ background-color: white; border-width: 2px; border-style: solid; z-index: 9999; left: 50%; padding:10px; position: absolute; width: 600px; margin-left: -350px; top:120px; } .popupBackground{ background-color:black; opacity: 0.20; filter: alpha(opacity = 20); position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9998; } </style> <apex:form id="fd"> <apex:actionFunction action="{!call}" name="hold" rerender="dd"> <apex:param id="aname" name="Idr" value="" /> </apex:actionFunction> </apex:form> <body> <apex:form id="aa"> <table id="contacttable" class="display"> <thead> <tr> <th>Account</th> <th>First Name</th> <th>Last Name</th> <th>Phone</th> </tr> </thead> <tbody> <apex:repeat value="{!contactList}" var="contact"> <tr> <td>{!contact.Account.Name}</td> <td onclick="myFunc('{!contact.Id}'); return false;">{!contact.FirstName}</td> <td>{!contact.LastName}</td> <td>{!contact.Phone}</td> </tr> </apex:repeat> </tbody> </table> </apex:form> <div id="formid"> <apex:outputPanel id="tstpopup" > <apex:outputPanel styleClass="popupBackground" layout="block" /> <apex:outputPanel styleClass="custPopup" layout="block" > <apex:form id="dd"> <apex:pageBlock title="My Content" mode="edit"> <apex:pageBlockSection title="My Content Section" columns="2"> <apex:inputField value="{!con.account.name}"/> <apex:inputField value="{!con.firstname}"/> <apex:inputField value="{!con.lastname}"/> <apex:inputField value="{!con.phone}"/> <apex:image url="/servlet/servlet.FileDownload?file={!FileId}" rendered="{!if((FileId!=null),true,false)}" /> <!--Upload Photo<apex:commandButton value="Upload" action="{!upload}"/>--> <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}"></apex:inputFile> </apex:pageBlockSection> <apex:pageBlockButtons > <apex:commandButton value="Save" action="{!updateContact}" > <apex:param name="con" assignTo="{!newcon}" value="con" /> </apex:commandButton> </apex:pageBlockButtons> </apex:pageBlock> </apex:form> <button type="button" id='closeButton'>Close</button> </apex:outputPanel> </apex:outputPanel> </div> </body> </apex:page>Controller:
public class JqueryTableThroughVf { public boolean displayPopup {get; set;} public Contact con {get;set;} public String newcon{get;set;} public Attachment attachment {get; set;} public Id recId {get; set;} List<Attachment> attachedFiles; public JqueryTableThroughVf(){ attachment = new Attachment(); attachedFiles = new List<Attachment>(); } public List<Contact> contactList { get { if (contactList == null) { contactList = [SELECT Account.Name, FirstName, LastName, Phone FROM Contact limit 1000]; } return contactList; } set; } public void call(){ contact conn= new contact(); string passedParam1 = Apexpages.currentPage().getParameters().get('Idr'); con = [select Id, Account.Name, firstname,lastname, phone from contact where id =: passedParam1]; //con = conn.firstname; System.debug('@@ '); } public PageReference updateContact(){ System.debug('inupdate'); //Contact con = Apexpages.currentPage().getParameters().get('con'); system.debug('ddd ' +newcon); system.debug('obj '+con); update con; if(attachment.Body != null && attachment.Name != null) { recId = ApexPages.CurrentPage().getParameters().get('id'); attachment.OwnerId = UserInfo.getUserId(); attachment.ParentId = con.Id; // the record the file is attached to attachment.IsPrivate = true; try { insert attachment; } catch (DMLException e) { ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading attachment')); return null; } } return null; } public String getFileId() { String fId = ''; string passedParam1 = Apexpages.currentPage().getParameters().get('Idr'); attachedFiles = [select Id from Attachment where parentId =:passedParam1 order By LastModifiedDate DESC limit 1]; if( attachedFiles != null && attachedFiles.size() > 0 ) { fId = attachedFiles[0].Id; } System.debug('fId-> ' + fId); return fId; } }I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.
Thanks and Regards,
Khan Anas