Opportunity Dashboard as seen on Skuid Wizard Webinar

  • 2
  • Idea
  • Updated 3 years ago
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>
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb

Posted 3 years ago

  • 2
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
New Marketing Content:  "Build an awesome dashboard over lunch - despite the bad sandwich!" 

Thanks for sharing this Irvin!