Opportunity Dashboard as seen on Skuid Wizard Webinar

Nintex Community Menu Bar
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>&amp;lt;div style="height:10px;"&amp;lt;&amp;amp;nbsp;&amp;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:&amp;lt;br/&amp;gt;

&amp;lt;div style="font-size:36px;text-align:right;"&amp;gt;$2,473,291.86&amp;lt;/div&amp;gt;</contents>

                                          </template>

                                       </components>

                                    </panel>

                                    <panel>

                                       <components>

                                          <template multiple="true" model="Opportunity" allowhtml="true" cssclass="kpi">

                                             <contents>Total Closing This Quarter:&amp;lt;br/&amp;gt;

&amp;lt;div style="font-size:36px;text-align:right;"&amp;gt;$93,380,090.90&amp;lt;/div&amp;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>&amp;lt;div style="height:10px;"&amp;lt;&amp;amp;nbsp;&amp;lt;/div</contents>

                  </template>

               </components>

            </panel>

         </panels>

      </panelset>

      <template multiple="true" model="Opportunity" allowhtml="true">

         <contents>&amp;lt;br/&amp;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="&amp;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>
Page 1 / 1
New Marketing Content: “Build an awesome dashboard over lunch - despite the bad sandwich!”

Thanks for sharing this Irvin!
View our Community Site Map

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded
