Demo Example: Opportunities Kanban

This Opportunities kanban board helps you manage opportunities. It visualizes key fields and makes comparisons easy. Here is how this kanban can look like:

This kanban shows opportunities in 7 columns. Similar stages share a column. Drag cards to change stage. If needed, edit the record in the form.

To build this kanban, an admin should do the steps below:

Create a new kanban

• Go to the Kanban creation wizard and create a new standard kanban.

• Give it a name and description.

• Select "Polo Blue" theme.

• Save the kanban and go to Kanban Builder.

Configure the kanban

Go to Statistics Configuration. Add the cell which will overlay unnecessary views selector:

• Type = Text

• Value = Opportunities

Set CSS Styles to this cell:

position: absolute;
background-color: #AEC0D7;
top: 0;
left: 0;
bottom: 0;
padding: 0 1.5em;
z-index: 1;
font-size: 1.5rem;
display: flex;
align-items: center;
font-weight: bold;

Go to Variables Configuration tab. Add these variables. They store colors for opportunity stages. This lets you re-style the whole kanban from one place:

#	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 kanban.

• 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:

padding-top: 0;
background: transparent;
border: 0px none;

• Set these styles to column headers on the Header Configuration tab:

#	Column	Column Header CSS styles
1	Prospecting and other	text-shadow: 1px 1px 2px #000; color: #fff; background: {$Variables.stagecolor_prospecting}; padding: 0.35rem 0.75rem; border: 0px none;
2	Qualification	text-shadow: 1px 1px 2px #000; color: #fff; background: {$Variables.stagecolor_qualification}; padding: 0.35rem 0.75rem; border: 0px none;
3	Analysis	text-shadow: 1px 1px 2px #000; color: #fff; background: linear-gradient(120deg, {$Variables.stagecolor_needsanalysis} 30%, {$Variables.stagecolor_perceptionanalysis} 70%); padding: 0.35rem 0.75rem; border: 0px none;
4	Propositions	text-shadow: 1px 1px 2px #000; color: #fff; background: linear-gradient(120deg, {$Variables.stagecolor_valueproposition} 30%, {$Variables.stagecolor_proposalpricequote} 70%); padding: 0.35rem 0.75rem; border: 0px none;
5	Id. Decision Makers	text-shadow: 1px 1px 2px #000; color: #fff; background: {$Variables.stagecolor_iddecisionmakers}; padding: 0.35rem 0.75rem; border: 0px none;
6	Negotiation/Review	text-shadow: 1px 1px 2px #000; color: #fff; background: {$Variables.stagecolor_negotiationreview}; padding: 0.35rem 0.75rem; border: 0px none;
7	Closed	text-shadow: 1px 1px 2px #000; color: #fff; background: linear-gradient(120deg, {$Variables.stagecolor_closedwon} 30%, {$Variables.stagecolor_closedlost} 70%); padding: 0.35rem 0.75rem; border: 0px none;

Configure card

• Add 1 card to the kanban

• 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:

border-radius: 2px;
padding: 0.5rem;
position: relative;

• 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:

font-weight: bold;

• 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:

font-size: 11px;

• 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:

height: 110px;
border-bottom: 1px solid gray;

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:

position: absolute;
color: transparent;
overflow: hidden;
width: calc((100% - 1rem) /4);

• Add the Height rule to CSS Styles and set it to this formula:

FORMULA[{Opportunity.Amount} / (COLUMNTOTAL({$Column.Id}, null, 'MAX', 'Amount')/ 100)]px

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:

FORMULA[0 - (({Opportunity.Amount} / (COLUMNTOTAL({$Column.Id}, null, 'MAX', 'Amount')/ 100)) + 1)]px

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:

FORMULA[
    CASE(
        {Opportunity.StageName},    
        'Prospecting', {$Variables.stagecolor_prospecting},
        'Qualification', {$Variables.stagecolor_qualification},
        'Needs Analysis', {$Variables.stagecolor_needsanalysis},
        'Value Proposition', {$Variables.stagecolor_valueproposition},
        'Id. Decision Makers', {$Variables.stagecolor_iddecisionmakers},
        'Perception Analysis', {$Variables.stagecolor_perceptionanalysis},
        'Proposal/Price Quote', {$Variables.stagecolor_proposalpricequote},
        'Negotiation/Review', {$Variables.stagecolor_negotiationreview},
        'Closed Won', {$Variables.stagecolor_closedwon},
        'Closed Lost', {$Variables.stagecolor_closedlost},
        {$Variables.stagecolor_default}
    )
]

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:

