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

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2Fbp4JDEy98e86tqmG0Lvo%2Fimage.png?alt=media&#x26;token=81ac899b-f605-41e1-a4e7-061c8ec3ae98" alt=""><figcaption></figcaption></figure>

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](https://docs.flexikanban.ai/standard-kanban/basics/how-to-create-a-standard-kanban) 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](https://docs.flexikanban.ai/standard-kanban/configure-kanban/how-to-add-kanban-statistics). Add [the cell](https://docs.flexikanban.ai/tools/configuring-rows-cells-menus-and-buttons#cells) which will overlay unnecessary views selector:

* Type = Text
* Value = Opportunities

Set [CSS Styles](https://docs.flexikanban.ai/standard-kanban/tools/configuring-css-styles) to this cell:

```css
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](https://docs.flexikanban.ai/standard-kanban/configure-kanban/how-to-configure-variables) tab. Add these variables. They store colors for opportunity stages. This lets you re-style the whole kanban from one place:

<table><thead><tr><th width="88.33333333333331">#</th><th>Variable Name</th><th>Variable Value</th></tr></thead><tbody><tr><td>1</td><td>StageColor_Default</td><td>#AAAAAA</td></tr><tr><td>2</td><td>StageColor_Prospecting</td><td>#e08f68</td></tr><tr><td>3</td><td>StageColor_Qualification</td><td>#e0bb68</td></tr><tr><td>4</td><td>StageColor_NeedsAnalysis</td><td>#8BAEBC</td></tr><tr><td>5</td><td>StageColor_PerceptionAnalysis</td><td>#6882e0</td></tr><tr><td>6</td><td>StageColor_ValueProposition</td><td>#b581ab</td></tr><tr><td>7</td><td>StageColor_ProposalPriceQuote</td><td>#8b619c</td></tr><tr><td>8</td><td>StageColor_IdDecisionMakers</td><td>#8fa96a</td></tr><tr><td>9</td><td>StageColor_NegotiationReview</td><td>#70c2aa</td></tr><tr><td>10</td><td>StageColor_ClosedWon</td><td>#2f8638</td></tr><tr><td>11</td><td>StageColor_ClosedLost</td><td>#af1e1e</td></tr></tbody></table>

### Configure columns

* [Add 7 columns](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-sonfigure-column-properties) 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](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-configure-column-data-source) 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:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2Fo46az22n2tYchbdcbiAf%2Fimage.png?alt=media&#x26;token=2ab3b064-e3a1-4f29-88e9-741437e5dc2f" alt=""><figcaption></figcaption></figure>

* Add the [custom attribute](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-set-and-use-column-custom-attributes) to all columns:

<table><thead><tr><th width="62">#</th><th width="213">Column</th><th>Custom attribute name</th><th>Custom attribute value</th></tr></thead><tbody><tr><td>1</td><td>Prospecting and other</td><td>setStageTo</td><td>Prospecting</td></tr><tr><td>2</td><td>Qualification</td><td>setStageTo</td><td>Qualification</td></tr><tr><td>3</td><td>Analysis</td><td>setStageTo</td><td>Needs Analysis</td></tr><tr><td>4</td><td>Propositions</td><td>setStageTo</td><td>Value Proposition</td></tr><tr><td>5</td><td>Id. Desision Makers</td><td>setStageTo</td><td>Id. Decision Makers</td></tr><tr><td>6</td><td>Negotiation/Review</td><td>setStageTo</td><td>Negotiation/Review</td></tr><tr><td>7</td><td>Closed</td><td>setStageTo</td><td>losed Won</td></tr></tbody></table>

* Set the following styles for column bodies on [Body Configuration](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-configure-column-body) tab:

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

* Set these styles to column headers on the [Header Configuration](https://docs.flexikanban.ai/standard-kanban/configure-column/how-to-configure-column-header) tab:

<table><thead><tr><th width="68.33333333333331">#</th><th width="180">Column</th><th>Column Header CSS styles</th></tr></thead><tbody><tr><td>1</td><td>Prospecting and other</td><td><pre class="language-css"><code class="lang-css">text-shadow: 1px 1px 2px #000;
color: #fff;
background: {$Variables.stagecolor_prospecting};
padding: 0.35rem 0.75rem;
border: 0px none;
</code></pre></td></tr><tr><td>2</td><td>Qualification</td><td><pre class="language-css"><code class="lang-css">text-shadow: 1px 1px 2px #000;
color: #fff;
background: {$Variables.stagecolor_qualification};
padding: 0.35rem 0.75rem;
border: 0px none;
</code></pre></td></tr><tr><td>3</td><td>Analysis</td><td><pre class="language-css"><code class="lang-css">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;
</code></pre></td></tr><tr><td>4</td><td>Propositions</td><td><pre class="language-css"><code class="lang-css">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;
</code></pre></td></tr><tr><td>5</td><td>Id. Decision Makers<br></td><td><pre class="language-css"><code class="lang-css">text-shadow: 1px 1px 2px #000;
color: #fff;
background: {$Variables.stagecolor_iddecisionmakers};
padding: 0.35rem 0.75rem;
border: 0px none;
</code></pre></td></tr><tr><td>6</td><td>Negotiation/Review<br></td><td><pre class="language-css"><code class="lang-css">text-shadow: 1px 1px 2px #000;
color: #fff;
background: {$Variables.stagecolor_negotiationreview};
padding: 0.35rem 0.75rem;
border: 0px none;
</code></pre></td></tr><tr><td>7</td><td>Closed<br></td><td><pre class="language-css"><code class="lang-css">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;
</code></pre></td></tr></tbody></table>

### Configure card

* [Add 1 card](https://docs.flexikanban.ai/standard-kanban/configure-kanban/working-with-kanban-layout) to the kanban
* Set Data Source Type to "**Opportunity**"
* Set [card layout](https://docs.flexikanban.ai/configure-card/how-to-configure-card-layout#basic-configuration) to necessary type. In this example it is set to **SObject** and Record ID is set to **{Opportunity.Id}**:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FiW0KxOYVhgzmIPYi6mze%2Fimage.png?alt=media&#x26;token=ed75f8a2-d8e9-472d-8f83-acf9e5142334" alt=""><figcaption></figcaption></figure>

* Set [card layout header](https://docs.flexikanban.ai/configure-card/how-to-configure-card-layout#header-configuration) to show name of active Opportunity record:

<figure><img src="https://3097383375-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK2dgObBO5ydOH2ZXDJLa%2Fuploads%2FI8TCdXVTHdOGEW0AfKtd%2Fimage.png?alt=media&#x26;token=61878de6-9914-48fd-8085-fcffad22c1da" alt=""><figcaption></figcaption></figure>

* Open [Card Compact Layout](https://docs.flexikanban.ai/standard-kanban/configure-card/how-to-configure-card-compact-layout) editor and add these styles to the Card settings:

```css
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](https://docs.flexikanban.ai/standard-kanban/tools/configuring-handlers) with Type = **SObject** and Value = **{Opportunity.Id}**
* Expand "Styles" section and set the following [CSS style](https://docs.flexikanban.ai/standard-kanban/tools/configuring-css-styles):

```css
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:

```css
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:

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

{% hint style="info" %}
This component will be used as background with fixed height to place chart bars onto.
{% endhint %}

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

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

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

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

{% hint style="info" %}
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.
{% endhint %}

* Add the **Margin-top** rule to CSS Styles and set it to this formula:

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

{% hint style="info" %}
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.
{% endhint %}

* Add the **Background-color** rule to CSS Styles and set it to this formula:

```clike
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}
    )
]
```

{% hint style="info" %}
This formula sets different background colors to the Card component depending on current opportunity Stage. Colors are got from the Kanban variables.
{% endhint %}

* Add the **Min-height** rule to CSS Styles and set it to this formula:

```clike
FORMULA[
    IF(
        OR(
            {Opportunity.Amount} = null,
            {Opportunity.Amount} = "",
            {Opportunity.Amount} &lt;= 0
        ),
        0,
        1
    )
]px
```

{% hint style="info" %}
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.
{% endhint %}

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

```css
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} &lt;= 0
        ),
        0,
        1
    )
]px

```

{% hint style="info" %}
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.
{% endhint %}

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

```css
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:

```clike
FORMULA[
IF(
    {Opportunity.Probability} &gt; 80,
    green,
    IF(
        {Opportunity.Probability} &gt; 60,
        olive,
        IF(
            {Opportunity.Probability} &gt; 40,
            gold,
            IF(
                {Opportunity.Probability} &gt; 20,
                orange,
                red
            )
        )
    )
)
]
```

{% hint style="info" %}
This formula will set different colors from red to green depending on probability percentage of the opportunity. Discreteness is 20%.
{% endhint %}

#### "Opportunity Amount" legend entry

* Add a text component # 8 below the # 7
* Set its Value to the following formula:

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

{% hint style="info" %}
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.
{% endhint %}

* Set its Title to **Opportunity amount: {Opportunity.Amount}**
* Leave its Width default
* Set the following CSS styles to it:

```css
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):

```css
FORMULA[
    IF(
        OR({Opportunity.ExpectedRevenue} = null, {Opportunity.ExpectedRevenue} = ""),
        '0',
        IF(
            {Opportunity.ExpectedRevenue} &gt; 999999,
            TEXT(ROUND({Opportunity.ExpectedRevenue} / 1000000),CEILING) + 'M',
            IF(
                {Opportunity.ExpectedRevenue} &gt; 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:

```css
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:

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

{% hint style="info" %}
This element is used to prevent legend entries mess with lowest component.
{% endhint %}

### Configure column junctions

* Set [column junctions](https://docs.flexikanban.ai/standard-kanban/configure-card/configuring-card-movement-and-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](https://docs.flexikanban.ai/standard-kanban/configure-card/configuring-card-actions). 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}**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexikanban.ai/standard-kanban/getting-started/demo-example-opportunities-kanban.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.