function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
KellyKanchesKellyKanches 

New to APEX. Building VF page and can't view custom object output fields and text is ugly (see images of preview)

Here is my code
<apex:page tabStyle="Account" standardController="Account">
    <style >
        p {
        font-size:16px;
        }
        .beenWorkingOut {
        font-size:16px;
        }
        .paraCrunch {
        margin-left:10%;
        margin-right:10%;
        }
        a {
        text-decoration:none;
        }
    </style>
    <apex:pageBlock title="AB Welcome Call/Enrollment Call ">
        <apex:pageBlockSection title="Summary" columns="2">
            <apex:outputField value="{!Account.CustNumber__c}"/>
            <apex:outputField value="{!Account.Phone}"/>
            <apex:outputField value="{!Account.Name}"/>
            <apex:pageBlockSectionItem />
            <apex:pageBlockSectionItem />
            <apex:pageBlockSectionItem />
            <apex:outputLink onClick="window.open('/{!account.id}')">(View Account)</apex:outputLink>
        </apex:pageBlockSection>
        <apex:pageBlockTable title="Modules" value="{!account.Modules__r}" var="item">
            <apex:outputField value="{!item.Pre_Launch_Date__c}"/>
            <apex:outputField value="{!item.Base_Product__c}"/>
            <apex:outputField value="{!item.White_Labeled_As__c}"/>
            <apex:outputField value="{!item.Status__c}"/>
            <apex:outputField value="{!item.Recordings_Complete__c}"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
    <apex:form >
        <span style="float:right">
            <apex:commandButton action="{!save}" value="Save" /> &nbsp;
            
            
            
            <apex:commandLink onclick="return confirm('Are you sure you want to cancel? All changes will be lost!');" action="{!cancel}" value="cancel"/>
        </span>
        <br />
        <br />
        <br />
        <span style="float:right; font-size:12px; color:grey;">version 1.0 - revised 2015.04.07</span>
        <apex:pageBlock title="Details">
            <apex:pageBlockSection title="Introduction and Product Review" columns="1">
                <p class="paraCrunch">
                When Amerisource Bergen
                
                    
                    
                    <p class="paraCrunch"></p>
                    My name is 
                    
                    
                    <b>{!$User.FirstName} {!$User.LastName}</b> I am calling from Prescribe Wellness on behalf of AmerisourceBergen. May I please speak with {!Account.PW_Champion__c}?
                
                
                
                </p>
                <p class="paraCrunch">
                    Hi {!Account.PW_Champion__c}, this is 
                    
                    
                    <b>{!$User.FirstName} {!$User.LastName}</b> from Prescribe Wellness.  The reason for my call is today is that as a member of Elevate’s Advanced Features you will receive the Patient Engagement Center provided by Prescribe Wellness. The Patient Engagement Center is a tool that will help you address medication adherence, star ratings, and patient loyalty. We provide you the tools needed to take action on your pharmacy data.   
            
                
                
                </p>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Account Details" columns="1">
                <p class="paraCrunch">
                    <ul class="beenWorkingOut">
                        <li>
                            <a id="two1" href="#" style="color:black;" onclick="setColorById('two1','green');return false;">Review The Solutions They are Receiving</a>
                        </li>
                    </ul>
                </p>
                <apex:pageBlockSectionItem />
                <apex:inputField value="{!Account.Name}"/>
                <apex:inputField value="{!account.CustNumber__c}"/>
                <apex:inputField value="{!Account.Phone}"/>
                <apex:inputField value="{!Account.Groups__c}"/>
                <apex:outputLink onClick="window.open('/{!account.id}')">(View Account)</apex:outputLink>
                <apex:pageBlockSectionItem />
                <apex:pageBlockTable title="Modules" value="{!account.Modules__r}" var="item">
                    <apex:column value="{!item.Pre_Launch_Date__c}"/>
                    <apex:column value="{!item.Base_Product__c}"/>
                    <apex:column value="{!item.White_Labeled_As__c}"/>
                    <apex:column value="{!item.Status__c}"/>
                    <apex:column value="{!item.Recordings_Complete__c}"/>
                </apex:pageblocktable>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Collect Forms" columns="1">
                <p class="paraCrunch">
                    <ul class="beenWorkingOut">
                    Online enrollment form and data form (if applicable):
                    The first step in setting up your Patient Engagement Center is completing the online enrollment form.
                        Direct them to prescribewellness.com/elevate and have them click on their dispensing system if listed. If not, click on All Other Dispensing Systems. 