FORMULA[
    IF(
        OR(
            {Opportunity.Amount} = null,
            {Opportunity.Amount} = "",
            {Opportunity.Amount} <= 0
        ),
        0,
        1
    )
]px

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:

position: absolute;
color: transparent;
overflow: hidden;
width: calc((100% - 1rem) /4);
left: calc((100% - 1rem) * 3 / 8);
opacity: 0.75;
max-height: 100px;

background-color: 
FORMULA[
    CASE(
        {Opportunity.StageName},    
        'Prospecting', {$Variables.stagecolor_prospecting},
        'Qualification', {$Variables.stagecolor_qualification},
        'Needs Analysis', {$Variables.stagecolor_needsanalysis},
        'Value Proposition', {$Variables.stagecolor_valueproposition},
        'Id. Decision Makers', {$Variables.stagecolor_iddecisionmakers},
        'Perception Analysis', {$Variables.stagecolor_perceptionanalysis},
        'Proposal/Price Quote', {$Variables.stagecolor_proposalpricequote},
        'Negotiation/Review', {$Variables.stagecolor_negotiationreview},
        'Closed Won', {$Variables.stagecolor_closedwon},
        'Closed Lost', {$Variables.stagecolor_closedlost},
        {$Variables.stagecolor_default}
    )
]

height: FORMULA[{Opportunity.ExpectedRevenue} / (COLUMNTOTAL({$Column.Id}, null, 'MAX', 'Amount')/ 100)]px

margin-top: FORMULA[0 - (({Opportunity.ExpectedRevenue} / (COLUMNTOTAL({$Column.Id}, null, 'MAX', 'Amount') / 100)) + 1)]px

min-height: 
FORMULA[
    IF(
        OR(
            {Opportunity.ExpectedRevenue} = null,
            {Opportunity.ExpectedRevenue} = "",
            {Opportunity.ExpectedRevenue} <= 0
        ),
        0,
        1
    )
]px

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:

position: absolute;
right: 0;
margin-top: calc(0px - 2rem - 1px);
font-size: 1.25rem;
overflow: hidden;
font-weight: bold;
padding-right: 0.5rem;
text-align: right;
left: auto;
max-height: 100px;
width: 100%;

• Add the Color rule to CSS Styles and set it to this formula:

FORMULA[
IF(
    {Opportunity.Probability} > 80,
    green,
    IF(
        {Opportunity.Probability} > 60,
        olive,
        IF(
            {Opportunity.Probability} > 40,
            gold,
            IF(
                {Opportunity.Probability} > 20,
                orange,
                red
            )
        )
    )
)
]

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:

FORMULA[
    IF(
        OR({Opportunity.Amount} = null, {Opportunity.Amount} = ""),
        '0',
        IF(
            {Opportunity.Amount} > 999999,
            TEXT(ROUND({Opportunity.Amount} / 1000000),CEILING) + 'M',
            IF(
                {Opportunity.Amount} > 9999,
                 TEXT(ROUND({Opportunity.Amount} / 1000),CEILING)+'k',
                INTNUMBER({Opportunity.Amount})
            )
        )
    )
]

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:

width: calc((100% - 1rem) / 4);
font-size: 11px;
color: #000;
text-align: center;
position: absolute;

"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):

FORMULA[
    IF(
        OR({Opportunity.ExpectedRevenue} = null, {Opportunity.ExpectedRevenue} = ""),
        '0',
        IF(
            {Opportunity.ExpectedRevenue} > 999999,
            TEXT(ROUND({Opportunity.ExpectedRevenue} / 1000000),CEILING) + 'M',
            IF(
                {Opportunity.ExpectedRevenue} > 9999,
                 TEXT(ROUND({Opportunity.ExpectedRevenue} / 1000),CEILING)+'k',
                INTNUMBER({Opportunity.ExpectedRevenue})
            )
        )
    )
]

• Set its Title to Expected Revenue: {Opportunity.ExpectedRevenue}

• Leave its Width default

• Set the following CSS styles to it:

width: calc((100% - 1rem) / 4);
font-size: 11px;
color: #000;
text-align: center;
position: absolute;
left: calc((100% - 1rem) * 3 / 8);

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:

overflow: hidden;
max-width: 0px;
color: transparent;
width: calc((100% - 1rem) * 3 / 8);

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}