Demo Example: Opportunities Dashboard
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:
Create new dashboard
Go to dashboard creation wizard and create new standard dashboard.
Give it a name and description.
Select "Polo Blue" theme.
Save dashboard and go to Kanban Builder.
Configure dashboard
Go to Statistics Configuration. Add the cell which will overlay unnecessary views selector:
Type = Text
Value = Opportunities
Set CSS Styles to this cell:
Go to Variables Configuration 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):
# | Variable Name | Variable Value |
---|---|---|
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 |
Configure columns
Add 7 columns to the dashboard.
Name columns respectively to opportunity stages (see table below)
Leave columns widths default ("auto")
Leave columns "Is Active" checkboxes default (checked)
Set these properties to all columns:
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:
Add the custom attribute to all columns:
# | Column | Custom attribute name | Custom attribute value |
---|---|---|---|
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 |
Set the following styles for column bodies on Body Configuration tab:
Set these styles to column headers on the Header Configuration tab:
# | Column | Column Header CSS styles |
---|---|---|
1 | Prospecting and other | |
2 | Qualification | |
3 | Analysis | |
4 | Propositions | |
5 | Id. Decision Makers | |
6 | Negotiation/Review | |
7 | Closed |
Configure card
Add 1 card to dashboard
Set Data Source Type to "Opportunity"
Set card layout to necessary type. In this example it is set to SObject and Record ID is set to {Opportunity.Id}:
Set card layout header to show name of active Opportunity record:
Open Card Compact Layout editor and add these styles to the Card settings:
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)
Expand "Handler" section and add a handler with Type = SObject and Value = {Opportunity.Id}
Expand "Styles" section and set the following CSS style:
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).
Create a bar chart from the card components
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:
This component will be used as background with fixed height to place chart bars onto.
"Opportunity amount" chart bar
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:
This formula calculates total amount of all opportunities in the column where card is shown, and sets height of the current component as a fraction of 100 pixels. This fraction is proportional to current opportunity amount. Thus, the component will work as chart bar, which height represents an opportunity amount related to total amount of all opportunities in the current column.
Add the Margin-top rule to CSS Styles and set it to this formula:
This formula acts in the same way as previous, but calculates the negative value which will be used as top margin to shift the chart bar upward.
Add the Background-color rule to CSS Styles and set it to this formula:
This formula sets different background colors to the Card component depending on current opportunity Stage. Colors are got from the Kanban variables.
Add the Min-height rule to CSS Styles and set it to this formula:
This formula sets the minimal height of the chart bar to 1 pixel if opportunity amount is set and more than 0. For zero, absent or undefined amounts this value will be "0px" and no chart bar will be shown.
"Opportunity Expected Revenue" chart bar
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:
Formulas in the code above are the same as for "Opportunity Amount" chart bar, but they are based on {Opportunity.ExpectedRevenue} field instead of {Opportunity.Amount}. Also, "opacity" property is used to make chart bar have more light shade of background color.
"Opportunity probability" data cell
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:
This formula will set different colors from red to green depending on probability percentage of the opportunity. Discreteness is 20%.
"Opportunity Amount" legend entry
Add a text component # 8 below the # 7
Set its Value to the following formula:
This formula will show rounded amount in millions ("M") or thousands ("k") of currency units. To know the exact value hover mouse on the amount.
Set its Title to Opportunity amount: {Opportunity.Amount}
Leave its Width default
Set the following CSS styles to it:
"Opportunity Expected Revenue" legend entry
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:
Assistive block
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:
This element is used to prevent legend entries mess with lowest component.
Configure column junctions
Set column junctions for card on each column:
Drag-n-drop allowed to ALL columns
Drop behavior for source column: Remove card
Drop behavior for target column: Refresh
Configure Card Actions
To add a sense to Cards dragging some actions are necessary. In this example action will be the same for all columns, so, no need to configure them separately.
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}
Last updated