An AppComponent is an add-on AppExchange package for SkyVisualEditor. It enables SkyVisualEditor to have custom user-created components.
Through this blog, I would like to help you create a Salesforce Report Chart AppComponent.
*Please keep in mind that the code and images in this blog are samples. It may not work properly on your Salesforce or SkyVisualEditor environment.
Today’s Goal
Here is the image of the page I would like to create today.
You can place Salesforce report charts on SkyVisualEditor pages like the image below.
Let’s Make An AppComponent
Let’s start making the AppComponent!!
There are 3 steps to create the Salesforce report chart AppComponent.
Create Visualforce Component
Save XML file in static resources of Salesforce
Place AppComponent on SkyVisualEditor
1. Create Visualforce Component
First of all, I’d like to show you how to create a Visualforce Component in Salesforce. Search “Visualforce Component” in the quick search in the Salesforce Setup page and click “New”. Set “Labels” and “Name” and write the code below and click “Save” to save.
<apex:component >
<apex:attribute name=”prmDeveloperName” type=”String” description=”Report API name” />
<apex:attribute name=”prmShowRefreshButton” type=”Boolean” description=”Refresh Button” />
<apex:attribute name=”prmSize” type=”String” description=”Graph Size” />
<apex:attribute name=”prmHideOnError” type=”Boolean” description=”Hide on Error” />
<apex:attribute name=”prmRendered” type=”Boolean” description=”RenderGraph” />
<analytics:reportChart developerName=”{!prmDeveloperName}”
showRefreshButton=”{!prmShowRefreshButton}”
size=”{!prmSize}”
hideOnError=”{!prmHideOnError}”
rendered=”{!prmRendered}”
/>
</apex:component>
2. Save XML file on static resources
Secondly, we need to save the XML file to the static resources in Salesforce. Create an XML file referring to the code below. Search “Static Resources” from a quick search in Salesforce’s Setup page and click “New”. Type in “AppComponent” for the Name, save the XML file on Salesforce.
*Change the name “SVEReportGraph” in the sample source below to the same name that you saved in the Visualforce component.
<?xml version=”1.0″ encoding=”UTF-8″?>
<ComponentDefinition xmlns:xsi=”https://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”AppComponent_Schema.xsd” version=”1.0″>
<!– outline of this AppComponent –>
<Title>Custom AppComponent</Title>
<Description>Demo of the AppComponent</Description>
<Publisher>SkyVisualEditor Blog Demo</Publisher>
<AppComponents>
<AppComponent name=”SVEReportGraph”>
<Title>Report Graph</Title>
<Description>Report Graph Component</Description>
<Layout>inline</Layout>
<!– Set height and width of the AppComponent –>
<Height value=”100″ resizable=”false” isVisible=”false”/>
<Width value=”400″ resizable=”false” isVisible=”false”/>
<!– Placable on anywhere–>
<PutablePlaces dashboardLayout=”true” anyPlace=”true”/>
<!– Attribute the component “SVEReportGraph–>
<ApexComponent componentName=”SVEReportGraph”>
<ApexAttribute name=”prmDeveloperName” var=”prmDeveloperName”/>
<ApexAttribute name=”prmShowRefreshButton” var=”prmShowRefreshButton”/>
<ApexAttribute name=”prmSize” var=”prmSize”/>
<ApexAttribute name=”prmHideOnError” var=”prmHideOnError”/>
<ApexAttribute name=”prmRendered” var=”prmRendered”/>
</ApexComponent>
<!– Set property of the value so that users can put values on Studio –>
<Properties>
<String name=”prmDeveloperName” label=”ReportAPIName” defaultValue=”” isRequired=”true”/>
<Boolean name=”prmShowRefreshButton” label=”ShowRefreshButton” defaultValue=”true” isRequired=”true”/>
<ComboBox name=”prmSize” label=”GraphSize” defaultValue=”small” isRequired=”true” params=”tiny|tiny,small|small,medium|medium,large|large,huge|huge”/>
<Boolean name=”prmHideOnError” label=”HideOnError” defaultValue=”false” isRequired=”true”/>
<Boolean name=”prmRendered” label=”RenderGraph” defaultValue=”true” isRequired=”true”/>
</Properties>
</AppComponent>
</AppComponents>
</ComponentDefinition>
3. Place AppComponents on SkyVisualEditor
Now, we have done preparation to use the AppComponents on SkyVisualEditor, so let’s go on to log in to the SkyVisualEditor Studio. After login, open a page where you would like to place the component. Drag-and-drop the component from the Component area on the left side of the page and place it onto the canvas where you would like it.
Once the components are placed, change the report API name and its size, etc.
Report API name should be the same name used in the Report Unique Name which you have set for the report in Salesforce. Here is an example of the Property setting.
Finally, deploy the page and your page is ready!!
So, I have explained how to create a Salesforce Report Chart AppComponent and placed them on SkyVisualEditor pages. You can also extend Salesforce report charts. Here is a link for some tips!
Cautions When Using the AppComponents
The ReportChart Tag causes JavaScript errors if the component is enclosed within the tab components. This issue has already been on Salesforce Known Issues. Please check the link below for further information.
That’s all for today’s blog. I hope this blog will help you find SkyVisualEditor more useful and fun. If you would like to learn more about the AppComponents, please feel free to contact us for further information.
We will do our best to make the product better and help the users maximize their Salesforce investment. Thank you for reading.