Ask if they have multiple locations that are Elevate with Advanced Features. If so, have them fill out the 
                        <apex:outputLink value="http://developer.salesforce.com/">Enrollment Form</apex:outputLink> for each location. 
 
Create a case to set up a hierarchy – include all account numbers in the case.

                    
                      
                    
                    *If they are not able to fill out the form on the phone, please send the 
                        <apex:outputLink value="https://na18.salesforce.com/00X12000001rQCZ?setupid=CommunicationTemplatesEmail">email template</apex:outputLink>
 that contains the link to prescribewellness.com/elevate. 
                    
                    
                    </ul>
                </p>
                <apex:pageBlockSectionItem />
            </apex:pageblocksection>
            <apex:pageBlockSection title="Review Account Details" columns="1">
                <p class="paraCrunch">
                I would like to confirm your pharmacy information and ask you a few questions.
                    
                    
                    <ul class="beenWorkingOut">
                        <li>
                            <a id="four1" href="#" style="color:black;" onclick="setColorById('four1','green');return false;">Verify the account information: </a>
                        </li>
                        <apex:pageBlockSectionItem />
                        <apex:inputField value="{!Account.Pharmacy_Email__c}"/>
                        <apex:inputField value="{!account.Phone}"/>
                        <apex:inputField value="{!Account.Fax}"/>
                        <apex:inputField value="{!Account.NCPDP__c}"/>
                        <apex:inputField value="{!Account.NPI__c}"/>
                        <apex:inputField value="{!Account.Web_Input_DSP__c}"/>
                        <apex:inputField value="{!Account.Primary_Contact__c}"/>
                        <apex:inputField value="{!Account.PW_Champion__c}"/>
                        <apex:inputField value="{!Account.PW_Champion_Email__c}"/>
                        <p class="paraCrunch">
                When did the Pharmacy open?
                </p>
                        <apex:inputField value="{!Account.DEA_Start_Date__c}"/>
                    </ul>
                </p>
                <p class="paraCrunch">
                Ask the Pre-Launch Meeting questions.
                </p>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Obtaining the pharmacie's data:" columns="1">
                <p class="paraCrunch">
                    <ul class="beenWorkingOut">
                        <li>
                            <a id="five1" href="#" style="color:black;" onclick="setColorById('five1','green');return false;">If automated data extraction</a>
                        </li>
                        <p class="paraCrunch">
                o   For your dispensing system we receive your pharmacy’s data directly from the dispensing system. Once we have received your pharmacy’s data, we will send you an activation email. One of our trainers will then call you to schedule a time for a one-on-one training.
                </p>
                        <li>
                            <a id="five2" href="#" style="color:black;" onclick="setColorById('five2','green');return false;">If manual data extraction is required</a>
                        </li>
                        <p class="paraCrunch">
                 o   For your dispensing system, we will need to schedule a meeting with our data team so they can establish the connection with your dispensing system. We establish the connection through an application called TeamViewer. 
           </p>
                        <p class="paraCrunch">
                 o    Schedule the integration meeting in Salesforce. Note that it can be anyone in the pharmacy who we conduct the integration meeting with.
           </p>
                        <p class="paraCrunch">
                 o    A member of our data team will contact you on [date and time] to conduct the integration meeting.
           </p>
                        <p class="paraCrunch">
                 o     After the integration meeting is complete and we have your pharmacy data, we will send you an activation email. One of our trainers will then call you to schedule a time for a one-on-one training.
           </p>
                    </ul>
                </p>
                <apex:pageBlockSectionItem />
            </apex:pageBlockSection>
            <apex:pageBlockSection title="University Training" columns="1">
                <p class="paraCrunch">
        (please refer to the welcome email for login instructions or resend the welcome email)
