function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
mandycmandyc 

Visualforce Dashboard Component

Hello,

 

I have a request to display some data on a Salesforce dashboard that does not reside in Salesforce. Therefore, I'm trying to create a Visualforce page that will display the static data. I would like the Visualforce dashboard component to look like image A (below).

 

Image A:



 

My current Visualforce code is as follows:

 

<apex:page>
    <apex:pageBlock mode="maindetail">
        <apex:pageblocksection columns="1">
            <apex:outputText value="Value A: 0"/>
        </apex:pageblocksection>
        <apex:pageblocksection columns="1">
            <apex:outputLabel value="Value B: 0"/>            
        </apex:pageblocksection>
        <apex:pageblocksection columns="1">
            <apex:outputLabel value="Value C: 0"/>            
        </apex:pageblocksection>
    </apex:pageBlock>
</apex:page>



This gets the data I want to display on the dashboard but it's not formatted like image A. It looks like image B (below).

 

Image B:



I would really like the text and the value to be stored in separate cells (with the right-hand cell being right-aligned) and have the alternating backgroud color if possible.

 

ANY help is greatly appreciated!!

sandeshdsandeshd

In the page block section you can you can give it as colums="2" and  do the following

<apex:outputText value="Value A:"/>

<apex:outputText value="0"/>

If you open it as visual force page you might see there is a lot of gap between Value A: and 0 but since dashboard component is displayed in smaller size you dont feel that and you get the desired result.
mandycmandyc

Thank you! This gets my data into separate cells which is great by my text in the left outputText is wrapping. How can I avoid this?

 

<apex:page >
    <apex:pageBlock mode="maindetail">
        <apex:pageblocksection columns="2">
            <apex:outputText value="This is goal value A for FY2011:" style="float:left;width:98%"/>
            <apex:outputText value="0" style="float:right;width:2%;font-weight:bold"/>
        </apex:pageblocksection> 
        <apex:pageblocksection columns="2">
            <apex:outputLabel value="This is goal value B for FY2011:" style="float:left;width:98%"/> 
            <apex:outputText value="0" style="float:right;width:2%;font-weight:bold"/>            
        </apex:pageblocksection> 
        <apex:pageblocksection columns="2">
            <apex:outputLabel value="This is goal value C for FY2011:" style="float:left;width:98%"/> 
            <apex:outputText value="0" style="float:right;width:2%;font-weight:bold"/>            
        </apex:pageblocksection> 
    </apex:pageBlock>
</apex:page>

 

 

Current dashboard display using the above code:



 

Also, I would like to add the alterating background color seen in my original post if anyone can help with that.

 

Thank you!