1

I want to create a VF Page which displays data about doctors. Along with general attributes like name, fee, schedule, I want to fetch image of the doctor on the page which I uploaded in a Document folder defined by me.

I created a form to upload image and other attributes. The image saved into the folder in Documents. This the code of the VF Page

    <apex:page showHeader="false"  controller="Controller004"  sidebar="false" standardStylesheets="false">
<style type="text/css">


</style>
<apex:pageBlock >
<apex:pageBlockSection title="Record of avalaible Doctors" >
<apex:form >
<apex:pageBlockTable value="{!obj}" var="a" columns="4" cellpadding="15px">

 <apex:column headerValue="Name">
 <apex:outputField value="{!a.Full_Name__c}"  />
 </apex:column>
 <apex:column headerValue="Fee">
<apex:outputField value="{!a.Fee__c}"/>
</apex:column>
<apex:column headerValue="Schedule">
<apex:outputField value="{!a.schedule__c}"/>
</apex:column>
<apex:column headerValue="Photo" >
<apex:image url="{!imageURL}" height="300px" width="200px" />
</apex:column>
</apex:pageBlockTable>
</apex:form>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

Controller of the page:

    global class Controller004{

public List<Doctor__c> obj{get;set;}
public String imageURL{get;set;}

public Controller004(){
obj = [select Full_Name__c, Fee__c, schedule__c, ImageUpload__c from Doctor__c];
imageURL='/servlet/servlet.FileDownload?file=';
List< document > documentList=[select Name from document where FolderID='00l280000019XKt'];

    if(documentList.size()>0)
    {
      imageURL=imageURL+documentList[0].id;
    }
}
}

when I view the page I found that the same image is fetched for all records. What's the solution of it so I get image that I uploaded for corresponding record.

Here is the code of the form which I used to insert new record

<apex:page showHeader="false" controller="Controller002">
<apex:pageBlock title="Form">
<apex:pageBlockSection title="Fill the following form to create a new record of a Doctor">
<apex:form >
<apex:pageBlockTable value="{!li}" var="x" rows="5">
<apex:column headerValue="Full Name">
<apex:inputField value="{!x.Full_Name__c}"/>
</apex:column>
<apex:column headerValue="Fee">
<apex:inputField value="{!x.Fee__c}"/>
</apex:column>
<apex:column headerValue="Schedule">
<apex:inputField value="{!x.schedule__c}"/>
</apex:column>
<apex:column headerValue="Username">
<apex:inputField value="{!x.UserName__c}"/>
</apex:column>
<apex:column headerValue="Password">
<apex:inputField label="Password" value="{!x.Password__c}"/>
</apex:column>
<apex:column headerValue="Upload Picture">
<apex:inputFile value="{!document.body}" filename="{!document.name}"/>
</apex:column>
</apex:pageBlockTable>
<apex:commandButton action="{!insertnew}" value="Save"/>

</apex:form>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

and the controller of the page is:

    public  class Controller002{
public List<Doctor__c> li{get;set;}
public Document document {
    get {
      if (document == null)
        document = new Document();
      return document;
    }
    set;
 }
public Controller002(){
li = new List<Doctor__c>();
Doctor__c obj = new Doctor__c();
li.add(obj);
}
public PageReference insertnew(){
document.AuthorId = UserInfo.getUserId();
document.FolderId ='00l280000019XKt';
insert document;
insert li;
PageReference pr = new PageReference('/apex/doctordata');
pr.setRedirect(true);
return pr;
}

}

This is the appointment page on which we want to display the details

    <apex:page showHeader="false"  controller="Controller004"  sidebar="false" standardStylesheets="false">
<style type="text/css">


</style>
<apex:pageBlock >
<apex:pageBlockSection title="Record of avalaible Doctors" >
<apex:form >
<apex:pageBlockTable value="{!obj}" var="a" columns="4" cellpadding="15px">

 <apex:column headerValue="Name">
 <apex:outputField value="{!a.Full_Name__c}"  />
 </apex:column>
 <apex:column headerValue="Fee">
<apex:outputField value="{!a.Fee__c}"/>
</apex:column>
<apex:column headerValue="Schedule">
<apex:outputField value="{!a.schedule__c}"/>
</apex:column>
<apex:column headerValue="Photo" >
<apex:image url="{!a.imageURL}" height="300px" width="200px" />
</apex:column>
</apex:pageBlockTable>
</apex:form>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

this is the controller:

global class Controller004{   
    public List<Doctor__c> obj{get;set;}
    public List<DoctorWrapper> obj{get;set;}        

    public Controller004(){
        obj = [select Full_Name__c, Fee__c, schedule__c from Doctor__c];
        Map<Id,Id> mapDoctorIdAttachmentId = new Map<Id,Id>();
        for(Attachment attachment : [Select Id from Attachment where ParentId In : obj]){
            mapDoctorIdAttachmentId.put(attachment.ParentId,attachment.Id);
        }
        for(Doctor__c doctor : [select Full_Name__c, Fee__c, schedule__c from Doctor__c]) {
            obj.add(new DoctorWrapper(doctor,'/servlet/servlet.FileDownload?file='+mapDoctorIdAttachmentId.get(doctor.Id)));
        }
    }

    public class DoctorWrapper {
        public Doctor__c doctor;
        public String imageURL;
        public DoctorWrapper(Doctor__c doctor,String imageURL){
            this.doctor = doctor;
            this.imageURL = imageURL;
        }           
    }
}
6
  • 1
    how are you linking document with record? Apr 6 '16 at 9:30
  • Can you provide some information on the Doctor__c object and the data type of the ImageUpload__c field? We need some more information so that further assistance can be provided.
    – Mark Keats
    Apr 6 '16 at 9:38
  • @Mark: first i tried to upload the image using rich text field so ImageUpload__c represents that. Than i drop the idea of using rich text field and i used <apex:inputFile> to upload image in a Document object
    – Nishant
    Apr 6 '16 at 9:43
  • 1
    Can you explain what link you have between the Doctor__c object and the Document object?
    – Mark Keats
    Apr 6 '16 at 9:48
  • you can insert the image as attachment under Doctor__c records Apr 6 '16 at 9:50
