Star War Probability Progress Bar for Opportunity :)

Screen Shot 2016-07-11 at 7.49.21 PM.png

Star Wars: The SalesForce Awakens

I am here with some fun in salesforce. ๐Ÿ™‚ You may have seen Star War movie. It is my favorite movie. In this post i will integrate Salesforce with Star Wars.( i am Kidding ๐Ÿ™‚ ) In this article i am creating Star War’s Sword as a progress bar.

starwars-logo

Steps to create:
1. Save this image inย Static Resource in salesforce. Name it as Sword.

Screen Shot 2016-07-11 at 7.24.33 PM.png

2. Go to Setup -> Develop -> Visualforce Pages
3. Create a New page here and name it StarWarProbability
4. Copy paste below code in this page and save it.

<apex:page standardController="opportunity" showHeader="false" sidebar="false" standardStylesheets="false">
<style>
    .starWar{
        border-radius: 0px 2px 2px 0px;
        display: block;
        width: 0%;
        background-color: #fff;
        height: 8px;
        width: {!opportunity.Probability}%;
        font-size:8px;
        text-align: center;
    }

    .vader{
        box-shadow:0px 0px 10px 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275, 0 0 1px #FD4275;
    }
    .yoda{
        box-shadow:0px 0px 10px 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A, 0 0 1px #68B37A;
    }
    .obi{
        box-shadow:0px 0px 10px 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8, 0 0 1px #3B8CF8;
    }
    .windu{
        box-shadow:0px 0px 10px 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4, 0 0 1px #AC85B4;
    }
</style>
<div>
<table style="border-spacing: 0px;width:100%;">
<tr>
<td style="width: 114px;">
                <img src="{! $Resource.Sword }"/></td>
<td>
                <span class="vader starWar" title="{!opportunity.Probability}%">{!opportunity.Probability}%</span></td>
</tr>
</table>
</div>
</apex:page>

I have added four types of Swords in css. You just need to change in line 33. Like replace vader with yoda.

5. Now Go to Setup -> Customize -> Opportunities -> Page Layouts –> Here click on layout for show swordย on detail page of opportunity record.
6. Go here for Visualforce Pages. Add Blank Section on the top and add drag your page in this section.
7. Set Section Properties ( Layout = 1-Column )
Set Visualforce Page Properties ( Height (in pixels) : 50px )

8. Save setting and open any opportunity record.

Now do changes in probality and get your StarWar Sword. ๐Ÿ™‚

Happy Salesforce ๐Ÿ™‚