In the Skuid Wizard Webinar (https://www.youtube.com/watch?v=r1eCaomPrPc), Matt demoed a very cool Opportunity Dashboard with charts and custom styling.
At the end of the webinar, someone asked #dinosaumachine if the page XML could be shared and was told NO.
I took this as a challenge and over lunch (and a very bad sandwich) was able to get this going. I will leave it to the reader to flesh out remaining details (Pat want to take next stab?).
<skuidpage unsavedchangeswarning="yes" showsidebar="false" showheader="true" tabtooverride="Opportunity"> <models>
<model id="Opportunity" limit="100" query="true" createrowifnonefound="false" sobject="Opportunity">
<fields>
<field id="Name"/>
<field id="CreatedDate"/>
<field id="Amount"/>
<field id="StageName"/>
<field id="CloseDate"/>
<field id="OwnerId"/>
<field id="Owner.Name"/>
<field id="Probability"/>
<field id="AccountId"/>
<field id="Account.Name"/>
</fields>
<conditions>
<condition type="fieldvalue" value="THIS_YEAR" enclosevalueinquotes="false" field="CloseDate"/>
<condition type="fieldvalue" field="OwnerId" operator="=" inactive="true" enclosevalueinquotes="true" name="__autofilter__OwnerId" state="filterableoff" value=""/>
<condition type="multiple" field="StageName" operator="in" inactive="true" enclosevalueinquotes="true" name="__autofilter__StageName" state="filterableoff" value=""/>
<condition type="fieldvalue" value="100000" enclosevalueinquotes="false" field="Amount" operator="lt" state="filterableoff" inactive="true" name="AmountLessThan100K"/>
<condition type="fieldvalue" value="500000" enclosevalueinquotes="false" field="Amount" operator="lt" state="filterableoff" inactive="true" name="AmountLessThan500K"/>
<condition type="fieldvalue" value="1000000" field="Amount" operator="=" state="filterableoff" inactive="true" name="AmountLessThan1MM" enclosevalueinquotes="false"/>
<condition type="fieldvalue" value="1000000" enclosevalueinquotes="false" field="Amount" operator="gt" state="filterableoff" inactive="true" name="AmountGreaterThan1MM"/>
</conditions>
<actions/>
</model>
</models>
<components>
<panelset type="custom" scroll="" cssclass="">
<panels>
<panel width="5%">
<components/>
</panel>
<panel width="20%">
<components>
<pagetitle model="Opportunity">
<maintitle>
<template>{{Model.labelPlural}}</template>
</maintitle>
<subtitle>Sales</subtitle>
<actions/>
<renderconditions logictype="and"/>
</pagetitle>
<pagetitle model="Opportunity" cssclass="nx-header-left">
<actions>
<action type="multi" label="Show/Hide Chart" icon="fa-bar-chart-o" cssclass="">
<actions>
<action type="custom" snippet="showhidePanel"/>
</actions>
<hotkeys/>
<renderconditions logictype="and"/>
</action>
</actions>
<renderconditions logictype="and"/>
</pagetitle>
</components>
</panel>
<panel width="5%">
<components/>
</panel>
<panel width="20%">
<components/>
</panel>
<panel width="20%">
<components/>
</panel>
<panel width="5%">
<components/>
</panel>
</panels>
</panelset>
<panelset type="vertical" cssclass="kpi" uniqueid="chartPanel">
<panels>
<panel type="left" width="225">
<components>
<template multiple="true" model="Opportunity" allowhtml="true">
<contents>&lt;div style="height:10px;"&lt;&amp;nbsp;&lt;/div</contents>
</template>
<panelset type="custom" scroll="" cssclass="">
<panels>
<panel width="10%">
<components/>
</panel>
<panel width="22.5%">
<components>
<panelset type="vertical">
<panels>
<panel width="225">
<components>
<template multiple="true" model="Opportunity" allowhtml="true" cssclass="">
<contents>Total Revenue Last Quarter:&lt;br/&gt;
&lt;div style="font-size:36px;text-align:right;"&gt;$2,473,291.86&lt;/div&gt;</contents>
</template>
</components>
</panel>
<panel>
<components>
<template multiple="true" model="Opportunity" allowhtml="true" cssclass="kpi">
<contents>Total Closing This Quarter:&lt;br/&gt;
&lt;div style="font-size:36px;text-align:right;"&gt;$93,380,090.90&lt;/div&gt;</contents>
</template>
</components>
</panel>
</panels>
</panelset>
</components>
</panel>
<panel width="5%">
<components/>
</panel>
<panel width="27.5%">
<components>
<skuidvis__chart model="Opportunity" maintitle="Deals Pipeline" type="column" subtitle="Open Opportunities by Quarter" height="200px">
<dataaxes>
<axis id="amount" title=" "/>
</dataaxes>
<categoryaxes>
<axis id="quarter" categorytype="field" field="CloseDate" title=" " fillvals="true" dategranularity="calquarter"/>
</categoryaxes>
<serieslist>
<series valuefield="Amount" splittype="none" aggfunction="sum"/>
</serieslist>
<colors/>
<legend layout="off" halign="center" valign="bottom"/>
</skuidvis__chart>
</components>
</panel>
<panel width="2.5%">
<components/>
</panel>
<panel width="27.5%">
<components>
<skuidvis__chart model="Opportunity" maintitle="Leaderboard" type="bar" subtitle="Open Opportunities by Owner" height="200px">
<dataaxes>
<axis id="amount" title=" "/>
</dataaxes>
<categoryaxes>
<axis id="owners" categorytype="field" field="Owner.Name" title=" "/>
</categoryaxes>
<serieslist>
<series valuefield="Amount" splittype="field" aggfunction="sum" splitfield="StageName"/>
</serieslist>
<colors/>
<legend layout="off" halign="center" valign="bottom"/>
</skuidvis__chart>
</components>
</panel>
<panel width="5%">
<components/>
</panel>
</panels>
</panelset>
<template multiple="true" model="Opportunity" allowhtml="true">
<contents>&lt;div style="height:10px;"&lt;&amp;nbsp;&lt;/div</contents>
</template>
</components>
</panel>
</panels>
</panelset>
<template multiple="true" model="Opportunity" allowhtml="true">
<contents>&lt;br/&gt;</contents>
</template>
<panelset type="custom" scroll="">
<panels>
<panel width="5%">
<components/>
</panel>
<panel width="90%">
<components>
<skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="false" model="Opportunity" mode="readonly" buttonposition="">
<fields>
<field id="Name" allowordering="true"/>
<field id="Amount"/>
<field id="AccountId" valuehalign="" type=""/>
<field id="StageName"/>
<field id="Probability"/>
<field id="CloseDate"/>
</fields>
<rowactions/>
<massactions usefirstitemasdefault="true"/>
<views>
<view type="standard"/>
</views>
<filters>
<filter type="select" filteroffoptionlabel="Any Sales Rep" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="auto" labelmode="manual" conditionfield="OwnerId" label="Sales Rep"/>
<filter type="multiselect" filteroffoptionlabel="Any Stage" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="auto" labelmode="auto" conditionfield="StageName" conditionoperator="in"/>
<filter type="select" filteroffoptionlabel="New Filter" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="auto" labelmode="auto"/>
<filter type="select" filteroffoptionlabel="All Amounts" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="manual" labelmode="manual" condition="AmountLessThan100K" label="Amount">
<sources>
<source type="manual" effectsbehavior="justdefault">
<options>
<option label="&lt; 100K" type="complex">
<effects>
<effect action="activate" value="" condition="AmountLessThan100K"/>
</effects>
</option>
</options>
</source>
</sources>
</filter>
</filters>
<searchfields/>
</skootable>
</components>
</panel>
<panel width="5%">
<components/>
</panel>
</panels>
<renderconditions logictype="and"/>
</panelset>
</components>
<resources>
<labels/>
<css>
<cssitem location="inline" name="newcss" cachelocation="false">.kpi {
background-color: #696969;
color: #ffffff;
}
.nx-page {
background-color: #F0F0F0;
}
.nx-header-left {
float: left;
}</cssitem>
</css>
<javascript>
<jsitem location="inlinesnippet" name="showhidePanel" cachelocation="false">var params = arguments[0],
$ = skuid.$;
$('#chartPanel').toggle();</jsitem>
</javascript>
</resources>
</skuidpage>