Prescribe Wellness has developed a series of online training courses designed to maximize your experience navigating your new tools. Please refer to the university courses at any time for further instruction on how to use Prescribe Wellness.

</p>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Wrap-Up" columns="1">
                <p class="paraCrunch">
        That's everything I had for you today. Thank you so much for taking the time to speak with me today.  
    </p>
                <p class="paraCrunch">
        Thank you so much for taking the time to speak with me today. We are excited to get started and look forward to working with you.  Are there any questions about the program that you have for me at this time?
    </p>
                <apex:inputField value="{!Account.Welcome_Call_Completed__c}"/>
                <p class="paraCrunch">
        Always log your calls in Salesforce!
    </p>
            </apex:pageBlockSection>
        </apex:pageBlock>
        <span style="float:right">
            <apex:commandButton action="{!save}" value="Save" /> &nbsp;
    
            
            <apex:commandLink onclick="return confirm('Are you sure you want to cancel? All changes will be lost!');" action="{!cancel}" value="cancel"/>
        </span>
        <br />
        <br />
    </apex:form>
    <br />
    <script type="text/javascript">
function confirmCancel() {
    return confirm('Are you sure you want to cancel? All changes will be lost!');
}
function addressCopy(b0, b1, b2, b3, s0, s1, s2, s3) {
    // Copy billing fields to shipping fields
    document.getElementById(s0).value = document.getElementById(b0).value;
    document.getElementById(s1).value = document.getElementById(b1).value;
    document.getElementById(s2).value = document.getElementById(b2).value;
    document.getElementById(s3).value = document.getElementById(b3).value;
    // No form submission
    return false;
}
function setColorById(id,sColor) {
    var elem;
    if (document.getElementById) {
        if (elem=document.getElementById(id)) {
            if (elem.style) {
                elem.style.color=sColor;
                return 1;  // success
            }
        }
    }
    return 0;  // failure
}
</script>
</apex:page>

and when I preview my page - I can't see the output fields from my custom object and the text formatting is ugly (see screen shots) 
User-added image
User-added image
Can someone help me identify what I am going wrong?
User-added image
Rohit Sharma 66Rohit Sharma 66
Please use <apex:column> inside <apex:pageblocktable>. Currently u are using <apex:outputField> which will not work.
Use the code like below:

<apex:pageBlockTable title="Modules" value="{!account.Modules__r}" var="item">
            <apex:column value="{!item.Name}"/>
    </apex:pageBlockTable>

Later u can use the CSS to make ur page more user friendly, as of now text will be display like SFDC standard layuot.

Let me know if u need additional info.
Please select this as best annswer if worked for u.
 
Rakesh51Rakesh51
+1 You can one moe boolean that says No data returned and only render the no records, then disaplay messge.
KellyKanchesKellyKanches
Thanks guys! 
Here is my code now
<apex:pageBlockSectionItem />
                <apex:inputField value="{!Account.Name}"/>
                <apex:inputField value="{!account.CustNumber__c}"/>
                <apex:inputField value="{!Account.Phone}"/>
                <apex:inputField value="{!Account.Groups__c}"/>
                <apex:outputLink onClick="window.open('/{!account.id}')">(View Account)</apex:outputLink>
                <apex:pageBlockSectionItem />
                <apex:pageBlockTable title="Modules" value="{!account.Modules__r}" var="item">
                    <apex:column value="{!item.Pre_Launch_Date__c}"/>
                    <apex:column value="{!item.Base_Product__c}"/>
                    <apex:column value="{!item.White_Labeled_As__c}"/>
                    <apex:column value="{!item.Status__c}"/>
                    <apex:column value="{!item.Recordings_Complete__c}"/>
                </apex:pageblocktable>
            </apex:pageBlockSection>

and on the preview page I still see no results in that section :(
User-added image
Just an empty box down there
Rohit Sharma 66Rohit Sharma 66
Put your pageBlockTable inside a different pageBlock.
Also, when using pageblock section please mention "column" attribute to either to 1 or 2
Pass Account is in the URL like below:
https://c.ap1.visual.force.com/apex/VfPageName?id=0019000001gHODt  // 0019000001gHODt will be your accountId

Let me know if it worked.