Let’s Make An AppComponent – Report Chart

By March 20, 2017 Blog No Comments

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.

lets-make-an-appcomponent-report-chart-1

Let’s Make An AppComponent

Let’s start making the AppComponent!!

There are 3 steps to create the Salesforce report chart AppComponent.

  1. Create Visualforce Component
  2. Save XML file in static resources of Salesforce
  3. 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 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 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=”http://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 login 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 for Property setting.

lets-make-an-appcomponent-report-chart-2

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!

https://developer.salesforce.com/docs/atlas.en-us.200.0.pages.meta/pages/pages_compref_analytics_reportChart.htm

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.

https://success.salesforce.com/issues_view?id=a1p300000008XwOAAU

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.