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
John Angerami 16John Angerami 16 

Visualforce Page runs different reports OnClick

Hey!
I am trying to create a VP Dashboard that will have a Dropdown for Time Frame and update the reports for Qtr and Year based on button pressed.
(I decided just to have each button call a different report).
Here is what I have so far but can't seem to figure out how to have the OnClick.
I would want the first form to appear when the Rep presses 'Qtr' and the second form when the Rep presses 'Year'

  
<apex:page standardController="Opportunity" extensions="GaugeChartController">

<body>

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Time Frame</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#quarter">Quarter</a>
    <a href="#Year">Year</a>

  </div>
</div>

<script>

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
</body>

<apex:form >
<apex:pageBlock >
    <script>
            myChart.on('beforeconfig', function(config) {
            config.axes[0].margin=-20; 
        });
    </script>
    <apex:pageBlockSection title="My Won Opportunities" columns="2" collapsible="true">
    <apex:chart name="Sales v Goal" height="300" width="400" animate="true" data="{!data}">
        <apex:axis type="Gauge" position="gauge" title="Closed Won Opportunities -Amount"  minimum="0" maximum="30000" steps="5"/>
        <apex:gaugeSeries dataField="size" donut="40" colorSet="#78c953,#ddd"/>
    </apex:chart>
        <apex:chart name="ARR v Goal" height="300" width="400" animate="true" data="{!data}">
        <apex:axis type="Gauge" position="gauge" title="Closed Won Opportunities - ARR"  minimum="0" maximum="25000" steps="5"/>
        <apex:gaugeSeries dataField="size" donut="40" colorSet="#78c953,#ddd"/>
    </apex:chart>
    </apex:pageBlockSection>
</apex:pageBlock>
</apex:form>

<apex:form >
      <apex:pageBlock title="My Opportunities"> 
           <apex:pageBlockSection title="My Open Opportunities" columns="2" collapsible="false">              
            <analytics:reportChart reportId="00O26000000PeMT" size="medium"></analytics:reportChart>
            <analytics:reportChart reportId="00O26000000PeMY" size="medium"></analytics:reportChart>
              </apex:pageBlockSection> 
         </apex:pageBlock> 
</apex:form>

 
Best Answer chosen by John Angerami 16
Patcs_1Patcs_1
Hi

Instead of creating the dropdown button in html, you can create that button in VF page tag. Below is the link for your reference.

https://help.salesforce.com/HTViewSolution?id=000199193&language=en_US

in the outputlink you can call the apex method and set the boolean variable to true. If that is true you can rendered the pageblock section based on that boolean variable.

Hopes this helps!

Thanks