Demo Example: Opportunities Dashboard
Last updated
Last updated
The Opportunities Dashboard represents a way to show and manage opportunities, visually indicate their properties and compare their parameters. Here is how this dashboard can look like:
This dashboard shows opportunities in 7 columns; some of opportunities with similar stages are shown in the same column. Dragging the opportunity cards from one column to another user can easily change its stage. If stage in the target column is not one user wants to apply, he can edit opportunity record manually using the proper form.
To make a such dashboard administrator should do actions listed below:
Give it a name and description.
Select "Polo Blue" theme.
Save dashboard and go to Kanban Builder.
Type = Text
Value = Opportunities
1
StageColor_Default
#AAAAAA
2
StageColor_Prospecting
#e08f68
3
StageColor_Qualification
#e0bb68
4
StageColor_NeedsAnalysis
#8BAEBC
5
StageColor_PerceptionAnalysis
#6882e0
6
StageColor_ValueProposition
#b581ab
7
StageColor_ProposalPriceQuote
#8b619c
8
StageColor_IdDecisionMakers
#8fa96a
9
StageColor_NegotiationReview
#70c2aa
10
StageColor_ClosedWon
#2f8638
11
StageColor_ClosedLost
#af1e1e
Name columns respectively to opportunity stages (see table below)
Leave columns widths default ("auto")
Leave columns "Is Active" checkboxes default (checked)
Data Source Type = SObject
Data Source = Opportunity
Order = Expected Amount, desc (set Order = "Amount, desc" for column named "Closed" )
Set the following conditions to the columns:
1
Prospecting and other
setStageTo
Prospecting
2
Qualification
setStageTo
Qualification
3
Analysis
setStageTo
Needs Analysis
4
Propositions
setStageTo
Value Proposition
5
Id. Desision Makers
setStageTo
Id. Decision Makers
6
Negotiation/Review
setStageTo
Negotiation/Review
7
Closed
setStageTo
losed Won
1
Prospecting and other
2
Qualification
3
Analysis
4
Propositions
5
Id. Decision Makers
6
Negotiation/Review
7
Closed
Set Data Source Type to "Opportunity"
By default Card Compact Layout contains one component of text type; this component contains Record ID. Click on it and change its Value to {Opportunity.Name}
Set its Title to Opportunity name
Set its width to 100 (leave default)
Add text component # 2 below the previous
Set its Value to By: {Opportunity.Account.Name}
Set its Title to Account
Leave its width default (100)
Set CSS styles for it:
Add text component # 3 below
Set its value to Stage: {Opportunity.StageName}
Set its Title to Stage
Now, you need to create a bar chart from several text components by wide use of dynamic CSS styles (see the next chapter).
Add a text component # 4 to Card under component # 2 (above the last "Stage" one)
Leave its Value and Title empty
Leave its Width default (100)
Set following CSS styles to it:
Add a text component # 5 below the # 4
Leave its Value empty
Set its Title to Opportunity amount: {Opportunity.Amount}
Leave its Width default
Set the following CSS styles to it:
Add the Height rule to CSS Styles and set it to this formula:
Add the Margin-top rule to CSS Styles and set it to this formula:
Add the Background-color rule to CSS Styles and set it to this formula:
Add the Min-height rule to CSS Styles and set it to this formula:
Add a text component # 6 below the # 5
Leave its Value empty
Set its Title to Expected amount: {Opportunity.ExpectedRevenue}
Leave its Width default
Set the following CSS styles to it:
Add a text component # 7 below the # 6
Set its Value to {Opportunity.Probability}%
Set its Title to Probability
Leave its Width default
Set the following CSS styles to it:
Add the Color rule to CSS Styles and set it to this formula:
Add a text component # 8 below the # 7
Set its Value to the following formula:
Set its Title to Opportunity amount: {Opportunity.Amount}
Leave its Width default
Set the following CSS styles to it:
Add a text component # 9 to the right of the # 8
Set its Value to the following formula (it will show the Expected revenue in millions or thousands):
Set its Title to Expected Revenue: {Opportunity.ExpectedRevenue}
Leave its Width default
Set the following CSS styles to it:
Add a text component # 10 to the right of the # 9
Set its Value to Amount
Leave its Title empty
Leave its Width default
Set the following CSS styles to it:
Drag-n-drop allowed to ALL columns
Drop behavior for source column: Remove card
Drop behavior for target column: Refresh
Click on card and add a new action with these properties:
Name = Update opportunity stage
Type = Field Update
Execute = Always
Status = Active
Context Object Type = Opportunity
In the Field Update Settings section configure this:
Object Name = Opportunity
Fields:
Name = Stage
Value = {$TargetColumn.a__setStageTo}
Conditions:
Opportunity ID eqials {opportunity.id}
Go to and create new standard dashboard.
Go to . Add which will overlay unnecessary views selector:
Set to this cell:
Go to tab. Add these variables, which will store colors for different opportunity stages (and then you can change color in the one place only to re-style the whole dashboard):
to the dashboard.
to all columns:
Add the to all columns:
Set the following styles for column bodies on tab:
Set these styles to column headers on the tab:
to dashboard
Set to necessary type. In this example it is set to SObject and Record ID is set to {Opportunity.Id}:
Set to show name of active Opportunity record:
Open editor and add these styles to the Card settings:
Expand "Handler" section and with Type = SObject and Value = {Opportunity.Id}
Expand "Styles" section and set the following :
Set for card on each column:
To add a sense to Cards dragging . In this example action will be the same for all columns, so, no need to configure them separately.