2

Instead of using Document I would recommend using Attachment. So form where you get doctor details along with doctor image should be

VF Page

<apex:page showHeader="false" controller="Controller002">
    <apex:pageBlock title="Form">
        <apex:pageBlockSection title="Fill the following form to create a new record of a Doctor">
            <apex:form >
                <apex:pageBlockTable value="{!li}" var="x" rows="5">
                    <apex:column headerValue="Full Name">
                        <apex:inputField value="{!x.Full_Name__c}"/>
                    </apex:column>
                    <apex:column headerValue="Fee">
                        <apex:inputField value="{!x.Fee__c}"/>
                    </apex:column>
                    <apex:column headerValue="Schedule">
                        <apex:inputField value="{!x.schedule__c}"/>
                    </apex:column>
                    <apex:column headerValue="Username">
                        <apex:inputField value="{!x.UserName__c}"/>
                    </apex:column>
                    <apex:column headerValue="Password">
                        <apex:inputField label="Password" value="{!x.Password__c}"/>
                    </apex:column>
                    <apex:column headerValue="Upload Picture">
                        <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}"/>
                    </apex:column>
                </apex:pageBlockTable>
                <apex:commandButton action="{!insertnew}" value="Save"/>                
            </apex:form>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

and the controller of the page is:

public  class Controller002{
    public List<Doctor__c> li{get;set;}
    public Attachment attachment {
        get {
          if (attachment == null)
            attachment = new Attachment();
          return attachment;
        }
        set;
     }
    public Controller002(){
        li = new List<Doctor__c>();
        Doctor__c obj = new Doctor__c();
        li.add(obj);
    }
    public PageReference insertnew(){
        attachment.ParentId = li[0].Id;         
        insert attachment;
        insert li;
        PageReference pr = new PageReference('/apex/doctordata');
        pr.setRedirect(true);
        return pr;
    }    
}

Then your controller where you show the image, you should use wrapper class to hold your doctor and imageurl

global class Controller004{   
    public List<Doctor__c> obj{get;set;}
    public List<DoctorWrapper> obj1{get;set;}       

    public Controller004(){
        obj = [select Full_Name__c, Fee__c, schedule__c, ImageUpload__c from Doctor__c];
        Map<Id,Id> mapDoctorIdAttachmentId = new Map<Id,Id>();
        for(Attachment attachment : [Select Id from Attachment where ParentId In : obj]){
            mapDoctorIdAttachmentId.put(attachment.ParentId,attachment.Id);
        }
        for(Doctor__c doctor : [select Full_Name__c, Fee__c, schedule__c, ImageUpload__c from Doctor__c]) {
            obj1.add(new DoctorWrapper(docter,'/servlet/servlet.FileDownload?file='+mapDoctorIdAttachmentId.get(doctor.Id)));
        }
    }

    public class DoctorWrapper {
        public Doctor__c doctor {get; set;}
        public String imageURL {get; set;}
        public DoctorWrapper(Doctor__c doctor,String imageURL){
            this.doctor = doctor;
            this.imageURL = imageURL;
        }           
    }
}

Your VF page should be (only the pageblock table)

<apex:pageBlockTable value="{!obj1}" var="a" columns="4" cellpadding="15px">
    <apex:column headerValue="Name">
        <apex:outputField value="{!a.doctor.Full_Name__c}"  />
    </apex:column>
    <apex:column headerValue="Fee">
        <apex:outputField value="{!a.doctor.Fee__c}"/>
    </apex:column>
    <apex:column headerValue="Schedule">
        <apex:outputField value="{!a.doctor.schedule__c}"/>
    </apex:column>
    <apex:column headerValue="Photo" >
        <apex:image url="{!a.imageURL}" height="300px" width="200px" />
    </apex:column>
</apex:pageBlockTable>
14
  • But the problem is using imageURL=imageURL+attachmentList[0].id; I get the same image on all the records.
    – Nishant
    Apr 6 '16 at 10:06
  • I got your problem. You should use wrapper class to hold the imageurl and the doctor details together. Take a look at my updated answer. Apr 6 '16 at 10:19
  • @Vigneshwarnam : I got an error: The property String imageURL is referenced by Visualforce Page (appointment) in salesforce.com. Remove the usage and try again
    – Nishant
    Apr 6 '16 at 11:11
  • You should use it as a.imageURL as it is now present in the wrapperclass. I include the VF page in my answer now. Apr 6 '16 at 11:16
  • @ Vigneshwaran : I got error of duplicate names in Controller004 because you use obj for both Doctor__c and DoctorWrapper. I make obj of DoctorWrapper as obj1. but still get error which says: The property String imageURL is referenced by Visualforce Page (appointment) in salesforce.com. Remove the usage and try again.
    – Nishant
    Apr 6 '16 at 11:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.