Created
May 4, 2016 10:45
-
-
Save lkatney/6fa96546af77330dc2f263140d883c10 to your computer and use it in GitHub Desktop.
Custom dashboard VF page with report charts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" controller="CustomDashboardController"> | |
| <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |
| <head> | |
| <title>Salesforce Lightning Design System Trailhead Module</title> | |
| <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <style> | |
| .reportCharts img, .reportCharts .analyticsEmbeddedReportChart, .reportCharts .outerbound, .reportCharts .asOfDateContainer, .reportCharts .refreshButtonContainer{ | |
| width : 350px; | |
| } | |
| .reportCharts .outerbound, .reportCharts .asOfDateContainer, .reportCharts .refreshButtonContainer{ | |
| margin: 0 auto !important | |
| } | |
| [id*='auraElement-']{ | |
| display: inline-block; | |
| margin-top : 20px; | |
| } | |
| .slds select{ | |
| background-color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- REQUIRED SLDS WRAPPER --> | |
| <div class="slds"> | |
| <apex:form > | |
| <div class="slds-text-align--center" style="margin: 30px;"> | |
| <apex:selectList value="{!reportId}" multiselect="false" size="1"> | |
| <apex:selectOptions value="{!options}"/> | |
| <apex:actionSupport event="onchange" rerender="report-chart-section" status="load-report"/> | |
| </apex:selectList> | |
| </div> | |
| <apex:outputPanel styleClass="slds-grid slds-wrap slds-grid--pull-padded reportCharts" id="report-chart-section"> | |
| <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-1 slds-large-size--1-of-1 slds-text-align--center"> | |
| <apex:actionStatus id="load-report"> | |
| <apex:facet name="start"> | |
| Loading... | |
| </apex:facet> | |
| <apex:facet name="stop"> | |
| <apex:outputPanel > | |
| <div>{!report.Name}</div> | |
| <analytics:reportChart reportId="{!report.Id}"/> | |
| </apex:outputPanel> | |
| </apex:facet> | |
| </apex:actionStatus> | |
| </div> | |
| </apex:outputPanel> | |
| </apex:form> | |
| </div> | |
| <!-- / REQUIRED SLDS WRAPPER --> | |
| </body> | |
| </html> | |
| </apex:page> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment